/* Homepage only. Loaded after /css/scrollcraft.css and /css/fc.css.
   Built with the scroll-craft skill: see docs/scrollcraft/builds/homepage/BRIEF.md
   for the journey, feeling curve and act score this file implements. */

/* ---------------------------------------------------------------- chrome -- */
.fc-nav--overlay { position: fixed; left: 0; right: 0; top: 0; }
.fc-skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: #fff; color: #0B0B0D; padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none;
}
.fc-skip:focus { top: 12px; }
.waitlist-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Engine cues hold a little extra room so the nav never sits on copy. */
.home [data-sc-stage] { padding-top: var(--fc-nav-h); }

/* -------------------------------------------------------------- GPS dot --
   The iOS location dot: blue core, white ring, a slow halo. */
.gps-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.gps-dot i {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--fc-accent); border: 3.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.gps-dot::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: rgba(10,132,255,.22); border: 1px solid rgba(10,132,255,.45);
  animation: gps-halo 2.6s var(--fc-ease) infinite;
}
@keyframes gps-halo { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gps-dot::before { animation: none; transform: scale(.8); opacity: .5; } }

/* ------------------------------------------------------ Live Activity card --
   The real Lock Screen card, rebuilt in markup so it can recompute. Every
   size is in container units so one component serves the hero (small, on a
   phone) and the climb (large, on its own). Colours follow the widget:
   red badge for level 4, orange for 3; slope green / amber within 3° /
   red at or above the critical angle (PositionStatsCard.slopeColor). */
.la-wrap { container-type: inline-size; width: 100%; }
.la {
  --la-bg-a: #FFF1EF; --la-bg-b: #FAD3CF; --la-badge: #FF3B30; --la-badge-ink: #fff; --la-lvl: #D70015;
  position: relative; overflow: hidden;
  border-radius: 6.5cqw;
  padding: 4.6cqw 5.2cqw 0;
  background: linear-gradient(118deg, var(--la-bg-a), var(--la-bg-b));
  color: #1C1C1E;
  font-family: var(--fc-font);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 4px 10px rgba(0,0,0,.25), 0 28px 60px -18px rgba(0,0,0,.7);
  transition: background-color .3s;
}
.la[data-level="3"] { --la-bg-a: #FFF8EC; --la-bg-b: #FBE3C2; --la-badge: #FF9500; --la-badge-ink: #1C1C1E; --la-lvl: #B35A00; }
.la__top { display: flex; align-items: center; gap: 2.6cqw; }
.la__badge {
  display: grid; place-items: center; width: 7.6cqw; height: 7.6cqw; border-radius: 1.8cqw;
  background: var(--la-badge); color: var(--la-badge-ink);
  font: 700 4.8cqw/1 var(--fc-font-display);
}
.la__lvl { font: 600 5.2cqw/1.1 var(--fc-font); color: var(--la-lvl); letter-spacing: -.01em; }
.la__protect {
  margin-left: auto; display: inline-flex; align-items: center; gap: 1.4cqw;
  font: 700 3.3cqw/1 var(--fc-font); letter-spacing: .08em; text-transform: uppercase; color: #1E9E46;
}
.la__protect::before { content: ""; width: 2.4cqw; height: 2.8cqw; background: #1E9E46; border-radius: .4cqw .4cqw 1.4cqw 1.4cqw; }
.la__mid { display: flex; align-items: baseline; gap: 3.2cqw; margin-top: 2.2cqw; }
.la__slope { font: 700 13cqw/1 var(--fc-font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; min-width: 2.3ch; }
.la__slope.is-ok { color: #24A845; }
.la__slope.is-warn { color: #C98F00; }
.la__slope.is-red { color: #FF2D20; }
.la__crit { font: 500 3.9cqw/1 var(--fc-mono); color: #5E5E63; }
.la__crit b { font-weight: 500; }
.la__bar { position: relative; height: 2.3cqw; margin-top: 2.6cqw; border-radius: 99px; background: rgba(0,0,0,.1); }
.la__fill {
  position: absolute; inset: 0; border-radius: inherit; background: #34C759;
  transform: scaleX(var(--f, .3)); transform-origin: 0 50%;
  transition: transform .18s linear, background-color .25s;
}
.la[data-slope="warn"] .la__fill { background: #DB9E00; }
.la[data-slope="red"] .la__fill { background: #FF3B30; }
.la__tick {
  position: absolute; top: -45%; height: 190%; width: .8cqw; margin-left: -.4cqw; border-radius: 1px;
  left: calc(var(--t, .75) * 100%); background: #D70015;
  transition: left .35s var(--fc-ease);
}
.la__meta { display: flex; justify-content: space-between; margin-top: 1.8cqw; font: 500 3.7cqw/1.3 var(--fc-mono); color: #3A3A3C; }
.la__probs { margin-top: 2cqw; font-size: 3.85cqw; line-height: 1.35; color: #8E8E93; }
.la__probs b { color: #A3001C; font-weight: 700; transition: color .3s; }
.la__probs s, .la__probs b.is-off { color: #9A9AA0; font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; }
.la__region { margin-top: .6cqw; padding-bottom: 3.4cqw; font: 700 3.1cqw/1.2 var(--fc-font); letter-spacing: .06em; text-transform: uppercase; color: #6E6E73; }
.la__scale { display: flex; height: 1.5cqw; margin: 0 -5.2cqw; }
.la__scale i { flex: 1; }
.la__scale i:nth-child(1) { background: var(--eaws-1); }
.la__scale i:nth-child(2) { background: var(--eaws-2); }
.la__scale i:nth-child(3) { background: var(--eaws-3); }
.la__scale i:nth-child(4) { background: var(--eaws-4); }

/* ------------------------------------------------------------ lock screen -- */
.lock { width: 100%; }
.lock__screen {
  position: relative; container-type: inline-size;
  background:
    radial-gradient(62% 40% at 84% 40%, #2C55D4 0 70%, transparent 71%),
    radial-gradient(70% 34% at 4% 86%, #48B9A3 0 72%, transparent 73%),
    radial-gradient(40% 30% at 80% 92%, #1B3FA8 0 70%, transparent 71%),
    linear-gradient(165deg, #D7E8F1 0%, #9CC3DE 40%, #4F7ED0 100%);
}
.lock__island { position: absolute; top: 2.4%; left: 50%; width: 31%; height: 3.6%; margin-left: -15.5%; border-radius: 99px; background: #000; }
.lock__date { position: absolute; top: 11%; width: 100%; text-align: center; font: 600 5.4cqw/1 var(--fc-font); color: rgba(255,255,255,.92); }
.lock__time {
  position: absolute; top: 14%; width: 100%; text-align: center;
  font: 700 26cqw/1 var(--fc-font-display); letter-spacing: -.02em; color: rgba(240,246,255,.86);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* =================================================================== 1 HERO */
.hero__stage { overflow: clip; }
.hero__scene { position: absolute; inset: 0; pointer-events: none; }
.hero__plane { position: absolute; }
.hero__pt { transform: translate3d(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * .6px), 0); }
.hero__plane--rings { right: -8vw; top: 4vh; width: min(980px, 74vw); }
.hero__plane--range { left: 36vw; bottom: 12vh; width: min(860px, 50vw); }
.hero__range { width: 100%; height: auto; overflow: visible; }
.hero__dot { left: 51.3%; top: 17.7%; }
.hero__plane--phone { right: max(5vw, calc((100vw - var(--fc-maxw)) / 2)); top: calc(var(--fc-nav-h) + 4vh); width: clamp(220px, 20vw, 300px); }
.hero__plane--ridge { left: 0; right: 0; bottom: -2vh; height: 26vh; }
.hero__ridge { width: 100%; height: 100%; }
.hero__plane--phone .lock { transform-origin: 50% 40%; will-change: transform, filter, opacity; }

/* HERO REVEAL (js/home.js): the phone wakes, then scroll lifts the Live
   Activity out of the Lock Screen and sets it down near the centre while the
   phone drops back. The card's resting place is its END state; the script
   transforms it into the Lock Screen slot at the start. */
.hero__card {
  position: absolute; z-index: 5; left: 50%; top: 54%;  /* top = the card's vertical centre, see js */
  width: clamp(320px, 30vw, 460px); margin-left: calc(clamp(320px, 30vw, 460px) / -2);
  transform-origin: 0 0; will-change: transform;
}
.hero__card .la { transition: opacity .45s var(--fc-ease) .35s, box-shadow .3s; }
.lock__off {
  position: absolute; inset: 0; border-radius: inherit; background: #000;
  opacity: 0; pointer-events: none; transition: opacity .55s var(--fc-ease);
}
.lock__date, .lock__time { transition: opacity .5s var(--fc-ease) .15s, transform .6s var(--fc-ease) .15s; }
/* asleep: only once JS is there to wake it */
.js .hero:not(.is-awake) .lock__off { opacity: 1; }
.js .hero:not(.is-awake) .lock__date, .js .hero:not(.is-awake) .lock__time { opacity: 0; transform: translateY(6%); }
.js .hero:not(.is-awake) .hero__card .la { opacity: 0; }

.hero__copy {
  position: absolute; z-index: 20; left: var(--fc-edge-x); top: var(--fc-nav-h); bottom: 0;
  width: min(640px, 46vw);
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.hero__title { font-size: clamp(2.6rem, 1rem + 4.3vw, 5.4rem); }
.hero__lead { max-width: 30ch; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.hero__note { font-size: .875rem; color: var(--fc-ink-faint); }
.btn-lg { min-height: 52px; font-size: 1rem; padding: .85em 1.6em; }

@media (max-width: 860px) {
  .hero__copy { top: calc(var(--fc-nav-h) + 3vh); bottom: auto; width: auto; right: var(--fc-gutter); gap: 14px; justify-content: flex-start; }
  .hero__title { font-size: clamp(2.5rem, 1.2rem + 6vw, 3.6rem); }
  .hero__lead { font-size: 1.05rem; max-width: 34ch; }
  .hero__note { display: none; }
  .hero__plane--rings { width: 130vw; right: -45vw; top: 36vh; }
  .hero__plane--range { width: 112vw; left: -16vw; right: auto; bottom: 20vh; }
  .hero__plane--phone { width: min(42vw, 200px); right: auto; left: calc(50% - min(21vw, 100px)); top: auto; bottom: 4vh; }
  .hero__card { top: 70%; width: min(86vw, 360px); margin-left: calc(min(86vw, 360px) / -2); }
  .hero__plane--ridge { height: 18vh; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__lead { display: none; }
}

/* ================================================================ 2 LEVEL 3 */
/* Everything here is driven by js/home.js (LEVEL 3) through custom
   properties on the section: --t1..--t5 tile reveals, --t3up level 3 lift,
   --sx scale-out, --mp map in, --mz map push, --qa/--qb question lines. */
.tension__stage { overflow: clip; }
.tmap { position: absolute; inset: 0; pointer-events: none; opacity: calc(.22 + .78 * var(--mp, 0)); }
.tmap__plate {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 165svh); aspect-ratio: 1600 / 1000;
  transform: translate(-50%, -50%) scale(calc(1.18 - .18 * var(--mp, 0) + .22 * var(--mz, 0)));
  transform-origin: 40% 40%;
  will-change: transform;
}
.tmap__plate img { width: 100%; height: 100%; max-width: none; }
.tmap__dot { left: 40%; top: 40%; opacity: var(--dot, 0); transform: translateY(calc((1 - var(--dot, 0)) * -40px)) scale(calc(.6 + .4 * var(--dot, 0))); }
.tmap__chip {
  position: absolute; left: 40%; top: 40%; margin: 18px 0 0 16px; white-space: nowrap;
  padding: 5px 11px; border-radius: 99px; background: rgba(28,29,34,.9); border: 1px solid var(--fc-line-2);
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff;
  opacity: var(--chip, 0); transform: translateY(calc((1 - var(--chip, 0)) * 8px));
}
/* keep the copy legible over the plate: density only behind the text */
.tmap__fade { position: absolute; inset: 0; background: radial-gradient(90% 70% at 0% 45%, rgba(11,11,13,.92), rgba(11,11,13,.55) 55%, transparent 80%); }

.tension__scale, .tension__ask-wrap {
  position: absolute; inset: var(--fc-nav-h) 0 0; display: flex; flex-direction: column; justify-content: center;
}
.tension__scale { opacity: calc(1 - var(--sx, 0)); transform: translateY(calc(var(--sx, 0) * -6vh)); }
.tension__scale > * + * { margin-top: 22px; }
.tension__scale > .scale { margin-top: clamp(28px, 5vh, 56px); }
.tension__eyebrow, .tension__h { opacity: var(--hd, 0); transform: translateY(calc((1 - var(--hd, 0)) * 3vh)); }
.tension__ask-a { display: inline-block; opacity: var(--qa, 0); transform: translateY(calc((1 - var(--qa, 0)) * 3vh)); }
.tension__ask-b { display: inline-block; opacity: var(--qb, 0); transform: translateY(calc((1 - var(--qb, 0)) * 3vh)); }
.tension__ask { max-width: 16ch; }

.scale { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); max-width: 860px; padding: 0; }
.scale__t {
  position: relative; aspect-ratio: 1 / .86; border-radius: clamp(12px, 1.8vw, 22px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #111;
  opacity: calc(var(--in, 0) * (.3 + .7 * var(--hi, 0)));
  transform: translateY(calc((1 - var(--in, 0)) * 24px - var(--lift, 0) * 10px)) scale(calc(.94 + .06 * var(--in, 0) + .08 * var(--lift, 0)));
}
.scale__t--1 { background: var(--eaws-1); --in: var(--t1, 0); }
.scale__t--2 { background: var(--eaws-2); --in: var(--t2, 0); }
.scale__t--3 { background: var(--eaws-3); --in: var(--t3, 0); --lift: var(--t3up, 0); --hi: var(--t3up, 0);
  box-shadow: 0 10px 22px -6px rgba(255,153,0, calc(.55 * var(--t3up, 0))), 0 30px 60px -20px rgba(0,0,0, calc(.8 * var(--t3up, 0))); }
.scale__t--4 { background: var(--eaws-4); --in: var(--t4, 0); }
.scale__t--5 { background: repeating-conic-gradient(var(--eaws-4) 0 25%, #000 0 50%) 0 0 / 22% 25.6%; color: #fff; --in: var(--t5, 0); }
/* before level 3 lifts, every tile reads at full strength as it arrives */
.scale__t:not(.scale__t--3) { --hi: calc(1 - var(--t3up, 0)); }
.scale__t span { font: 700 clamp(1.8rem, 1rem + 3.4vw, 3.6rem)/1 var(--fc-font-display); }
.scale__t em { font-style: normal; font-size: clamp(.6rem, .45rem + .5vw, .8rem); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.scale__t--5 span, .scale__t--5 em { text-shadow: 0 1px 3px #000; }
.scale__caption { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eaws-3); opacity: var(--t3up, 0); }
@media (max-width: 560px) { .scale__t em { display: none; } }
@media (max-width: 860px) {
  .tmap__fade { background: linear-gradient(180deg, rgba(11,11,13,.9) 0, rgba(11,11,13,.55) 45%, transparent 75%); }
  .tension__scale, .tension__ask-wrap { justify-content: flex-start; padding-top: 6vh; }
  .tmap__dot, .tmap__chip { top: 52%; }
  .tmap__plate { transform-origin: 40% 52%; }
}

/* ================================================================ 3 CLIMB */
.climb__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(24px, 5vw, 80px);
  padding: calc(var(--fc-nav-h) + 3.5vh) var(--fc-edge-x) 5vh;
  align-items: start;
}
.climb__copy { grid-column: 1; grid-row: 1; }
.climb__eyebrow { margin-bottom: 14px; }
.climb__beats { display: grid; }
.climb__beat { grid-area: 1 / 1; }
.climb__beat .fc-body { margin-top: 12px; max-width: 52ch; }
.climb__mtn {
  grid-column: 1; grid-row: 2; align-self: end;
  position: relative; width: min(100%, calc((100svh - var(--fc-nav-h) - 270px) * 1.6)); aspect-ratio: 16 / 10;
}
.climb__svg { width: 100%; height: 100%; overflow: visible; }
/* 3D mountain (js/climb3d.js). The SVG drawing stays as the no-WebGL fallback.
   With WebGL the scene fills the whole left column, bleeding off the page
   edge and up behind the copy (a scrim keeps the text legible). */
@media (max-width: 860px) {
  .climb.is-3d .climb__mtn { width: auto; justify-self: stretch; margin-inline: calc(-1 * var(--fc-edge-x)); aspect-ratio: 4 / 3; }
}
@media (min-width: 861px) {
  .climb.is-3d .climb__mtn {
    grid-row: 1 / span 2; align-self: stretch; width: auto; aspect-ratio: auto; z-index: 0;
    margin: calc(-1 * (var(--fc-nav-h) + 3.5vh)) 0 -5vh calc(-1 * var(--fc-edge-x));
  }
  .climb.is-3d .climb__mtn::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, var(--fc-canvas) 0%, rgba(11,11,13,.85) 22%, rgba(11,11,13,0) 46%),
                linear-gradient(90deg, rgba(11,11,13,.7) 0%, rgba(11,11,13,0) 22%),
                linear-gradient(270deg, var(--fc-canvas) 0%, rgba(11,11,13,0) 16%);
  }
  .climb.is-3d .climb__copy { position: relative; z-index: 3; }
  .climb.is-3d .climb__key { top: auto; bottom: 6vh; left: var(--fc-edge-x); }
}
.climb__3d { position: absolute; inset: 0; }
.climb3d__canvas { display: block; width: 100%; height: 100%; }
.climb.is-3d .climb__svg, .climb.is-3d-pending .climb__svg { display: none; }
/* while the 3D loads: the same white grid, flat, fading in */
.climb.is-3d-pending .climb__3d {
  background:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 70%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 70%, #000, transparent 75%);
  transform: perspective(600px) rotateX(55deg); transform-origin: 50% 100%;
  animation: grid-breathe 1.6s ease-in-out infinite alternate;
}
@keyframes grid-breathe { from { opacity: .35; } to { opacity: .8; } }
.climb:not(.is-3d) .climb__you, .climb:not(.is-3d) .climb__lbl { display: none; }
.climb__lbl {
  position: absolute; left: 0; top: 0; z-index: 2; white-space: nowrap; pointer-events: none;
  transform: translate3d(var(--lx, 0), var(--ly, 0), 0) translate(-50%, -150%);
  padding: 3px 8px; border-radius: 6px; background: rgba(11,11,13,.78); transition: opacity .25s;
  font-size: clamp(.625rem, .55rem + .25vw, .75rem); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff;
}
/* the problem hatched on the terrain: name, what it means for you, where it sits */
.climb__probtag {
  position: absolute; left: var(--fc-edge-x, 16px); bottom: 6vh; z-index: 3; margin: 0; max-width: 34ch;
  display: grid; gap: 6px; justify-items: start;
  padding: 14px 18px 16px; border-radius: 16px; background: rgba(11,11,13,.92); border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.85);
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--fc-ease); pointer-events: none;
}
.climb__probname { display: flex; align-items: center; gap: 10px; font: 700 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.15 var(--fc-font-display); letter-spacing: -.02em; color: #fff; }
.climb__probname::before { content: ""; flex: none; width: 22px; height: 14px; border-radius: 3px;
  background: repeating-linear-gradient(135deg, #fff 0 2.5px, rgba(255,255,255,.25) 2.5px 5px); }
.climb__probtag em { font-style: normal; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.climb__probtag em.is-on { background: #FF3B30; color: #fff; }
.climb__probtag em.is-off { background: rgba(255,255,255,.14); color: #fff; }
.climb__probtag small { font-size: .9375rem; line-height: 1.4; color: rgba(255,255,255,.88); }
.climb__probtag.is-on { opacity: 1; transform: none; }
/* while a problem is hatched, the colour key steps aside */
.climb:has(.climb__probtag.is-on) .climb__key { opacity: 0; }
.climb__key { transition: opacity .3s; }
.climb [data-climb="c5b"].is-hit { color: #FF6961; }
.climb:not(.is-3d) .climb__probtag { display: none; }
@media (max-width: 860px) { .climb__probtag { right: 8px; left: 8px; bottom: 8px; max-width: none; padding: 10px 14px 12px; } }
.climb__you .climb__alt, .climb__you .climb__pill { transition: opacity .3s; }
.climb__you.is-wide .climb__alt, .climb__you.is-wide .climb__pill { opacity: 0; }
/* on red, the dot rings red */
.climb__you.is-red .gps-dot i { background: #FF3B30; }
.climb__you.is-red .gps-dot::before { background: rgba(255,59,48,.35); border-color: rgba(255,59,48,.6); }
/* stepping onto red: the card nudges once, like a Live Activity alert */
.la.is-alert { animation: la-nudge .7s var(--fc-ease) 1; }
@keyframes la-nudge {
  0% { transform: none; box-shadow: 0 0 0 0 rgba(255,59,48,0); }
  15% { transform: translateX(-5px) scale(1.02); box-shadow: 0 0 0 6px rgba(255,59,48,.45); }
  35% { transform: translateX(5px) scale(1.02); }
  55% { transform: translateX(-3px); }
  100% { transform: none; box-shadow: 0 0 0 14px rgba(255,59,48,0); }
}
/* the hand-off to the aim section */
.climb__next { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; color: #4DA3FF; text-decoration: none; }
.climb__next::after { content: "\2193"; transition: transform .25s var(--fc-ease); }
.climb__next:hover::after { transform: translateY(3px); }
.climb__poi {
  position: absolute; left: 0; top: 0; z-index: 1; white-space: nowrap; pointer-events: none;
  transform: translate3d(var(--lx, 0), var(--ly, 0), 0) translate(-50%, calc(-100% + 3px));
  display: grid; justify-items: center; gap: 1px; opacity: 0; transition: opacity .3s;
  font-size: clamp(.625rem, .58rem + .2vw, .75rem); font-weight: 600; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(11,11,13,.9);
}
.climb__poi b { font-weight: 500; font-size: .92em; color: var(--fc-ink-soft); font-variant-numeric: tabular-nums; }
.climb__poi::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; margin-top: 3px; box-shadow: 0 0 0 2px rgba(11,11,13,.7); }
.climb:not(.is-3d) .climb__poi { display: none; }
.climb__key { position: absolute; left: 0; top: 0; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .6875rem; color: var(--fc-ink-soft); }
.climb__key li { display: flex; align-items: center; gap: 8px; }
.climb__key li::before { content: ""; width: 14px; height: 8px; border-radius: 2px; }
.climb__key--red::before { background: #FF3B30; }
.climb__key--amber::before { background: #FF9500; }
.climb__key--route::before { height: 3px !important; background: #4DA3FF; }
.climb__key--ghost::before { height: 2px !important; background: repeating-linear-gradient(90deg, #FF6B5E 0 4px, transparent 4px 7px); }
.climb:not(.is-3d) .climb__key { display: none; }
.climb__you { position: absolute; left: 0; top: 0; z-index: 4; transform: translate3d(var(--px, 0), var(--py, 0), 0); will-change: transform; }
.climb__alt { position: absolute; left: 20px; bottom: 16px; display: grid; line-height: 1.05; white-space: nowrap; }
.climb__you.is-right .climb__alt { left: auto; right: 22px; bottom: auto; top: 14px; text-align: right; }
.climb__you.is-right .climb__pill { left: auto; right: 18px; top: auto; bottom: 14px; }
.climb__alt small { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-ink-soft); }
.climb__alt b { font: 700 clamp(1.4rem, 1rem + 1.6vw, 2.25rem)/1.05 var(--fc-font-display); letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.climb__alt small, .climb__asp { text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.climb__pill {
  position: absolute; left: 16px; top: 12px; white-space: nowrap;
  background: var(--fc-accent); color: #fff; border-radius: 99px; padding: 4px 10px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.climb__phone { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%; max-width: 450px; justify-self: end; }
.climb__on { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fc-ink-soft); }
.climb__on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fc-ink-soft); }
.climb__sample { margin-top: 14px; font-size: .8125rem; line-height: 1.45; color: var(--fc-ink-faint); }
.cl-fill { transition: opacity .4s; }

/* aspect: the arrow next to your altitude points the way the slope faces */
.climb__asp { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-style: normal; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: #4DA3FF; }
.climb__asp svg { width: 16px; height: 16px; transform: rotate(var(--hd, 0deg)); }
.climb__you.is-right .climb__asp { justify-content: flex-end; }

/* today's problems, filtered live */
.probs { margin-top: 14px; padding: 14px 16px 10px; border-radius: 18px; background: rgba(28,29,34,.72); border: 1px solid var(--fc-line); box-shadow: var(--fc-edge); }
.probs__head { display: grid; grid-template-columns: 64px auto 1fr; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--fc-line); }
.probs__head small { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-ink-soft); }
.probs__head b { font: 700 1.5rem/1 var(--fc-font-display); letter-spacing: -.02em; color: #4DA3FF; }
.probs__title { justify-self: end; text-align: right; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-ink-soft); max-width: 12ch; line-height: 1.3; }
.compass svg { width: 64px; height: 64px; overflow: visible; }
.compass text { font: 700 11px/1 var(--fc-font); fill: rgba(255,255,255,.6); dominant-baseline: middle; }
.compass__sector { transition: transform .25s linear; }
.probs__list { list-style: none; padding: 0; margin: 0; }
.probs__list li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.probs__list li:last-child { border-bottom: 0; }
.rose svg { width: 26px; height: 26px; display: block; }
.rose__w { fill: rgba(255,255,255,.08); stroke: rgba(11,11,13,.9); stroke-width: .6; transition: fill .3s; }
.rose__w.is-on { fill: #FF9500; }
.rose__w.is-you { stroke: #0A84FF; stroke-width: 1.8; }
.probs__name b { position: relative; display: inline-block; font-size: .875rem; font-weight: 600; color: #fff; transition: color .3s; }
.probs__name b::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--fc-ease);
}
.probs__name small { display: block; font-size: .6875rem; color: var(--fc-ink-faint); line-height: 1.3; }
.probs__list em {
  font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 8px; border-radius: 6px; background: rgba(255,59,48,.18); color: #FF6961; transition: background .3s, color .3s;
}
.probs__list li.is-off b { color: var(--fc-ink-faint); }
.probs__list li.is-off b::after { transform: scaleX(1); }
.probs__list li.is-off em { background: rgba(255,255,255,.06); color: var(--fc-ink-faint); }
.probs__list li.is-off .rose { opacity: .55; }
/* the problem drawn on the mountain right now (summit beat) */
.probs__list li { transition: background .3s, box-shadow .3s; border-radius: 10px; }
.probs__list li.is-focus { background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 #fff; }
.la__probs b.is-focus { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* the card's problem line follows the same verdicts */
.la__probs b { position: relative; }
@media (max-height: 860px) and (min-width: 861px) { .climb__on { display: none; } .climb__sample { display: none; } }
@media (max-width: 860px) { .probs { display: none; } }

@media (max-width: 860px) {
  .climb__stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-top: calc(var(--fc-nav-h) + 2vh); row-gap: 10px; align-content: start; }
  .climb__copy, .climb__mtn, .climb__phone { grid-column: 1; }
  .climb__mtn { grid-row: 2; width: min(100%, calc(36svh * 1.6)); justify-self: center; }
  .climb__key { display: none; }
  .climb__phone { grid-row: 3; justify-self: center; max-width: 360px; }
  .climb__on, .climb__sample { display: none; }
  .climb__eyebrow { margin-bottom: 8px; }
  .climb__beat .fc-h--2xl { font-size: clamp(1.55rem, 1rem + 3vw, 2.1rem); }
  .climb__beat .fc-body { font-size: .9375rem; margin-top: 8px; }
  .climb__alt b { font-size: 1.25rem; }
}
@media (max-width: 860px) and (max-height: 760px) { .climb__beat .fc-body { display: none; } }

/* =================================================================== 4 AIM */
.aim__stage { display: flex; align-items: center; }
.aim__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.aim__copy > * + * { margin-top: 20px; }
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; color: var(--fc-ink); font-weight: 500; }
.ticks li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--fc-accent); transform: translateY(-1px); }
.aim__visual { justify-self: center; display: grid; justify-items: center; gap: 16px; }
.aim__phone { width: min(clamp(240px, 24vw, 330px), calc((100svh - var(--fc-nav-h) - 120px) * 0.4598)); }
.aim__screens { position: relative; background: #000; }
/* The engine's stage rule would stretch the clip over the whole stage; here
   it lives inside the phone screen. */
.aim .aim__screens :is(video[data-sc-scrub], .sc-stage__poster) {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.aim__cap { display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; color: var(--fc-ink-soft); }
.aim__chip { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--fc-line-2); background: var(--fc-glass-2); transition: color .2s, border-color .2s; }
/* the chip for the half of the clip you're in lights up (act progress --sc-p) */
.aim__chip--map { opacity: calc(1 - .55 * clamp(0, (var(--sc-p, 0) - .42) * 6, 1)); }
.aim__chip--3d { opacity: calc(.45 + .55 * clamp(0, (var(--sc-p, 0) - .42) * 6, 1)); color: var(--fc-ink); border-color: rgba(10,132,255,.6); }
.aim__arrow { width: 28px; height: 2px; background: radial-gradient(circle, var(--fc-accent) 0 1px, transparent 1.3px) 0 50% / 6px 2px repeat-x; }
/* the layers, once the clip has landed on the 3D view (js/home.js, AIM LAYERS) */
.aim__layers { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.aim.is-layers .aim__layers { opacity: 1; visibility: visible; }
.aim__layers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; pointer-events: none; -webkit-user-drag: none; }
.aim__layers img.is-on { opacity: 1; }
.aim__layers img.is-in { opacity: 1; z-index: 1; }
.aim__layers:active { cursor: grabbing; }
.aim__wipe { position: absolute; top: 13%; bottom: 0; left: 0; width: 3px; margin-left: -1.5px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .15s;
  background: rgba(255,255,255,.9); box-shadow: 0 0 14px 2px rgba(255,255,255,.6); }
/* the < > in the app's layer pill */
.aim__hit { position: absolute; top: 6%; height: 7%; width: 16%; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; }
.aim__hit--prev { left: 20%; } .aim__hit--next { left: 64%; }
/* hold to read a point: the app's readout under the layer pill, a pin at the finger */
.aim__layers { container-type: inline-size; -webkit-touch-callout: none; }
/* the position card's live values, painted over the still's own (image px / 640 x 1392) */
.aim__card { position: absolute; inset: 0; z-index: 4; container-type: inline-size; pointer-events: none; opacity: 0; transition: opacity .12s; }
.aim__layers.is-probe .aim__card.is-on { opacity: 1; }
.aim__cs, .aim__ca { position: absolute; display: flex; align-items: baseline; gap: 2.4cqw; white-space: nowrap; }
.aim__cs { left: 6.25%; top: 83.48%; width: 46.9%; height: 3.74%; padding-left: .9cqw; align-items: flex-end;
  background: linear-gradient(90deg, rgb(252,168,155), rgb(229,206,175)); }
.aim__cs b { font: 700 8.4cqw/1 var(--fc-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: -.3cqw; }
.aim__cs small { font: 400 3.5cqw/1 ui-monospace, "SF Mono", Menlo, monospace; color: #6E6E73; margin-bottom: .5cqw; }
.aim__cs b.is-ok { color: #2DBE52; } .aim__cs b.is-warn { color: #F29A00; } .aim__cs b.is-red { color: #FF3B30; }
.aim__cb { position: absolute; left: 7.19%; top: 88.29%; width: 85.6%; height: .82%; border-radius: 99px; background: rgb(224,228,231); overflow: hidden; }
.aim__cb i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; }
.aim__cb [data-p="fill"] { width: 2%; background: #34C759; transition: width .08s; }
.aim__cb [data-p="fill"].is-warn { background: #FF9500; } .aim__cb [data-p="fill"].is-red { background: #FF3B30; }
.aim__ct { left: 82% !important; width: .5%; border-radius: 0 !important; background: rgb(173,17,30); }
.aim__ca { left: 6.25%; top: 89.85%; width: 34%; height: 2.95%; padding-left: 1cqw; align-items: center;
  background: linear-gradient(90deg, rgb(247,168,155), rgb(238,192,167));
  font: 500 3.5cqw/1 ui-monospace, "SF Mono", Menlo, monospace; color: #1C1C1E; }
.aim__pin {
  position: absolute; z-index: 4; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border-radius: 50%;
  border: .9cqw solid #fff; background: rgba(10,132,255,.35); box-shadow: 0 0 0 .4cqw rgba(0,0,0,.25), 0 1cqw 3cqw rgba(0,0,0,.35);
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--fc-ease); pointer-events: none;
}
.aim__layers.is-probe .aim__pin { opacity: 1; transform: none; }
.aim__layers.is-probe .aim__pin.is-off { opacity: .45; }
/* the demo's finger: a soft press ring around the pin */
.aim__layers.is-demo .aim__pin::after {
  content: ""; position: absolute; inset: -4.5cqw; border-radius: 50%; background: rgba(255,255,255,.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.aim__layers.is-probe .aim__swipe { opacity: 0 !important; }
/* the swipe hint: a hand moving left and right, until the first touch */
.aim__swipe {
  position: absolute; left: 50%; top: 48%; z-index: 4; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  background: rgba(11,11,13,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18); color: #fff;
  opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s var(--fc-ease);
}
.aim__swipe svg { width: 64%; height: 64%; overflow: visible; }
.aim__swipe .aim__hand { animation: aim-hand 1.8s var(--fc-ease) infinite; transform-origin: 50% 80%; }
.aim.is-layers:not(.is-touched) .aim__swipe { opacity: 1; transform: none; }
@keyframes aim-hand { 0%, 100% { transform: translateX(-16%) rotate(-8deg); } 50% { transform: translateX(16%) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .aim__swipe .aim__hand { animation: none; } }
.aim__cap { flex-wrap: wrap; justify-content: center; }
.aim__steps { display: flex; align-items: center; gap: 10px; }
.aim__pick, .aim__hint { display: none; }
.aim.is-layers .aim__steps { display: none; }
.aim.is-layers .aim__pick { display: flex; gap: 6px; }
.aim.is-layers .aim__hint { display: block; flex-basis: 100%; text-align: center; font-size: .75rem; font-weight: 500; color: var(--fc-ink-faint); }
.aim__pick { flex-wrap: wrap; justify-content: center; max-width: 360px; }
.aim__pick button { font: inherit; font-size: .75rem; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--fc-line-2); background: var(--fc-glass-2); color: var(--fc-ink-soft); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.aim__pick button:hover { color: var(--fc-ink); }
.aim__pick button[aria-pressed="true"] { color: var(--fc-ink); border-color: rgba(10,132,255,.7); background: rgba(10,132,255,.16); }
.aim__pick button:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }
@media (max-width: 860px) {
  .aim__stage { align-items: flex-start; padding-top: calc(var(--fc-nav-h) + 2vh); }
  .aim__inner { grid-template-columns: 1fr; gap: 16px; }
  .aim__copy > * + * { margin-top: 12px; }
  .aim__copy .fc-h--3xl { font-size: clamp(1.8rem, 1rem + 4vw, 2.4rem); }
  .aim__copy .fc-body { font-size: .9375rem; }
  .aim .ticks { display: none; }
  .aim__phone { width: min(64vw, calc((100svh - var(--fc-nav-h) - 250px) * 0.4598)); }
  .aim__cap { display: none; }
  .aim.is-layers .aim__cap { display: flex; gap: 8px; }
  .aim.is-layers .aim__hint { display: none; }
}

/* ================================================================ 5 LENSES */
.lenses__stage { display: flex; align-items: center; }
.lenses__rail {
  align-items: center; gap: clamp(28px, 4vw, 64px);
  padding: 0 var(--fc-edge-x); width: max-content;
  --lens-w: min(clamp(210px, 20vw, 290px), calc((100svh - var(--fc-nav-h) - 210px) * .46));
}
.lenses__lead { flex: 0 0 min(440px, 82vw); }
.lenses__lead .fc-body { margin-top: 18px; max-width: 34ch; }
.lens { flex: 0 0 var(--lens-w); width: var(--lens-w); }
.lens__phone { width: 100%; aspect-ratio: 640 / 1391; }
.lens__phone img { object-position: top; }
.lens h3 { margin-top: 20px; font-size: 1.25rem; }
.lens__q { margin-top: 4px; font-weight: 600; color: var(--fc-accent); font-size: .9375rem; }
.lens__a { margin-top: 4px; font-size: .875rem; line-height: 1.45; color: var(--fc-ink-soft); }
.lenses__note { flex: 0 0 min(360px, 76vw); display: grid; gap: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .lens { opacity: calc(.55 + .45 * min(1, max(0, (var(--sc-p, 0) * 6 - var(--i, 0) + 1.2)))); }
  .lens:nth-of-type(1) { --i: 0; } .lens:nth-of-type(2) { --i: 1; } .lens:nth-of-type(3) { --i: 2; } .lens:nth-of-type(4) { --i: 3; }
}
@media (max-width: 860px) {
  .lenses__rail { --lens-w: min(62vw, calc((100svh - var(--fc-nav-h) - 200px) * .46)); }
}

/* ================================================================ 6 RESORT */
.resort { padding: clamp(5rem, 10vh, 8rem) 0 clamp(5rem, 12vh, 9rem); }
.resort__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.resort__row + .resort__row { margin-top: clamp(80px, 14vh, 150px); }
.resort__row--rev > .resort__phones { order: -1; }
.resort__copy > * + * { margin-top: 20px; }
.resort__links { display: grid; gap: 10px; }
.resort__phones { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.resort__phones .fc-phone { width: clamp(190px, 18vw, 260px); flex: none; }
.resort__phones .fc-phone + .fc-phone { margin-left: -28px; margin-top: 70px; }
.resort__phones .fc-phone:first-child { z-index: 1; }
.resort__phones--b .fc-phone { width: clamp(230px, 22vw, 300px); }   /* one phone: the download */
.quote { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 1px solid var(--fc-line-2); }
.quote p { font: 600 1.25rem/1.35 var(--fc-font-display); letter-spacing: -.02em; color: var(--fc-ink); }
.quote footer { all: unset; display: block; margin-top: 8px; font-size: .875rem; color: var(--fc-ink-soft); }
@media (max-width: 860px) {
  .resort__row { grid-template-columns: 1fr; }
  .resort__row--rev > .resort__phones { order: 0; }
  .resort__phones .fc-phone { width: min(44vw, 210px); }
  .resort__phones .fc-phone + .fc-phone { margin-left: -16px; margin-top: 44px; }
  .resort__phones--b .fc-phone { width: min(60vw, 250px); }
}

/* ============================================================ 6b ALERTS */
.alerts { padding: clamp(4rem, 9vh, 7rem) 0 clamp(5rem, 12vh, 9rem); }
.alerts__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.alerts__copy > * + * { margin-top: 20px; }
.alerts__feat { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; margin-top: 28px; }
.alerts__feat h3 { font: 600 1.25rem/1.3 var(--fc-font-display); letter-spacing: -.02em; color: var(--fc-ink); }
.alerts__feat p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--fc-ink-soft); max-width: 52ch; }
.alerts__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--fc-line-2); background: var(--fc-glass-2); }
.alerts__ic svg { width: 22px; height: 22px; }
.alerts__ic--snow { color: #64D2FF; }
.alerts__ic--aval { color: #FF9F0A; }
.alerts__note { font-size: .875rem; color: var(--fc-ink-faint); }
.alerts__visual { justify-self: center; }
.alerts__phone { width: clamp(240px, 22vw, 320px); }
/* iOS notification banners on the Lock Screen (sizes in cqw of the screen) */
.alerts__stack { position: absolute; left: 4%; right: 4%; top: 46%; display: grid; gap: 2.4cqw; }
.notif {
  display: grid; grid-template-columns: 11cqw 1fr; gap: 3.4cqw; align-items: start;
  padding: 3.6cqw 4cqw; border-radius: 6.4cqw;
  background: rgba(245,245,247,.72); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 2cqw 6cqw rgba(0,0,0,.18); color: #1C1C1E; text-align: left;
}
.notif img { width: 11cqw; height: 11cqw; border-radius: 2.6cqw; }
.notif p { margin: 0; }
.notif__top { display: flex; justify-content: space-between; gap: 2cqw; font-size: 3.4cqw; line-height: 1.2; color: #3C3C43; }
.notif__top b { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 3.1cqw; }
.notif__top span { color: #6E6E73; }
.notif__t { margin-top: .6cqw !important; font: 600 4cqw/1.25 var(--fc-font); }
.notif__b { margin-top: .4cqw !important; font-size: 3.8cqw; line-height: 1.3; }
@media (max-width: 860px) {
  .alerts__row { grid-template-columns: 1fr; }
  .alerts__phone { width: min(70vw, 300px); }
}

/* scroll-scrubbed phone clips (js/home.js, SCRUB): the still is the first
   frame and stays until the clip has a frame to show */
.scrubvid { position: relative; background: #000; }
.scrubvid img, .scrubvid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scrubvid video { opacity: 0; transition: opacity .3s; }
.scrubvid.is-ready video { opacity: 1; }
/* a 9:16 screen recording (the offline download) gets a 9:16 screen */
.fc-phone--169 { aspect-ratio: 860 / 1494; }

/* ================================================================ 7 LAYERS */
.layers__stage { display: grid; place-items: center; padding-inline: var(--fc-gutter); }
.layers__inner { width: min(720px, 100%); }
.layers__head { margin-bottom: clamp(28px, 5vh, 48px); }
.layers__head .fc-eyebrow { margin-bottom: 14px; }
.stack { list-style: none; display: grid; gap: 14px; }
.stack__l {
  display: flex; align-items: center; gap: 18px;
  padding: clamp(16px, 2.6vh, 24px) 24px; border-radius: 18px;
  background: rgba(44, 46, 52, .72); border: 1px solid var(--fc-line-2);
  box-shadow: var(--fc-edge), 0 14px 30px -14px rgba(0,0,0,.7);
}
.stack__l i { flex: none; width: 14px; height: 14px; border-radius: 3px; }
.stack__l b { display: block; font: 600 clamp(1.15rem, .9rem + 1vw, 1.6rem)/1.15 var(--fc-font-display); letter-spacing: -.02em; }
.stack__l small { display: block; margin-top: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-ink-soft); }
.stack__l--fc i { background: var(--fc-accent); }
.stack__l--bulletin i { background: var(--eaws-3); }
.stack__l--you { border: 1.5px solid #34C759; box-shadow: var(--fc-edge), 0 10px 26px -10px rgba(52,199,89,.45); }
.stack__l--you i { background: #34C759; }
.stack__warn {
  display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 8px;
  background: #E5483B; color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

/* ================================================================= 8 TRUST */
.trust { padding: clamp(4rem, 9vh, 7rem) 0 clamp(4rem, 9vh, 7rem); }
.trust__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 6vw, 96px); }
.ledger { display: grid; }
.ledger > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--fc-line); }
.ledger > div:last-child { border-bottom: 1px solid var(--fc-line); }
.ledger dt { font-weight: 600; color: var(--fc-ink); }
.ledger dd { margin: 0; color: var(--fc-ink-soft); }
.ledger__flags dt { color: #FF453A; }
.ledger__flags dd { color: var(--fc-ink); font-weight: 600; }
.android {
  grid-column: 1 / -1; margin-top: clamp(40px, 8vh, 80px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end;
}
.android .fc-body { margin-top: 10px; }
.android__form { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.android__form .fc-input { flex: 1 1 240px; }
.android__status { width: 100%; min-height: 1.4em; font-size: .875rem; }
.android__status.ok { color: #30D158; font-weight: 600; }
.android__status.err { color: #FF453A; font-weight: 600; }
/* sending: a spinner in the button; sent: the thank-you over the field */
.android__form button { position: relative; }
.android__form button.is-busy { color: transparent; opacity: 1; border-color: rgba(10,132,255,.6); }
.android__form button.is-busy::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2.6px solid rgba(255,255,255,.22); border-top-color: #0A84FF; border-right-color: #0A84FF; animation: fc-spin .7s linear infinite;
}
@keyframes fc-spin { to { transform: rotate(360deg); } }
.android__done {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; border-radius: 28px; background: rgba(48,209,88,.14); box-shadow: inset 0 0 0 1.5px rgba(48,209,88,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-weight: 600; font-size: .9375rem; line-height: 1.3;
  opacity: 0; transform: scale(.97); pointer-events: none; transition: opacity .35s var(--fc-ease), transform .35s var(--fc-ease);
}
.android__done svg { flex: none; width: 24px; height: 24px; transform: scale(.4); transition: transform .45s cubic-bezier(.3,1.6,.5,1) .12s; }
.android__form.is-done .android__done { opacity: 1; transform: none; pointer-events: auto; }
.android__form.is-done .android__done svg { transform: none; }
.android__form.is-done .fc-input, .android__form.is-done button { visibility: hidden; }

@media (max-width: 860px) {
  .trust__inner, .android { grid-template-columns: 1fr; }
  .ledger > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ================================================================= 9 CLOSE */
.close__stage { display: flex; flex-direction: column; }
.close__inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2vh var(--fc-gutter) 0; }
.close__icon { width: clamp(64px, 9vh, 104px); height: auto; border-radius: 22%; box-shadow: 0 0 0 1px var(--fc-line), 0 20px 40px -12px rgba(0,0,0,.8); }
.close__word {
  margin-top: clamp(16px, 3vh, 32px);
  font: 700 clamp(3.4rem, 1rem + 11vw, 10rem)/.92 var(--fc-font-display); letter-spacing: -.055em;
}
.close__line { margin-top: clamp(10px, 2vh, 20px); font: 700 clamp(1.7rem, 1rem + 3.2vw, 3.6rem)/1.02 var(--fc-font-display); letter-spacing: -.045em; color: var(--fc-ink-soft); }
.close__kit { margin-top: 16px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fc-ink-soft); }
.close__ctas { margin-top: clamp(20px, 3.5vh, 36px); display: grid; justify-items: center; gap: 10px; }
.close__note { font-size: .8125rem; color: var(--fc-ink-faint); }
.close__social { font-size: .875rem; color: var(--fc-ink-soft); }
.close__social a { color: var(--fc-ink); text-decoration: none; font-weight: 600; }
.close__social a:hover { text-decoration: underline; }
.close__foot { padding: 20px var(--fc-gutter) 22px; background: transparent; border-top: 1px solid var(--fc-line); }
.close__foot .footer-links { justify-content: center; }
.close__foot .footer-copy { text-align: center; }
@media (max-height: 700px) { .close__kit { display: none; } .close__foot { padding-block: 12px; } }

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hero__pt { transform: none; }
  .la__fill, .la__tick { transition: none; }
}

/* data sources (trust): a logo wall, grouped */
.sources { grid-column: 1 / -1; display: grid; gap: clamp(28px, 4vh, 44px); }
.sources > .fc-eyebrow { margin-bottom: -18px; }
.sources__g h4 { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-accent); margin-bottom: 14px; }
.sources__g ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.sources__g a { height: 100%; display: grid; grid-template-rows: minmax(40px, auto) auto; gap: 10px; align-content: start; padding: 18px 16px 14px;
  border-radius: 16px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--fc-line); text-decoration: none;
  transition: background .25s, box-shadow .25s; }
.sources__g a:hover { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(10,132,255,.55); }
.sources__mark { display: flex; align-items: center; }
.sources__mark img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; opacity: .9; transition: opacity .25s; }
.sources__g a:hover .sources__mark img { opacity: 1; }
.sources__mark b { font: 700 1.15rem/1.1 var(--fc-font-display); color: #fff; letter-spacing: -.01em; }
.sources__what { font-size: .8125rem; line-height: 1.4; color: var(--fc-ink-soft); }
.sources__note { font-size: .875rem; color: var(--fc-ink-faint); }
/* ============================================================ 10 MERCH */
.merch { position: relative; padding: clamp(5rem, 12vh, 9rem) 0 0; overflow: hidden; }
.merch__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* the product on a studio spotlight, no box */
.merch__stage { position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 1 / 1.05; }
.merch__glow { position: absolute; inset: -6% -14%; border-radius: 50%;
  background: radial-gradient(closest-side, #F2F5FA, rgba(214,224,238,.92) 38%, rgba(120,150,200,.32) 66%, rgba(10,132,255,.08) 84%, transparent 100%); }
.merch__stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3%; height: 5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
.merch__shot { position: relative; z-index: 1; width: min(70%, 430px); margin-right: 14%; display: block; animation: merch-float 6s ease-in-out infinite; }
.merch__hoodie { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 30px rgba(0,0,0,.45)); }
@keyframes merch-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .merch__shot { animation: none; } }
/* a loupe on the embroidery, tied to the chest by a fine line */
.merch__loupe { position: absolute; z-index: 2; right: -2%; top: 8%; width: clamp(120px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: #111; box-shadow: 0 0 0 3px #fff, 0 22px 44px -12px rgba(0,0,0,.8); }
.merch__loupe i { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 520% auto;
  background-position: var(--bx) var(--by); }
.merch__detail { position: absolute; z-index: 2; right: -2%; top: calc(8% + clamp(120px, 15vw, 190px) + 14px); box-sizing: border-box; width: clamp(120px, 15vw, 190px);
  text-align: center; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1C1C1E;
  background: #fff; border-radius: 99px; padding: 6px 10px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
.merch__copy > * + * { margin-top: 18px; }
.merch__prod { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--fc-line); }
.merch__prod b { font: 700 1.25rem/1.2 var(--fc-font-display); color: var(--fc-ink); letter-spacing: -.02em; }
.merch__prod span { font-size: .9375rem; color: var(--fc-ink-soft); }
.merch__offer { display: grid; gap: 10px; justify-items: start; padding: 22px 24px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(10,132,255,.22), rgba(10,132,255,.05) 60%), #121317;
  box-shadow: 0 0 0 1px rgba(10,132,255,.45), 0 30px 60px -24px rgba(10,132,255,.35); }
.merch__badge { font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: #0A84FF; color: #fff; }
.merch__offer-t { font: 700 clamp(1.2rem, 1rem + 1vw, 1.6rem)/1.2 var(--fc-font-display); letter-spacing: -.02em; color: var(--fc-ink); }
.merch__offer-d { font-size: .9375rem; color: var(--fc-ink-soft); }
.merch__cta { margin-top: 24px !important; }
@media (max-width: 860px) {
  .merch__inner { grid-template-columns: 1fr; }
  .merch__stage { width: min(100%, 420px); justify-self: center; }
  .merch__loupe, .merch__detail { width: 104px; right: 0; } .merch__detail { top: calc(8% + 116px); font-size: .5625rem; padding: 4px 6px; }
}
.merch__foot { margin-top: clamp(56px, 10vh, 110px); }
.merch__meta { font-size: .8125rem; color: var(--fc-ink-faint); }
.merch__grid--one { grid-template-columns: minmax(0, 420px); justify-content: center; }

.hero__android { color: var(--fc-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.hero__android:hover { text-decoration: underline; }
#android { scroll-margin-top: calc(var(--fc-nav-h) + 24px); }
.soon-chip { display: inline-block; margin-bottom: 12px; padding: 5px 11px; border-radius: 99px; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(191,90,242,.22); box-shadow: inset 0 0 0 1px rgba(191,90,242,.7); }

/* ======================================================== 3b PROTECT CHECKS */
/* the app's recording on the right; the list follows it (js/home.js,
   PROTECT): the running check is open with what it makes sure of */
.pchk__stage { display: flex; align-items: center; }
.pchk__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.pchk__copy > * + * { margin-top: 18px; }
.pchk__offline { padding: 12px 16px; border-radius: 14px; background: rgba(10,132,255,.1); box-shadow: inset 0 0 0 1px rgba(10,132,255,.4); color: var(--fc-ink); font-size: .875rem; line-height: 1.5; }
.pchk__visual { margin: 0; justify-self: center; }
.pchk__phone { width: min(clamp(240px, 22vw, 310px), calc((100svh - var(--fc-nav-h) - 120px) * .464)); }
.pchk__screen { position: relative; background: #000; }
.pchk__screen img, .pchk__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pchk video { opacity: 0; transition: opacity .3s; }
.pchk video.is-ready { opacity: 1; }
.pchk__list { list-style: none; margin: 0; padding: 0; }
.pchk__copy > .pchk__list { margin-top: 26px; }
.pchk__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.07); opacity: .4; transition: opacity .3s; }
.pchk__list li.is-run, .pchk__list li.is-ok { opacity: 1; }
.pchk__ic { position: relative; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.pchk__list li.is-run .pchk__ic { box-shadow: none; border: 2.5px solid rgba(255,255,255,.18); border-top-color: #30D158; animation: fc-spin .8s linear infinite; box-sizing: border-box; }
.pchk__list li.is-ok .pchk__ic { box-shadow: none; background: #30D158; }
.pchk__list li.is-ok .pchk__ic i { position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pchk__b { display: grid; }
.pchk__b b { font-weight: 600; color: #fff; font-size: .9875rem; line-height: 22px; }
.pchk__b em { font-style: normal; font-size: .875rem; line-height: 1.45; color: var(--fc-ink-soft);
  display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s var(--fc-ease), opacity .35s; }
.pchk__b em > span { overflow: hidden; }
.pchk__list li.is-open em { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; }
@media (max-height: 820px) and (min-width: 861px) { .pchk__copy .fc-body { display: none; } }
@media (max-width: 860px) {
  .pchk__stage { align-items: flex-start; padding-top: calc(var(--fc-nav-h) + 2vh); }
  .pchk__inner { grid-template-columns: 1fr; gap: 12px; }
  .pchk__copy { display: contents; }
  .pchk__copy > * + * { margin-top: 0; }
  .pchk__copy .fc-body, .pchk__offline { display: none; }
  .pchk__copy .fc-h--2xl { font-size: clamp(1.5rem, .9rem + 3.6vw, 2rem); }
  .pchk__visual { order: 1; }
  .pchk__list { order: 2; min-height: 7.5em; }
  .pchk__phone { width: min(56vw, calc((100svh - var(--fc-nav-h) - 300px) * .464)); }
  .pchk__list li { display: none; border: 0; padding: 0; }
  .pchk__list li.is-open { display: grid; }
  .pchk__b em { font-size: .8125rem; }
}

/* ============================================= 4a COMPASS (aim from where you stand) */
.cmp__stage { display: flex; align-items: center; }
.cmp__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cmp__copy > * + * { margin-top: 20px; }
.cmp__visual { position: relative; margin: 0; justify-self: center; display: grid; justify-items: center; gap: 14px; }
.cmp__chip { display: grid; justify-items: center; gap: 6px; }
.cmp__chipv { position: relative; display: block; width: clamp(170px, 15vw, 210px); aspect-ratio: 408 / 120; border-radius: 99px; overflow: hidden; }
.cmp__chipv img, .cmp__chipv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__chip small { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-ink-soft); }
.cmp__phone { width: min(clamp(240px, 22vw, 310px), calc((100svh - var(--fc-nav-h) - 200px) * .458)); }
.cmp__screen { position: relative; background: #000; }
.cmp__screen img, .cmp__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cmp video { opacity: 0; transition: opacity .3s; }
.cmp video.is-ready { opacity: 1; }
@media (max-width: 860px) {
  .cmp__stage { align-items: flex-start; padding-top: calc(var(--fc-nav-h) + 2vh); }
  .cmp__inner { grid-template-columns: 1fr; gap: 14px; }
  .cmp__copy > * + * { margin-top: 10px; }
  .cmp__copy .fc-h--3xl { font-size: clamp(1.7rem, 1rem + 4vw, 2.3rem); }
  .cmp__copy .fc-body { font-size: .9375rem; }
  .cmp__phone { width: min(56vw, calc((100svh - var(--fc-nav-h) - 330px) * .458)); }
  .cmp__chipv { width: 150px; } .cmp__chip small { font-size: .5625rem; }
}

/* keep scrolling (js/home.js, MORE): in the middle of the screen, readable,
   but see-through so the stage behind it still shows */
.more { position: fixed; left: 50%; top: 50%; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 26px 14px; border-radius: 22px;
  background: rgba(11,11,13,.42); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 50px -20px rgba(0,0,0,.6); color: #fff;
  font: 700 .9375rem/1 var(--fc-font, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  opacity: 0; transform: translate(-50%, -40%) scale(.96); pointer-events: none; transition: opacity .45s, transform .45s; }
.more.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.more__chev { order: 2; width: 14px; height: 14px; margin-top: -6px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); animation: more-bob 1.2s ease-in-out infinite; }
@keyframes more-bob { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 5px; } }
@media (prefers-reduced-motion: reduce) { .more__chev { animation: none; } .more { transition: opacity .3s; } }
@media (max-width: 860px) { .more { font-size: .8125rem; padding: 13px 20px 11px; } }