/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 250ms var(--ease), border-color 250ms var(--ease);
}
.nav.is-stuck {
  background: var(--scrim);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--hairline);
}
.nav .wrap { display: flex; align-items: center; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text-1); font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }

.nav-links { display: none; margin-left: auto; gap: 0.25rem; align-items: center; }
@media (min-width: 860px) { .nav-links { display: flex; } }
.nav-links a {
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  color: var(--text-2);
  transition: color 200ms var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--text-1); }

.nav-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
@media (min-width: 860px) { .nav-actions { margin-left: 0.75rem; } }
.nav-actions .btn { display: none; }
@media (min-width: 560px) { .nav-actions .btn { display: inline-flex; } }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-2);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.icon-btn:hover { background: var(--fill); color: var(--text-1); }
.icon-btn .ico { width: 19px; height: 19px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

.menu-btn { display: grid; }
@media (min-width: 860px) { .menu-btn { display: none; } }

/* ---------- Mobile drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; overflow: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 16, 16, 0.5);
  opacity: 0; transition: opacity 260ms var(--ease);
}
.drawer[data-open="true"] .drawer-scrim { opacity: 1; }
.drawer-panel {
  position: absolute; inset: 0 0 auto auto;
  width: min(320px, 84vw);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--outline);
  padding: 1rem var(--pad) 2rem;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms var(--ease);
  overflow-y: auto;
}
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer-panel a.dlink {
  padding: 0.85rem 0.15rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
  color: var(--text-1);
  border-bottom: 1px solid var(--outline);
}
.drawer-panel .stores { margin-top: 1.5rem; flex-direction: column; align-items: stretch; }


/* ---------- Backdrop ----------
   Ruled grid plus a soft teal wash. One .backdrop element, layered gradients
   rather than a stack of blurred divs, so it costs one paint instead of four. */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Dissolve into the next section rather than stopping on a seam. */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
}

/* The closing band is the bookend, so it fades the other way. */
.closing .backdrop {
  -webkit-mask-image: linear-gradient(to top, #000 58%, transparent 96%);
  mask-image: linear-gradient(to top, #000 58%, transparent 96%);
}

.backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 92% 78% at 50% 8%, #000 34%, transparent 76%);
  mask-image: radial-gradient(ellipse 92% 78% at 50% 8%, #000 34%, transparent 76%);
}

.backdrop::after {
  content: '';
  position: absolute;
  inset: -18% -12%;
  background:
    radial-gradient(46% 52% at 74% 26%, var(--aurora-a), transparent 62%),
    radial-gradient(42% 48% at 12% 80%, var(--aurora-b), transparent 66%),
    radial-gradient(34% 38% at 44% -6%, var(--aurora-c), transparent 68%);
  animation: drift 52s ease-in-out infinite alternate;
  will-change: transform;
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3rem)); padding-bottom: clamp(2.5rem, 5vw, 3.25rem); }
.hero-inner { display: grid; gap: clamp(2.5rem, 5vw, 3rem); align-items: center; }
@media (min-width: 780px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); }
  .hero-shot .device-back  { --dw: clamp(150px, 17vw, 208px); }
  .hero-shot .device-front { --dw: clamp(214px, 24vw, 288px); }
}

.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: 1.15rem; max-width: 42ch; }
.hero .stores { margin-top: 1.9rem; }
.hero .note { margin-top: 1.1rem; color: var(--text-3); font-size: 0.85rem; }

/* Two phones, iPhone in front of the Android. The overlap is a share of the
   back phone's own width, so the pair holds its shape at every viewport
   instead of drifting apart the way absolute offsets do. */
.hero-shot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-shot .device-back {
  --dw: min(40vw, 208px);
  margin-right: calc(var(--dw) * -0.44);
  margin-bottom: 1.75rem;
  transform: rotate(-4deg);
  transform-origin: bottom center;
  z-index: 1;
}
.hero-shot .device-front {
  --dw: min(68vw, 340px);
  z-index: 2;
}

/* Soft contact shadow so the pair rests on the wash instead of hovering over it. */
.hero-shot::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -2%;
  width: 92%; height: 46px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}

/* A phone that nearly fills its column is a block, and shares the text's left
   edge. One that does not is a figure, and centres. The switch is where the
   pair stops filling. */
@media (max-width: 779px) {
  .hero-shot { margin-top: 1rem; }
  .hero-shot::after { left: 46%; width: 92%; }
}
@media (max-width: 559px) {
  .hero-shot { justify-content: flex-start; }
  .hero-shot::after { left: 46%; width: 92%; }
}


/* ---------- Device ---------- */
.device { width: var(--dw, 260px); aspect-ratio: var(--ar, 860 / 1827); }
.device[data-platform="ios"] { --ar: 860 / 1772; }
.device picture {
  display: block; width: 100%; height: 100%;
  /* drop-shadow follows the phone silhouette; box-shadow would draw a rectangle */
  filter: drop-shadow(0 16px 28px rgba(12, 26, 26, 0.14)) drop-shadow(0 40px 70px rgba(12, 26, 26, 0.10));
}
:root[data-theme="dark"] .device picture { filter: drop-shadow(0 16px 28px rgba(0,0,0,0.5)) drop-shadow(0 40px 70px rgba(0,0,0,0.45)); }
.device img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }

/* ---------- Features ----------
   One phone, pinned, swapping screens as the copy scrolls past it. Four full
   rows left most of each screen empty; this keeps something in view the whole
   way down and halves the section's height. */
.features { border-top: 1px solid var(--outline); padding-block: clamp(3rem, 6vw, 4.5rem); }
.feature-grid { display: grid; gap: 2.5rem; }

@media (min-width: 780px) {
  .feature-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
    gap: clamp(2rem, 4vw, 3.25rem);
    align-items: start;
  }
  .feature-rail {
    grid-column: 2;
    position: sticky;
    top: calc(var(--nav-h) + 5vh);
    height: min(74vh, 620px);
    display: grid;
    place-items: center;
  }
  .feature-panels { grid-column: 1; grid-row: 1; }
}

.feature-stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.feature-stage .device {
  --dw: min(292px, 32vw);
  position: absolute;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 460ms var(--ease), transform 640ms var(--ease);
}
.feature-stage .device[data-active="true"] { opacity: 1; transform: none; }

/* Wash sits behind whichever screen is showing. */
.feature-stage::before {
  content: '';
  position: absolute;
  inset: 10% 2% 6%;
  z-index: -1;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 16%, transparent), transparent 68%);
  filter: blur(38px);
}

.panel { padding-block: clamp(1.75rem, 4vw, 2.25rem); }
@media (min-width: 780px) {
  .panel {
    /* Short enough that the neighbouring panels stay on screen, dimmed. That
       fills the column and shows there is more to come. */
    min-height: 48vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0;
  }
  /* Everything but the panel you are reading steps back. */
  .panel-body { opacity: 0.38; transition: opacity 460ms var(--ease); }
  .panel[data-active="true"] .panel-body { opacity: 1; }
}

.panel h2 { margin-bottom: 0.85rem; }
.panel p { color: var(--text-2); max-width: 46ch; }
.panel ul { margin-top: 1.15rem; display: grid; gap: 0.5rem; }
.panel li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.94rem; color: var(--text-2); }
.panel li .ico { width: 17px; height: 17px; margin-top: 4px; color: var(--primary-text); }

/* The phone travels with the copy below the sticky breakpoint. */
.panel-shot { margin-top: 1.5rem; display: grid; justify-items: center; }
@media (max-width: 559px) { .panel-shot { justify-items: start; } }
.panel-shot .device { --dw: min(64vw, 360px); }
@media (min-width: 780px) { .panel-shot { display: none; } .feature-rail { display: grid; } }
@media (max-width: 779px) { .feature-rail { display: none; } }

/* ---------- Safety ---------- */
.safety-list { display: grid; gap: 0.7rem; margin-top: 1.35rem; }
.safety-list li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--text-2); font-size: 0.95rem; }
.safety-list .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--primary-text); }
.safety-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }

/* ---------- Closing ---------- */
.closing { position: relative; isolation: isolate; text-align: center; border-top: 1px solid var(--outline); }
.closing .stores { justify-content: center; margin-top: 1.75rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--outline); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem; background: var(--surface); }
.footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
.footer h4 { font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.9rem; font-weight: 600; }
.footer ul { display: grid; gap: 0.6rem; }
.footer ul a { color: var(--text-2); font-size: 0.92rem; }
.footer ul a:hover { color: var(--primary-text); }
.footer .blurb { color: var(--text-2); font-size: 0.92rem; margin-top: 0.85rem; max-width: 38ch; }
.socials { display: flex; gap: 0.45rem; margin-top: 1.35rem; }
.socials a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--outline); color: var(--text-2);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.socials a:hover { color: var(--primary-text); border-color: var(--primary); }
.socials svg { width: 16px; height: 16px; fill: currentColor; }
.footer-base {
  margin-top: 2.5rem; padding-top: 1.35rem;
  border-top: 1px solid var(--outline);
  color: var(--text-3); font-size: 0.84rem;
}


/* Barely-there wander. Enough that the page is not frozen, not enough to notice. */
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.5%, 1.5%, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop::after { animation: none; }
}