/* ==========================================================================
   The Slate: one-page site
   Fonts: Apple system fonts are used through the system font stack, so
   Apple devices render New York and SF Pro natively. Other platforms fall
   back to the listed alternatives. (Apple's font licence does not permit
   self-hosting SF Pro or New York as web fonts.)
   ========================================================================== */

:root {
  --font-display: "New York Large", "New York", ui-serif, "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ink: #1d1d1f;
  --ink-2: #515154;
  --ink-3: #86868b;
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --line: #d2d2d7;
  --slate: #3b424c;
  --focus: #0071e3;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius-card: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 500;            /* SF Pro Medium */
  font-size: 17px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.small {                       /* SF Pro Regular, very small type only */
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 8px 14px; border-radius: 8px; background: var(--ink); color: #fff; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.section-title {
  font-family: var(--font-display);
  font-weight: 900;            /* New York Large Black */
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(32px, 5vw, 56px);
}

/* ---------- Nav ----------
   Transparent over the hero, with the wordmark hidden. Once the hero title
   scrolls under the bar, JS adds .is-solid: the bar gains its frosted
   background and the wordmark fades in. */
:root { --nav-h: 52px; }
html { scroll-padding-top: var(--nav-h); }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(245, 245, 247, 0);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
    -webkit-backdrop-filter 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.nav.is-solid {
  background: rgba(245, 245, 247, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.nav__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between;
}
.nav__brand {
  font-family: var(--font-display); font-weight: 900; font-size: 21px;
  color: var(--ink); text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}
.nav.is-solid .nav__brand {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
.no-js .nav { background: rgba(245, 245, 247, 0.72); }
.no-js .nav__brand { opacity: 1; visibility: visible; transform: none; }
.nav__links { display: flex; gap: 24px; margin-left: auto; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.nav__links a:hover { color: var(--ink); }

/* ---------- Device mockups (shared) ----------
   Each device is a screen layer with the bezel PNG on top. The screen is
   positioned with percentages measured from the PNG's transparent cutout,
   extended slightly under the bezel so no gap shows at the edges. */
.device {
  position: relative;
  filter: drop-shadow(0 24px 32px rgba(20, 24, 31, 0.28));
}
.device__bezel {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  pointer-events: none;
}
.device__screen {
  position: absolute;
  left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
  border-radius: var(--sr);
  overflow: hidden;
  background: #000;
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; }

/* iPhone 18 Pro, 1350 x 2760 source, cutout 71,69 to 1278,2691 */
.device--iphone { --sx: 5.04%; --sy: 2.39%; --sw: 89.85%; --sh: 95.22%; --sr: 15.7% / 7.2%; }
/* MacBook Neo, 3220 x 2100 source, cutout 405,297 to 2814,1803 */
.device--mac    { --sx: 12.48%; --sy: 14%; --sw: 75%; --sh: 72%; --sr: 1.24% / 1.98%; }
/* iPad Pro 11-inch landscape, 2640 x 1880 source, cutout 109,106 to 2530,1774 */
.device--ipad   { --sx: 4.02%; --sy: 5.48%; --sw: 91.93%; --sh: 89.04%; --sr: 2.27% / 3.29%; }

.phone { --w: 280px; width: var(--w); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100svh, 1000px);
  padding: calc(var(--nav-h) + clamp(48px, 8vh, 96px)) var(--gutter) 0;
  background:
    radial-gradient(120% 70% at 50% 100%, #dfe3e9 0%, rgba(223, 227, 233, 0) 70%),
    linear-gradient(180deg, var(--bg-soft) 0%, #eef0f3 100%);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  text-align: center;
}
.hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 10vw, 120px); line-height: 0.95; letter-spacing: -0.015em;
  margin: 0;
}
.hero__tagline {
  margin: 16px auto 28px; max-width: 34ch;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; color: var(--ink-2);
}
.store-badges { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.store-badge { display: inline-block; border-radius: 10px; transition: transform 0.3s var(--ease); }
.store-badge:hover { transform: scale(1.03); }
.store-badge img { height: 54px; width: auto; }

.hero__copy > * { animation: rise 1s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.hero__copy > :nth-child(3) { animation-delay: 0.16s; }

.hero__stage {
  --w: clamp(180px, 22vw, 270px);
  --p: 0;                                 /* scroll progress, set by JS (0 to 1) */
  position: relative;
  width: 100%; max-width: var(--max);
  height: calc(var(--w) * 1840 / 900 * 0.82);
  margin-top: clamp(40px, 6vh, 72px);
}
.hero__stage .phone {
  --w: inherit;
  position: absolute; left: 50%; top: 0;
  margin-left: calc(var(--w) / -2);
  animation-duration: 1.4s; animation-timing-function: var(--ease); animation-fill-mode: both;
  animation-play-state: paused;
}
.hero__stage.is-ready .phone { animation-play-state: running; }

/* MacBook and iPad slide in from the sides once the phones have settled
   (the last phone finishes at about 2.1s). */
.hero-mac, .hero-ipad {
  position: absolute; left: 50%; z-index: 0;
  animation-duration: 2.4s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both; animation-delay: 2s;
  animation-play-state: paused;
}
.hero__stage.is-ready .hero-mac, .hero__stage.is-ready .hero-ipad { animation-play-state: running; }
.hero-mac {
  width: calc(var(--w) * 2);
  margin-left: calc(var(--w) * -2.65);
  top: calc(var(--w) * 0.26);
  animation-name: slide-from-left;
  translate: calc(var(--p) * -10%) 0;
}
.hero-ipad {
  width: calc(var(--w) * 1.68);
  margin-left: calc(var(--w) * 0.9);
  top: calc(var(--w) * 0.36);
  animation-name: slide-from-right;
  translate: calc(var(--p) * 10%) 0;
}
@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-60%); }
  to   { opacity: 1; transform: none; }
}
@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(60%); }
  to   { opacity: 1; transform: none; }
}

.phone--center { z-index: 3; animation-name: phone-center; animation-delay: 0.2s; }
.phone--left   { z-index: 1; animation-name: phone-left;   animation-delay: 0.55s; translate: calc(var(--p) * -14%) calc(var(--p) * 4%); }
.phone--right  { z-index: 2; animation-name: phone-right;  animation-delay: 0.7s;  translate: calc(var(--p) * 14%) calc(var(--p) * 4%); }
.phone--center { translate: 0 calc(var(--p) * -3%); }

@keyframes phone-center {
  from { opacity: 0; transform: translateY(40%) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes phone-left {
  from { opacity: 0; transform: translate(0, 18%) rotate(0deg) scale(0.86); }
  to   { opacity: 1; transform: translate(-64%, 9%) rotate(-8deg) scale(0.88); }
}
@keyframes phone-right {
  from { opacity: 0; transform: translate(0, 18%) rotate(0deg) scale(0.86); }
  to   { opacity: 1; transform: translate(64%, 9%) rotate(8deg) scale(0.88); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Take a closer look ---------- */
.closer {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) var(--gutter) 0;
}
.closer__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  grid-template-rows: 1fr auto;
  min-height: 760px;
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
  overflow: hidden;
}
.closer__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 12px;
  grid-row: 1 / span 2;
  position: relative; z-index: 2;
}

.pill {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  align-items: center;
  text-align: left;
  padding: 14px 22px 14px 14px;
  width: 100%;
  border: 0; border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  cursor: pointer;
  font-size: 17px;
  transition: background-color 0.3s, border-radius 0.4s var(--ease), transform 0.2s;
}
.pill:hover { background: #fff; }
.pill:active { transform: scale(0.98); }
.pill__icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); position: relative;
  transition: transform 0.4s var(--ease), background-color 0.3s;
}
.pill__icon::before, .pill__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: #fff;
}
.pill__icon::after { transform: rotate(90deg); }
.pill__body {
  grid-column: 2;
  max-height: 0; opacity: 0; overflow: hidden;
  color: var(--ink-2);
  transition: max-height 0.5s var(--ease), opacity 0.3s, margin 0.5s var(--ease);
}
.pill[aria-expanded="true"] { border-radius: 24px; background: #fff; }
.pill[aria-expanded="true"] .pill__icon { transform: rotate(45deg); background: var(--slate); }
.pill[aria-expanded="true"] .pill__body { max-height: 10em; opacity: 1; margin-top: 6px; transition-delay: 0s, 0.12s, 0s; }

.closer__stage {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0;
}
.phone--closer { width: clamp(220px, 24vw, 300px); }
.phone--closer .device__bezel { transition: opacity 0.5s var(--ease); }
.phone--closer .device__bezel--dark { position: absolute; inset: 0; opacity: 0; }
.phone--closer[data-appearance-current="dark"] .device__bezel--dark { opacity: 1; }
.phone--closer .device__screen img {
  position: absolute; inset: 0;
  transition: opacity 0.5s ease;
}
/* Crossfade: the new screen fades in on top of the old one, which is removed afterwards. */
.phone--closer .device__screen img.is-entering { opacity: 0; }

.closer__controls {
  grid-column: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.closer__caption { display: none; margin: 0; }
.swatches { display: flex; gap: 14px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.25s;
}
.swatch--light { background: linear-gradient(135deg, #ffffff, #e7e9ed); }
.swatch--dark  { background: linear-gradient(135deg, #3b424c, #121418); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg-soft), 0 0 0 4px var(--ink); }
.swatches__label { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- Privacy & Terms ---------- */
.legal {
  max-width: 880px; margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) var(--gutter) clamp(80px, 10vw, 120px);
}
.legal__list { border-top: 1px solid var(--line); }
.disclosure { border-bottom: 1px solid var(--line); }
.disclosure__summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0;
  font-size: clamp(21px, 2.4vw, 28px); line-height: 1.2;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__icon { flex: none; width: 18px; height: 18px; position: relative; }
.disclosure__icon::before, .disclosure__icon::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px;
  background: var(--ink); border-radius: 1px; transition: transform 0.4s var(--ease);
}
.disclosure__icon::after { transform: rotate(90deg); }
.disclosure[open] .disclosure__icon::after { transform: rotate(0deg); }
.disclosure__content { overflow: hidden; }
.disclosure__inner { padding: 0 0 32px; color: var(--ink-2); max-width: 68ch; }
.disclosure__inner h3 { margin: 24px 0 6px; font-size: 17px; color: var(--ink); }
.disclosure__inner p { margin: 0 0 12px; }

/* ---------- Footer ---------- */
.footer {
  padding: 24px var(--gutter) 40px;
  max-width: var(--max); margin: 0 auto;
  border-top: 1px solid var(--line);
}
.footer p { margin: 0 0 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero-mac, .hero-ipad { display: none; }
  .store-badge--mac { display: none; }
  .nav__links { gap: 16px; }
  .closer__card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0;
    padding: 24px 0;
  }
  .closer__stage { grid-row: 1; padding: 8px 0 24px; }
  .closer__list {
    grid-row: 2;
    flex-direction: row; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 4px 24px; gap: 10px;
  }
  .closer__list::-webkit-scrollbar { display: none; }
  .closer__list li { scroll-snap-align: center; flex: none; }
  .pill { width: auto; padding: 10px 18px 10px 10px; white-space: nowrap; }
  .pill__body { display: none; }
  .closer__controls { grid-column: 1; grid-row: 3; padding: 16px 24px 0; }
  .closer__caption { display: block; min-height: 3em; text-align: center; color: var(--ink-2); max-width: 36ch; }
}

@media (max-width: 480px) {
  .nav__links a:first-child { display: none; }
  .hero__stage { --w: 46vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  .hero__stage { --p: 0 !important; }
}