:root {
  --white: #ffffff;
  --mist: #f5f5f7;
  --ink: #1d1d1f;
  --gray: #6e6e73;
  --hairline: #d2d2d7;
  --blue: #0071e3;
  --blue-link: #0066cc;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid #0071e366; outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px; }

/* ── Nav ──────────────────────────────────────────── */
.nav {
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 600; white-space: nowrap; }
.nav .brand:hover { text-decoration: none; }
.nav .brand img { width: 40px; height: 40px; border-radius: 10px; }
.nav nav { display: flex; gap: 28px; font-size: 13px; letter-spacing: -0.01em; }
.nav nav a { color: var(--ink); opacity: 0.8; white-space: nowrap; }
.nav nav a:hover { opacity: 1; text-decoration: none; }

/* ── Type ─────────────────────────────────────────── */
.eyebrow { font-size: 19px; font-weight: 600; color: var(--gray); margin-bottom: 8px; }
h1 {
  font-size: clamp(44px, 7.4vw, 84px); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance;
}
h2 {
  font-size: clamp(32px, 4.6vw, 52px); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance;
}
.lede {
  font-size: clamp(19px, 2.2vw, 26px); line-height: 1.3; letter-spacing: -0.015em;
  color: var(--gray); max-width: 26em; text-wrap: pretty;
}
.lede strong, .copy p strong { color: var(--ink); font-weight: 600; }
.more { font-size: 19px; white-space: nowrap; }
.more::after { content: " ›"; }

.pill {
  display: inline-block; padding: 12px 24px; border-radius: 980px;
  background: var(--blue); color: #fff; font-size: 17px;
}
.pill:hover { background: #0077ed; text-decoration: none; }
.fine-note { font-size: 14px; color: var(--gray); }

/* ── Logos & phones ───────────────────────────────── */
.app-icon { border-radius: 22.5%; }
.phone {
  width: min(300px, 72vw); flex: 0 0 auto;
  padding: 9px; border-radius: 50px; background: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.phone img { border-radius: 41px; width: 100%; aspect-ratio: 720 / 1564; background: #e9e9ee; }

/* ── Hero ─────────────────────────────────────────── */
/* The logo art is drawn on black, so the hero is a black stage it can melt into. */
.hero { padding: 12px 0 clamp(32px, 4vw, 48px); }
.stage {
  background: #020305; color: #f5f5f7; border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  min-height: min(340px, 40vw);
}
.stage-copy { padding: 28px clamp(28px, 4vw, 48px); padding-right: clamp(20px, 3vw, 32px); }
.stage h1 { font-size: clamp(28px, 3.2vw, 40px); }
.stage:has(.logo) { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
.stage:has(.bleed) { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
.stage .product-name { font-size: 19px; font-weight: 600; color: #a1a1a6; margin-bottom: 10px; }
.stage .motto { text-wrap: balance; margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #a1a1a6; }
.stage:has(.logo) h1 { text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(24px, 2.8vw, 34px); }
.stage .lede strong { color: #f5f5f7; }
.stage .lede { margin-top: 14px; font-size: clamp(16px, 1.5vw, 19px); color: #a1a1a6; max-width: 34em; }
.stage .actions { margin-top: 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.stage .pill { background: #f5f5f7; color: var(--ink); font-weight: 600; }
.stage .pill:hover { background: #ffffff; }
.stage .fine-note { color: #a1a1a6; }
.stage-art { width: 100%; height: 100%; }
.stage-art.logo { object-fit: contain; max-height: min(340px, 40vw); padding: 16px 0 16px 16px; }
.stage-art.bleed {
  object-fit: cover; object-position: center 22%; max-height: min(340px, 40vw);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38%); mask-image: linear-gradient(to right, transparent, #000 38%);
}
.hero .trio {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 48px);
}
.hero .trio .side { width: min(250px, 24vw); padding: 8px; border-radius: 42px; }
.hero .trio .side img { border-radius: 34px; }

/* ── Feature bands ────────────────────────────────── */
.band { padding: clamp(80px, 11vw, 140px) 0; }
.band.mist { background: var(--mist); }
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 96px); align-items: center;
}
.feature .phone { margin: 0 auto; }
.feature.flip .copy { order: 2; }
.copy p { margin-top: 18px; font-size: 19px; line-height: 1.42; color: var(--gray); max-width: 24em; text-wrap: pretty; }
.duo { display: flex; justify-content: center; gap: clamp(16px, 3vw, 36px); margin-top: clamp(48px, 6vw, 72px); flex-wrap: wrap; }
.center { text-align: center; }
.center .lede { margin: 18px auto 0; }

/* ── Tiles ────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { background: var(--mist); border-radius: 24px; padding: 32px 28px; }
.band.mist .tile { background: var(--white); }
.tile h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.tile p { color: var(--gray); font-size: 16px; line-height: 1.45; }

/* ── Home: product showcase ───────────────────────── */
.showcase {
  display: block; background: var(--mist); border-radius: 32px; color: var(--ink);
  text-align: center; padding: clamp(48px, 7vw, 80px) 24px clamp(48px, 7vw, 80px);
}
.showcase .app-icon { width: 96px; height: 96px; margin: 0 auto 22px; }
/* App wordmark, matching the app's home screen title */
.wordmark { font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif; letter-spacing: 0; line-height: 1; }
.wordmark > span { display: block; }
.wordmark .suits { font-family: var(--font); font-size: 13px; color: #8e8e93; }
.wordmark .suits i { font-style: normal; margin: 0 12px; }
.wordmark .suits .red { color: #c96a6a; }
.wordmark .wm-main {
  margin-top: 14px; font-size: clamp(24px, 6vw, 56px); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  background: linear-gradient(180deg, #6ea8f7 0%, #3f7ce6 45%, #2a56c6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(30, 60, 140, 0.35));
}
.wordmark .wm-main b { font-weight: 800; }
.wordmark .wm-sub { margin-top: 16px; font-size: clamp(12px, 1.6vw, 15px); font-weight: 500; letter-spacing: 0.9em; margin-right: -0.9em; color: #3a3a3c; }
.wordmark .wm-rule {
  position: relative; width: 150px; height: 1px; margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, #8fb4ee 30%, transparent 46%, transparent 54%, #8fb4ee 70%, transparent);
}
.wordmark .wm-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  background: #5b93ea; transform: translate(-50%, -50%) rotate(45deg);
}
/* On the black hero stage: smaller, lighter sub line, centered within its own width */
.stage .wordmark { display: inline-block; text-align: center; margin-bottom: 26px; }
.stage .wordmark .wm-main { font-size: clamp(26px, 3.6vw, 44px); margin-top: 12px; filter: drop-shadow(0 2px 6px rgba(70, 130, 255, 0.35)); }
.stage .wordmark .wm-sub { margin-top: 13px; font-size: clamp(11px, 1.2vw, 13px); color: #d1d1d6; }
.stage .wordmark .wm-rule { margin-top: 16px; }
.showcase .motto { margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray); text-wrap: balance; }
.showcase .lede { margin: 14px auto 24px; }
.showcase .actions { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.showcase .phone { display: block; margin: clamp(40px, 6vw, 64px) auto 0; }

/* ── Footer ───────────────────────────────────────── */
footer { background: var(--mist); font-size: 12px; color: var(--gray); letter-spacing: -0.01em; padding: 24px 0 32px; }
footer .fine { padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; }
footer nav { display: flex; gap: 22px; }
footer nav a { color: #424245; }

/* ── Prose (privacy) ──────────────────────────────── */
.prose { max-width: 680px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 24px 112px; }
.prose h1 { font-size: clamp(40px, 6vw, 56px); }
.prose .updated { margin-top: 12px; color: var(--gray); font-size: 14px; }
.prose .short { margin-top: 40px; font-size: clamp(21px, 2.6vw, 26px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.prose h2 { font-size: 24px; letter-spacing: -0.02em; margin: 48px 0 12px; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose .quiet { color: var(--gray); }
.prose hr { border: 0; height: 1px; background: var(--hairline); margin: 56px 0 24px; }

/* ── Scroll reveal (only when JS is running) ──────── */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Small screens ────────────────────────────────── */
@media (max-width: 760px) {
  .nav nav { gap: 14px; }
  .nav .brand { gap: 8px; font-size: 15px; }
  .nav .brand img { width: 32px; height: 32px; border-radius: 8px; }
  .nav nav .wide { display: none; }
  .hero .trio .side { display: none; }
  .stage, .stage:has(.logo), .stage:has(.bleed) { grid-template-columns: 1fr; text-align: center; }
  .stage-copy { padding: 24px 24px 32px; }
  .stage-art.logo { padding: 16px 0 0; }
  .stage .actions { justify-content: center; }
  .stage .lede { margin-left: auto; margin-right: auto; }
  .stage-art { order: -1; }
  .stage-art.logo { max-height: 300px; padding: 20px 0 0; }
  .stage-art.bleed {
    aspect-ratio: 16 / 9; max-height: none; object-position: center 18%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  .feature { grid-template-columns: 1fr; text-align: center; }
  .feature.flip .copy { order: 0; }
  .copy p { margin-left: auto; margin-right: auto; }
  .tiles { grid-template-columns: 1fr; }
  footer .row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}