/* Popmelon v4 ("Premiere").
   A quiet, product-first frame in the Apple tradition: neutral greys, one
   typeface, big type, the product on a big screen. The warmth comes from the
   brand: melon accents, real people, and one sunny moment at the end. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 106%;
  ascent-override: 91.4%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader Display";
  src: url("/assets/fonts/newsreader-display-400-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #fff;
  --gray: #f5f5f7;
  --gray-2: #e8e8ed;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;

  --melon: #ff5a73;
  --melon-cta: #d42f49;
  --melon-deep: #b8203a;
  --link: #c4243e;
  --rind: #147d56;
  --butter: #ffcd3c;
  --sun: #ffd45c;
  --night: #000;

  --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--sans);
  --shout: "Anton", "Inter", Impact, "Arial Narrow", sans-serif;
  --serif: "Newsreader Display", Georgia, "Times New Roman", serif;

  --gutter: clamp(20px, 4vw, 40px);
  --max: 1120px;
  --header-h: 56px;
  --r: 18px;
  --r-lg: 28px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 20px -8px rgba(0, 0, 0, 0.12);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 24px 60px -24px rgba(0, 0, 0, 0.28);

  /* Names the long-form pages (guides.css) and the tour still use. */
  --warm: var(--gray);
  --paper: #fff;
  --card: #fff;
  --leaf: var(--rind);
  --ink-soft: var(--muted);
  --rind-deep: var(--rind);
  --sky: #0a6cff;
  --lilac: #a98bff;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: #ffd0d8;
}

.wrap {
  width: min(100% - var(--gutter) * 2, var(--max));
  margin-inline: auto;
}
.center {
  text-align: center;
}
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
.icon-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Type ---------- */

.h-hero {
  font-size: clamp(46px, 8.6vw, 116px);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1;
}
.h-xl {
  font-size: clamp(40px, 6.2vw, 84px);
  letter-spacing: -0.038em;
  line-height: 1.02;
}
.h-l {
  font-size: clamp(32px, 4.6vw, 60px);
  letter-spacing: -0.032em;
  line-height: 1.05;
}
.h-m {
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -0.026em;
  line-height: 1.1;
}
.soft {
  color: var(--muted);
}
.lead {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.42;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: -0.016em;
}
.para {
  max-width: 540px;
  margin-inline: auto;
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--muted);
}
.para strong {
  color: var(--ink);
  font-weight: 600;
}
.shout {
  font-family: var(--shout);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.9;
}

/* "Learn more ›" links */
.more,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--link);
  font-weight: 500;
  text-decoration: none;
}
.more::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.32em;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.more:hover::after {
  transform: translateX(2px) rotate(45deg);
}
.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- Buttons ---------- */

.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.2s var(--ease),
    box-shadow 0.2s;
}
.btn:hover,
.button:hover {
  background: #000;
}
.btn:active,
.button:active {
  transform: scale(0.98);
}
.btn .icon {
  width: 20px;
  height: 20px;
}
.btn-melon,
.button-melon {
  background: var(--melon-cta);
}
.btn-melon:hover,
.button-melon:hover {
  background: var(--melon-deep);
}
.btn-white {
  background: #fff;
  color: var(--ink);
}
.btn-white:hover {
  background: #ececef;
}
.btn-ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn-ghost:hover {
  background: rgba(127, 127, 127, 0.16);
}
.btn-brave {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px #d6d6dc;
}
.btn-brave:hover {
  background: #f1f1f4;
}
.btn-brave .icon {
  color: #fb542b;
}
.btn-small {
  min-height: 34px;
  padding: 0 15px;
  font-size: 14px;
}
.btn-large,
.button-large {
  min-height: 56px;
  padding: 0 30px;
  font-size: 18px;
}

/* ---------- Announcement ---------- */

.announce {
  background: var(--gray);
  font-size: 14px;
  text-align: center;
}
.announce a {
  display: block;
  padding: 11px var(--gutter);
  color: var(--ink-2);
  text-decoration: none;
}
.announce a span {
  color: var(--link);
  white-space: nowrap;
}
.announce a:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announce[hidden] {
  display: none;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 0.3s;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.045em;
  text-decoration: none;
}
.wordmark img {
  width: 30px;
  height: 30px;
}
.wordmark .dot {
  color: var(--melon);
}
.site-nav {
  display: flex;
  gap: 4px;
  margin-inline: auto;
}
.site-nav a,
.header-cta .plain {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.site-nav a:hover,
.header-cta .plain:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Narrow screens drop links by name, never by position (a Pricing link joins
   the nav when Plus launches and must stay); the whole nav goes at phone width. */
@media (max-width: 900px) {
  .site-nav {
    gap: 0;
  }
  .site-nav a[href="#nights"],
  .site-nav a[href="/#nights"],
  .site-nav a[href="#faq"],
  .site-nav a[href="/#faq"] {
    display: none;
  }
}
@media (max-width: 480px) {
  .site-nav {
    display: none;
  }
  .header-cta {
    margin-left: auto;
  }
}
@media (max-width: 420px) {
  .header-cta .plain {
    display: none;
  }
}

/* ---------- Sections ---------- */

.sec {
  padding-block: clamp(80px, 10vw, 140px);
}
.sec-gray {
  background: var(--gray);
}
.sec-head {
  margin-bottom: clamp(36px, 4.4vw, 60px);
}
.sec-head .lead {
  max-width: 640px;
  margin-top: 18px;
}
.sec-head.center .lead {
  margin-inline: auto;
}

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

.hero {
  position: relative;
  padding-top: clamp(40px, 4.4vw, 64px);
  background: var(--gray);
  text-align: center;
  overflow: clip;
}
.hero-head {
  position: relative;
  z-index: 2;
}
.app-icon {
  display: grid;
  place-items: center;
  width: clamp(64px, 6vw, 84px);
  aspect-ratio: 1;
  margin: 0 auto 16px;
  border-radius: 23%;
  background: #fff;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 10px 30px -10px rgba(0, 0, 0, 0.25);
}
.app-icon img {
  width: 70%;
  height: 70%;
}
.kicker {
  margin-bottom: 14px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero .lead {
  max-width: 640px;
  margin: 22px auto 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: 28px;
}
.hero-actions .more {
  font-size: 18px;
}
.hero-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}
.hero-stage {
  position: relative;
  margin-top: clamp(40px, 4.4vw, 64px);
  padding-bottom: clamp(56px, 7vw, 100px);
}
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 58% 0 0;
  background: #fff;
}

/* A big, thin-bezel display */
.display {
  position: relative;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, 1200px);
  margin-inline: auto;
  padding: clamp(4px, 0.62vw, 9px);
  border-radius: clamp(8px, 1.1vw, 16px);
  background: #0c0c0e;
  box-shadow:
    inset 0 0 0 1px #2c2c30,
    0 2px 4px rgba(0, 0, 0, 0.08),
    40px 60px 90px -50px rgba(0, 0, 0, 0.55),
    0 40px 120px -60px rgba(0, 0, 0, 0.35);
}
.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(4px, 0.5vw, 8px);
  background: #1a1c1e;
  container-type: inline-size;
}
.screen-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 32%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 30%);
  pointer-events: none;
}

/* The film players (home hero, /how-it-works) always fit the window: never taller
   than the viewport minus the header and some breathing room. */
.hero-stage .display {
  width: min(100% - var(--gutter) * 2, 1200px, (100svh - 190px) * 16 / 9);
}

/* The home hero plays the Popmelon film itself, which carries its own UI */
.screen-film::after {
  display: none;
}

/* Popmelon, floating over the film */
.ov {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: max(1.06cqi, 5px);
  letter-spacing: -0.01em;
}
.ov-title {
  position: absolute;
  left: 4%;
  bottom: 12%;
  color: #fff;
  text-align: left;
}
.ov-title small {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.85;
}
.ov-title b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 3.6em;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.ov-title span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.9em;
  padding: 0.42em 0.9em 0.42em 0.7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 0.95em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ov-title span::before,
.live-dot {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #22b56b;
  box-shadow: 0 0 0 0 rgba(34, 181, 107, 0.6);
  animation: live 2s infinite;
}
@keyframes live {
  70% {
    box-shadow: 0 0 0 0.6em rgba(34, 181, 107, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 181, 107, 0);
  }
}
.ov-bar {
  position: absolute;
  top: 4.5%;
  left: 3.2%;
  display: flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.35em 0.4em 0.35em 0.5em;
  border-radius: 0.9em;
  background: rgba(16, 37, 30, 0.92);
  color: #e8eee6;
  font-size: 1em;
  font-weight: 650;
}
.ov-bar .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding-right: 0.5em;
}
.ov-bar .logo img {
  width: 1.6em;
  height: 1.6em;
  padding: 0.18em;
  border-radius: 0.45em;
  background: #ffe4de;
}
.ov-bar .logo::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: #27c07d;
}
.ov-bar .tb {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 0.6em;
}
.ov-bar .tb .icon {
  width: 1.15em;
  height: 1.15em;
}
.ov-bar .tb.is-on {
  background: rgba(255, 255, 255, 0.12);
}

.ov-panel {
  position: absolute;
  top: 4.5%;
  right: 2.4%;
  bottom: 4.5%;
  display: flex;
  flex-direction: column;
  width: 27%;
  padding: 1.2em;
  border-radius: 1.5em;
  background: rgba(251, 250, 244, 0.93);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  color: #153c32;
  text-align: left;
  box-shadow: 0 1.5em 3em -1em rgba(0, 0, 0, 0.45);
}
.ov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.12em;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.ov-head span {
  display: grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.45em;
  padding: 0 0.4em;
  border-radius: 0.45em;
  background: #e5efe6;
  color: var(--rind);
  font-size: 0.8em;
}
.ov-people {
  display: flex;
  justify-content: space-between;
  margin: 1em 0 0.9em;
  padding-bottom: 1em;
  border-bottom: 1px solid #e3e3d8;
}
.ov-p {
  display: grid;
  justify-items: center;
  gap: 0.35em;
  font-size: 0.78em;
  font-weight: 650;
}
.ov-p i {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  background: var(--c, #ffcd3c) center / cover;
  font-style: normal;
  font-size: 1em;
  font-weight: 750;
  color: #fff;
}
.ov-p.is-talking i::after {
  content: "";
  position: absolute;
  inset: -0.28em;
  border: 0.2em solid #27c07d;
  border-radius: 50%;
  animation: talk 1.4s ease-in-out infinite;
}
@keyframes talk {
  50% {
    transform: scale(1.08);
    opacity: 0.55;
  }
}
.ov-p .mic {
  position: absolute;
  right: -0.2em;
  bottom: -0.2em;
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #fff;
  color: #69756d;
  box-shadow: 0 0 0 0.12em #fbfaf4;
}
.ov-p .mic .icon {
  width: 0.85em;
  height: 0.85em;
  stroke-width: 2.4;
}
.ov-msgs {
  display: grid;
  align-content: end;
  gap: 0.55em;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ov-sys {
  justify-self: center;
  margin-bottom: 0.3em;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: #e5efe6;
  color: #0f6646;
  font-size: 0.78em;
  font-weight: 650;
}
.ov-m {
  justify-self: start;
  max-width: 92%;
  padding: 0.55em 0.8em;
  border-radius: 1em 1em 1em 0.3em;
  background: #fff;
  font-size: 0.92em;
  line-height: 1.3;
  box-shadow: 0 0 0 1px #ecebe2;
}
.ov-m b {
  display: block;
  font-size: 0.82em;
  color: #69756d;
}
.ov-m.me {
  justify-self: end;
  border-radius: 1em 1em 0.3em 1em;
  background: #cc2a42;
  color: #fff;
  box-shadow: none;
}
.ov-m.me b {
  color: #ffd9df;
}
.ov-input {
  display: flex;
  align-items: center;
  margin-top: 0.9em;
  padding: 0.45em 0.45em 0.45em 0.9em;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e3d8;
  color: #69756d;
  font-size: 0.86em;
}
.ov-input i {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  margin-left: auto;
  border-radius: 0.55em;
  background: #cc2a42;
  color: #fff;
  font-style: normal;
}
.ov-input .icon {
  width: 1em;
  height: 1em;
}
.ov-reacts {
  position: absolute;
  right: 31%;
  bottom: 5%;
  width: 4em;
  height: 60%;
  pointer-events: none;
}
.ov-reacts span {
  position: absolute;
  bottom: 0;
  left: var(--x, 30%);
  font-size: 2.2em;
  line-height: 1;
  opacity: 0;
  animation: float 5.6s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes float {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  12% {
    opacity: 1;
    transform: translateY(-10%) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(-560%) translateX(var(--sway, 10%)) scale(1);
    opacity: 0;
  }
}

@container (max-width: 560px) {
  .ov-panel {
    width: 34%;
    padding: 1em;
  }
  .ov-input,
  .ov-sys,
  .ov-m:nth-child(-n + 2) {
    display: none;
  }
  .ov-p:nth-child(n + 4) {
    display: none;
  }
  .ov-p i {
    width: 4em;
    height: 4em;
  }
  .ov-m {
    font-size: 1.15em;
  }
  .ov-head {
    font-size: 1.3em;
  }
  .ov-bar .tb:not(:first-of-type) {
    display: none;
  }
  .ov-title b {
    font-size: 4.4em;
  }
  .ov-reacts {
    right: 38%;
  }
}

/* Hero entrance */
@media (prefers-reduced-motion: no-preference) {
  .hero-head > * {
    animation: rise 0.9s var(--ease-out) both;
  }
  .hero-head > :nth-child(2) {
    animation-delay: 0.06s;
  }
  .hero-head > :nth-child(3) {
    animation-delay: 0.12s;
  }
  .hero-head > :nth-child(4) {
    animation-delay: 0.2s;
  }
  .hero-head > :nth-child(n + 5) {
    animation-delay: 0.28s;
  }
  .hero .display {
    animation: lift 1.4s var(--ease-out) 0.3s both;
  }
  .ov-m[style] {
    animation: pop 0.5s var(--ease-out) both;
    animation-delay: calc(1.8s + var(--d, 0) * 1.6s);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes lift {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.965);
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(0.8em) scale(0.96);
  }
}

/* Phone visitors: the extension is desktop-only. */
.handoff {
  display: none;
  max-width: 460px;
  margin: 18px auto 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink-2);
  font-size: 15px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.handoff b {
  color: var(--ink);
}
.handoff .btn {
  margin-top: 10px;
  background: var(--gray-2);
  color: var(--ink);
}
.handoff .btn:hover {
  background: #dcdce2;
}
@media (pointer: coarse) and (max-width: 900px) {
  .handoff {
    display: block;
  }
}

/* ---------- Feature tiles (2 × 2) ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 64px) clamp(16px, 1.8vw, 24px);
}
.tile-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.4;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--gray);
  isolation: isolate;
}
.tile-copy {
  max-width: 500px;
  margin: 24px 20px 0;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--muted);
}
.tile-copy strong {
  color: var(--ink);
  font-weight: 600;
}
.tile .more {
  margin: 16px 20px 0;
  font-size: 17px;
}

/* Tile 1: three screens, one timecode */
.syncs {
  position: relative;
  width: 84%;
  height: 72%;
}
.mini {
  position: absolute;
  width: 54%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #222;
  box-shadow:
    0 0 0 4px #111,
    0 26px 40px -20px rgba(0, 0, 0, 0.5);
}
.mini:nth-child(1) {
  left: 0;
  top: 4%;
  rotate: -4deg;
}
.mini:nth-child(2) {
  left: 23%;
  top: 22%;
  z-index: 2;
}
.mini:nth-child(3) {
  right: 0;
  top: 2%;
  rotate: 4deg;
}
.mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini .tc {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.mini .tc::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22b56b;
}
.mini .who {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 600;
}

.vbars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}
.vbars b {
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background: #22b56b;
  transform-origin: center;
  animation: vbar 0.9s ease-in-out infinite;
}
.vbars b:nth-child(2) {
  animation-delay: -0.2s;
}
.vbars b:nth-child(3) {
  animation-delay: -0.45s;
}
.vbars b:nth-child(4) {
  animation-delay: -0.1s;
}
.vbars b:nth-child(5) {
  animation-delay: -0.6s;
}
@keyframes vbar {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}
.mic-note {
  position: absolute;
  right: 6%;
  bottom: 8%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--shadow-sm);
}
.mic-note .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

/* Tile 2: a video call, with someone talking */
.tile-call {
  width: min(70%, 350px);
  transform: rotate(-2deg);
}
.pm-call .cams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 14px;
}
.pm-call .cam {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: #2a231e;
}
.pm-call .cam img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-call .cam > b {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
}
.pm-call .cam > b .vbars {
  height: 11px;
  gap: 2px;
}
.pm-call .cam > b .vbars b {
  width: 2px;
}
.pm-call .cam.is-talking::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #27c07d;
  border-radius: 12px;
}

/* Tile 3: choosing what to play */
.tile-pick {
  width: min(80%, 340px);
  transform: rotate(-1.5deg);
}
.pm-pick {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
}
.pm-pick .pm-room-head {
  padding-bottom: 8px;
}
.pick {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  margin: 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--pm-line);
}
.pick .ic {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e5efe6;
  color: #153c32;
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
}
.pick .ic .icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}
.pick b {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.pick small {
  grid-column: 2;
  color: var(--pm-muted);
  font-size: 11.5px;
  font-weight: 600;
}
.pick .ok {
  grid-row: 1 / 3;
  grid-column: 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pm-red);
  color: #fff;
}
.pick .ok .icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.pick.is-on {
  box-shadow: inset 0 0 0 2px var(--pm-red);
}
.pm-pick .pm-hint {
  margin-top: 4px;
}

/* Tile 4: the popup */
.tile-pop {
  position: relative;
  transform: rotate(2deg);
}
.cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.tile-pop .cursor {
  right: 18%;
  bottom: 52px;
}

/* ---------- Same second (triptych) ---------- */

.trio-sec {
  padding-top: clamp(90px, 11vw, 150px);
  padding-bottom: clamp(80px, 10vw, 130px);
  background: var(--gray);
}
.trio-wrap {
  position: relative;
}
.trio-title {
  position: sticky;
  top: calc(var(--header-h) + 36px);
  z-index: 0;
  padding-bottom: clamp(28px, 3vw, 44px);
}
.trio {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.trio-cell {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: clamp(14px, 1.6vw, 22px);
  background: #3b332c;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
}
.trio-cell img,
.trio-cell video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trio-cell .tc {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.trio-cell .tc::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22b56b;
}
.trio-cell figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.trio-cell::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
}
.trio-sec .para {
  margin-top: clamp(48px, 6vw, 80px);
}

/* ---------- One link (the party moment) ---------- */

.party {
  overflow: hidden;
  padding-block: clamp(90px, 11vw, 150px);
  background: var(--night);
  color: #fff;
}
.party-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
}
.party h2 {
  font-size: clamp(50px, 6.9vw, 100px);
  white-space: nowrap;
}
.party p {
  max-width: 440px;
  margin-top: 26px;
  color: #c7c7cc;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
}
.party .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.party .btn {
  border-radius: 4px;
}
.party small {
  display: block;
  margin-top: 16px;
  color: #a1a1a6;
  font-size: 14px;
}
.party-photo {
  position: relative;
  justify-self: end;
  width: min(100%, 440px);
  margin-right: 30px;
}
.party-photo .frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: #2a211b;
}
.party-photo .frame img,
.party-photo .frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.chat .av {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--c, #ffcd3c) center / cover;
  color: #fff;
  font-weight: 750;
  box-shadow: 0 0 0 3px #000;
}
.chat .msg {
  position: relative;
  padding: 12px 18px;
  border-radius: 22px;
  background: #e9e9eb;
  color: #000;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 450;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.chat .msg::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: inherit;
  border-bottom-right-radius: 14px;
  clip-path: polygon(0 100%, 60% 0, 100% 0, 100% 100%);
}
.chat.me {
  flex-direction: row-reverse;
}
.chat.me .msg {
  background: #0a84ff;
  color: #fff;
}
.chat.me .msg::before {
  left: auto;
  right: -5px;
  transform: scaleX(-1);
}
.chat.c1 {
  left: -54px;
  top: 50%;
}
.chat.c2 {
  left: -54px;
  top: calc(50% + 84px);
}
.chat.c3 {
  right: -30px;
  bottom: 20px;
}
.typing {
  display: inline-flex;
  gap: 5px;
  padding-block: 6px;
}
.typing i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  animation: dots 1.2s infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dots {
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.js .party-photo .chat {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.js .party-photo.in .chat {
  opacity: 1;
  transform: none;
}
.js .party-photo.in .c1 {
  transition-delay: 0.3s;
}
.js .party-photo.in .c2 {
  transition-delay: 1s;
}
.js .party-photo.in .c3 {
  transition-delay: 1.7s;
}

/* ---------- Poster rail ---------- */

.rail-sec {
  padding-block: clamp(80px, 9vw, 120px);
  background: var(--gray);
  overflow: hidden;
}
.rail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.rail-nav {
  display: flex;
  gap: 12px;
}
.rail-nav button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--gray-2);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 0.2s,
    opacity 0.2s;
}
.rail-nav button:hover {
  background: #dcdce2;
}
.rail-nav button:disabled {
  opacity: 0.4;
  cursor: default;
}
.rail-nav .icon {
  width: 20px;
  height: 20px;
}
.rail-nav [data-prev] .icon {
  transform: scaleX(-1);
}
.rail {
  --edge: max(var(--gutter), (100vw - var(--max)) / 2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(300px, 42vw, 540px);
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 6px var(--edge) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  list-style: none;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar {
  display: none;
}
.rail > li {
  scroll-snap-align: start;
}
.poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #333;
  color: #fff;
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 12px 30px -16px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}
.poster img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(10deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.1) 55%, transparent);
}
.poster:hover img {
  transform: scale(1.045);
}
.poster .pt {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 12%;
  display: grid;
  gap: 6px;
}
.poster .pt b {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 0.98;
}
.poster .pt small {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
}
.poster .t-shout b {
  font-family: var(--shout);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.poster .t-serif b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -0.02em;
}
.poster .t-sans b {
  font-weight: 800;
  letter-spacing: -0.05em;
}
.poster .tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rail-sec .para {
  margin-top: clamp(56px, 7vw, 96px);
}

/* ---------- How it works (sticky screen, scrolling steps) ---------- */

.how {
  padding-block: clamp(90px, 11vw, 150px) clamp(40px, 5vw, 80px);
}
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
}
.how-steps {
  padding: 0;
  list-style: none;
}
.how-steps li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72vh;
}
/* The step being read is in ink; the others step back but stay readable. */
.js .how-steps li:not(.is-on) h3 {
  color: #86868b;
}
.js .how-steps li:not(.is-on) .n {
  background: var(--gray-2);
  color: var(--muted);
}
.how-steps h3,
.how-steps .n {
  transition:
    color 0.4s var(--ease),
    background-color 0.4s var(--ease);
}
.how-steps .n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.how-steps h3 {
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -0.034em;
}
.how-steps p {
  max-width: 380px;
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.45;
}
.how-steps .more {
  margin-top: 14px;
}
.how-visual {
  position: sticky;
  top: calc(var(--header-h) + (100vh - var(--header-h)) / 2);
  align-self: start;
  translate: 0 -50%;
  margin-top: 36vh;
}
.how-visual .display {
  width: 100%;
}
.how-visual .screen {
  aspect-ratio: 16 / 10;
  background: #f4f3ee;
}
.how-visual .screen::after {
  display: none;
}
.pane {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 0.6s var(--ease),
    transform 0.8s var(--ease-out);
}
.pane.is-on {
  opacity: 1;
  transform: none;
}
.no-js .pane-1 {
  opacity: 1;
  transform: none;
}
.pane-site {
  position: absolute;
  inset: 0;
  background: #141414;
}
.pane-site i {
  position: absolute;
  border-radius: 6px;
  background: #2a2a2a;
}
.pane-1 .pm-popup {
  position: absolute;
  top: 5%;
  right: 4%;
  transform-origin: top right;
  scale: var(--k, 1);
}
.pane-1 .cursor {
  right: 15%;
  top: calc(5% + var(--k, 1) * 186px);
  z-index: 3;
}
.pane-2 .pair {
  display: flex;
  align-items: center;
  gap: 4%;
  width: 92%;
}
.pane-2 .pm-room {
  flex: none;
  zoom: var(--k, 1);
}
@container (max-width: 480px) {
  .pane-2 .gchat {
    display: none;
  }
  .pane-2 .pair {
    justify-content: center;
  }
  .pane-2 .pm-room {
    zoom: calc(var(--k, 1) * 1.35);
  }
}
.gchat {
  flex: 1;
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: clamp(11px, 1.1vw, 13px);
}
.gchat header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
}
.gchat header i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--butter);
  font-style: normal;
}
.gchat .m {
  justify-self: start;
  max-width: 88%;
  padding: 7px 12px;
  border-radius: 16px;
  background: #e9e9eb;
  line-height: 1.3;
}
.gchat .m.me {
  justify-self: end;
  background: #0a84ff;
  color: #fff;
}
.gchat .m small {
  display: block;
  font-size: 0.82em;
  font-weight: 700;
  opacity: 0.7;
}
.gchat .link {
  display: block;
  margin-top: 4px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.9em;
  font-weight: 600;
}
.pane .gchat .m {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s,
    transform 0.5s var(--ease-out);
}
.pane.is-on .gchat .m {
  opacity: 1;
  transform: none;
}
.pane.is-on .gchat .m:nth-of-type(2) {
  transition-delay: 0.6s;
}
.pane.is-on .gchat .m:nth-of-type(3) {
  transition-delay: 1.2s;
}
.pane-3 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pane-3 .toast {
  position: absolute;
  left: 50%;
  top: 7%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  translate: -50% 0;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 650;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.pane-3 .toast .live-dot {
  width: 9px;
  height: 9px;
}
.pane-3 .who-row {
  position: absolute;
  left: 4%;
  bottom: 6%;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.pane-3 .who-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pane-3 .who-row i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c) center / cover;
  font-style: normal;
  font-size: 11px;
  font-weight: 750;
}

/* ---------- Compare ---------- */

.cmp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.cmp-col {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  background: var(--gray);
  text-align: center;
}
.cmp-col.is-us {
  background: #fff;
  box-shadow:
    inset 0 0 0 2px var(--ink),
    var(--shadow);
}
.cmp-col h3 {
  font-size: 21px;
  letter-spacing: -0.02em;
}
.cmp-col .price {
  margin-top: 6px;
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.cmp-col .price small {
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cmp-col .sub {
  min-height: 2.9em;
  color: var(--muted);
  font-size: 14px;
}
.cmp-col dl {
  margin: 22px 0 0;
}
.cmp-col dl div {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.cmp-col dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.cmp-col dd {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.cmp-col dd.no {
  color: var(--muted);
  font-weight: 500;
}
.cmp-col .yes::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.3em;
  margin-right: 0.5em;
  border-left: 2px solid #1a9a5c;
  border-bottom: 2px solid #1a9a5c;
  transform: translateY(-0.2em) rotate(-45deg);
}
.cmp-col > .btn,
.cmp-col > .more {
  align-self: center;
  margin-top: auto;
}
.cmp-col dl + .btn,
.cmp-col dl + .more {
  margin-top: 26px;
}
.cmp-note {
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
}
.faq-grid .lead {
  margin-top: 16px;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  position: relative;
  padding: 22px 44px 22px 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.faq-list summary::after {
  transform: rotate(90deg);
}
.faq-list details[open] summary::after {
  transform: rotate(0);
}
.faq-list details p {
  max-width: 640px;
  padding: 0 0 24px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}
.faq-list a {
  color: var(--link);
}

/* ---------- Closing (the one sunny moment) ---------- */

.closing-sec {
  padding-block: clamp(20px, 3vw, 40px) clamp(80px, 9vw, 120px);
}
.closing {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 112px) var(--gutter) clamp(160px, 17vw, 230px);
  border-radius: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(120% 90% at 50% 0%, #ffe48a 0%, transparent 60%),
    var(--sun);
  text-align: center;
}
.closing h2 {
  font-size: clamp(44px, 7vw, 96px);
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.closing p {
  max-width: 460px;
  margin: 20px auto 0;
  color: #3b3424;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
}
.closing .btn {
  margin: 32px 6px 0;
}
.closing small {
  display: block;
  margin-top: 14px;
  color: #4d4530;
  font-size: 14px;
}
.closing .handoff {
  background: rgba(255, 255, 255, 0.7);
}
.closing .mel {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: clamp(200px, 26vw, 340px);
  translate: -50% 0;
}
.closing .mel svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.closing .side {
  position: absolute;
  width: clamp(64px, 7vw, 100px);
}
.closing .side.l {
  left: 9%;
  bottom: 18%;
  rotate: -14deg;
}
.closing .side.r {
  right: 9%;
  bottom: 26%;
  rotate: 12deg;
}
@media (prefers-reduced-motion: no-preference) {
  .closing .mel {
    animation: peek 6s ease-in-out infinite;
  }
  .closing .side {
    animation: bob 5s ease-in-out infinite;
  }
  .closing .side.r {
    animation-delay: -2.4s;
  }
}
@keyframes peek {
  0%,
  100% {
    transform: translateY(6%);
  }
  50% {
    transform: translateY(0);
  }
}
@keyframes bob {
  50% {
    transform: translateY(-10px);
  }
}

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

.ticker {
  display: none;
}
.site-footer {
  padding-block: 36px 28px;
  background: var(--gray);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.footer-notes {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.footer-notes p + p {
  margin-top: 8px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
  padding-block: 28px;
}
.site-footer .wordmark {
  font-size: 18px;
}
.site-footer .wordmark img {
  width: 26px;
  height: 26px;
}
.footer-grid > div:first-child p {
  max-width: 300px;
  margin-top: 12px;
}
.site-footer h2,
.site-footer h4 {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.site-footer ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
}
.site-footer .wordmark {
  color: var(--ink);
}
.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* ---------- Product UI (recreated from the extension's own screens) ---------- */

.pm {
  --pm-bg: #fbfaf4;
  --pm-line: #e3e3d8;
  --pm-muted: #69756d;
  --pm-red: #cc2a42;
  color: #153c32;
  font-family: var(--sans);
  letter-spacing: -0.01em;
}
.pm-card {
  background: var(--pm-bg);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(21, 60, 50, 0.06),
    0 24px 48px -24px rgba(21, 60, 50, 0.4);
}
.pm-popup {
  width: 292px;
  overflow: hidden;
  text-align: left;
}
.pm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pm-line);
}
.pm-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.pm-brand img {
  width: 26px;
  height: 26px;
  padding: 3px;
  border-radius: 8px;
  background: #ffe4de;
}
.pm-brand .dot,
.pm-title .dot {
  color: var(--pm-red);
}
.pm-tag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: right;
  color: var(--pm-muted);
}
.pm-body {
  display: grid;
  gap: 10px;
  padding: 16px;
}
.pm-over {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--pm-muted);
}
.pm-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.02;
}
.pm-sub,
.pm-hint {
  font-size: 12px;
  color: var(--pm-muted);
}
.pm-hint {
  text-align: center;
  font-size: 11px;
}
.pm-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  background: var(--pm-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pm-btn .icon {
  width: 14px;
  height: 14px;
}
.pm-room {
  width: 300px;
  overflow: hidden;
  text-align: left;
}
.pm-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pm-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: #e5efe6;
  color: #147d56;
  font-size: 11px;
}
.pm-people {
  display: flex;
  gap: 16px;
  padding: 12px 16px 14px;
}
.pm-person {
  display: grid;
  justify-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
}
.pm-person i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c, #ffcd3c) center / cover;
  color: #fff;
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
}
.pm-person small {
  padding: 1px 6px;
  border-radius: 999px;
  background: #e5efe6;
  color: #0f6646;
  font-size: 8.5px;
  font-weight: 800;
}
.pm-linkbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 6px 6px 6px 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--pm-line);
  font-size: 12px;
  color: var(--pm-muted);
}
.pm-linkbar .icon {
  width: 14px;
  height: 14px;
}
.pm-linkbar .pm-btn {
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

/* Avatars: portraits cut from the site's footage (scripts/site-media), on their colour */
.f-a {
  --c: #e59a12 url(/assets/media/avatars/jamie.jpg);
}
.f-b {
  --c: #8a63f0 url(/assets/media/avatars/maya.jpg);
}
.f-c {
  --c: #1a9a5c url(/assets/media/avatars/alex.jpg);
}
.f-d {
  --c: #e2465f url(/assets/media/avatars/priya.jpg);
}
.f-e {
  --c: #2f6fe0;
}

/* ---------- How it works page ---------- */

.page-top .hero-stage::before {
  inset: 52% 0 0;
}
.crumbs-c {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
}
.crumbs-c a {
  color: var(--muted);
  text-decoration: none;
}
.crumbs-c a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.page-top h1 {
  margin-top: 4px;
}
.tour-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f5f5f7;
}
.tour-player .screen::after {
  display: none;
}
.tour-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.tour-cover[hidden] {
  display: none;
}
.tour-cover .play {
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(29, 29, 31, 0.86);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.3s var(--ease);
}
.tour-cover .play .icon {
  width: 40%;
  height: 40%;
  margin-left: 6%;
  fill: currentColor;
  stroke: none;
}
.tour-cover:hover .play {
  transform: scale(1.06);
}
.tour-cover .len {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 600;
}
.chapters {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}
.chapters button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--gray);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.chapters button:hover {
  background: var(--gray-2);
}
.chapters button.is-current {
  background: var(--ink);
  color: #fff;
}
.chapters time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.chapters button.is-current time {
  color: #c7c7cc;
}
.steps4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  padding: 0;
  list-style: none;
}
.steps4 li {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  background: var(--gray);
}
.steps4 .n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.steps4 h3 {
  font-size: clamp(21px, 1.9vw, 26px);
  letter-spacing: -0.028em;
}
.steps4 p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.steps-note {
  margin-top: 28px;
  color: var(--muted);
}
.steps-note a {
  color: var(--link);
}
.transcript {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line);
}
.transcript summary {
  font-weight: 600;
  cursor: pointer;
}
.transcript p {
  max-width: 720px;
  margin-top: 12px;
  color: var(--ink-2);
}
.transcript .meta {
  color: var(--muted);
  font-size: 14px;
}
.vert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.vert .lead {
  max-width: 440px;
  margin-top: 18px;
}
.vert .more {
  margin-top: 18px;
}
.phone {
  width: clamp(240px, 24vw, 300px);
  padding: 10px;
  border-radius: 46px;
  background: #0c0c0e;
  box-shadow:
    inset 0 0 0 1px #2c2c30,
    30px 50px 80px -40px rgba(0, 0, 0, 0.5);
}
.phone video {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 36px;
  background: #f5f5f7;
  object-fit: cover;
}
@media (max-width: 1068px) {
  .steps4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 734px) {
  .steps4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .vert {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .chapters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chapters li {
    flex: none;
  }
}

/* ---------- Home: setup steps, beta labels ---------- */

.setup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 820px;
  margin: 34px auto 0;
  padding: 0;
  list-style: none;
  counter-reset: setup;
  text-align: left;
}
.setup li {
  counter-increment: setup;
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.45;
  color: #3b3424;
}
.setup b {
  color: var(--ink);
  font-size: 15px;
}
.setup b::before {
  content: counter(setup) ". ";
}
.closing .setup + small {
  margin-top: 18px;
}
.pick .beta,
.service-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff1d6;
  color: #7a4b00;
  font-size: 0.72em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 0.12em;
}
@media (max-width: 734px) {
  .setup {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Reveal ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease),
    transform 1s var(--ease-out);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}
.js .tiles [data-reveal]:nth-child(2n) {
  transition-delay: 0.08s;
}
.is-offscreen,
.is-offscreen * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js [data-reveal],
  .js .party-photo .chat {
    opacity: 1;
    transform: none;
  }
  .ov-reacts {
    display: none;
  }
}

/* Logo concept previews (?mark=…), kept from the original site. */
.brand-notice {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1068px) {
  .how-grid,
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .how-grid {
    gap: 0;
  }
  .how-visual {
    top: var(--header-h);
    z-index: 2;
    translate: none;
    order: -1;
    margin-top: 0;
    padding-block: 12px;
    background: #fff;
  }
  .how-steps li {
    min-height: 52vh;
  }
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 834px) {
  .tiles,
  .party-grid,
  .cmp {
    grid-template-columns: minmax(0, 1fr);
  }
  .party-photo {
    justify-self: center;
    width: min(100% - 60px, 400px);
    margin: 0 0 0 40px;
  }
  .cmp-col .sub {
    min-height: 0;
  }
}

@media (max-width: 734px) {
  body {
    font-size: 16px;
  }
  .hero-stage::before {
    top: 50%;
  }
  .display {
    width: calc(100% - 24px);
  }
  .trio {
    gap: 6px;
  }
  .trio-cell {
    aspect-ratio: 9 / 16;
    border-radius: 12px;
  }
  .trio-cell .tc {
    top: 8px;
    left: 8px;
    gap: 5px;
    padding: 3px 7px 3px 6px;
    font-size: 11px;
  }
  .trio-cell .tc::before {
    width: 6px;
    height: 6px;
  }
  .trio-cell figcaption {
    left: 8px;
    right: 8px;
    bottom: 8px;
    font-size: 11px;
  }
  .chat .av {
    width: 40px;
    height: 40px;
  }
  .chat .msg {
    padding: 9px 14px;
    font-size: 15px;
  }
  .chat.c1,
  .chat.c2 {
    left: -36px;
  }
  .chat.c2 {
    top: calc(50% + 62px);
  }
  .chat.c3 {
    right: -14px;
  }
  .rail-nav {
    display: none;
  }
  .mini .who {
    display: none;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tile-copy,
  .tile .more {
    margin-inline: 4px;
  }
  .closing .side {
    width: 52px;
  }
  .closing .side.l {
    top: 5%;
    bottom: auto;
    left: 5%;
  }
  .closing .side.r {
    top: 9%;
    bottom: auto;
    right: 5%;
  }
}