/*
  Milepost landing — one drive, told in the order it happens. Sections scroll
  at normal speed; what changes is the art in them, which morphs as it moves
  through the window the way the launch film does: the phone's screen opens
  into the coast, the route's yellow flag floods the page, and a receipt tears
  in over it. Follows the device's light or dark appearance.
*/

@property --w {
  syntax: "<length>";
  inherits: true;
  initial-value: 300px;
}

/* ---- Appearance ------------------------------------------------------ */

.page-landing,
.page-legal,
.page-press {
  --lp-gutter: clamp(20px, 4vw, 56px);
  --lp-ease: cubic-bezier(0.65, 0, 0.2, 1);
  --lp-bg: #070708;
  --lp-ink: #ffffff;
  --lp-muted: rgba(255, 255, 255, 0.64);
  --lp-soft: rgba(255, 255, 255, 0.4);
  --lp-hairline: rgba(255, 255, 255, 0.1);
  --lp-note-bg: rgba(38, 38, 42, 0.74);
  --lp-note-edge: rgba(255, 255, 255, 0.09);
  --lp-note-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --lp-bar-bg: rgba(7, 7, 8, 0.62);
  --lp-link-hover: var(--yellow);
  --lp-phone-shadow: 0 60px 120px rgba(0, 0, 0, 0.7), 0 16px 40px rgba(0, 0, 0, 0.5);
  --lp-paper: #f6f3ec;
  --lp-paper-shadow: rgba(0, 0, 0, 0.5);
  --lp-check: rgba(255, 255, 255, 0.26);
  --lp-kicker: var(--yellow);
  --lp-kicker-bg: transparent;
  --lp-tile: #0b0b0c;
  --lp-trail-casing: rgba(255, 212, 58, 0.22);
  color-scheme: dark;
  color: var(--lp-ink);
  background: var(--lp-bg);
}

@media (prefers-color-scheme: light) {
  .page-landing,
  .page-legal,
  .page-press {
    --lp-bg: #f3f1ec;
    --lp-ink: #111111;
    --lp-muted: rgba(17, 17, 17, 0.62);
    --lp-soft: rgba(17, 17, 17, 0.4);
    --lp-hairline: rgba(17, 17, 17, 0.1);
    --lp-note-bg: rgba(255, 255, 255, 0.84);
    --lp-note-edge: rgba(17, 17, 17, 0.06);
    --lp-note-shadow: 0 18px 44px rgba(40, 32, 12, 0.14);
    --lp-bar-bg: rgba(243, 241, 236, 0.72);
    --lp-link-hover: #111111;
    --lp-phone-shadow: 0 50px 90px rgba(40, 32, 12, 0.26), 0 12px 28px rgba(40, 32, 12, 0.16);
    --lp-paper: #ffffff;
    --lp-paper-shadow: rgba(40, 32, 12, 0.28);
    --lp-check: rgba(17, 17, 17, 0.22);
    --lp-kicker: #111111;
    --lp-kicker-bg: var(--yellow);
    --lp-tile: #111111;
    --lp-trail-casing: #111111;
    color-scheme: light;
  }
}

/* Yellow and paper are the same in either appearance. */
.lp-roadbook,
.lp-recaps {
  --lp-ink: #111111;
  --lp-muted: rgba(17, 17, 17, 0.68);
  --lp-soft: rgba(17, 17, 17, 0.42);
  --lp-note-bg: rgba(255, 255, 255, 0.88);
  --lp-note-edge: rgba(17, 17, 17, 0.06);
  --lp-note-shadow: 0 18px 44px rgba(40, 32, 12, 0.16);
  --lp-phone-shadow: 0 44px 80px rgba(40, 32, 12, 0.3), 0 12px 28px rgba(40, 32, 12, 0.18);
  color-scheme: light;
  color: var(--lp-ink);
}

/* Without the script, every scroll-drawn element shows its finished state. */
html:not(.lp-js) .lp [data-scroll] {
  --p: 1;
  --r: 1;
  --s: 1;
}

/* ---- Launch promo ---------------------------------------------------- */

.page-landing.has-promo { --promo-h: 40px; }

.lp-promo {
  position: fixed;
  z-index: 31;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: var(--promo-h);
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 16px;
  color: #000;
  background: var(--yellow);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 400ms ease;
}

.lp-promo__code {
  display: inline-block;
  margin: 0 2px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--yellow);
  background: #000;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.lp-promo__short { display: none; }

.lp-promo__go {
  font-size: 13px;
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-transform: uppercase;
  text-underline-offset: 4px;
}

.lp-promo__go::after { content: " →"; }
.lp-promo:hover .lp-promo__go { text-decoration-thickness: 2.5px; }

.lp-promo:focus-visible {
  outline: 3px solid #000;
  outline-offset: -5px;
}

.film-open .lp-promo {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 520px) {
  .lp-promo { gap: 10px; font-size: 13px; }
  .lp-promo__long { display: none; }
  .lp-promo__short { display: inline; }
}

/* ---- Nav ------------------------------------------------------------- */

.lp-nav {
  position: fixed;
  z-index: 30;
  top: var(--promo-h, 0px);
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px max(var(--lp-gutter), calc((100vw - 1320px) / 2));
  transition: background-color 400ms ease, box-shadow 400ms ease, opacity 500ms ease, padding 400ms ease;
}

.lp-nav.is-scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--lp-bar-bg);
  box-shadow: 0 1px 0 var(--lp-hairline);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--lp-ink);
  font-size: 15px;
  font-stretch: expanded;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.lp-brand img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
}

.lp-nav__get {
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 999px;
  color: #000;
  background: var(--yellow);
  font-size: 13px;
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.lp-nav__stores { display: inline-flex; align-items: center; gap: 10px; }
.lp-nav__stores img { display: block; object-fit: contain; }

.lp-nav.is-past-hero .lp-nav__get {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* The nav's Download prints the same receipt, down out of the bar. */
.lp-nav__cta {
  position: relative;
}

.lp-nav__cta .lp-nav__get {
  position: relative;
  z-index: 2;
}

.lp-nav__drawer {
  position: absolute;
  z-index: 1;
  top: calc(100% - 10px);
  right: -14px;
  overflow: hidden;
  padding: 0 14px 28px;
  pointer-events: none;
}

.lp-nav__drawer .lp-cta__paper {
  width: 196px;
  margin: 0;
  padding: 26px 16px 22px;
}

.lp-nav__drawer .lp-cta__paper > img {
  width: 116px;
  height: 116px;
}

.lp-nav__drawer .lp-cta__paper--stores {
  width: min(324px, calc(100vw - 32px));
  padding: 28px 16px 22px;
}

.lp-receipt__stores {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.3);
}

.lp-receipt__stores figure { margin: 0; }
.lp-receipt__stores:has(figure:only-child) { grid-template-columns: 1fr; }
.lp-nav__drawer .lp-cta__paper--stores:has(figure:only-child) {
  width: 196px;
  padding: 26px 16px 22px;
}
.lp-receipt__stores img { width: 116px; max-width: 100%; height: auto; mix-blend-mode: multiply; }
.lp-receipt__stores figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.lp-receipt__pending {
  display: grid;
  min-height: 116px;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.lp-nav__cta.is-open .lp-cta__paper {
  animation: lp-print 700ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
  transform: none;
}

/* ---- Shared ---------------------------------------------------------- */

.lp {
  --pw: clamp(250px, min(23vw, calc((100svh - 170px) / 2.0444)), 336px);
  --ph: calc(var(--pw) * 2.0444);
  --sw: calc(var(--pw) * 0.9007);
  --sh: calc(var(--pw) * 1.9496);
  --srad: calc(var(--pw) * 0.1148);
  --slide: 18vw;
  --nw: clamp(262px, 21vw, 320px);
  position: relative;
  overflow-x: clip;
}

.lp h2 {
  margin: 0;
  color: var(--lp-ink);
  font-size: clamp(29px, 3.05vw, 52px);
  font-stretch: expanded;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.06;
  word-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}

.lp h2 + p {
  margin-top: 18px;
  color: var(--lp-muted);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

/* A block fades up once its section's progress passes its delay. */
.lp-block {
  --q: clamp(0, calc((var(--p) - var(--d, 0)) / (1 - var(--d, 0))), 1);
  opacity: var(--q);
  transform: translateY(calc((1 - var(--q)) * 36px));
}

.lp-nav a:focus-visible,
.lg a:focus-visible,
.pk a:focus-visible,
.pk button:focus-visible,
.lp a:focus-visible,
.lp button:focus-visible,
.lp-footer a:focus-visible,
.lp-film__track:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

/* ---- Hero ------------------------------------------------------------ */

.lp-hero {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: calc(clamp(104px, 15svh, 168px) + var(--promo-h, 0px)) var(--lp-gutter) 0;
  text-align: center;
}

/* The app icons as an odometer: an eight-sided drum of icons seen through
   one squircle window, turning a face at a time (landing.js). */
.lp-hero__icons {
  --icon-size: clamp(108px, 28vw, 148px);
  position: relative;
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  margin: 0 auto clamp(20px, 3svh, 30px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.24));
  -webkit-tap-highlight-color: transparent;
}

.lp-hero__window {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: calc(var(--icon-size) * 2.6);
  /* The inside of the drum, seen only mid-turn in the faces' corners. */
  background: color-mix(in srgb, var(--lp-ink) 9%, var(--lp-bg));
  -webkit-mask: url(/app/landing/icons/milepost-icon-apex.webp?v=deck1) center / 100% 100% no-repeat;
          mask: url(/app/landing/icons/milepost-icon-apex.webp?v=deck1) center / 100% 100% no-repeat;
}

/* The drum's curve darkens toward the window's top and bottom as it turns. */
.lp-hero__window::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.38), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.38));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.lp-hero__icons.is-rolling .lp-hero__window::after { opacity: 1; }

.lp-hero__reel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.lp-hero__icon {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.lp-title {
  max-width: 1100px;
  margin: 0;
  color: var(--lp-ink);
  font-size: clamp(31px, 4.2vw, 72px);
  font-stretch: expanded;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  word-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}

.lp-lede {
  max-width: 38em;
  margin-top: clamp(14px, 2svh, 22px);
  color: var(--lp-muted);
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}

.lp-store-badges {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 13px;
}

.lp-store-download {
  display: flex;
  width: 156px;
  align-items: center;
  flex: 0 0 auto;
  flex-direction: column;
}

.lp-store-download--google { width: 180px; }

.lp-store-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
}

.lp-store-badge img { display: block; }
.lp-store-badge--apple img { width: 156px; height: 52px; }
/* Google's artwork includes its required clear space. Keep it intact and size
   the visible badge to match Apple's height. */
.lp-store-badge--google { margin: -13px -10px; }
.lp-store-badge--google img { width: 200px; height: auto; }
.lp-store-badge[aria-disabled="true"] { cursor: default; }
.lp-store-download .lp-cta__drawer { width: 224px; margin-top: -12px; }
.lp-store-download .lp-cta__feed { padding: 0 14px; }
.lp-store-download .lp-cta__paper { width: 196px; padding: 28px 16px 22px; }
.lp-store-download.is-open .lp-cta__drawer { grid-template-rows: 1fr; }
.lp-store-download.is-open .lp-cta__paper {
  animation: lp-print 760ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
  transform: none;
}
.lp-cta__pending { margin-top: 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; }

/* ---- Download, with the receipt drawer ------------------------------- */

.lp-cta {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: clamp(22px, 3svh, 30px);
}

#lp-download { scroll-margin-top: 100px; }

.lp-store {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-height: 64px;
  align-items: center;
  gap: 14px;
  padding: 10px 28px 10px 11px;
  border-radius: 999px;
  color: #000;
  background: var(--yellow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 40px rgba(255, 212, 58, 0.24);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.lp-store > img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
}

.lp-store__copy {
  display: grid;
  gap: 5px;
  justify-items: center;
  text-align: center;
}

.lp-store__title {
  font-size: 18px;
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: 0.065em;
  line-height: 1;
  text-transform: uppercase;
}

.lp-store__where {
  color: rgba(0, 0, 0, 0.62);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .lp-store:hover {
    filter: brightness(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 18px 48px rgba(255, 212, 58, 0.34);
    transform: translateY(-2px);
  }
}

.lp-store:active { transform: scale(0.98); }

/* The drawer opens under the button and pushes everything below it down,
   while the receipt prints out of the button's bottom edge. */
.lp-cta__drawer {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -18px;
  transition: grid-template-rows 560ms var(--lp-ease);
}

.lp-cta.is-open .lp-cta__drawer { grid-template-rows: 1fr; }

.lp-cta__feed {
  min-height: 0;
  overflow: hidden;
  padding: 0 18px;
}

.lp-cta__paper {
  display: grid;
  width: 244px;
  justify-items: center;
  margin: 0 auto 26px;
  padding: 34px 18px 26px;
  color: #141414;
  background: var(--lp-paper);
  filter: drop-shadow(0 16px 22px var(--lp-paper-shadow));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x;
  transform: translateY(-101%);
  transition: transform 260ms ease-in;
}

.lp-cta.is-open .lp-cta__paper {
  animation: lp-print 760ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
  transform: none;
}

@keyframes lp-print {
  0% { transform: translateY(-101%); }
  18% { transform: translateY(-72%); }
  26% { transform: translateY(-70%); }
  46% { transform: translateY(-42%); }
  54% { transform: translateY(-40%); }
  78% { transform: translateY(-8%); }
  100% { transform: none; }
}

.lp-cta__brand {
  font-size: 17px;
  font-stretch: expanded;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.lp-cta__paper > img {
  display: block;
  width: 132px;
  height: 132px;
  box-sizing: content-box;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.3);
  mix-blend-mode: multiply;
}

.lp-cta__store {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.lp-cta__scan {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.3);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* Watch the film: the quieter second choice, under the button. */
.lp-film-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 2px;
  color: var(--lp-ink);
  font-size: 14px;
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.lp-film-link svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.lp-film-link::before,
.lp-film-link::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1.5px;
  content: "";
}

.lp-film-link::before { background: var(--lp-soft); }

.lp-film-link::after {
  background: var(--lp-link-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms cubic-bezier(0.6, 0, 0.2, 1);
}

.lp-film-link:hover::after,
.lp-film-link:focus-visible::after { transform: scaleX(1); }

/* ---- Phones and notifications ---------------------------------------- */

.lp-rig {
  position: relative;
  width: var(--pw);
  height: var(--ph);
}

.lp-phone {
  --w: var(--pw);
  position: relative;
  z-index: 2;
  width: var(--w);
  margin: 0;
}

/* Apple's iPhone 18 Pro bezel in Glacier (Apple Design Resources, 1350 ×
   2760). Its screen opening is 1206 × 2622 at (72, 69); the screen reaches
   5 px under the frame on every side so no sliver shows at any scale. The
   bezel draws the frame and the Dynamic Island over it. */
.lp-phone__body {
  position: relative;
  width: var(--w);
  aspect-ratio: 1350 / 2760;
}

.lp-phone__body::before {
  position: absolute;
  inset: 0.76% 1.19% 0.8%;
  border-radius: calc(var(--w) * 0.16);
  box-shadow: var(--lp-phone-shadow);
  content: "";
}

.lp-phone__screen {
  position: absolute;
  top: 2.3188%;
  left: 4.963%;
  width: 90.0741%;
  height: 95.3623%;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.1148);
  background: #000;
  container-type: size;
}

.lp-phone__shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-phone__bezel {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lp-notes {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* Each notification trails the phone in, a beat behind the one before. */
.lp-note {
  --q: clamp(0, calc((var(--p) - var(--d)) / (1 - var(--d))), 1);
  position: absolute;
  display: flex;
  width: var(--nw);
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--lp-note-edge);
  border-radius: 22px;
  color: var(--lp-ink);
  background: var(--lp-note-bg);
  box-shadow: var(--lp-note-shadow);
  opacity: var(--q);
  transform: translateX(calc((1 - var(--q)) * var(--from, -170px))) scale(calc(0.94 + var(--q) * 0.06));
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);
}

.lp-note[data-slot="l1"] { top: 9%; right: calc(100% - 40px); }
.lp-note[data-slot="l2"] { top: 56%; right: calc(100% - 18px); }
.lp-note[data-slot="l3"] { top: 74%; right: calc(100% - 34px); }
.lp-note[data-slot="r1"] { top: 27%; left: calc(100% - 40px); }
.lp-note[data-slot="r2"] { top: 73%; left: calc(100% - 18px); }
.lp-note[data-slot="r3"] { top: 50%; left: calc(100% - 30px); }

.lp-note__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.lp-note__text {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 1px;
  text-align: left;
}

.lp-note__app {
  display: flex;
  justify-content: space-between;
  color: var(--lp-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.lp-note__app span {
  font-weight: 500;
  text-transform: none;
}

.lp-note__title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-note__body {
  display: -webkit-box;
  overflow: hidden;
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lp-note__thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  object-fit: cover;
}

/* The drive in progress, as a Live Activity. */
.lp-note--live {
  width: max-content;
  padding: 10px 18px 10px 14px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #fff;
  background: #050505;
}

.lp-note--live .lp-note__body {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

.lp-note__rec {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(218, 8, 13, 0.25);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-note__rec { animation: lp-rec 1600ms ease-in-out infinite; }
}

@keyframes lp-rec {
  50% { opacity: 0.35; }
}

/* ---- 1. Your Roadbook: the phone slides over, the day in tow ---------- */

.lp-drive {
  position: relative;
  height: calc(var(--ph) + 14svh);
  margin-top: clamp(30px, 5svh, 60px);
}

.lp-rig--drive {
  position: absolute;
  top: 0;
  left: calc(50% - var(--pw) / 2 + var(--p) * var(--slide));
}

.lp-drive__copy {
  position: absolute;
  top: calc(var(--ph) * 0.28);
  left: max(var(--lp-gutter), 6vw);
  width: min(430px, 29vw);
  transform: translateX(calc((1 - var(--q)) * -40px));
}

/* The day's photos, pinned along the road that joins them. The road draws
   itself as the section scrolls in, runs behind the phone, and each photo
   drops onto its pin as the line reaches it. The pins and the path share one
   box, so they stay together at every size. */
.lp-trail {
  --stop-w: clamp(170px, 15vw, 220px);
  position: absolute;
  top: 0;
  right: calc(-1 * (var(--nw) + 40px));
  bottom: 0;
  left: calc(-1 * (var(--nw) + 40px));
  pointer-events: none;
  transition: opacity 400ms ease;
}

.lp-trail__route {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: clamp(0, calc(var(--p) * 12), 1);
}

.lp-trail__route--narrow,
.lp-trail__route--front { display: none; }

.lp-trail__route path {
  fill: none;
  stroke-dasharray: 1px 1px;
  stroke-dashoffset: calc((1 - var(--p)) * 1px);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-trail__glow {
  stroke: var(--lp-trail-casing);
  stroke-width: 1.6;
}

.lp-trail__line {
  stroke: var(--yellow);
  stroke-width: 0.62;
}

.lp-stop {
  --q: clamp(0, calc((var(--p) - var(--d)) / 0.24), 1);
  position: absolute;
  z-index: 3;
  top: var(--y);
  left: var(--x);
  width: var(--stop-w);
  margin: 0;
  padding: 7px 7px 28px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.42);
  opacity: var(--q);
  transform: translate(-50%, calc((1 - var(--q)) * -40px)) rotate(calc(var(--r) + (1 - var(--q)) * 7deg));
  transform-origin: 50% 0;
}

/* The pin sits on the road at the photo's top edge. */
.lp-stop::before {
  position: absolute;
  z-index: 1;
  top: -8px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(0, 0, 0, 0.35);
  content: "";
}

.lp-stop img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.lp-stop figcaption {
  position: absolute;
  bottom: 8px;
  left: 9px;
  color: #3a3a3a;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- 2. The screen opens into the coast ------------------------------ */

.lp-map {
  --sx: calc(50% + var(--slide));
  position: relative;
  height: max(100svh, 620px);
  margin-top: 4svh;
  color: #fff;
}

.lp-map__window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #080b0f;
  clip-path: inset(
    calc((1 - var(--p)) * (50% - var(--sh) / 2))
    calc((1 - var(--p)) * (100% - var(--sx) - var(--sw) / 2))
    calc((1 - var(--p)) * (50% - var(--sh) / 2))
    calc((1 - var(--p)) * (var(--sx) - var(--sw) / 2))
    round calc((1 - var(--p)) * var(--srad))
  );
}

.lp-map__art {
  display: block;
  width: 100%;
  height: 100%;
}

.lp-map__zoom {
  transform: scale(calc(1 + (1 - var(--p)) * 1.9));
  transform-box: view-box;
}

.lp-map__land { fill: #121417; }
.lp-map__dots { fill: url(#lp-map-dots); }
#lp-map-dots circle { fill: rgba(255, 255, 255, 0.06); }
.lp-map__ocean { fill: #080b0f; }

.lp-map__coast {
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.lp-map__road {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.lp-map__highway {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.lp-map__rocks {
  fill: #121417;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.2;
}

.lp-map__label {
  fill: rgba(255, 255, 255, 0.5);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-anchor: middle;
  text-transform: uppercase;
}

.lp-map__label--ocean {
  fill: rgba(255, 255, 255, 0.2);
  font-size: 18px;
  letter-spacing: 0.5em;
}

/* The script draws the route by its measured length, so the rider dot and
   the line always agree. */
.lp-map__route,
.lp-map__route-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-map__route {
  stroke: var(--yellow);
  stroke-width: 6;
}

.lp-map__route-glow {
  filter: blur(8px);
  stroke: rgba(255, 212, 58, 0.4);
  stroke-width: 20;
}

.lp-map__pop {
  --k: clamp(0, calc((var(--r) - var(--at)) * 14), 1);
  opacity: var(--k);
  transform: scale(calc(0.3 + var(--k) * 0.7));
  transform-box: fill-box;
  transform-origin: center;
}

.lp-map__flag { --at: 0.975; }
.lp-map__stop-ring { fill: #fff; }
.lp-map__flag-dot { fill: var(--yellow); }
.lp-map__flag-pulse { fill: rgba(255, 212, 58, 0.25); }

.lp-map__flag-mark {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.lp-map__rider-halo { fill: rgba(32, 145, 237, 0.25); }

.lp-map__rider-dot {
  fill: #2091ed;
  stroke: #fff;
  stroke-width: 4;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-map__flag-pulse {
    animation: lp-pulse 1800ms ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
}

@keyframes lp-pulse {
  0% { opacity: 0.9; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.8); }
}

.lp-map__copy {
  position: absolute;
  top: clamp(96px, 14svh, 150px);
  left: max(var(--lp-gutter), 6vw);
  width: min(460px, 36vw);
  --lp-ink: #fff;
  --lp-muted: rgba(255, 255, 255, 0.66);
}

/* ---- 3. The flag floods the page yellow; friends ride along ---------- */

.lp-roadbook {
  position: relative;
  padding: 18svh var(--lp-gutter) 22svh;
}

.lp-roadbook__flood {
  position: absolute;
  inset: 0;
  background: var(--yellow);
  clip-path: circle(calc(var(--p) * 160vmax) at 50% 0%);
}

.lp-roadbook__inner {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: clamp(48px, 8svh, 90px);
}

.lp-roadbook__copy {
  max-width: 860px;
  text-align: center;
}

.lp-roadbook__copy h2 span {
  display: inline;
  padding: 0 0.12em;
  background: linear-gradient(transparent 8%, #fff 8%, #fff 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.lp-roadbook__copy p { margin-inline: auto; max-width: 36em; }

/* Your Roadbook on the left, a friend's folded iPhone Duo on the right, and
   the lane between them is where reactions and comments pass back and forth.
   The Duo is drawn at its real size beside iPhone 18 Pro: 82.5 × 115 mm
   against 73.4 × 150 mm. */
.lp-social {
  --p: var(--s);
  --rb: 26%;
  --fr: 84%;
  --dw: calc(var(--pw) * 1.124);
  --dh: calc(var(--dw) * 1.3975);
  --lane-left: calc(var(--rb) + var(--pw) / 2 + 20px);
  --lane: calc(var(--fr) - var(--dw) / 2 - var(--rb) - var(--pw) / 2 - 40px);
  position: relative;
  width: min(100%, 1200px);
  height: var(--ph);
}

.lp-rig--roadbook,
.lp-rig--friends {
  position: absolute;
  top: 0;
  margin: 0;
}

.lp-rig--roadbook { left: calc(var(--rb) - var(--pw) / 2 - (1 - var(--s)) * 26vw); }

.lp-rig--friends {
  top: calc((var(--ph) - var(--dh)) / 2);
  left: calc(var(--fr) - var(--dw) / 2 + (1 - var(--s)) * 26vw);
  width: var(--dw);
  height: var(--dh);
}

.lp-duo-folded {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 44px 60px rgba(40, 32, 12, 0.3));
}

.lp-photos {
  position: absolute;
  z-index: 1;
  inset: 0;
}

/* The stops fan out from behind the phone, like the film's photos. */
.lp-photo {
  --q: clamp(0, calc((var(--s) - 0.18) / 0.82), 1);
  position: absolute;
  top: 30%;
  left: 50%;
  width: calc(var(--pw) * 0.86);
  height: auto;
  border: 8px solid #fff;
  border-bottom-width: 30px;
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(40, 32, 12, 0.28);
  opacity: calc(var(--q) * 2);
  transform:
    translate(calc(-50% + var(--q) * var(--fx) * 0.6), calc(-50% + var(--q) * var(--fy)))
    rotate(calc(var(--q) * var(--fr)));
}

.lp-thread {
  position: absolute;
  z-index: 4;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.lp-thread .lp-note {
  --from: 170px;
  left: var(--lane-left);
  width: min(var(--nw), var(--lane));
}

.lp-thread .lp-note[data-slot="t1"] { top: 8%; }
.lp-thread .lp-note[data-slot="t2"] { top: 29%; margin-left: 14px; }
.lp-thread .lp-note[data-slot="t3"] { top: 50%; }

.lp-react {
  --q: clamp(0, calc((var(--s) - var(--d)) / (1 - var(--d))), 1);
  position: absolute;
  z-index: 5;
  top: var(--y);
  left: calc(var(--lane-left) + var(--lx) * var(--lane));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(40, 32, 12, 0.2);
  font-size: 20px;
  line-height: 1;
  opacity: var(--q);
  transform: translateY(calc((1 - var(--q)) * 30px)) scale(calc(0.5 + var(--q) * 0.5));
}

.lp-react__who {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2.5px solid var(--ring);
  border-radius: 50%;
  color: #111;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-react { animation: lp-bob 3.4s ease-in-out infinite; }
  .lp-react:nth-child(even) { animation-delay: -1.7s; }
}

@keyframes lp-bob {
  50% { translate: 0 -8px; }
}

/* ---- 4. A white sheet, every recap style fanned out ------------------ */

.lp-recaps {
  --cw: clamp(150px, 14.5vw, 226px);
  position: relative;
  z-index: 2;
  margin-top: -56px;
  padding: 16svh var(--lp-gutter) 14svh;
  overflow: hidden;
  border-radius: 56px;
  background: var(--lp-paper);
  --lp-ink: #111111;
  --lp-muted: rgba(17, 17, 17, 0.68);
  color: var(--lp-ink);
  color-scheme: light;
}

.lp-recaps__copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.lp-recaps__copy p { margin-inline: auto; max-width: 34em; }

.lp-deck {
  position: relative;
  height: calc(var(--cw) * 1.78 + 90px);
  margin: clamp(40px, 7svh, 70px) 0 0;
  padding: 0;
  list-style: none;
}

/* The six cards start as one stack and deal out into a hand. */
.lp-card {
  --q: clamp(0, calc((var(--p) - 0.1) / 0.75), 1);
  position: absolute;
  z-index: calc(10 - var(--i));
  top: 30px;
  left: 50%;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  transform:
    translate(calc(var(--q) * var(--dx) * var(--cw) * 0.86), calc(var(--q) * var(--dy) * 1px))
    rotate(calc((1 - var(--q)) * (var(--i) - 2.5) * 2deg + var(--q) * var(--rot)));
}

.lp-card:nth-child(3),
.lp-card:nth-child(4) { z-index: 12; }

.lp-card__face {
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #111;
  box-shadow: 0 30px 60px rgba(20, 16, 6, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: transform 320ms cubic-bezier(0.3, 1.3, 0.5, 1);
}

.lp-card__face {
  position: relative;
}

.lp-card__face > img,
.lp-card__face > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hovering a card plays its video; it fades in once it is actually moving. */
.lp-card__face > video {
  opacity: 0;
  transition: opacity 240ms ease;
}

.lp-card.is-playing .lp-card__face > video { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .lp-card:hover { z-index: 20; }
  .lp-card:hover .lp-card__face { transform: translateY(-22px) scale(1.05); }
}

/* ---- 5. Hit record: how a drive gets made ---------------------------- */

.lp-record {
  position: relative;
  height: calc(var(--ph) + 8svh);
  margin-top: clamp(96px, 16svh, 180px);
}

.lp-rig--record {
  position: absolute;
  top: 0;
  left: calc(50% - var(--pw) / 2 + var(--slide));
}

.lp-rig--record .lp-phone {
  opacity: clamp(0, calc(var(--p) * 3), 1);
  transform: translateY(calc((1 - var(--p)) * 70px));
}

.lp-record__copy {
  position: absolute;
  top: calc(var(--ph) * 0.28);
  left: max(var(--lp-gutter), 6vw);
  width: min(430px, 29vw);
}

/* ---- 6. Everywhere ----------------------------------------------------- */

.lp-finale {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 14svh var(--lp-gutter) 8svh;
  text-align: center;
}

/* The icon file carries Apple's continuous-corner shape in its alpha, so
   shadows follow the alpha rather than a circular border radius. */
.lp-finale__icon {
  width: clamp(120px, 11vw, 168px);
  height: auto;
  margin-bottom: clamp(28px, 5svh, 44px);
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.4));
  opacity: clamp(0, calc(var(--p) * 2), 1);
  transform:
    translateY(calc((1 - var(--p)) * 60px))
    scale(calc(0.7 + var(--p) * 0.3))
    rotate(calc((1 - var(--p)) * -12deg));
}

/* The press kit's family picture, assembled as the section scrolls in. Each
   device ends exactly where the downloadable PNG has it. */
.lp-family {
  position: relative;
  width: min(100%, 1180px);
  margin-top: clamp(28px, 5svh, 52px);
  aspect-ratio: var(--ratio);
}

.lp-family__device {
  --q: clamp(0, calc((var(--p, 1) - var(--d, 0)) / (1 - var(--d, 0))), 1);
  position: absolute;
  top: var(--t);
  left: var(--l);
  width: var(--size);
  height: auto;
  opacity: calc(var(--q) * 1.4 - 0.2);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.3));
  transform: translate(calc((1 - var(--q)) * var(--dx)), calc((1 - var(--q)) * var(--dy)));
  will-change: transform, opacity;
}

/* Under the family, the Home trail with two of the crew's cars rolling in.
   The renders face left; mirrored, they head the way the trail reads. */
.lp-road {
  position: relative;
  width: min(100%, 1180px);
  aspect-ratio: 2400 / 300;
}

.lp-road svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: clamp(0, calc(var(--p, 1) * 2 - 0.6), 1);
}

.lp-road path {
  fill: none;
  stroke: #e2b21e;
  stroke-dasharray: 40 30;
  stroke-linecap: round;
  stroke-width: 12;
}

.lp-road__car {
  --q: clamp(0, calc((var(--p, 1) - var(--d, 0)) / (1 - var(--d, 0))), 1);
  position: absolute;
  bottom: var(--b);
  left: var(--l);
  width: var(--size);
  height: auto;
  opacity: calc(var(--q) * 1.4 - 0.2);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.3));
  transform: translateX(calc((1 - var(--q)) * -140%)) scaleX(-1);
  will-change: transform, opacity;
}

/* The two stores and the agent connector, side by side. The store group
   carries 13px of padding, so the connector sits 13px down to line up. */
.lp-cta--finale {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: clamp(20px, 4svh, 36px);
}

.lp-store-download--agent { width: 172px; margin-top: 13px; }

.lp-store-badge--agent {
  height: 52px;
  gap: 8px;
  padding: 0 14px 0 11px;
  border: 1px solid #a6a6a6;
  border-radius: 9px;
  color: #fff;
  background: #000;
  white-space: nowrap;
}

.lp-store-badge--agent svg { width: 26px; height: 26px; flex: 0 0 26px; fill: currentColor; }
.lp-agent { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; text-align: left; }
.lp-agent__small { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; }
.lp-agent__big { margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

.lp-cta__url {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.3);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* The closing button carries the Apple logo, with its two lines centered. */
.lp-store--apple {
  justify-content: center;
  gap: 12px;
  padding: 10px 32px 10px 26px;
}

.lp-store__apple {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-top: -3px;
  fill: #000;
}



/* ---- Odometer -------------------------------------------------------- */

.lp-odometer {
  position: fixed;
  z-index: 20;
  bottom: 22px;
  left: max(var(--lp-gutter), calc((100vw - 1320px) / 2));
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--lp-note-edge);
  border-radius: 999px;
  color: var(--lp-ink);
  background: var(--lp-note-bg);
  box-shadow: var(--lp-note-shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
}

.lp-odometer.is-shown {
  opacity: 1;
  transform: none;
}

.lp-odometer__digits {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lp-odometer__unit {
  color: var(--lp-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- The film: the phone turns sideways ------------------------------ */

.lp-dim {
  position: fixed;
  z-index: 50;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}

.film-open { overflow: hidden; }
.film-open .lp-dim { opacity: 0.96; pointer-events: auto; }
.film-open .lp-nav,
.film-open .lp-odometer { opacity: 0; }
.film-open .lp-rig--drive .lp-note,
.film-open .lp-trail { opacity: 0; }
.film-open .lp-rig--drive,
.film-landscape .lp-rig--drive,
.film-portrait .lp-rig--drive { z-index: 60; }

.lp-phone__body.is-lifted {
  position: fixed;
  z-index: 60;
  margin: 0;
}

.lp-film {
  --r: 15cqmin;
  --inset: max(12px, calc(var(--r) * 0.7 - 18px));
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  outline: none;
  color: #fff;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}

.film-landscape .lp-film {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100cqh;
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(90deg);
}

.lp-film.is-showing {
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease;
}

.lp-film:fullscreen {
  --inset: 28px;
  width: 100vw;
  height: 100vh;
  transform: none;
}

/* The film fills the phone's screen edge to edge, like a real iPhone playing
   video, with the bezel's Dynamic Island over it. Full screen shows it whole. */
.lp-film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.lp-film:fullscreen .lp-film__video { object-fit: contain; }

.lp-film.is-idle { cursor: none; }

/* Liquid Glass: a thin, clear lens with a bright rim. */
.lp-glass {
  border: 0;
  color: #fff;
  background: rgba(24, 24, 26, 0.3);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
}

.lp-film svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.lp-film .lp-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.lp-icon-pause,
.lp-icon-muted { display: none; }
.is-playing .lp-icon-play { display: none; }
.is-playing .lp-icon-pause { display: block; }
.is-muted .lp-icon-sound { display: none; }
.is-muted .lp-icon-muted { display: block; }

.lp-film__bar,
.lp-film__close,
.lp-film__bigplay,
.lp-film__end,
.lp-film__loader {
  transition: opacity 240ms ease, transform 240ms ease;
}

.lp-film__bar {
  position: absolute;
  z-index: 3;
  bottom: var(--inset);
  left: 50%;
  display: flex;
  width: min(600px, calc(100% - var(--inset) * 2));
  height: 40px;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  border-radius: 999px;
  transform: translateX(-50%);
}

.lp-film__icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.lp-film__icon:hover { background: rgba(255, 255, 255, 0.14); }
.lp-film__icon:active { transform: scale(0.9); }

.lp-film__close {
  position: absolute;
  z-index: 4;
  top: var(--inset);
  right: var(--inset);
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}

.lp-film__close svg { width: 15px; height: 15px; }

.lp-film__bigplay {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.86);
}

.lp-film__bigplay svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}

.lp-film.is-ready:not(.is-playing):not(.is-ended):not(.is-loading) .lp-film__bigplay {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.lp-film:not(.is-ready) :is(.lp-film__bar, .lp-film__close),
.lp-film.is-idle :is(.lp-film__bar, .lp-film__close) {
  opacity: 0;
  pointer-events: none;
}

.lp-film.is-idle .lp-film__bar { transform: translate(-50%, 8px); }

.lp-film__time {
  min-width: 36px;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lp-film__track {
  position: relative;
  display: flex;
  height: 28px;
  flex: 1;
  align-items: center;
  margin: 0 4px;
  cursor: pointer;
  touch-action: none;
}

.lp-film__rail {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transition: height 160ms ease;
}

.lp-film__buffered,
.lp-film__played {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.lp-film__buffered { width: var(--buffered, 0%); background: rgba(255, 255, 255, 0.26); }
.lp-film__played { width: var(--played, 0%); background: #fff; }

.lp-film__thumb {
  position: absolute;
  top: 50%;
  left: var(--played, 0%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 160ms ease;
}

.lp-film__track:hover .lp-film__rail,
.lp-film__track.is-scrubbing .lp-film__rail { height: 6px; }

.lp-film__track:hover .lp-film__thumb,
.lp-film__track:focus-visible .lp-film__thumb,
.lp-film__track.is-scrubbing .lp-film__thumb { transform: translate(-50%, -50%) scale(1); }

/* Buffering: three lane dashes running toward you. */
.lp-film__loader {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.lp-film__loader span {
  width: 4px;
  height: 14px;
  border-radius: 3px;
  background: var(--yellow);
  animation: lp-dash 900ms linear infinite;
}

.lp-film__loader span:nth-child(2) { animation-delay: 300ms; }
.lp-film__loader span:nth-child(3) { animation-delay: 600ms; }

.lp-film.is-loading .lp-film__loader { opacity: 1; }

@keyframes lp-dash {
  0% { opacity: 0.15; transform: scale(0.7); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.15; transform: scale(0.7); }
}

.lp-film__end {
  position: absolute;
  z-index: 3;
  right: var(--inset);
  bottom: calc(var(--inset) + 60px);
  left: var(--inset);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.lp-film.is-ended .lp-film__end {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.lp-store--film { min-height: 52px; padding: 7px 22px 7px 8px; }
.lp-store--film > img { width: 38px; height: 38px; flex-basis: 38px; }
.lp-store--film .lp-store__title { font-size: 15px; }

.lp-film__again {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Footer ---------------------------------------------------------- */

.lp-footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  padding: 40px var(--lp-gutter) 30px;
  transition: opacity 500ms ease;
}

.lp-footer .finish {
  width: min(100%, 1320px);
  margin: 0;
  background-image: repeating-conic-gradient(var(--lp-check) 0% 25%, transparent 0% 50%);
}

.lp-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}

.lp-footer a {
  color: var(--lp-soft);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.lp-footer a:hover { color: var(--lp-ink); }

/* ---- Entrance -------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .lp-title,
  .lp-lede,
  .lp-hero .lp-cta { animation: lp-rise 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .lp-lede { animation-delay: 90ms; }
  .lp-hero .lp-cta { animation-delay: 180ms; }
  .lp-rig--drive .lp-phone__body { animation: lp-phone-in 1000ms cubic-bezier(0.16, 0.84, 0.24, 1) 240ms backwards; }
}

@keyframes lp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes lp-phone-in {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-nav,
  .lp-odometer,
  .lp-store,
  .lp-cta__drawer,
  .lp-cta__paper,
  .lp-dim,
  .lp-film { transition: none; }
  .lp-cta.is-open .lp-cta__paper { animation: none; }
  .lp-store-download.is-open .lp-cta__paper { animation: none; }
  .lp-nav__cta.is-open .lp-cta__paper { animation: none; }
  .lp-film-link::after { transition: none; }
}

/* ---- Narrower screens ------------------------------------------------ */

@media (min-width: 900px) {
  .lp-hero {
    padding-top: calc(clamp(88px, 11svh, 120px) + var(--promo-h, 0px));
  }

  .lp-hero__icons {
    --icon-size: clamp(120px, min(11vw, 18svh), 160px);
    margin-bottom: clamp(16px, 2.4svh, 26px);
  }

  .lp-drive { margin-top: clamp(20px, 3svh, 32px); }
}

@media (max-width: 1279px) {
  .lp-note[data-slot="l2"],
  .lp-note[data-slot="r2"] { display: none; }
}

@media (max-width: 899px) {
  .lp {
    --pw: min(60vw, 300px);
    --slide: 0px;
    --nw: min(310px, 80vw);
  }

  .lp-drive {
    display: flex;
    height: auto;
    align-items: center;
    flex-direction: column;
    margin-top: 12svh;
    padding: 0 var(--lp-gutter);
  }

  .lp-drive__copy {
    position: static;
    width: min(100%, 560px);
    text-align: center;
    transform: translateY(calc((1 - var(--q)) * 30px));
  }

  .lp-rig--drive {
    position: relative;
    left: auto;
    margin-top: 40px;
  }

  /* The road runs behind the phone, then its last curve crosses in front of
     the phone's corner on the way out. It draws behind first, then in front. */
  .lp-trail {
    --stop-w: calc(var(--pw) * 0.44);
    right: 0;
    left: 0;
  }

  .lp-stop { top: var(--my); left: var(--mx); }

  .lp-trail__route--wide { display: none; }
  .lp-trail__route--narrow,
  .lp-trail__route--front { display: block; }
  .lp-trail__route--front { z-index: 3; }
  .lp-trail__route--narrow path { stroke-dashoffset: calc((1 - clamp(0, var(--p) / 0.72, 1)) * 1px); }
  .lp-trail__route--front path { stroke-dashoffset: calc((1 - clamp(0, (var(--p) - 0.72) / 0.28, 1)) * 1px); }
  .lp-trail__glow { stroke-width: 4.4; }
  .lp-trail__line { stroke-width: 1.75; }
  .lp-stop { padding: 5px 5px 22px; }
  .lp-stop::before { top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(0, 0, 0, 0.35); }
  .lp-stop figcaption { right: 6px; bottom: 6px; left: 6px; overflow: hidden; font-size: 8.5px; letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; }
  .lp-stop__more { display: none; }

  .lp-record {
    display: flex;
    height: auto;
    align-items: center;
    flex-direction: column;
    margin-top: 16svh;
    padding: 0 var(--lp-gutter);
  }

  .lp-rig--record {
    position: relative;
    left: auto;
  }

  .lp-record__copy {
    position: static;
    width: min(100%, 560px);
    order: 2;
    margin-top: 36px;
    text-align: center;
  }

  .lp-note[data-slot="l1"],
  .lp-note[data-slot="l2"],
  .lp-note[data-slot="l3"],
  .lp-note[data-slot="r1"],
  .lp-note[data-slot="r2"],
  .lp-note[data-slot="r3"] {
    right: auto;
    left: calc(50% - var(--nw) / 2);
  }

  .lp-note[data-slot="l1"] { top: 12%; margin-left: -18px; }
  .lp-note[data-slot="r1"] { top: 38%; margin-left: 18px; --from: 170px; }
  .lp-note[data-slot="r3"],
  .lp-note[data-slot="l3"] { top: 64%; margin-left: -12px; }
  .lp-note[data-slot="r2"] { display: none; }

  .lp-map { height: 88svh; }
  .lp-map__label--ocean { display: none; }

  .lp-map__copy {
    top: 12svh;
    right: var(--lp-gutter);
    left: var(--lp-gutter);
    width: auto;
    text-align: center;
  }

  .lp-social {
    --rb: 32%;
    --fr: 66%;
    --lane-left: calc(50% - var(--nw) / 2);
    --lane: var(--nw);
    height: calc(var(--ph) * 1.08);
  }

  .lp-rig--roadbook { z-index: 2; left: calc(var(--rb) - var(--pw) / 2 - (1 - var(--s)) * 40vw); }
  .lp-rig--friends { z-index: 1; top: 10%; left: calc(var(--fr) - var(--dw) / 2 + (1 - var(--s)) * 40vw); }
  .lp-photo { width: calc(var(--pw) * 0.72); }
  .lp-photo:nth-child(2) { display: none; }
  .lp-thread .lp-note { margin-left: 0; }
  .lp-thread .lp-note[data-slot="t1"] { top: 44%; }
  .lp-thread .lp-note[data-slot="t2"] { top: 66%; }
  .lp-thread .lp-note[data-slot="t3"] { display: none; }
  .lp-react { top: calc(var(--y) * 0.3 + 70%); }

  .lp-recaps {
    --cw: min(40vw, 190px);
    margin-top: -32px;
    border-radius: 32px;
  }

  .lp-card {
    transform:
      translate(calc(var(--q) * var(--dx) * var(--cw) * 0.36), calc(var(--q) * var(--dy) * 0.6px))
      rotate(calc((1 - var(--q)) * (var(--i) - 2.5) * 2deg + var(--q) * var(--rot) * 0.8));
  }

  .lp-odometer { display: none; }
}

@media (max-width: 480px) {
  .lp-nav { padding: 14px 16px; }
  .lp-nav.is-scrolled { padding-top: 10px; padding-bottom: 10px; }
  .lp-brand { font-size: 13px; }
  .lp-brand img { width: 31px; height: 31px; }
  .lp-hero { padding: calc(96px + var(--promo-h, 0px)) 16px 0; }
  .lp-title { font-size: clamp(27px, 8.2vw, 40px); }
  .lp-lede { font-size: 16px; }
  .lp-cta { width: 100%; }
  .lp-cta .lp-store { width: 100%; justify-content: center; min-height: 60px; }
  .lp-store > img { width: 40px; height: 40px; flex-basis: 40px; }
  .lp-store__title { font-size: 17px; }
  .lp-store-badges { gap: 10px; padding: 12px; }
  .lp-store-download { width: 132px; }
  .lp-store-download--google { width: 152px; }
  .lp-store-download .lp-cta__drawer { width: 174px; }
  .lp-store-download .lp-cta__feed { padding: 0 12px; }
  .lp-store-download .lp-cta__paper { width: 150px; padding-right: 12px; padding-left: 12px; }
  .lp-store-download .lp-cta__paper > img { width: 116px; height: 116px; }
  .lp-store-badge--apple img { width: 132px; height: 44px; }
  .lp-store-badge--google { margin: -11px -9px; }
  .lp-store-badge--google img { width: 170px; }
  .lp-store-download--agent { width: 150px; margin-top: 12px; }
  .lp-store-badge--agent { height: 44px; gap: 7px; padding: 0 11px 0 9px; border-radius: 8px; }
  .lp-store-badge--agent svg { width: 22px; height: 22px; flex-basis: 22px; }
  .lp-agent__small { font-size: 8.5px; }
  .lp-agent__big { font-size: 17px; }
  .lp h2 { font-size: clamp(25px, 7.2vw, 36px); }
  .lp-film__end { flex-direction: column; gap: 10px; }
}

/* ---- Phones: one thing at a time ----------------------------------- */

@media (max-width: 899px) {
  /* The drive's phone follows the buttons directly; its words come after. */
  .lp-drive { margin-top: 36px; }
  .lp-rig--drive { margin-top: 0; }
  .lp-drive__copy { order: 2; margin-top: 56px; }

  /* Friends: the two devices side by side, then what they send, in a list. */
  .lp-social {
    --pw: min(39vw, 210px);
    --ph: calc(var(--pw) * 2.0444);
    --dw: calc(var(--pw) * 1.124);
    --dh: calc(var(--dw) * 1.3975);
    display: flex;
    height: auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3vw;
  }

  .lp-rig--roadbook,
  .lp-rig--friends {
    position: relative;
    top: auto;
    left: auto;
  }

  .lp-rig--roadbook { transform: translateX(calc((1 - var(--s)) * -24vw)); }
  .lp-rig--friends { transform: translateX(calc((1 - var(--s)) * 24vw)); }
  .lp-photos { display: none; }

  .lp-thread {
    position: static;
    display: flex;
    order: 3;
    flex-basis: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 10px;
    margin-top: 28px;
  }

  .lp-thread .lp-note,
  .lp-thread .lp-note[data-slot] {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: flex;
    width: min(100%, 360px);
    flex: 0 0 min(100%, 360px);
    margin: 0;
  }

  .lp-react,
  .lp-react:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;
    display: inline-flex;
    margin-top: 4px;
  }

  /* Recaps: a row you swipe through, every card whole. */
  .lp-deck {
    display: flex;
    height: auto;
    gap: 14px;
    margin-right: calc(var(--lp-gutter) * -1);
    margin-left: calc(var(--lp-gutter) * -1);
    padding: 10px var(--lp-gutter) 34px;
    overflow-x: auto;
    scroll-padding-inline: var(--lp-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .lp-deck::-webkit-scrollbar { display: none; }

  .lp-card,
  .lp-card:nth-child(n) {
    position: relative;
    z-index: auto;
    top: auto;
    left: auto;
    width: 62vw;
    flex: 0 0 62vw;
    margin: 0;
    scroll-snap-align: center;
    transform: none;
  }
}