/* Cinema: the photographic story (12 contrast, 22 outside) and the product moments (26 devices).
   Monochrome: no colour enters, only light. Dim and low-key when deactivated, bright silver daylight when activated.
   Every shot (stand-in or photo) is graded to black and white with a touch of contrast; type and chrome stay white.
   Every .shot draws an art-directed placeholder until a real photo exists (build.py strips missing files).
   ?dev in the URL shows the brief for each shot and screen. */

:root {
  --night-1: #070707;
  --night-2: #151516;
  --night-ink: #c7c7cc;
  --sun-ink: #fff;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Shot: a photo slot with a drawn stand-in ---------- */
.shot { position: relative; margin: 0; overflow: hidden; isolation: isolate; background: var(--night-1); }
.shot__ph, .shot picture, .shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot__ph, .shot picture { filter: grayscale(1) contrast(1.08); } /* the black-and-white grade */
.shot img { object-fit: cover; }
.shot__ph { background-color: #111; background-repeat: no-repeat; background-size: cover; background-position: center bottom; }
/* Film grain over the stand-in only, so it reads as intentional rather than empty. */
.shot:not(:has(picture))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--grain);
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.shot__brief { display: none; }
.dev .shot__brief, .dev .device__brief {
  display: block;
  position: absolute;
  z-index: 5;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  max-width: 34rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 500 0.75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dev .shot--bleed .shot__brief { top: calc(var(--nav-h) + 0.5rem); left: var(--gutter); }

/* The stand-ins. Each is a few gradients and one inline SVG silhouette; "you" is always the dot. */
/* Drawn by js/landscape.js (midnight): the dawn valley at night, the one light a screen. */
[data-shot="couch-night"] .shot__ph { background: #05060a; filter: none; }
/* Drawn by js/landscape.js (dawn), in the site's blue cast rather than the grey grade. */
[data-shot="ridge-run"] .shot__ph { background: #6b7ea1; filter: none; }
.shot .landscape::after { display: none; } /* the shot adds its own grain */
[data-shot="trail-forest"] .shot__ph {
  background-image:
    linear-gradient(112deg, transparent 30%, rgba(255, 236, 170, 0.32) 38%, transparent 46%),
    linear-gradient(118deg, transparent 50%, rgba(255, 236, 170, 0.22) 56%, transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%231c2a1c'%3E%3Crect x='90' width='46' height='900'/%3E%3Crect x='330' width='70' height='900'/%3E%3Crect x='610' width='28' height='900' opacity='.7'/%3E%3Crect x='1020' width='36' height='900' opacity='.75'/%3E%3Crect x='1240' width='80' height='900'/%3E%3Crect x='1500' width='54' height='900'/%3E%3C/g%3E%3Cpath d='M0 900V760q400-30 700-70t900-20v230z' fill='%23243620'/%3E%3Cpath d='M560 900q120-90 260-150t300-70l40 10q-180 40-260 110t-120 100z' fill='%23d9c58e' opacity='.55'/%3E%3Ccircle cx='905' cy='655' r='7' fill='%23fff6e0'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #e8e2b4 0%, #9db26f 45%, #476b3a 75%, #2a3d24 100%);
  background-size: cover;
}
[data-shot="summit-climb"] .shot__ph {
  background-image:
    radial-gradient(ellipse 70% 30% at 50% 62%, rgba(255, 170, 120, 0.55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 760l160-60 140 30 200-90 300 70v290H0z' fill='%235b4a6a' opacity='.7'/%3E%3Cpath d='M0 1000V700l180-120 120-150 60 30 80-90 140 200 220 140v290z' fill='%23281f30'/%3E%3Ccircle cx='440' cy='350' r='8' fill='%23fff3e4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #2b3557 0%, #8a6f9a 38%, #f2a07a 62%, #ffd2a1 72%, #3a2e44 100%);
  background-size: cover;
}
[data-shot="phone-down"] .shot__ph {
  background-image:
    linear-gradient(128deg, rgba(255, 238, 200, 0.55) 0 34%, transparent 34.2% 52%, rgba(255, 238, 200, 0.4) 52.2% 70%, transparent 70.2%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000' preserveAspectRatio='xMidYMid slice'%3E%3Crect x='300' y='330' width='200' height='400' rx='34' fill='%23000' opacity='.28' transform='translate(26 30)'/%3E%3Crect x='300' y='330' width='200' height='400' rx='34' fill='%231c1c1e'/%3E%3Crect x='326' y='356' width='70' height='70' rx='18' fill='%232c2c2e'/%3E%3C/svg%3E"),
    repeating-linear-gradient(94deg, rgba(90, 50, 20, 0.12) 0 2px, transparent 2px 23px, rgba(90, 50, 20, 0.07) 23px 24px, transparent 24px 41px),
    linear-gradient(160deg, #d9a574, #b07848 60%, #8a5a34);
  background-size: cover;
}

/* The vessel itself lives in vessel.css (shared with the hero and the 404). */

/* ---------- 12 Contrast: you, deactivated / you, activated ---------- */
.contrast { position: relative; --p: 1; --wipe: 1; --fill: 1; }
.contrast__scene { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
.contrast__scene--on { z-index: 1; }
.contrast__scene .shot { position: absolute; inset: 0; }
.contrast__scene::after { /* scrim under the copy */
  content: "";
  position: absolute;
  inset: 35% 0 0;
  z-index: 1;
  pointer-events: none;
}
.contrast__scene--off::after { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85)); }
.contrast__scene--on::after { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.8)); }
.contrast__copy { position: relative; z-index: 2; padding-block: 0 clamp(3rem, 10vh, 6rem); }
.contrast__title { margin: 0; font-size: clamp(3rem, 11vw, 8.5rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.05em; text-wrap: balance; }
.contrast__sub { margin-top: 1.25rem; max-width: 26rem; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.4; }
.contrast__scene--off .label, .contrast__scene--off .contrast__sub { color: var(--grey); }
/* The problem, in three habits you recognise; each marked with the empty ring: devices on, you off. */
.contrast__signs { display: grid; gap: 0.75rem; margin: 2rem 0 0; padding: 0; list-style: none; color: var(--night-ink); font-size: clamp(1rem, 1.6vw, 1.125rem); }
@media (min-width: 900px) { .contrast__signs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 60rem; } }
.contrast__signs li { display: flex; gap: 0.75rem; align-items: baseline; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.contrast__signs li::before { content: ""; flex: none; width: 0.6em; height: 0.6em; border: 1.5px solid var(--grey); border-radius: 50%; transform: translateY(0.05em); }
.contrast__scene--off .contrast__title { color: var(--night-ink); }
.contrast__scene--on .label, .contrast__scene--on .contrast__sub { color: rgba(255, 255, 255, 0.86); }
.contrast__scene--on .contrast__title { color: var(--sun-ink); }
/* Night, the hours between, dawn: three full screens that simply scroll past (nothing pins, nothing wipes, so it
   stays smooth under iOS Safari's moving toolbars). The night fades to black, the vessel fills in the dark, the
   dawn rises out of it. */
.contrast__scene--on::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 30%; background: linear-gradient(#000, transparent); pointer-events: none; }
.contrast__between { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; min-height: 80vh; min-height: 80svh; background: #000; }
.vessel--between { width: 3rem; height: 10rem; }
.contrast__later { color: var(--grey); }
.contrast__between { gap: 0; }
.contrast__between .vessel--between { margin-bottom: 2.5rem; }
.contrast__example { margin: 0.5rem 0 0; color: var(--grey); font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
/* Morning: the same three-line list, marked with the solid dot (you, on) and in bright ink. */
.contrast__signs--on { color: rgba(255, 255, 255, 0.9); }
.contrast__signs--on li { border-top-color: rgba(255, 255, 255, 0.22); }
.contrast__signs--on li::before { border: 0; background: #fff; }

/* ---------- 22 Outside ---------- */
.outside { padding-block: var(--section); border-top: 1px solid var(--border); }
.outside__head { margin-bottom: clamp(3rem, 8vw, 5rem); }
.outside__head .lede { margin-top: -1.5rem; }
.shot--wide { aspect-ratio: 4 / 5; }
.shot--tall { aspect-ratio: 4 / 5; border-radius: 20px; }
@media (min-width: 768px) { .shot--wide { aspect-ratio: 16 / 9; } }
.shot__over {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4rem var(--gutter) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  color: var(--sun-ink);
  font-size: 1.125rem;
  font-weight: 500;
}
.shot--tall .shot__over { padding-inline: 1.5rem; }
.shot__metric { display: block; font-size: clamp(3rem, 9vw, 6rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.outside__pair { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 768px) { .outside__pair { grid-template-columns: 1fr 1fr; margin-top: 1.5rem; gap: 1.5rem; } }

/* ---------- 26 Devices: CSS-drawn frames, placeholder screens ---------- */
.devices__lede { margin: -1.5rem 0 clamp(3rem, 8vw, 5rem); }
.devices__row { display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem 1.5rem; align-items: end; }
.device--ipad { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .devices__row { grid-template-columns: 5fr 2.1fr 1.3fr; gap: 2rem; }
  .device--ipad { grid-column: auto; }
}
.device { margin: 0; text-align: center; }
.device figcaption { margin-top: 1rem; color: var(--grey); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.device__body {
  position: relative;
  background: linear-gradient(160deg, #3a3a3c, #1c1c1e 40%, #2c2c2e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 40px 80px -40px rgba(255, 255, 255, 0.14);
}
.device__screen { position: relative; height: 100%; overflow: hidden; background: #000; container-type: size; }
.device__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.device__brief { display: none; }
.dev .device__brief { top: auto; bottom: 0.5rem; left: 0.5rem; right: auto; padding: 0.25rem 0.5rem; font-size: 0.625rem; }

.device--iphone .device__body { aspect-ratio: 71.5 / 147; padding: 3.4%; border-radius: 15% / 7.3%; }
.device--iphone .device__screen { border-radius: 12% / 5.8%; }
.device--iphone .device__screen::before { /* Dynamic Island */
  content: "";
  position: absolute;
  z-index: 3;
  top: 2.4%;
  left: 34%;
  width: 32%;
  height: 3.4%;
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.device--ipad .device__body { aspect-ratio: 1.43; padding: 2.4%; border-radius: 4.4% / 6.3%; }
.device--ipad .device__screen { border-radius: 2.6% / 3.7%; }
.device--watch { width: 70%; margin-inline: auto; }
@media (min-width: 768px) { .device--watch { width: 100%; } }
.device--watch .device__body { aspect-ratio: 41 / 49; padding: 7%; border-radius: 26% / 21.8%; margin-right: 6%; } /* equal corner radii: 26% of 41 = 21.8% of 49 */
.device--watch .device__body::after { /* Digital Crown */
  content: "";
  position: absolute;
  right: -5%;
  top: 22%;
  width: 6%;
  height: 16%;
  border-radius: 0 40% 40% 0;
  background: linear-gradient(90deg, #2c2c2e, #48484a);
}
.device--watch .device__screen { border-radius: 19% / 15.5%; }

/* The placeholder app screen: today's vessel, sized in container units so it scales with the frame. */
.ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; background: radial-gradient(ellipse 70% 40% at 50% 46%, rgba(255, 255, 255, 0.09), transparent 70%), #000; }
.ui__label { color: var(--grey); font-size: 4cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ui .vessel--ui { --fill: 0.64; width: 26cqw; height: 34cqh; }
.ui__num { margin-top: 1cqh; color: #fff; font-size: 13cqw; font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ui__sub { margin-top: -1.5cqh; color: var(--grey); font-size: 4.4cqw; }
.ui--wide { flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 0; }
.ui__side { display: flex; flex-direction: column; gap: 2.5cqh; width: 26%; padding: 8cqh 2.5cqw; background: #0d0d0e; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.ui__side i { display: block; height: 2.4cqh; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.ui__side i:first-child { width: 60%; background: rgba(255, 255, 255, 0.22); }
.ui__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; }
.ui--wide .ui__label { font-size: 1.5cqw; }
.ui--wide .vessel--ui { width: 8cqw; height: 38cqh; }
.ui--wide .ui__num { font-size: 6cqw; }
.ui--wide .ui__sub { font-size: 1.8cqw; }
.ui--watch { gap: 4cqh; }
.ui--watch .vessel--ui { width: 24cqw; height: 50cqh; }
.ui--watch .ui__num { font-size: 18cqw; }

/* Scroll-driven polish where supported: the wide shot opens from a rounded frame; stand-ins settle. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .shot--wide {
      animation: shot-open linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    .shot--wide .shot__ph, .shot--wide img {
      animation: shot-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes shot-open { from { clip-path: inset(6% var(--gutter) round 20px); } to { clip-path: inset(0 0 round 0); } }
@keyframes shot-settle { from { transform: scale(1.14) translateY(-3%); } to { transform: scale(1) translateY(3%); } }

/* ---------- 21 Moments: the shield, then the Activated moment (CSS renditions of the app's screens) ---------- */
.moments__row { display: grid; gap: 4rem; max-width: 52rem; margin-inline: auto; }
@media (min-width: 768px) { .moments__row { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); } }
.moment { margin: 0; }
.moment .device { width: min(100%, 16rem); margin-inline: auto; }
@media (min-width: 768px) { .moment .device { width: min(100%, 20rem); } }
.moment--on .device__body { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 40px 120px -30px rgba(255, 255, 255, 0.3); }
.moment__cap { display: grid; gap: 0.5rem; max-width: 20rem; margin: 2rem auto 0; color: var(--grey); }
.moment__state { color: var(--ink); font-family: var(--font-display); font-size: 1.625rem; font-weight: 400; letter-spacing: -0.01em; }
.moment__state--on { color: var(--light-ink); }

/* Both screens share one layout, as in the app: the vessel, a serif title, one line of detail, then a primary button
   and a quiet text button. Only the light changes between them. */
.shield, .lit { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 22cqh 7cqw 0; text-align: center; background: #000; }
.shield p, .lit p { margin: 0; }
.shield .vessel--shield, .lit .vessel--lit { width: 15cqw; height: 30cqh; margin-bottom: 6cqh; }
.shield__title, .lit__title { position: relative; font-family: var(--font-display); font-size: 10cqw; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.shield__title { color: #fff; }
.shield__sub, .lit__sub { position: relative; margin-top: 2.2cqh; color: var(--grey); font-size: 4.3cqw; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shield__num { color: #fff; font-variant-numeric: tabular-nums; }
.shield__btn { position: absolute; left: 7cqw; right: 7cqw; bottom: 13cqh; padding: 3.6cqw 0; border-radius: 999px; background: #fff; color: #000; font-size: 4.6cqw; font-weight: 600; }
.shield__alt { position: absolute; left: 0; right: 0; bottom: 6.5cqh; color: var(--grey); font-size: 4.4cqw; font-weight: 500; }

/* The Activated moment: the same screen, full and lit. */
.lit__glow { position: absolute; left: 50%; top: 32%; width: 150cqw; height: 70cqh; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(223, 230, 244, 0.3), rgba(143, 154, 184, 0.08) 55%, transparent); pointer-events: none; }
.lit__title { color: var(--light-hi); }
.lit__sub { color: rgba(255, 255, 255, 0.8); }
@media (prefers-reduced-motion: no-preference) {
  .lit__glow { animation: lit-breathe 4.8s ease-in-out infinite; }
}
@keyframes lit-breathe { 0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }