/* Arête homepage prototype v2: "First light, documentary", with the original site's atmosphere restored.
   Brand tokens from the Arête Brand Sheet. Type follows the shipped app (Big Shoulders Display + Work Sans; see type-compare.html). */

@font-face { font-family: "Big Shoulders Display"; src: url("../assets/fonts/BigShouldersDisplay.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../assets/fonts/WorkSans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --glacier: #1F4E79; --glacier-deep: #163A5F; --granite: #4A4F55;
  --ember: #E8672A; --ember-hi: #FF9A62; --ember-ink: #1B0F08;
  --snow: #F7F8FA; --mist: #E9EFF4; --ink: #1B2B3A;
  --night: #0C2238; --night-deep: #07182A; --dusk: #0F2A44;
  --ice: #8DB3D6; --ice-soft: #BFD3E6; --on-dark-soft: #C9D6E2;
  --error-dark: #FFB59A; --error-light: #B3261E; --ok: #1E6B3C; --focus: #FFB07F;
  --font-head: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", system-ui, "Segoe UI", sans-serif;
  --m: clamp(20px, 5vw, 80px); --bar-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --section-y: clamp(88px, 11vw, 168px);
  --t-hero: clamp(76px, 15.4vw, 270px);
  --t-h3: clamp(28px, 2.7vw, 38px); --t-lead: clamp(18px, 1.5vw, 22px); --t-ui: 17px; --t-small: 16px;
  --mist-rgb: 226, 233, 239; --mist-a: .72;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); scrollbar-color: #3E7FC2 var(--night); accent-color: var(--glacier); }
html:not(.reduce) { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--snow); font: 400 clamp(16px, .25vw + 15px, 18px)/1.6 var(--font-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--ember); color: var(--ember-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--snow); color: var(--ink); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- The sky and the snow ---------- */
.tone { position: fixed; inset: 0; z-index: -3; background: rgb(var(--tone-rgb, 15, 42, 68)); }
.sky { position: fixed; top: 0; left: 0; right: 0; height: 118vh; height: 118lvh; z-index: -2; overflow: hidden; opacity: var(--sky-o, 0); }
.sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: saturate(var(--sky-s, .7)) brightness(var(--sky-b, 1)); transform: translateY(var(--sky-y, 0)); }
.sky::after { content: ""; position: absolute; inset: 0; background: rgba(var(--mist-rgb), var(--mist-a)); }
.sky::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--glow-a, 0); background: radial-gradient(120% 70% at 50% 0%, rgba(255, 196, 150, .55), rgba(255, 196, 150, 0) 70%); } /* taste-skill-ignore: the sunrise glow of summit day */
.snow { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; } /* behind all content, like the original: it falls through the sky and never covers a foreground element */

/* ---------- Type, buttons, fields ---------- */
.h2 { font: 700 clamp(42px, 5.8vw, 88px)/.94 var(--font-head); letter-spacing: -.005em; margin: 0 0 24px; text-wrap: balance; }
.h2--ink { color: var(--glacier); }
.display { font: 800 clamp(60px, 9.2vw, 140px)/.88 var(--font-head); letter-spacing: -.01em; margin: 0 0 24px; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.55; max-width: 38em; margin: 0 0 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 2px; font: 700 17px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--ember { background: var(--ember); color: var(--ember-ink); }
.btn--ember:hover { background: #FF7C3E; }
.btn--glacier { background: var(--glacier); color: #fff; }
.btn--glacier:hover { background: #2A639A; }
.btn--text { background: none; color: inherit; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; padding: 0 12px; font-weight: 600; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 18px; }
.btn--block { width: 100%; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.btn[aria-busy="true"] svg { display: none; }
.field { display: block; width: 100%; min-height: 56px; padding: 0 18px; border: 2px solid transparent; border-radius: 2px; font: 400 var(--t-ui)/1.2 var(--font-body); }
.field::placeholder { color: #5A6B7C; opacity: 1; }
.field--on-dark { background: rgba(255, 255, 255, .97); color: var(--ink); }
.field--on-light { background: #fff; color: var(--ink); border-color: #6F879E; }
.field--on-blue { background: rgba(255, 255, 255, .08); color: #fff; border-color: var(--ice-soft); color-scheme: dark; min-height: 48px; width: auto; max-width: 100%; }
.field[aria-invalid="true"] { border-color: var(--error-light); }
.field--on-dark[aria-invalid="true"] { border-color: #FF8A6B; }
.field:focus-visible { outline-offset: 2px; }
.label { display: block; font: 600 15px/1.3 var(--font-body); margin: 18px 0 8px; }
.fine { font-size: var(--t-small); line-height: 1.5; color: var(--granite); margin: 12px 0 0; }
.form-msg { min-height: 1.4em; margin: 8px 0 0; font: 500 var(--t-small)/1.4 var(--font-body); color: var(--error-dark); }
.form-msg--light { color: var(--error-light); }
.link-block { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-underline-offset: 4px; }
.link-block--dark { color: var(--glacier); margin-top: 4px; }
.go { position: relative; display: inline-flex; align-items: center; gap: 16px; min-height: 48px; font: 600 17px/1 var(--font-body); color: #fff; text-decoration: none; }
.go i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5); transition: transform .45s var(--ease), background-color .3s; }
.go svg { width: 18px; height: 18px; transform: rotate(90deg); }
.go:hover i { transform: translateY(5px); background: var(--ember); border-color: var(--ember); color: var(--ember-ink); }

/* ---------- Header ---------- */
.bar { position: fixed; z-index: 50; inset: 0 0 auto 0; --mark-dark: #F7F8FA; --mark-light: #8DB3D6; transition: background-color .3s; }
.bar.is-scrolled, .bar.is-open { background: var(--night); }
.bar__row { display: flex; align-items: center; gap: 8px; height: var(--bar-h); padding: 0 var(--m); max-width: 1680px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; margin-right: 12px; text-decoration: none; color: var(--snow); }
.brand__mark { width: 36px; height: auto; aspect-ratio: 854 / 632; }
.brand__word { height: 16px; width: auto; aspect-ratio: 846 / 297; }
.bar__nav ul { display: flex; gap: 2px; }
.bar__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: 500 16px/1 var(--font-body); text-decoration: none; color: var(--snow); }
.bar__nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--ember-hi); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.bar__nav a:hover::after { transform: scaleX(1); }
.bar__time { margin: 0 0 0 auto; font: 500 var(--t-small)/1 var(--font-body); color: var(--ice-soft); display: none; white-space: nowrap; }
.bar__time b { font: 700 20px/1 var(--font-head); letter-spacing: .02em; color: var(--ember-hi); font-variant-numeric: tabular-nums; margin-right: 6px; }
.sound { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 2px; background: transparent; color: #fff; cursor: pointer; font: 500 15px/1 var(--font-body); transition: background-color .2s, border-color .2s; }
.sound:hover { background: rgba(255, 255, 255, .14); }
.sound[aria-pressed="true"] { background: rgba(255, 154, 98, .18); border-color: var(--ember-hi); }
.sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sound .sound__speaker { fill: currentColor; stroke: none; }
.sound .sound__wave { display: none; }
.sound[aria-pressed="true"] .sound__wave { display: inline; animation: sound-pulse 1.6s var(--ease) infinite alternate; }
.sound[aria-pressed="true"] .sound__wave--b { animation-delay: .4s; }
.sound[aria-pressed="true"] .sound__off { display: none; }
.sound__text { display: none; }
@keyframes sound-pulse { from { opacity: .35; } to { opacity: 1; } }
.bar__join { margin-left: 0; min-height: 44px; padding: 0 18px; font-size: 16px; }
.bar__menu { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; align-items: center; justify-content: center; color: var(--snow); }
.bar__menu-icon { position: relative; display: block; width: 24px; height: 2px; background: currentColor; transition: background-color .2s; }
.bar__menu-icon::before, .bar__menu-icon::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.bar__menu-icon::before { top: -7px; }
.bar__menu-icon::after { top: 7px; }
.bar.is-open .bar__menu-icon { background: transparent; }
.bar.is-open .bar__menu-icon::before { top: 0; transform: rotate(45deg); }
.bar.is-open .bar__menu-icon::after { top: 0; transform: rotate(-45deg); }
.bar__ridge { position: absolute; left: 0; right: 0; bottom: -7px; width: 100%; height: 14px; pointer-events: none; fill: none; overflow: visible; }
.bar__ridge path { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bar__ridge-track { stroke: rgba(255, 255, 255, .22); }
.bar__ridge-done { stroke: var(--ember-hi); stroke-dasharray: 1; stroke-dashoffset: 1; }
.bar:not(.is-scrolled) .bar__ridge { opacity: 0; }
.sheet { position: absolute; top: var(--bar-h); left: 0; right: 0; background: var(--night); padding: 8px var(--m) 28px; }
.sheet a { display: flex; align-items: center; min-height: 60px; font: 700 var(--t-h3)/1 var(--font-head); text-decoration: none; color: var(--snow); }

/* ---------- 1. Hero: the original scene ---------- */
.hero { position: relative; z-index: 5; height: 100svh; min-height: 620px; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; color: #fff; background: var(--night-deep); clip-path: polygon(var(--h1, 0%) var(--h2, 0%), calc(100% - var(--h3, 0%)) 0%, 100% calc(100% - var(--h4, 0%)), 0% 100%); }
.hero__media { position: absolute; inset: -4%; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--hz, 1.06)); transition: transform .9s var(--ease); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; filter: saturate(.25) brightness(.55); transition: filter 3.4s cubic-bezier(.45, 0, .2, 1); }
.hero__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(6, 20, 34, .62) 0%, rgba(6, 20, 34, .18) 55%, rgba(6, 20, 34, 0) 80%), rgba(6, 20, 34, .22); } /* taste-skill-ignore: neutral scrim for legibility over the photograph */
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 28vh; pointer-events: none; background: linear-gradient(to bottom, rgba(15, 42, 68, 0), var(--dusk)); } /* taste-skill-ignore: blends the hero into the next section */
.hero__title { position: absolute; inset: 0; pointer-events: none; }
.hero__word { position: absolute; display: block; font: 800 var(--t-hero)/.86 var(--font-head); text-transform: uppercase; letter-spacing: -.005em; white-space: nowrap; }
.hero__word--a { left: var(--m); top: clamp(92px, 14vh, 150px); }
.hero__word--b { right: var(--m); bottom: clamp(24px, 5vh, 56px); color: #FF8A4C; }
.hero__intro { position: absolute; left: var(--m); top: calc(clamp(92px, 14vh, 150px) + var(--t-hero) * .86 + 24px); width: min(470px, calc(100% - var(--m) * 2)); display: grid; gap: 18px; justify-items: start; }
.hero__lead { font: 500 clamp(19px, 1.5vw, 24px)/1.4 var(--font-body); color: #fff; max-width: 24em; }
.hero__fine { max-width: 34em; font-size: var(--t-small); line-height: 1.45; color: var(--on-dark-soft); }
.hero__night { position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity 3.2s cubic-bezier(.45, 0, .2, 1) .2s;
  background: radial-gradient(1.4px 1.4px at 12% 18%, #fff 60%, transparent), radial-gradient(1px 1px at 22% 8%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 31% 26%, #fff 60%, transparent), radial-gradient(1px 1px at 44% 12%, #fff 60%, transparent), radial-gradient(1.6px 1.6px at 57% 5%, #fff 60%, transparent), radial-gradient(1px 1px at 63% 22%, #fff 60%, transparent), radial-gradient(1.3px 1.3px at 71% 14%, #fff 60%, transparent), radial-gradient(1px 1px at 79% 30%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 86% 9%, #fff 60%, transparent), radial-gradient(1px 1px at 93% 21%, #fff 60%, transparent), radial-gradient(1px 1px at 6% 33%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 38% 36%, #fff 60%, transparent), linear-gradient(180deg, rgba(4, 10, 26, .9), rgba(8, 20, 46, .78) 55%, rgba(10, 24, 52, .72)); } /* taste-skill-ignore: the night sky over the hero, lifting to first light */
.hero__clouds { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 3.4s cubic-bezier(.45, 0, .2, 1); filter: brightness(.5) saturate(.44); }
.hero__land { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; pointer-events: none; display: none; -webkit-mask-image: url("../assets/img/mask/land-summit-glow.png"); mask-image: url("../assets/img/mask/land-summit-glow.png"); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: 66% 40%; mask-position: 66% 40%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@media (max-aspect-ratio: 4/5) { /* portrait: the art-directed crop around the summit, with its own cloud mask */
  .hero__media img { object-position: 64% 40%; }
  .hero__land { -webkit-mask-image: url("../assets/img/mask/land-summit-glow-m.png"); mask-image: url("../assets/img/mask/land-summit-glow-m.png"); -webkit-mask-position: 64% 40%; mask-position: 64% 40%; }
}
.hero.has-clouds .hero__land { display: block; }
.hero.has-clouds .hero__clouds { opacity: .6; }
.hero.has-clouds.is-dawn .hero__clouds { opacity: 1; filter: none; transition: opacity 3.4s cubic-bezier(.45, 0, .2, 1), filter 3.4s cubic-bezier(.45, 0, .2, 1); }
.hero.is-dawn .hero__night { opacity: 0; }
.hero.is-dawn .hero__media img { filter: none; }
.hero__drift { position: absolute; left: 0; width: 200%; max-width: none; height: auto; opacity: .7; animation: drift 120s linear infinite; }
.hero__drift--0 { bottom: 22%; }
.hero__drift--1 { bottom: 4%; animation-duration: 180s; animation-direction: reverse; opacity: .5; }
.split-word { display: inline-block; perspective: 900px; }
.split-word > span { display: inline-block; transform-origin: 50% 100%; }
.motion [data-split] .split-word > span { opacity: 0; transform: translate3d(0, 60%, -60px) rotateX(-70deg); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--d0, 0ms)); }
.motion [data-split].is-in .split-word > span { opacity: 1; transform: none; }
.join-inline { width: 100%; }
.join-inline__row { display: flex; gap: 10px; flex-wrap: wrap; }
.join-inline__row .field { flex: 1 1 220px; width: auto; }
.join-inline__row .btn { flex: 0 0 auto; }
.join-inline__done { --focus: var(--glacier); display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: rgba(247, 248, 250, .96); color: var(--ink); border-radius: 2px; }
.join-inline__done > svg { width: 26px; height: 26px; flex: none; color: var(--ok); margin-top: 1px; }
.join-inline__done p + p { margin-top: 10px; }

/* ---------- Seams: cloud drifting across the joins between sections ---------- */
.seam { position: absolute; left: 0; right: 0; top: -190px; height: 380px; overflow: hidden; pointer-events: none; z-index: 3; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 22%, #000 42%, #000 58%, rgba(0,0,0,.35) 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 22%, #000 42%, #000 58%, rgba(0,0,0,.35) 78%, transparent 100%); } /* taste-skill-ignore: feathers the cloud so it has no edge */
.seam img { position: absolute; left: 0; bottom: 18%; width: 220%; max-width: none; height: auto; opacity: .92; animation: drift 110s linear infinite; animation-play-state: paused; will-change: transform; }
.seam .seam__b { bottom: 4%; opacity: .6; animation-duration: 170s; animation-direction: reverse; }
.is-running img, .is-running .range__cloud { animation-play-state: running; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-45%, 0, 0); } }

/* ---------- 2. Problem and purpose ---------- */
.gap { position: relative; }
.gap__inner { max-width: 1440px; margin: 0 auto; padding: var(--section-y) var(--m); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.gap__text .lead { color: #E3ECF4; }
.gap__aim { font: 700 clamp(24px, 2.5vw, 36px)/1.08 var(--font-head); color: var(--ember-hi); margin: 28px 0 0; max-width: 20em; }
.tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.window { --p: 1; margin: 0; }
.window__frame { aspect-ratio: 1482 / 2315; max-height: 88vh; width: 100%; overflow: hidden; background: #DCE6EE; clip-path: polygon(50% calc((1 - var(--p)) * 42%), calc(100% - (1 - var(--p)) * 36%) calc((1 - var(--p)) * 42% + 18%), calc(100% - (1 - var(--p)) * 36%) 100%, calc((1 - var(--p)) * 36%) 100%, calc((1 - var(--p)) * 36%) calc((1 - var(--p)) * 42% + 18%)); }
.window__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(calc(1.18 - .18 * var(--p))); transform-origin: 50% 60%; }
.band { position: relative; margin: 0; height: clamp(440px, 74vh, 820px); overflow: hidden; background: #31485E; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 80%; transform: scale(var(--bs, 1)); transform-origin: 50% 75%; will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--dusk) 0, rgba(15, 42, 68, 0) 26%), linear-gradient(to bottom, rgba(7, 24, 42, .78) 0%, rgba(7, 24, 42, .4) 34%, rgba(7, 24, 42, 0) 62%), linear-gradient(to top, var(--glacier) 0, rgba(31, 78, 121, 0) 30%); } /* taste-skill-ignore: scrim and blends into the sections either side */
.band__text { position: absolute; z-index: 1; inset: 0 0 auto 0; max-width: 1440px; margin: 0 auto; padding: clamp(40px, 7vw, 96px) var(--m) 0; }
.band__lead { font: 700 clamp(24px, 2.5vw, 36px)/1.1 var(--font-head); max-width: 32ch; text-wrap: balance; }

/* ---------- 3. Peak picker ---------- */
.picker { position: relative; }
.picker__inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: var(--section-y) var(--m); }
.picker__head { max-width: 40em; margin-bottom: clamp(32px, 5vw, 64px); }
.picker__head .lead { color: #E6EEF6; }
.picker__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.peaks { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; position: sticky; top: calc(var(--bar-h) + 24px); }
.peak { position: relative; display: grid; align-content: center; min-height: 68px; padding: 10px 16px 10px 40px; cursor: pointer; transition: background-color .25s; }
.peak input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.peak::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 12px; margin-top: -6px; background: var(--ember-hi); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: scale(.6); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
.peak:has(input:checked) { background: rgba(7, 24, 42, .38); }
.peak:has(input:checked)::before { transform: scale(1); opacity: 1; }
.peak:hover { background: rgba(7, 24, 42, .22); }
.peak:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.peak__name { font: 700 var(--t-h3)/1 var(--font-head); letter-spacing: .005em; }
.peak__meta { font-size: var(--t-small); color: var(--ice-soft); font-variant-numeric: tabular-nums; }
.preview { --pad: clamp(22px, 3.2vw, 48px); background: var(--glacier-deep); padding: 0 var(--pad) var(--pad); min-width: 0; overflow: hidden; }
.range { position: relative; margin: 0 calc(var(--pad) * -1) 28px; height: clamp(200px, 28vw, 380px); overflow: hidden; background: var(--night-deep); }
.range__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.range__cloud { position: absolute; left: 0; bottom: -46px; width: 170%; max-width: none; height: auto; opacity: .8; animation: drift 130s linear infinite; animation-play-state: paused; pointer-events: none; }
.range__peak { cursor: pointer; }
.range__rock { stroke: transparent; stroke-width: 3; stroke-linejoin: round; transition: filter .3s, stroke .3s; }
.range__snow { fill: #F7F8FA; opacity: .92; pointer-events: none; }
.range__glow { opacity: .3; transition: opacity .8s var(--ease); pointer-events: none; }
.range__peak:hover .range__rock { filter: brightness(1.3); }
.range__peak.is-current .range__rock { stroke: var(--ember-hi); filter: brightness(1.25); }
.range__peak.is-current .range__snow { fill: #FFE2C4; }
.range__peak.is-current .range__glow { opacity: 1; }
.range__ground { stroke: rgba(255, 255, 255, .25); stroke-width: 2; }
.pv-name { font: 800 clamp(60px, 9.2vw, 140px)/.86 var(--font-head); letter-spacing: -.01em; margin: 0 0 12px; }
.pv-meta { margin: 0 0 18px; font-size: var(--t-ui); color: var(--ice-soft); font-variant-numeric: tabular-nums; }
.pv-flag { margin: 0 0 20px; padding: 10px 14px; background: var(--night-deep); color: #FFDCC9; font-size: var(--t-small); line-height: 1.45; }
.pv-flag strong { color: var(--ember-hi); }
.ridge { position: relative; margin: 8px 0 0; padding-bottom: 30px; }
.ridge svg { width: 100%; height: auto; overflow: visible; }
.ridge svg.is-hidden { clip-path: inset(0 100% 0 0); }
.ridge svg.is-drawing { clip-path: inset(-20px -20px -20px -20px); transition: clip-path .9s var(--ease); }
.ridge .sil { fill: rgba(7, 24, 42, .5); }
.ridge .seg { fill: none; stroke: #9FC0E0; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.ridge .seg.is-active { stroke: var(--ember-hi); stroke-width: 5; }
.ridge .mk { fill: var(--glacier-deep); stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ridge .mk.is-active { fill: var(--ember); }
.ridge__end { position: absolute; bottom: 0; margin: 0; font: 600 var(--t-small)/1 var(--font-body); color: var(--ice-soft); font-variant-numeric: tabular-nums; }
.ridge__end--l { left: 0; }
.ridge__end--r { right: 0; text-align: right; }
.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.phase { position: relative; text-align: left; min-height: 72px; padding: 16px 12px 10px; border: 0; background: rgba(7, 24, 42, .32); color: var(--ice-soft); cursor: pointer; font: 600 var(--t-small)/1.25 var(--font-body); transition: background-color .25s, color .25s; }
.phase small { display: block; margin-top: 4px; font-weight: 400; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.phase::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: transparent; transition: background-color .25s; }
.phase:hover { background: rgba(7, 24, 42, .5); color: #fff; }
.phase[aria-selected="true"] { background: var(--night-deep); color: #fff; }
.phase[aria-selected="true"]::before { background: var(--ember-hi); }
.phase-panel { background: var(--night-deep); padding: clamp(18px, 2vw, 28px); min-height: 220px; }
.phase-panel:focus-visible { outline-offset: -3px; }
.phase-panel h4 { margin: 0 0 6px; font: 700 var(--t-h3)/1 var(--font-head); }
.phase-panel .focus { margin: 0 0 16px; max-width: 46em; color: #E3ECF4; }
.phase-panel .sess-title { margin: 0 0 6px; font: 600 var(--t-small)/1.3 var(--font-body); color: var(--ice); }
.phase-panel ul { display: grid; gap: 8px; }
.phase-panel li { position: relative; padding-left: 22px; color: #E3ECF4; font-variant-numeric: tabular-nums; }
.phase-panel li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 9px; background: var(--ember-hi); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.demands { margin-top: 28px; display: grid; gap: 4px; max-width: 520px; }
.demands__title { margin: 0 0 6px; font: 600 15px/1.3 var(--font-body); color: var(--ice-soft); }
.demand { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 12px; min-height: 30px; }
.pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 220px; }
.pips i { height: 10px; background: rgba(255, 255, 255, .2); }
.pips i.on { background: var(--ember-hi); }
.pv-grade { margin: 12px 0 0; font-size: var(--t-small); color: var(--ice-soft); max-width: 46em; }
.when { margin-top: 28px; display: grid; gap: 8px; justify-items: start; }
.when__label { font: 600 15px/1.3 var(--font-body); }
.when__out { margin: 0; font-size: var(--t-small); color: var(--on-dark-soft); max-width: 46em; min-height: 3em; }
.preview__cta { margin-top: 20px; }

/* ---------- 4. The app ---------- */
.app { position: relative; padding: calc(var(--section-y) * 1.3) var(--m) calc(var(--section-y) * 1.6); overflow: hidden; background: linear-gradient(to bottom, rgba(12, 34, 56, 0) 0, rgba(12, 34, 56, .35) calc(var(--section-y) * .5), rgba(12, 34, 56, .85) calc(var(--section-y) * 1.0), var(--night) calc(var(--section-y) * 1.4), var(--night) calc(100% - var(--section-y) * 1.7), rgba(12, 34, 56, .8) calc(100% - var(--section-y) * 1.1), rgba(12, 34, 56, .35) calc(100% - var(--section-y) * .55), rgba(12, 34, 56, 0) 100%); } /* taste-skill-ignore: eased fades so the dark section melts into the tone above and the sky below, with the text on solid night */
.app__inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.app__head { max-width: 40em; margin-bottom: clamp(28px, 4vw, 48px); }
.app__head .lead { color: var(--on-dark-soft); }
.show__tabs { display: grid; gap: 4px; }
.tab { position: relative; display: block; width: 100%; text-align: left; padding: 18px 16px 18px 44px; border: 0; background: transparent; color: #9DB0C6; cursor: pointer; transition: background-color .25s, color .25s; min-height: 64px; }
.tab::before { content: ""; position: absolute; left: 14px; top: 28px; width: 14px; height: 12px; background: var(--ember-hi); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: scale(.6); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
.tab__title { display: block; font: 700 var(--t-h3)/1 var(--font-head); }
.tab__text { display: none; margin-top: 10px; font-size: var(--t-ui); line-height: 1.5; color: #D5E0EB; max-width: 32em; }
.tab:hover { color: #fff; }
.tab[aria-selected="true"] { color: #fff; background: rgba(31, 78, 121, .45); }
.tab[aria-selected="true"]::before { transform: scale(1); opacity: 1; }
.tab[aria-selected="true"] .tab__text { display: block; }
.show__stage { position: relative; display: grid; justify-items: center; align-content: center; min-height: 560px; clip-path: inset(-12% -60% 0 -60%); } /* the cloud passes in front of the screen but never behind the caption below */
.stage__peak { position: absolute; left: 50%; top: 4%; width: min(124%, 680px); aspect-ratio: 1 / 1.1; background: var(--glacier); clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); transform: translate3d(-50%, var(--sp, 0px), 0); z-index: 0; }
.stage__screens { position: relative; z-index: 1; width: min(100%, 470px); }
.shot { margin: 0; width: 100%; overflow: hidden; border-radius: 28px 28px 0 0; background: #0C1626; max-height: min(82vh, 880px); -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); opacity: 0; transition: opacity .45s; } /* taste-skill-ignore: alpha mask fades the crop, not paint */
.shot.is-on { opacity: 1; }
.shot img { width: 100%; height: auto; }
.show__note { margin: 20px 0 0; max-width: 40em; font-size: var(--t-small); line-height: 1.5; color: #9DB0C6; }

/* ---------- 5. The card ---------- */
.pc { position: relative; padding: var(--section-y) max(var(--m), calc((100% - 1560px) / 2 + var(--m))); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; color: var(--ink); --focus: var(--glacier); }
.pc__controls { grid-column: 1 / span 6; display: grid; gap: 22px; }
.pc__lead { max-width: 40ch; font: 400 var(--t-lead)/1.45 var(--font-body); color: var(--glacier); }
.pc__form { display: grid; gap: 18px; max-width: 540px; }
.pc__custom { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.pc__closed { grid-column: 1 / -1; padding: 12px 16px; background: rgba(232, 103, 42, .14); border: 1px solid rgba(232, 103, 42, .5); font: 600 var(--t-small)/1.45 var(--font-body); color: #8A3510; }
.pc__field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.pc__field > span, .pc__field legend { padding: 0; font: 600 15px/1.2 var(--font-body); color: var(--glacier); }
.pc__field legend { margin-bottom: 8px; }
.pc__field em { font-style: normal; font-weight: 400; color: #364250; }
.pc__field select, .pc__field input[type=text], .pc__field input:not([type]) { width: 100%; min-height: 54px; padding: 0 18px; border-radius: 2px; font: 500 var(--t-ui)/1 var(--font-body); color: var(--ink); background: rgba(255, 255, 255, .85); border: 2px solid #6F879E; transition: border-color .2s, background-color .2s; }
.pc__field select:focus, .pc__field input:focus { outline: none; border-color: var(--ember); background: #fff; }
.pc__field select:focus-visible, .pc__field input:focus-visible { outline: 3px solid var(--glacier); outline-offset: 2px; }
.pc__bdrow { display: flex; flex-wrap: wrap; gap: 10px; }
.pc__bd { position: relative; cursor: pointer; }
.pc__bd input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pc__bd img { display: block; width: 58px; height: 72px; object-fit: cover; border-radius: 2px; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .2s, transform .3s var(--ease); }
.pc__bd:hover img { transform: translateY(-2px); }
.pc__bd input:checked + img { outline-color: var(--ember); }
.pc__bd input:focus-visible + img { outline-color: var(--glacier); }
.pc__fmtrow { display: flex; gap: 10px; }
.pc__fmt { position: relative; cursor: pointer; }
.pc__fmt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pc__fmt span { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 12px 18px; border: 2px solid var(--glacier); background: rgba(255, 255, 255, .6); font: 600 15px/1 var(--font-body); color: var(--glacier); transition: background-color .2s, color .2s; }
.pc__fmt em { font-size: 14px; opacity: .8; }
.pc__fmt input:checked + span { background: var(--glacier); color: #fff; }
.pc__fmt input:focus-visible + span { outline: 3px solid var(--ember); outline-offset: 2px; }
.pc__shows .opt { color: var(--ink); }
.pc__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pc__status { max-width: 48ch; padding: 14px 18px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(31, 78, 121, .25); font: 500 var(--t-small)/1.5 var(--font-body); color: var(--glacier); }
.pc__status:empty { display: none; }
.pc__status a { color: var(--glacier); font-weight: 700; }
.pc.is-gold .pc__status { background: linear-gradient(120deg, #FBF1CF, #F2DC94); border-color: #D9AE48; color: #5A3E0A; } /* taste-skill-ignore: the gold edition */
.pc__hint { font-size: var(--t-small); color: var(--ink); }
.pc__hint a { color: var(--glacier); font-weight: 600; }
.pc__proto { max-width: 540px; background: rgba(255, 255, 255, .6); }
.pc__preview { grid-column: 8 / span 5; margin: 0; }
.pc__canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 84vh; margin-inline: auto; background: var(--night); box-shadow: 0 30px 60px -24px rgba(12, 34, 56, .6); transform: rotate(1.4deg); transition: transform .6s var(--ease); } /* taste-skill-ignore: the card sits like a printed photograph */
.pc__preview:hover .pc__canvas { transform: rotate(0deg); }
.pc__cap { margin-top: 14px; text-align: center; font-size: var(--t-small); color: var(--glacier); font-weight: 600; }
.opt { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; }
.opt input { width: 22px; height: 22px; margin: 0; }
.opt input:disabled + span { opacity: .65; }

/* ---------- 6. Join ---------- */
.join { position: relative; overflow: hidden; isolation: isolate; color: var(--ink); background: var(--glacier); }
.join__photo { position: absolute; inset: -60px 0; z-index: -2; }
.join__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: translate3d(0, var(--jy, 0px), 0); will-change: transform; }
.join::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(var(--mist-rgb), .94) 0, rgba(var(--mist-rgb), 0) var(--section-y)), linear-gradient(to right, rgba(7, 24, 42, .66) 0%, rgba(7, 24, 42, .30) 55%, rgba(7, 24, 42, 0) 85%); } /* taste-skill-ignore: scrim over photograph, and a blend from the misty sky above */
.join::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--section-y); pointer-events: none; background: linear-gradient(to bottom, rgba(var(--mist-rgb), 0), rgba(var(--mist-rgb), .92)); } /* taste-skill-ignore: blends the photograph into the misty sky below */
.join__inner { max-width: 1440px; margin: 0 auto; padding: var(--section-y) var(--m); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.join__copy { color: #fff; }
.join__copy .lead { max-width: 24em; }
.panel { background: var(--snow); padding: clamp(24px, 3vw, 44px); --focus: var(--glacier); }
.panel__title { font: 700 var(--t-h3)/1 var(--font-head); margin: 0 0 16px; outline: none; }
.panel .btn--block { margin-top: 18px; }
.panel .btn--text { color: var(--glacier); }
.panel p { margin: 0 0 12px; }
.proto-note { margin: 18px 0 0; padding: 12px 14px; background: var(--mist); font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.proto-note code { font: inherit; font-weight: 600; }
.joined__badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 16px/1 var(--font-body); color: var(--ok); }
.joined__badge svg { width: 22px; height: 22px; }
.joined__number { font-size: var(--t-ui); }
.joined__number b { font: 800 34px/1 var(--font-head); color: var(--glacier); font-variant-numeric: tabular-nums; margin: 0 4px; }
.joined__sample { color: var(--granite); font-size: var(--t-small); }
.ref { margin-top: 24px; padding: 18px; background: var(--mist); }
.ref__title { font: 700 var(--t-h3)/1 var(--font-head); margin: 0 0 10px; }
.ref__how { color: var(--ink); font-size: var(--t-small); max-width: 40em; }
.ref__share { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.invite { display: flex; gap: 8px; margin-top: 12px; }
.invite .field { flex: 1; min-width: 0; }
.group { border: 0; padding: 0; margin: 18px 0 0; }
.group legend { padding: 0; }
.q-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.joined__more { margin-top: 10px; }

/* ---------- 7. Trust and FAQ ---------- */
.faq { position: relative; color: var(--ink); --focus: var(--glacier); }
.faq__inner { max-width: 1440px; margin: 0 auto; padding: var(--section-y) var(--m); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.faq__photo { margin: 0 0 32px; clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% 100%, 0 100%); }
.faq__photo img { width: 100%; height: auto; }
.faq__lead .lead { color: var(--ink); }
.faq__list { display: grid; gap: 4px; }
details { background: rgba(255, 255, 255, .68); }
summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 64px 14px 20px; cursor: pointer; list-style: none; font: 700 var(--t-h3)/1.05 var(--font-head); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 12px; margin-top: -6px; background: var(--glacier); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotate(180deg); transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(0deg); }
details p { margin: 0; padding: 0 20px 22px; max-width: 36em; color: #2E3B47; }
summary:focus-visible { outline-offset: -3px; }

/* ---------- Footer ---------- */
.foot::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--section-y) * -1); height: var(--section-y); pointer-events: none; background: linear-gradient(to bottom, rgba(12, 34, 56, 0), var(--night)); } /* taste-skill-ignore: blends the sky into the footer */
.foot { position: relative; background: var(--night); color: var(--on-dark-soft); padding: clamp(56px, 8vw, 104px) var(--m) 32px; --mark-dark: #F7F8FA; --mark-light: #8DB3D6; }
.foot__top { max-width: 1440px; margin: 0 auto 32px; display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: end; justify-content: space-between; }
.foot__brand { display: inline-flex; align-items: center; gap: 20px; color: var(--snow); text-decoration: none; min-height: 44px; }
.foot__mark { width: clamp(64px, 8vw, 110px); height: auto; aspect-ratio: 854 / 632; }
.foot__word { height: clamp(28px, 4vw, 52px); width: auto; aspect-ratio: 846 / 297; }
.foot__tag { margin: 0; font: 700 var(--t-h3)/1 var(--font-head); color: var(--snow); }
.foot__links { max-width: 1440px; margin: 0 auto 24px; display: flex; flex-wrap: wrap; gap: 0 12px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px 0 0; text-underline-offset: 4px; }
.foot__credits { max-width: 1440px; margin: 0 auto 20px; background: none; font-size: var(--t-small); }
.foot__credits summary { display: inline-flex; font: 500 var(--t-small)/1.3 var(--font-body); padding: 0; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.foot__credits summary::after { display: none; }
.foot__credits ul { margin: 8px 0 0; padding-left: 20px; max-width: 74ch; display: grid; gap: 8px; list-style: disc; }
.foot__last { max-width: 1440px; margin: 0 auto; font-size: var(--t-small); color: #9DB0C6; }

/* ---------- Wide, tablet, phone ---------- */
@media (min-width: 1100px) { .bar__time { display: block; } .sound__text { display: inline; } .bar__join { margin-left: 8px; } }
@media (min-width: 900px) and (max-width: 1099px) { .bar__nav { margin-left: auto; } }
@media (max-width: 899px) {
  .bar__nav { display: none; }
  .bar__menu { display: inline-flex; }
  .sound { margin-left: auto; }
  .gap__inner, .picker__body, .join__inner, .faq__inner, .pc { grid-template-columns: minmax(0, 1fr); }
  .window__frame { max-height: 70vh; aspect-ratio: 4 / 4.6; }
  .peaks { position: static; grid-template-columns: 1fr 1fr; }
  .peak { padding-left: 34px; }
  .peak::before { left: 10px; }
  .app__inner { display: flex; flex-direction: column; gap: 0; }
  .app__left { display: contents; }
  .app__head { order: 1; }
  .show__stage { order: 2; min-height: 0; width: 100%; padding-top: 20px; }
  .show__tabs { order: 3; margin-top: 20px; }
  .show__note { order: 4; }
  .shot { max-height: min(62vh, 560px); }
  .pc__controls, .pc__preview { grid-column: 1 / -1; }
  .pc__preview { margin-top: 40px; max-width: 460px; justify-self: center; width: 100%; }
}
@media (max-width: 560px) {
  :root { --bar-h: 60px; }
  .brand__word { display: none; }
  .bar__join { padding: 0 14px; font-size: 15px; }
  .hero { min-height: 740px; }
  .join-inline__row .btn { width: 100%; }
  .phases { grid-template-columns: 1fr 1fr; }
  .demand { grid-template-columns: 8.5em 1fr; }
  .invite { flex-direction: column; }
  .peak__weeks { display: none; }
  .pc__custom { grid-template-columns: 1fr; }
}

/* ---------- Effect tiers and reduced motion ---------- */
.lite .seam__b { display: none; }
.lite .tilt { transform: none; }
html.reduce .seam img, html.reduce .range__cloud, html.reduce .hero__drift { animation: none; }
html.reduce .hero__night { display: none; }
html.reduce .seam img { transform: translate3d(-12%, 0, 0); }
html.reduce *, html.reduce *::before, html.reduce *::after { transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

/* Section joins are haze, not shapes: the cloud strips are off and every fade is a long eased gradient with a soft, blurred glow, so no edge reads as a line. */
.seam { display: none; }
.hero__fade { height: 46vh; background: linear-gradient(to bottom, rgba(15, 42, 68, 0) 0, rgba(15, 42, 68, .12) 22%, rgba(15, 42, 68, .45) 50%, rgba(15, 42, 68, .8) 78%, var(--dusk) 100%); }
.band::after { background: linear-gradient(to bottom, var(--dusk) 0, rgba(15, 42, 68, .7) 8%, rgba(15, 42, 68, .25) 18%, rgba(15, 42, 68, 0) 32%), linear-gradient(to bottom, rgba(7, 24, 42, .78) 0%, rgba(7, 24, 42, .4) 34%, rgba(7, 24, 42, 0) 62%), linear-gradient(to top, var(--glacier) 0, rgba(31, 78, 121, .7) 8%, rgba(31, 78, 121, .25) 20%, rgba(31, 78, 121, 0) 38%); }
.join::before { background: linear-gradient(to bottom, rgba(var(--mist-rgb), .94) 0, rgba(var(--mist-rgb), .6) calc(var(--section-y) * .5), rgba(var(--mist-rgb), .2) calc(var(--section-y) * .9), rgba(var(--mist-rgb), 0) calc(var(--section-y) * 1.3)), linear-gradient(to right, rgba(7, 24, 42, .66) 0%, rgba(7, 24, 42, .30) 55%, rgba(7, 24, 42, 0) 85%); }
.join::after { height: calc(var(--section-y) * 1.4); background: linear-gradient(to bottom, rgba(var(--mist-rgb), 0), rgba(var(--mist-rgb), .25) 35%, rgba(var(--mist-rgb), .7) 70%, rgba(var(--mist-rgb), .92)); }
.foot::before { height: calc(var(--section-y) * 1.5); top: calc(var(--section-y) * -1.5); background: linear-gradient(to bottom, rgba(12, 34, 56, 0), rgba(12, 34, 56, .3) 35%, rgba(12, 34, 56, .75) 70%, var(--night)); }
.join::before { background: linear-gradient(to bottom, rgba(var(--mist-rgb), .96) 0, rgba(var(--mist-rgb), .85) calc(var(--section-y) * .35), rgba(var(--mist-rgb), .6) calc(var(--section-y) * .7), rgba(var(--mist-rgb), .35) calc(var(--section-y) * 1.1), rgba(var(--mist-rgb), .15) calc(var(--section-y) * 1.6), rgba(var(--mist-rgb), 0) calc(var(--section-y) * 2.2)), linear-gradient(to right, rgba(7, 24, 42, .66) 0%, rgba(7, 24, 42, .30) 55%, rgba(7, 24, 42, 0) 85%); }

/* One sky for the whole second half: the join section no longer paints its own photo, so the card, join and FAQ share the same fixed misty sky. */
.join { background: none; overflow: visible; }
.join__photo, .join::before, .join::after { display: none; }
.join__copy { color: var(--ink); }

/* The range: a dawn sky behind, each peak lit on one face and shaded on the other. */
.range { background: linear-gradient(to bottom, #0A1B33 0, #17395F 55%, #6C6E92 88%, #C98C7A 100%); } /* taste-skill-ignore: a dawn sky behind the peaks */
.range__peak { transition: filter .35s var(--ease); }
.range__peak:hover { filter: brightness(1.15); }
.range__peak.is-current { filter: brightness(1.2) saturate(1.25) drop-shadow(0 0 10px rgba(255, 170, 110, .55)); }
.range__peak.is-current .range__snow-l { fill: #FFE2C4; }
.range { height: clamp(260px, 38vw, 480px); }
.range__cloud { bottom: -110px; opacity: .6; }
.range { height: auto; aspect-ratio: 1200 / 460; }
.range__cloud { bottom: -70px; }
.range__glows { mix-blend-mode: screen; }
.range__glow.is-current { opacity: 1; }
/* The range sits flush on the panel: no gap, and its base melts into the panel colour. */
.range { margin-bottom: 0; }
.range::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; pointer-events: none; background: linear-gradient(to bottom, rgba(22, 58, 95, 0), rgba(22, 58, 95, .6) 55%, #163A5F); } /* taste-skill-ignore: fades the cloud into the panel below */
.range + .preview__top { padding-top: 8px; }
.faq__guides { margin: 18px 0 0; padding-left: 16px; border-left: 3px solid var(--ember); max-width: 34em; font-size: var(--t-small); line-height: 1.55; color: var(--ink); }
.faq__guides b { font-weight: 700; }
.join-inline__row .field { flex: 1 1 180px; }
.join-main .field + .label, .join-main .label + .field { margin-top: 6px; }
.join-main .field + .label { margin-top: 14px; }

/* ---------- Join and card: the original's look (glass fields, pill buttons, circle-arrow actions), kept on the shared sky ---------- */
.join { padding: var(--section-y) var(--m); }
.join__inner { display: block; max-width: 1120px; margin: 0 auto; padding: 0; }
.join__slab { color: #fff; text-align: center; padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 64px); border-radius: 28px; background: rgba(9, 26, 47, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 40px 80px -40px rgba(7, 24, 42, .7); --focus: #fff; } /* taste-skill-ignore: dark glass slab over the shared sky */
.join__title { font: 800 clamp(48px, 7.4vw, 108px)/.92 var(--font-head); text-transform: uppercase; margin: 0 0 20px; text-wrap: balance; }
.join__lead { max-width: 36em; margin: 0 auto 20px; font-size: var(--t-lead); line-height: 1.5; }
.join__pill { display: inline-flex; gap: 10px; align-items: center; margin: 0 0 30px; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 15px; }
.join__pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); }
.join-main__row { display: flex; gap: 12px; flex-wrap: wrap; max-width: 880px; margin: 0 auto; }
.join-main__row .field { flex: 1 1 200px; width: auto; }
.field--glass { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; padding: 0 24px; }
.field--glass::placeholder { color: rgba(255, 255, 255, .72); }
.field--glass[aria-invalid="true"] { border-color: #FF8A6B; }
.btn--pill { border-radius: 999px; }
.form-msg--glass { color: #FFD3C2; margin-top: 12px; }
.join__slab .fine { color: rgba(255, 255, 255, .86); margin-top: 14px; }
.join__slab .fine a, .join__slab a:not(.btn):not(.chip) { color: #fff; }
.proto-note--glass { max-width: 640px; margin: 22px auto 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 14px; text-align: left; }
.joined__h { font: 800 clamp(40px, 5.4vw, 80px)/1 var(--font-head); margin: 0 0 12px; outline: none; }
.joined__h b { color: var(--ember-hi); font-weight: 800; }
.joined__welcome { max-width: 40em; margin: 0 auto; font-size: var(--t-lead); line-height: 1.5; }
.joined__sample { display: block; margin-top: 4px; font-size: var(--t-small); color: rgba(255, 255, 255, .8); }
.joined__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 920px; margin: 32px auto 0; text-align: left; }
.joined__how { margin: 0 0 18px; line-height: 1.5; }
.join__slab .invite { display: flex; gap: 8px; margin: 0; padding: 6px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; background: rgba(255, 255, 255, .1); }
.join__slab .invite .field { flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: 700 15px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background .2s; }
.chip:hover { background: rgba(255, 255, 255, .2); }
.chip--ember { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); }
.chip--ember:hover { background: #FF7C3E; }
.joined__qr { margin: 0; text-align: center; }
.joined__qr canvas { display: block; width: 176px; height: 176px; border-radius: 20px; background: #fff; }
.joined__qr figcaption { margin-top: 12px; font: 700 13px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.joined__links { display: flex; flex-wrap: wrap; gap: 4px 28px; justify-content: center; margin-top: 26px; }
.linkbtn { min-height: 44px; padding: 0; border: 0; background: none; color: #fff; font: 600 15px/1 var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.join__slab .questions, .join__slab .thanks { max-width: 640px; margin: 28px auto 0; text-align: left; }
.join__slab .panel__title { color: #fff; }
.join__slab .label { color: #fff; }
.join__slab .field--on-light { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .38); border-radius: 14px; }
.join__slab select option { color: #0C2238; }
.join__slab .form-msg--light { color: #FFD3C2; }
.join__slab .btn--text { color: #fff; }
.join__slab .joined__badge { color: #9BE3B5; justify-content: center; }
@media (max-width: 760px) { .joined__grid { grid-template-columns: 1fr; text-align: center; } .joined__qr { justify-self: center; } .chips { justify-content: center; } .join-main__row .btn { width: 100%; } }

.pc h2#pc-title { text-transform: uppercase; }
.pc__field > span, .pc__field legend { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.pc__field em { text-transform: none; letter-spacing: 0; }
.pc__field select, .pc__field input[type=text], .pc__field input:not([type]) { border-radius: 16px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(31, 78, 121, .18); }
.pc__fmt span { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); padding: 12px 22px; }
.pc__fmt input:checked + span { background: var(--glacier); }
.pc__bd img { border-radius: 14px; }
.pc__actions { flex-direction: column; align-items: flex-start; gap: 18px; }
.pc__actions .pc__save, .pc__actions .pc__share { min-height: 0; padding: 0 0 10px; gap: 18px; border-radius: 0; background: none; color: var(--glacier); border-bottom: 1px solid rgba(31, 78, 121, .4); font: 700 14px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.pc__actions .pc__save::after, .pc__actions .pc__share::after { content: ""; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--glacier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat; transition: transform .25s var(--ease); }
.pc__actions .pc__save:hover::after, .pc__actions .pc__share:hover::after { transform: translateX(4px); }
.pc__actions .pc__copy { padding: 0; min-height: 44px; }
.pc__status { border-radius: 14px; }
.pc__canvas { border-radius: 26px; transform: rotate(-3deg); }
.pc__preview:hover .pc__canvas { transform: rotate(-1deg); }
html.reduce .pc__canvas { transform: rotate(-3deg); }

/* Join: the text sits straight on the photograph again, brighter, with the big faint mark behind it (no box). */
.join { background: none; overflow: hidden; padding-block: calc(var(--section-y) * 1.7); }
.join__photo { display: block; inset: 0; }
.join__photo img { transform: none; object-position: 50% 35%; filter: saturate(.9) brightness(1.08); }
.join__mark { position: absolute; left: 50%; bottom: 4%; width: min(92vw, 1000px); height: auto; aspect-ratio: 854 / 632; transform: translateX(-50%); --mark-dark: #fff; --mark-light: #fff; opacity: .34; pointer-events: none; }
.join::before { display: block; background: linear-gradient(to bottom, rgba(var(--mist-rgb), .96) 0, rgba(var(--mist-rgb), .85) calc(var(--section-y) * .35), rgba(var(--mist-rgb), .55) calc(var(--section-y) * .8), rgba(var(--mist-rgb), .2) calc(var(--section-y) * 1.3), rgba(var(--mist-rgb), 0) calc(var(--section-y) * 1.8)), linear-gradient(to bottom, rgba(10, 52, 84, .5), rgba(10, 52, 84, .62)); }
.join::after { display: block; height: calc(var(--section-y) * 1.7); background: linear-gradient(to bottom, rgba(var(--mist-rgb), 0), rgba(var(--mist-rgb), .22) 30%, rgba(var(--mist-rgb), .6) 62%, rgba(var(--mist-rgb), .94)); }
.join__inner { position: relative; z-index: 1; }
.join__slab { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.join__title { text-shadow: 0 2px 30px rgba(7, 24, 42, .35); }

/* Join, closer to the original: a deep, moody photograph with the summit up behind the heading, a clearer mark, shorter fades. */
.join { padding-block: calc(var(--section-y) * 1.25) calc(var(--section-y) * 1.1); }
.join__photo img { height: 100%; transform: scale(1.3); transform-origin: 50% 0; object-position: 50% 0; filter: saturate(1.05) contrast(1.08) brightness(.96); }
.join::before { background: linear-gradient(to bottom, rgba(var(--mist-rgb), .94) 0, rgba(var(--mist-rgb), .6) calc(var(--section-y) * .3), rgba(var(--mist-rgb), .2) calc(var(--section-y) * .65), rgba(var(--mist-rgb), 0) calc(var(--section-y) * 1)), linear-gradient(to bottom, rgba(9, 58, 94, .42), rgba(10, 44, 74, .5) 55%, rgba(8, 30, 52, .74)); }
.join::after { height: calc(var(--section-y) * .9); }
.join__mark { bottom: -4%; width: min(110vw, 1120px); opacity: .42; }
.follow { margin-top: 34px; text-align: center; }
.follow__t { margin: 0 0 12px; font: 700 13px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.follow__row { display: flex; gap: 12px; justify-content: center; }
.follow__a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .06); transition: background .2s; }
.follow__a:hover { background: rgba(255, 255, 255, .22); }
.follow__a svg { width: 22px; height: 22px; }
.follow__q { margin: 18px 0 0; }
.follow__q a { color: #fff; font-weight: 600; text-underline-offset: 4px; }
.joined__links { margin-top: 18px; }
.join__photo img { transform: none; object-position: 50% 42%; }
.join__mark { z-index: 1; opacity: .3; }
.join__mark { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(96vw, 1000px); }

/* Dynamic touches: peaks rise out of the cloud and carry their names, and section text eases in. All of it is off for reduced motion. */
.range__label { font: 700 21px/1 var(--font-body); fill: rgba(255, 255, 255, .78); letter-spacing: .02em; transition: fill .3s; }
.range__alt { font: 500 17px/1 var(--font-body); fill: rgba(255, 255, 255, .55); transition: fill .3s; }
.range__label.is-current, .range__alt.is-current { fill: var(--ember-hi); }
.motion .range__peak, .motion .range__glow, .motion .range__label, .motion .range__alt { opacity: 0; }
.motion .range__peak { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.2) translateY(30px); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 110ms), opacity .7s ease calc(var(--i, 0) * 110ms), filter .35s var(--ease); }
.motion .range.is-risen .range__peak { opacity: 1; transform: none; }
.motion .range__glow, .motion .range__label, .motion .range__alt { transition: opacity 1s ease 1.1s, fill .3s; }
.motion .range.is-risen .range__label, .motion .range.is-risen .range__alt { opacity: 1; }
.motion .range.is-risen .range__glow { opacity: .3; }
.motion .range.is-risen .range__glow.is-current { opacity: 1; }
.motion .range.is-risen .range__peak.is-current { transition-delay: 0s; }
.motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--rv, 0ms), transform .9s var(--ease) var(--rv, 0ms); }
.motion .rv.rv-in { opacity: 1; transform: none; }
.lite .range__alt { display: none; }

/* Soft edges that stay soft: the photographs fade out to transparent instead of to a fixed colour, so they always melt into whatever is behind
   at that moment (the tone and sky change as you scroll, so a painted-on colour would show as a line). */
.band { background: none; }
.band img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.7) 16%, #000 28%, #000 72%, rgba(0,0,0,.7) 84%, rgba(0,0,0,.25) 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.7) 16%, #000 28%, #000 72%, rgba(0,0,0,.7) 84%, rgba(0,0,0,.25) 92%, transparent 100%); }
.band::after { background: linear-gradient(to bottom, rgba(7, 24, 42, .78) 0%, rgba(7, 24, 42, .4) 34%, rgba(7, 24, 42, 0) 62%); }
.join { -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.2) calc(var(--section-y) * .25), rgba(0,0,0,.6) calc(var(--section-y) * .55), #000 calc(var(--section-y) * 1), #000 calc(100% - var(--section-y) * .95), rgba(0,0,0,.6) calc(100% - var(--section-y) * .5), rgba(0,0,0,.2) calc(100% - var(--section-y) * .2), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.2) calc(var(--section-y) * .25), rgba(0,0,0,.6) calc(var(--section-y) * .55), #000 calc(var(--section-y) * 1), #000 calc(100% - var(--section-y) * .95), rgba(0,0,0,.6) calc(100% - var(--section-y) * .5), rgba(0,0,0,.2) calc(100% - var(--section-y) * .2), transparent 100%); }
.join::before { background: linear-gradient(to bottom, rgba(9, 58, 94, .42), rgba(10, 44, 74, .5) 55%, rgba(8, 30, 52, .74)); }
.join::after { display: none; }
.band::after { background: linear-gradient(to bottom, rgba(7, 24, 42, 0) 0, rgba(7, 24, 42, .22) 6%, rgba(7, 24, 42, .6) 14%, rgba(7, 24, 42, .5) 28%, rgba(7, 24, 42, .22) 46%, rgba(7, 24, 42, 0) 66%); }
.show__stage { clip-path: none; }
.stage__peak { -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.5) 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.5) 80%, transparent 100%); }
/* A taller join section, so the photograph and the content have room to breathe. */
.join { min-height: max(100vh, 880px); display: grid; align-content: center; padding-block: calc(var(--section-y) * 1.9) calc(var(--section-y) * 1.7); }
.join__inner { width: 100%; }
.join__title { margin-bottom: 28px; }
.join__lead { margin-bottom: 28px; }
.join__pill { margin-bottom: 40px; }
.joined__grid { margin-top: 44px; }
.follow { margin-top: 48px; }

/* Waitlist counter pill (sample number in the prototype) */
.wl { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #fff; font-size: 15px; line-height: 1.3; }
.wl i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); }
.wl b { color: var(--ember-hi); font: 800 20px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.wl--hero { margin: 4px 0 18px; align-self: flex-start; }
.hero__intro .wl--hero { max-width: 100%; }

/* ---------- Sign-up moment: a drawn tick, a burst of embers and snow, a climbing number ---------- */
.join-inline__done { position: relative; display: flex; gap: 20px; align-items: center; padding: 20px 24px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 22px; background: rgba(9, 26, 47, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 30px 60px -30px rgba(4, 14, 28, .8); --focus: #fff; } /* taste-skill-ignore: dark glass for the success moment */
.join-inline__done[hidden] { display: none; }
.ok { position: relative; flex: none; width: 72px; height: 72px; }
.ok svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ok__ring { fill: rgba(232, 103, 42, .2); stroke: var(--ember-hi); stroke-width: 2.6; stroke-dasharray: 145; stroke-dashoffset: 0; transform-origin: 50% 50%; }
.ok__tick { fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 38; stroke-dashoffset: 0; }
.ok--sm { width: 64px; height: 64px; margin: 0 0 14px; }
.ok__t { margin: 0 0 4px; font: 800 clamp(26px, 3vw, 36px)/1.05 var(--font-head); }
.ok__s { margin: 0 0 14px; font-size: var(--t-small); color: rgba(255, 255, 255, .88); }
.ok__s b { color: var(--ember-hi); font: 800 22px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.ok__a { margin: 0; }
.ok__burst i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ember-hi); opacity: 0; pointer-events: none; }
.ok__burst i.is-snow { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.motion .join-inline__done:not([hidden]) { animation: ok-card .7s var(--ease) both; }
.motion .join-inline__done:not([hidden]) .ok__ring { stroke-dashoffset: 145; animation: ok-draw .8s var(--ease) .1s forwards, ok-pop .6s var(--ease) .75s; }
.motion .join-inline__done:not([hidden]) .ok__tick, .motion .qd__thanks:not([hidden]) .ok__tick { stroke-dashoffset: 38; animation: ok-draw .5s var(--ease) .65s forwards; }
.motion .qd__thanks:not([hidden]) .ok__ring { stroke-dashoffset: 145; animation: ok-draw .8s var(--ease) .1s forwards; }
.motion .ok__burst i { animation: ok-burst 1s cubic-bezier(.16, .8, .3, 1) calc(.7s + var(--d, 0ms)) forwards; }
.motion .join-inline__done:not([hidden]) .ok__t, .motion .join-inline__done:not([hidden]) .ok__s, .motion .join-inline__done:not([hidden]) .ok__a { animation: ok-rise .7s var(--ease) both; }
.motion .join-inline__done:not([hidden]) .ok__t { animation-delay: .45s; }
.motion .join-inline__done:not([hidden]) .ok__s { animation-delay: .6s; }
.motion .join-inline__done:not([hidden]) .ok__a { animation-delay: .75s; }
@keyframes ok-card { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes ok-draw { to { stroke-dashoffset: 0; } }
@keyframes ok-pop { 40% { transform: scale(1.12); } }
@keyframes ok-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ok-burst { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } }
.motion .wl b.is-pop { animation: wl-pop .8s var(--ease); }
@keyframes wl-pop { 30% { transform: scale(1.5); color: #fff; } }
.motion .joined:not([hidden]) > * { animation: ok-rise .8s var(--ease) both; }
.motion .joined:not([hidden]) > :nth-child(2) { animation-delay: .1s; }
.motion .joined:not([hidden]) > :nth-child(3) { animation-delay: .22s; }
.motion .joined:not([hidden]) > :nth-child(4) { animation-delay: .34s; }
.motion .joined:not([hidden]) > :nth-child(5) { animation-delay: .46s; }

/* ---------- The optional questions: one at a time, in a dialog ---------- */
.qd { width: min(92vw, 640px); max-height: min(92vh, 760px); margin: auto; padding: clamp(22px, 4vw, 40px); border: 1px solid rgba(255, 255, 255, .2); border-radius: 28px; background: rgba(9, 26, 47, .96); color: #fff; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .75); --focus: #fff; overflow: auto; }
.qd::backdrop { background: rgba(5, 16, 30, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.motion .qd[open] { animation: qd-in .55s var(--ease) both; }
.motion .qd[open]::backdrop { animation: qd-fade .5s ease both; }
@keyframes qd-in { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes qd-fade { from { opacity: 0; } }
.qd__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qd__step { margin: 0; font: 700 13px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.qd__x { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.qd__x:hover { background: rgba(255, 255, 255, .15); }
.qd__x svg { width: 20px; height: 20px; }
.qd__bar { height: 4px; margin-bottom: 26px; border-radius: 4px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.qd__bar i { display: block; width: 33%; height: 100%; border-radius: 4px; background: var(--ember); transition: width .5s var(--ease); }
.qd__title { margin: 0 0 8px; font: 800 clamp(30px, 4vw, 44px)/1 var(--font-head); outline: none; }
.qd__hint { margin: 0 0 22px; color: rgba(255, 255, 255, .82); }
.qd__opts { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.qopt { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: center; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 16px; background: rgba(255, 255, 255, .06); cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.qopt:hover { background: rgba(255, 255, 255, .13); transform: translateX(3px); }
.qopt input { width: 22px; height: 22px; margin: 0; accent-color: var(--ember); }
.qopt:has(input:checked) { background: rgba(232, 103, 42, .2); border-color: var(--ember-hi); }
.qd__select { color-scheme: dark; }
.qd__select option { color: #0C2238; }
.motion .qd__pane:not([hidden]) { animation: qd-pane .5s var(--ease) both; }
@keyframes qd-pane { from { opacity: 0; transform: translateX(32px); } }
.qd__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 22px; margin-top: 26px; }
.qd__actions [data-qd-back] { margin-right: auto; }
.qd__actions--end { justify-content: flex-start; }
.qd__thanks { text-align: left; }

/* The questionnaire is inline now, not a popup */
.qd { width: min(100%, 640px); max-height: none; margin: 30px auto 0; text-align: left; box-shadow: none; background: rgba(9, 26, 47, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: visible; }
.qd[hidden] { display: none; }
.motion .qd:not([hidden]) { animation: qd-in .55s var(--ease) both; }
.ok__q { margin: 0 0 12px; font-size: var(--t-small); line-height: 1.4; color: rgba(255, 255, 255, .92); max-width: 30em; }
.ok__a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.ok__a .linkbtn { font-size: 14px; }
.motion .join-inline__done:not([hidden]) .ok__q { animation: ok-rise .7s var(--ease) .68s both; }
.joined__ask { max-width: 640px; margin: 34px auto 0; padding: 20px 24px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 22px; background: rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; text-align: left; }
.joined__ask p { margin: 0; font: 700 clamp(18px, 2vw, 22px)/1.25 var(--font-body); max-width: 22em; }

/* A calmer join section once someone has joined: the sign-up pitch steps away and only their place and next steps remain. */
.join.is-joined .join__title, .join.is-joined .join__lead { display: none; }
.join.is-joined .joined__h { margin-top: 0; }
.joined__h [data-total-out] { color: #fff; font-weight: 800; }
.joined__how { max-width: 34em; }
.joined__links { margin-top: 12px; }
.follow { margin-top: 36px; }
.pc__shows[hidden] { display: none; }
/* the invite message is plain text under the tag line, not a bubble */
.pc__status, .pc.is-gold .pc__status { padding: 0; border: 0; border-radius: 0; background: none; max-width: none; font: 500 var(--t-small)/1.5 var(--font-body); color: var(--ink); }
.pc.is-gold .pc__status { color: #7A5410; font-weight: 700; }
.pc__hint { margin: 0; }
.pc__status { margin: -8px 0 0; }
.pc__status, .pc.is-gold .pc__status { font: inherit; font-size: var(--t-small); font-weight: 400; line-height: inherit; color: var(--ink); }
.pc__hint, .pc__status { font-family: var(--font-body); font-size: var(--t-small); font-weight: 400; line-height: 1.5; color: var(--ink); }

/* Once the questionnaire is answered the ask is gone and the way forward is the card */
.join.is-answered .joined__ask { display: none; }
.join-inline__done.is-answered .ok__q, .join-inline__done.is-answered [data-goto-q], .join-inline__done.is-answered [data-card-alt] { display: none; }
.join-inline__done [data-card-main][hidden] { display: none; }

/* ---------- Terrain: contour lines, ridgelines and a soft glow behind the dark sections ---------- */
[data-terrain] { position: relative; }
[data-terrain] > :not(.terrain) { position: relative; z-index: 1; }
.terrain { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 8%, #000 20%, #000 80%, rgba(0,0,0,.35) 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 8%, #000 20%, #000 80%, rgba(0,0,0,.35) 92%, transparent 100%); --tp: 0; }
.tr-layer { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; overflow: visible; will-change: transform; }
.tr-far { transform: translate3d(0, calc(var(--tp) * -34px), 0); }
.tr-mid { transform: translate3d(0, calc(var(--tp) * -64px), 0); }
.tr-near { transform: translate3d(0, calc(var(--tp) * -110px), 0); }
.tr-lines path { fill: none; stroke: rgba(176, 208, 240, .13); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.tr-lines path:nth-child(5n) { stroke: rgba(255, 170, 120, .2); stroke-width: 1.6; }
.tr-lines--b path { stroke: rgba(176, 208, 240, .1); }
.tr-ridge { vector-effect: non-scaling-stroke; }
.tr-ridge--a { fill: rgba(120, 170, 220, .1); }
.tr-ridge--b { fill: rgba(96, 148, 205, .13); }
.tr-ridge--c { fill: rgba(70, 126, 188, .16); }
.tr-glow { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(30px); }
.tr-glow--ember { background: radial-gradient(closest-side, rgba(255, 150, 90, .3), rgba(255, 150, 90, 0)); } /* taste-skill-ignore: first light behind the ridge */
.tr-glow--ice { background: radial-gradient(closest-side, rgba(150, 200, 255, .26), rgba(150, 200, 255, 0)); } /* taste-skill-ignore: cold light on the range */
.motion .tr-glow--drift { animation: tr-drift 26s ease-in-out infinite alternate; }
.motion .tr-glow--drift2 { animation: tr-drift 34s ease-in-out -12s infinite alternate-reverse; }
@keyframes tr-drift { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-42%, -56%) scale(1.18); } }
.lite .tr-glow { filter: none; }
.lite .tr-lines path:nth-child(odd) { display: none; }
.apps-phone, .show__stage { position: relative; }

/* the cliff photo's top edge: fully transparent until past the section clip, so it never starts as a line */
.band img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 7%, rgba(0,0,0,.2) 13%, rgba(0,0,0,.6) 20%, #000 32%, #000 68%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.2) 87%, transparent 93%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, transparent 7%, rgba(0,0,0,.2) 13%, rgba(0,0,0,.6) 20%, #000 32%, #000 68%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.2) 87%, transparent 93%, transparent 100%); }
.tr-lines path { stroke: rgba(176, 208, 240, .2); }
.tr-lines path:nth-child(5n) { stroke: rgba(255, 170, 120, .34); }
.tr-lines--b path { stroke: rgba(176, 208, 240, .16); }
.tr-ridge--a { fill: rgba(120, 170, 220, .14); }
.tr-ridge--b { fill: rgba(96, 148, 205, .18); }
.tr-ridge--c { fill: rgba(70, 126, 188, .22); }
.tr-lines--c path { stroke: rgba(176, 208, 240, .15); }
.tr-lines--c path:nth-child(5n) { stroke: rgba(255, 170, 120, .26); }

/* ---------- Hero sign-up: one glass bar, rounded fields and a lit button ---------- */
.hero__intro { width: min(680px, calc(100% - var(--m) * 2)); }
.join-inline__row { align-items: center; gap: 6px; padding: 6px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; background: rgba(9, 26, 47, .46); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -22px rgba(4, 14, 28, .8); transition: border-color .25s, box-shadow .25s; } /* taste-skill-ignore: glass bar over the photograph */
.join-inline__row:focus-within { border-color: rgba(255, 190, 150, .75); box-shadow: 0 18px 44px -20px rgba(232, 103, 42, .55); }
.join-inline .field--on-dark { min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 15px; transition: background .2s; }
.join-inline .field--on-dark::placeholder { color: rgba(255, 255, 255, .72); }
.join-inline .field--on-dark:focus-visible { background: rgba(255, 255, 255, .2); outline: 2px solid #fff; outline-offset: -2px; }
.join-inline .field--on-dark[aria-invalid="true"] { background: rgba(255, 120, 90, .22); outline: 2px solid #FF8A6B; outline-offset: -2px; }
.join-inline__row .field { flex: 1 1 130px; min-width: 0; }
.join-inline__row .btn { position: relative; overflow: hidden; min-height: 46px; padding: 0 22px 0 24px; border-radius: 999px; font-size: 15px; background: linear-gradient(135deg, #FF9A62 0%, #E8672A 62%, #D4551C 100%); color: #1B0F08; box-shadow: 0 10px 26px -10px rgba(232, 103, 42, .85), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .25s var(--ease), box-shadow .25s; } /* taste-skill-ignore: a lit ember button */
.join-inline__row .btn::before { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transition: left .7s var(--ease); }
.join-inline__row .btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(232, 103, 42, .95), inset 0 1px 0 rgba(255, 255, 255, .45); }
.join-inline__row .btn:hover::before { left: 120%; }
.join-inline__row .btn svg { width: 18px; height: 18px; }
.join-inline .form-msg { margin-top: 10px; }
@media (max-width: 720px) {
  .join-inline__row { border-radius: 26px; }
  .join-inline__row .field, .join-inline__row .btn { flex: 1 1 100%; width: 100%; }
}
.wl--hero { margin: -6px 0 0; }

/* Hero sign-up, narrower: a plain heading, then two rounded fields one under the other, with a small round arrow to send */
.hero__intro { width: min(430px, calc(100% - var(--m) * 2)); }
.join-inline__t { margin: 0 0 12px; font: 800 clamp(26px, 2.4vw, 34px)/1 var(--font-head); color: #fff; }
.join-inline__row { display: grid; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.join-inline__row:focus-within { box-shadow: none; border: 0; }
.join-inline .field--on-dark { width: 100%; min-height: 48px; border: 1px solid rgba(255, 255, 255, .38); background: rgba(9, 26, 47, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.join-inline .field--on-dark:focus-visible { border-color: rgba(255, 190, 150, .85); background: rgba(9, 26, 47, .6); outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
.join-inline__email { position: relative; }
.join-inline__email .field--on-dark { padding-right: 62px; }
.join-inline__go { position: absolute; right: 5px; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #1B0F08; background: linear-gradient(135deg, #FF9A62, #E8672A); box-shadow: 0 8px 20px -8px rgba(232, 103, 42, .9), inset 0 1px 0 rgba(255, 255, 255, .4); transition: transform .25s var(--ease), box-shadow .25s; }
.join-inline__go svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.join-inline__go:hover { transform: scale(1.08); }
.join-inline__go:hover svg { transform: translateX(2px); }
.join-inline__go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.join-inline__go[aria-busy="true"] { opacity: .7; cursor: progress; }
.join-inline__go[aria-busy="true"] svg { display: none; }
@media (max-width: 720px) { .join-inline__row .field { flex: none; } }
.join-inline:has(.join-inline__done:not([hidden])) .join-inline__t { display: none; }

/* Picker: the heading sits in the left column, so the mountain panel starts at the top with no dead space above it */
.picker__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(24px, 4vw, 72px); align-items: start; }
.picker__head { grid-column: 1; grid-row: 1; max-width: none; margin-bottom: clamp(20px, 2.4vw, 32px); }
.picker__head .h2 { font-size: clamp(40px, 4.4vw, 68px); }
.picker__body { display: contents; }
.peaks { grid-column: 1; grid-row: 2; align-self: start; }
.preview { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
@media (max-width: 899px) {
  .picker__inner { display: block; }
  .picker__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .peaks, .preview { grid-column: auto; grid-row: auto; }
  .picker__head .h2 { font-size: clamp(42px, 9vw, 64px); }
}
.picker__inner { grid-template-rows: auto 1fr; }
@media (max-width: 899px) { .picker__inner { grid-template-rows: none; } }

/* ---------- Another pass: motion with a purpose, small-screen fit, and the interaction details ---------- */
/* the picker: the name slides in and the demand pips light one after another */
.motion .is-swap { animation: swap-in .6s var(--ease) both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(14px); } }
.motion .demand .pips i.on { animation: pip-on .5s var(--ease) both; }
.motion .demand .pips i:nth-child(2).on { animation-delay: .06s; }
.motion .demand .pips i:nth-child(3).on { animation-delay: .12s; }
.motion .demand .pips i:nth-child(4).on { animation-delay: .18s; }
.motion .demand .pips i:nth-child(5).on { animation-delay: .24s; }
@keyframes pip-on { from { opacity: 0; transform: scaleX(.2); } }
/* the app screens: a progress line under the tab that is showing while they cycle on their own */
.tab::after { content: ""; position: absolute; left: 44px; right: 16px; bottom: 8px; height: 2px; background: var(--ember-hi); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.is-auto .tab[aria-selected="true"]::after { opacity: .9; animation: tab-fill 4.8s linear forwards; }
@keyframes tab-fill { to { transform: scaleX(1); } }
.shot { transition: opacity .6s var(--ease), transform .6s var(--ease); }
/* guidelines: touch, anchors, the menu sheet, and the footer switch */
a, button, label, select, summary, input[type="radio"], input[type="checkbox"] { touch-action: manipulation; }
:target, [id] { scroll-margin-top: calc(var(--bar-h, 64px) + 16px); }
#sheet { overscroll-behavior: contain; }
.foot__motion { margin: 18px 0 0; }
.foot__motion .linkbtn { min-height: 44px; color: rgba(255, 255, 255, .75); font-size: 14px; }
/* small phones: the hero keeps the form, the counter and the fine print, and lets "YOUR WAY." sit clear below */
@media (max-width: 560px) and (max-height: 880px) {
  .hero__see { display: none; }
  .hero__intro { gap: 12px; }
  .wl--hero { font-size: 14px; padding: 7px 14px; }
}

/* ---------- Live sign-up: the honeypot, the invite note, the lookup, and the excitement scale ---------- */
.wl__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.wl__check { min-height: 0; margin-top: 8px; }
.wl__check:empty { display: none; }
.wl__invite { margin: 10px 0 0; font-size: var(--t-small); color: rgba(255, 255, 255, .92); }
.wl__invite[hidden] { display: none; }
.join__find { margin: 14px 0 0; }
.join__find[hidden], .find[hidden] { display: none; }
.join__find .linkbtn { color: #fff; }
.find { max-width: 640px; margin: 14px auto 0; }
.find__row { display: flex; flex-wrap: wrap; gap: 10px; }
.find__row .field { flex: 1 1 220px; width: auto; }
.qd__scale { margin: 0; padding: 0; border: 0; min-width: 0; }
.qd__nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.qnum { position: relative; cursor: pointer; }
.qnum input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.qnum span { display: grid; place-items: center; min-height: 52px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px; background: rgba(255, 255, 255, .06); font: 800 22px/1 var(--font-head); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.qnum:hover span { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.qnum input:checked + span { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); }
.qnum input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.qd__ends { display: flex; justify-content: space-between; margin: 10px 2px 0; font-size: var(--t-small); color: rgba(255, 255, 255, .8); }
@media (min-width: 560px) { .qd__nums { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

/* The cliff photo on wide screens: tall enough to show the mountains and the roped team, with shorter fades at the top and bottom */
.band { height: clamp(460px, 56vw, 1040px); }
.band img { object-position: 56% 56%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 4%, rgba(0,0,0,.3) 9%, #000 19%, #000 80%, rgba(0,0,0,.45) 91%, transparent 98%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, transparent 4%, rgba(0,0,0,.3) 9%, #000 19%, #000 80%, rgba(0,0,0,.45) 91%, transparent 98%, transparent 100%); }
/* The cliff photo is anchored to its bottom so the roped climbers stay in view, and the bottom fade is only the last few percent */
.band { height: clamp(460px, 62vw, 1180px); }
.band img { object-position: 56% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 3%, rgba(0,0,0,.3) 8%, #000 17%, #000 93%, rgba(0,0,0,.4) 97%, transparent 99.6%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, transparent 3%, rgba(0,0,0,.3) 8%, #000 17%, #000 93%, rgba(0,0,0,.4) 97%, transparent 99.6%, transparent 100%); }

/* Phone fixes: the invite link keeps its copy button inside the bubble, the size buttons stay legible when selected, and the app screens show in full */
.join__slab .invite { flex-direction: row; flex-wrap: nowrap; align-items: center; }
.join__slab .invite .btn { flex: none; min-height: 44px; padding: 0 20px; }
.join__slab .invite .field { padding-inline: 16px; text-overflow: ellipsis; }
.pc__fmt em { color: inherit; opacity: .85; }
.pc__fmt input:checked + span em { color: #fff; opacity: .9; }
@media (max-width: 899px) {
  .shot { max-height: none; -webkit-mask-image: none; mask-image: none; border-radius: 28px; }
}

/* the old v1 link target, so every existing /#waitlist link lands on the sign-up */
#waitlist { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* Over the hero the header is a soft fade, not a solid bar, so SUMMIT is never sliced in half as you scroll back up */
.bar.is-scrolled.is-over-hero:not(.is-open) { background: linear-gradient(to bottom, rgba(10, 28, 48, .82) 0, rgba(10, 28, 48, .5) 62%, rgba(10, 28, 48, 0) 100%); } /* taste-skill-ignore: a soft fade under the header */
.bar { transition: background-color .3s, background .3s; }

/* ---------- Gold card: a light that follows the pointer, like real gold foil catching a lamp ---------- */
.pc__card { position: relative; display: block; width: fit-content; max-width: 100%; margin-inline: auto; border-radius: 26px; transform: rotate(-3deg); transition: transform .6s var(--ease); isolation: isolate; box-shadow: 0 30px 60px -24px rgba(12, 34, 56, .6); }
.pc__preview:hover .pc__card { transform: rotate(-1deg); }
.pc__card .pc__canvas, .pc__preview:hover .pc__card .pc__canvas { transform: none; box-shadow: none; margin: 0; border-radius: 26px; }
html.reduce .pc__card, html.reduce .pc__preview:hover .pc__card { transform: rotate(-3deg); }
.pc__shine { position: absolute; inset: 0; z-index: 2; border-radius: 26px; pointer-events: none; opacity: 0; transition: opacity .45s ease; mix-blend-mode: color-dodge; --sx: 50%; --sy: 38%; --sw: 50%;
  background:
    radial-gradient(circle at var(--sx) var(--sy), rgba(255, 238, 178, .9) 0, rgba(255, 214, 120, .5) 18%, rgba(255, 200, 100, 0) 40%),
    linear-gradient(112deg, rgba(255, 240, 190, 0) calc(var(--sw) - 16%), rgba(255, 233, 160, .7) calc(var(--sw) - 4%), rgba(255, 255, 255, .95) var(--sw), rgba(255, 233, 160, .7) calc(var(--sw) + 4%), rgba(255, 240, 190, 0) calc(var(--sw) + 16%)); } /* taste-skill-ignore: a moving highlight over gold foil */
.pc.is-gold .pc__card.is-lit .pc__shine.has-mask { opacity: 1; }
@media (hover: none) { .pc.is-gold .pc__card .pc__shine.has-mask { opacity: .6; } }

/* ---------- Rewards ladder (joined view) and the goal bar (hero) ---------- */
.ladder { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.ladder li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px; background: rgba(255, 255, 255, .06); transition: background .35s, border-color .35s; }
.ladder li::before { content: ""; grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; box-sizing: border-box; transition: background .35s, border-color .35s; }
.ladder li.is-done { background: rgba(232, 103, 42, .18); border-color: var(--ember-hi); }
.ladder li.is-done::before { background: var(--ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--ember); }
.ladder b { grid-column: 2; font: 700 16px/1.25 var(--font-body); }
.ladder span { grid-column: 2; font-size: var(--t-small); line-height: 1.4; color: rgba(255, 255, 255, .88); }
.ladder__go { grid-column: 3; grid-row: 1; font-style: normal; font-size: 13px; font-weight: 600; color: var(--ember-hi); white-space: nowrap; }
.ladder li.is-done .ladder__go { color: #9BE3B5; }
.goal { display: flex; align-items: center; gap: 12px; margin: -4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .88); }
.goal[hidden] { display: none; }
.goal__bar { flex: 0 0 120px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.goal__bar i { display: block; width: 2%; height: 100%; border-radius: 6px; background: var(--ember); transition: width 1.4s var(--ease); }
.goal b { color: #fff; }
.ladder li.ladder__note { grid-template-columns: minmax(0, 1fr); border-style: dashed; background: rgba(255, 255, 255, .03); }
.ladder li.ladder__note::before { display: none; }
.ladder li.ladder__note b, .ladder li.ladder__note span { grid-column: 1; }

/* Small phones: once someone has signed up, the hero keeps just the success card, so nothing piles onto "YOUR WAY." */
@media (max-width: 560px), (max-height: 640px) {
  .hero__intro.is-joined .hero__lead, .hero__intro.is-joined .hero__fine, .hero__intro.is-joined .hero__see { display: none; } /* after sign-up the hero shows the card, the count and the goal bar */
  .join-inline__done { padding: 16px 18px; gap: 14px; }
  .join-inline__done .ok { width: 56px; height: 56px; }
}
.hero__intro.is-joined .ok__s { margin-bottom: 6px; }
.hero__intro.is-joined .ok__a .linkbtn { font-size: 14px; }

/* The counter and the goal bar hold their space while the count loads, so nothing below them jumps when it arrives */
.wl--hero[hidden] { display: inline-flex; visibility: hidden; }
.goal[hidden] { display: flex; visibility: hidden; }

/* The goal line takes the full width (Safari otherwise squeezes it to its narrowest and wraps every word), and the hero keeps its room on phones */
.goal { width: 100%; }
.goal__t { flex: none; white-space: nowrap; }
.goal__bar { flex: 1 1 60px; min-width: 40px; max-width: 120px; }
@media (max-width: 560px) { .fine__more { display: none; } .hero__intro.has-check .hero__fine, .hero__intro.has-check .goal { display: none; } }
@media (max-height: 700px) { .hero__fine { display: none; } }
/* Cloudflare's "verify you are human" box floats under the form instead of pushing the page down when it appears */
.join-inline { position: relative; }
.join-inline .wl__check { position: absolute; left: 0; top: 100%; z-index: 3; margin: 6px 0 0; }

/* After sign-up on a phone the group sits a little lower, with the copy-link action inside the card */
.ok__hint { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.ok__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ok__a .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
@media (max-width: 560px) { .hero__intro.is-joined { top: calc(clamp(92px, 14vh, 150px) + var(--t-hero) * .86 + 56px); } }
/* signed-up hero on a phone: the card is slimmer and the whole group sits lower, so the sunlit peak shows above it */
@media (max-width: 560px) {
  .hero__intro.is-joined { top: max(calc(clamp(92px, 14vh, 150px) + var(--t-hero) * .86 + 56px), min(48svh, calc(100svh - 350px))); }
  .hero__intro.is-joined .join-inline__done { padding: 14px 16px; }
  .hero__intro.is-joined .ok__s { margin-bottom: 10px; }
}