:root {
  --bg: #0F0518;
  --card: #1E132D;
  --card-2: #241733;
  --accent: #E1306C;
  --accent-text: #FF6FA5;
  --white: #FFFFFF;
  --muted: #E2D4F0;
  --muted-dim: #B6A4C7;
  --border: rgba(226, 212, 240, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --maxw: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* `<picture>` defaults to `display: inline` in the UA stylesheet — inside
   a CSS Grid/Flex cell that means it never stretches to the cell's width,
   so the `<img>`'s `width: 100%` inside it resolves against an undefined
   box and `aspect-ratio` collapses to something near-square. Result: the
   screenshot images rendered heavily zoomed/cropped by `object-fit: cover`
   (user report, confirmed by reproducing in a real browser — the hero and
   screenshot images filled only a sliver of their intended frame). Making
   `picture` a block that fills its container fixes the sizing chain. */
picture {
  display: block;
  width: 100%;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 96px 0;
}

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 14px;
}

h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

p {
  color: var(--muted);
  margin: 0;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}

/* ---- Header ---- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 5, 24, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
}

.brand img {
  width: 32.1px;
  height: 39.1px;
  border-radius: 8px;
}

nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-dim);
  text-decoration: none;
  transition: color .15s;
}

nav a:hover {
  color: var(--white);
}

@media (max-width:720px) {
  nav {
    display: none;
  }
}

/* ---- Hero ---- */
.hero {
  padding-top: 72px;
  padding-bottom: 64px;
  overflow: clip;
}

/* Wider + more image-weighted than the global .wrap so hero-art reads as
   the visual anchor instead of getting lost next to the copy. */
.hero .wrap {
  max-width: 1280px;
  display: grid;
  /* Bare `fr` tracks have an implicit `auto` minimum — the track won't
     shrink below the min-content size of what's inside it. The hero
     screenshot's `<img>` declares `width="1400"` in HTML, so without
     `minmax(0, …)` the track (and everything in it, including the text
     column via the shared row) refused to shrink on narrow viewports and
     got silently sliced off by `.hero`'s `overflow: clip` instead of
     scaling down (user report: images AND text cut off on mobile). */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 56px;
  align-items: center;
}

@media (max-width:860px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.08;
}

.hero h1 span {
  color: var(--accent);
}

.hero p.lede {
  font-size: 17px;
  margin-top: 18px;
  max-width: 52ch;
}

.badges {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.badges img {
  height: 52px;
  width: auto;
  border-radius: 0px;
}

.badges a {
  transition: transform .15s;
}

.badges a:hover {
  transform: translateY(-2px);
}

.hero-art {
  background: linear-gradient(160deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
  /* Bleeds past the text column on wide screens so it reads big and
     doesn't shrink to match the copy's height. */
  margin-right: -8%;
  /* Grid items default to `min-width: auto`, which for a replaced element
     (the `<img>`, whose HTML attributes declare its NATURAL 1400px width)
     means the item refuses to shrink below that — on mobile's single-
     column `1fr` track this forced the whole hero image to overflow past
     the viewport edge (user report + confirmed in a real mobile-width
     render). `min-width: 0` is the standard grid fix: let the track's
     size win, `width: 100%` on the img then scales it down correctly. */
  min-width: 0;
}

@media (max-width:860px) {
  .hero-art {
    margin-right: 0;
  }
}

.hero-art img {
  border-radius: var(--radius-md);
  width: 100%;
  /* `aspect-ratio` + `object-fit: cover` inside a CSS Grid `fr` track is a
     known bad combination — the row-track sizing pass can settle on the
     WRONG height (here: the height of the sibling text column) before the
     image's own ratio is applied, so `cover` then crops/zooms into a
     near-square slice of the image (user report, reproduced + confirmed
     with a real headless-Chrome render). `height: auto` sidesteps the
     whole computation: with a definite width and no forced height, a
     replaced element ALWAYS preserves its natural ratio — no grid-track
     interaction possible. `object-fit` is now a no-op (ratio is exact) but
     left as a harmless safety net for a future image with a different
     native ratio. */
  height: auto;
  object-fit: cover;
}

/* ---- Features ---- */
.features {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.features-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width:860px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: transform .2s ease-out, border-color .2s ease-out;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(225, 48, 108, 0.35);
}

.feature-card h3 {
  position: relative;
  padding-top: 14px;
}

.feature-card h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--accent);
}

.feature-card p {
  font-size: 14px;
}

/* ---- Screenshots ---- */
.shots .wrap>p {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 44px;
}

/* App is landscape-only (no portrait mode) — every screenshot is a
   16:9 wide card, laid out 2×2 rather than a tall phone-style strip. */
.shots-grid {
  display: grid;
  /* Same `minmax(0, …)` fix as `.hero .wrap` — the 1100px-wide screenshot
     images otherwise force the tracks to stay at min-content width. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width:720px) {
  .shots-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shots-grid figure {
  margin: 0;
  /* Same grid min-width:auto overflow fix as `.hero-art` — otherwise each
     figure refuses to shrink below its `<img>`'s natural 1100px width. */
  min-width: 0;
}

.shots-grid img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  /* Same fix as `.hero-art img` — `aspect-ratio` breaks inside a `fr` grid
     track (`.shots-grid` is `repeat(2, 1fr)`), and this one was ALSO
     hard-coded to 19/9 (2.111) while the actual files are 1100×506
     (2.174) — a second, independent source of cropping. `height: auto`
     fixes both at once by not needing a declared ratio at all. */
  height: auto;
  object-fit: cover;
  width: 100%;
  background: var(--card);
}

.shots-grid figcaption {
  font-size: 12.5px;
  color: var(--muted-dim);
  margin-top: 10px;
  text-align: center;
}

/* ---- CTA band ---- */
.cta {
  background: linear-gradient(120deg, rgba(225, 48, 108, 0.16), rgba(225, 48, 108, 0.03));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.cta h2 {
  max-width: 20ch;
  margin: 0 auto 14px;
}

.cta p {
  max-width: 52ch;
  margin: 0 auto;
}

.cta .badges {
  justify-content: center;
  margin-top: 30px;
}

/* ---- Legal (Privacy / Terms) ---- */
.legal {
  padding-top: 80px;
}

.legal .wrap {
  max-width: 820px;
}

.legal h2 {
  font-size: 30px;
  margin-bottom: 6px;
}

.legal .updated {
  font-size: 13px;
  color: var(--muted-dim);
  margin-bottom: 36px;
  display: block;
}

.legal h3 {
  font-size: 16px;
  margin-top: 34px;
  color: var(--white);
}

.legal p,
.legal li {
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 10px;
}

.legal ul {
  padding-left: 1.15em;
  margin: 10px 0;
}

.legal a.inline {
  color: var(--accent);
  text-decoration: underline;
}

.fill {
  background: rgba(225, 48, 108, 0.15);
  color: #ffd7e4;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .92em;
  font-weight: 600;
}

hr.sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 80px 0 0;
}

/* ---- Footer ---- */
footer {
  padding: 48px 0 64px;
  text-align: center;
}

footer p {
  font-size: 13px;
  color: var(--muted-dim);
}

footer nav {
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 20px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}