/*
  The website's stylesheet.

  The colours, spacing steps and radii are lifted from src/constants/theme.ts so
  that somebody arriving from the Play listing meets the same surface they are
  about to install. If a token changes there, change it here — this file is
  plain CSS on purpose (no build step to rot, nothing to install), so the two
  cannot be wired together automatically.

  WHERE THE "EXPENSIVE" FEELING COMES FROM

  Not from motion. There are no transitions, no scroll reveals and no hover
  animations anywhere in this file, matching the app: a page that animates
  itself in reads as slow, and the people this is written for are tired. What
  does the work instead is the same set of things Apple actually relies on —

    · a wide type scale, so a headline is genuinely large and body text is
      genuinely calm, with nothing in between competing;
    · negative tracking on display sizes and a 66-character measure on prose;
    · whole-screen sections with real air between them, rather than a page of
      evenly spaced blocks;
    · one accent colour used sparingly, against warm neutrals;
    · product shots at device scale, in a frame, treated as the hero rather
      than as decoration.

  There is no JavaScript on this site at all, which is what lets the content
  policy in site/static/_headers say `default-src 'none'`.
*/

:root {
  /* src/constants/theme.ts — Colors.light */
  --text: #1b1a19;
  --text-secondary: #6b675f;
  --text-muted: #97928a;
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-alt: #f2eee8;
  --border: #e6e0d7;
  --border-strong: #d3cbbe;
  --primary: #2e8c7f;
  --primary-pressed: #24756a;
  --primary-soft: #dcefeb;
  --on-primary: #ffffff;
  --trust: #3f6ea5;
  --trust-soft: #e1eaf5;
  --accent: #c77f2e;
  --accent-soft: #f9ebd6;

  --shadow-card: 0 6px 14px rgba(122, 110, 93, 0.12);
  --shadow-device: 0 40px 80px -24px rgba(27, 26, 25, 0.3), 0 8px 24px rgba(27, 26, 25, 0.08);
  --bezel: #17201f;

  /* The wash behind a hero. Two soft brand-tinted lights on the page colour. */
  --wash:
    radial-gradient(60rem 40rem at 78% -8%, rgba(46, 140, 127, 0.16), transparent 60%),
    radial-gradient(44rem 34rem at 6% 8%, rgba(199, 127, 46, 0.1), transparent 62%);

  /* The dark band used once per page as a full-bleed break. */
  --band-bg: #13201f;
  --band-text: #f3f6f5;
  --band-secondary: #a9bdb9;

  /* src/global.css — the app's own web font stack, system-resolved.
     No webfont is fetched: the privacy page says this site makes no
     third-party requests, and that has to stay true. */
  --font: 'Spline Sans', Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 64px;
  --s7: 104px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* src/constants/theme.ts — Colors.dark */
    --text: #f1f3f4;
    --text-secondary: #a5aab1;
    --text-muted: #7a7f87;
    --bg: #0f1215;
    --surface: #191d22;
    --surface-alt: #21262d;
    --border: #2b3138;
    --border-strong: #3a414a;
    --primary: #45bcab;
    --primary-pressed: #3aa294;
    --primary-soft: #11302c;
    --on-primary: #04211d;
    --trust: #7ba6dc;
    --trust-soft: #17273a;
    --accent: #e0a455;
    --accent-soft: #33280f;

    --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.4);
    --shadow-device: 0 40px 80px -24px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
    --bezel: #05090a;

    --wash:
      radial-gradient(60rem 40rem at 78% -8%, rgba(69, 188, 171, 0.14), transparent 60%),
      radial-gradient(44rem 34rem at 6% 8%, rgba(224, 164, 85, 0.08), transparent 62%);

    /* Lighter than the page, not darker. A band darker than an already-dark
       background reads as nothing at all; raised is how a panel separates here. */
    --band-bg: #171f1e;
    --band-text: #eef2f1;
    --band-secondary: #93a8a4;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- layout */

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

/* Prose is capped near 66 characters. A privacy policy at 1120px wide is
   unreadable, and a reviewer reads every line of it. */
.prose {
  max-width: 660px;
}

section {
  padding: var(--s7) 0;
}

section + section {
  padding-top: 0;
}

/* --------------------------------------------------------------- header */

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 60px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}

.wordmark .mark {
  height: 18px;
  width: auto;
  color: var(--primary);
}

nav.site {
  display: flex;
  gap: var(--s4);
  font-size: 15px;
}

nav.site a {
  color: var(--text-secondary);
  text-decoration: none;
}

nav.site a:hover,
nav.site a[aria-current='page'] {
  color: var(--text);
}

/* ----------------------------------------------------------------- type */

h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s2);
}

p {
  margin: 0 0 var(--s3);
  color: var(--text-secondary);
}

.lede {
  font-size: clamp(1.125rem, 1.9vw, 1.4rem);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 34ch;
}

.lede.wide {
  max-width: 48ch;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 var(--s3);
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--primary-pressed);
}

ul {
  margin: 0 0 var(--s3);
  padding-left: 1.15em;
  color: var(--text-secondary);
}

li {
  margin-bottom: var(--s2);
}

li::marker {
  color: var(--text-muted);
}

strong {
  color: var(--text);
  font-weight: 600;
}

/* --------------------------------------------------------------- buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  margin-top: var(--s5);
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  background: var(--primary-pressed);
  color: var(--on-primary);
}

.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.btn.secondary:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: var(--s7) 0 var(--s6);
  overflow: hidden;
}

/* The wash is a pseudo-element so it can bleed past the content column
   without a wrapper div, and so it never intercepts a click. */
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  background: var(--wash);
  pointer-events: none;
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s6);
  align-items: center;
}

.hero-grid .device {
  justify-self: center;
}

/* --------------------------------------------------------------- devices */

/*
  A phone, drawn in CSS around a real screenshot.

  The aspect ratio is the capture viewport (390x844), so the frame fits the
  image exactly at any width and the page never reflows once the PNG arrives.
*/
.device {
  margin: 0;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 390 / 844;
  padding: 9px;
  border-radius: 46px;
  background: var(--bezel);
  box-shadow: var(--shadow-device);
}

.device img,
.device picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  object-fit: cover;
  object-position: top;
}

/* Three phones, the middle one lifted. Collapses to a row of two on phones. */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  align-items: center;
  justify-items: center;
}

.trio .device {
  max-width: 260px;
}

.trio .device:nth-child(2) {
  max-width: 290px;
}

/* -------------------------------------------------------------- features */

/*
  One claim, one picture, full width, alternating sides. The point of the
  alternation is rhythm: three identical rows read as a table of contents.
*/
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  align-items: center;
}

.feature-grid .device {
  justify-self: center;
}

.feature.reverse .feature-grid > *:first-child {
  order: 2;
}

.feature-copy h2 {
  margin-bottom: var(--s3);
}

.feature-copy p {
  max-width: 44ch;
}

/* ----------------------------------------------------------------- bands */

/*
  A full-bleed dark section. Used once per page — twice reads as stripes.
  Margin trick rather than 100vw, which overflows when a scrollbar is present.
*/
.band {
  background: var(--band-bg);
  color: var(--band-text);
  padding: var(--s7) 0;
  margin: var(--s7) 0 0;
}

.band + section {
  padding-top: var(--s7);
}

.band h2,
.band h3,
.band strong {
  color: var(--band-text);
}

.band p,
.band li {
  color: var(--band-secondary);
}

.band .eyebrow {
  color: #6fd3c2;
}

.band .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

/* ----------------------------------------------------------------- cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3);
}

/* Fixed two-up. auto-fit wrapped four cards as 3 + 1, and a single orphan on
   the second line reads as a mistake rather than as a layout. */
.grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
}

.card p:last-child {
  margin-bottom: 0;
}

.card h3 {
  color: var(--text);
}

.panel {
  background: var(--surface-alt);
  border-radius: var(--r-xl);
  padding: var(--s6) var(--s5);
}

.panel p:last-child,
.panel ul:last-child {
  margin-bottom: 0;
}

/* A short line above a section's heading, for section-level orientation. */
.section-head {
  max-width: 46ch;
  margin-bottom: var(--s6);
}

.section-head p {
  font-size: 1.125rem;
}

/* ------------------------------------------------------- legal documents */

.doc-meta {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 var(--s5);
}

.doc h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
}

.doc h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}

.doc h2:first-of-type {
  margin-top: 0;
}

.doc .intro {
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: var(--s5);
}

/* --------------------------------------------------------------- footer */

footer.site {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: var(--s6) 0 var(--s5);
  margin-top: 0;
}

footer.site .cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s6);
}

footer.site .about-col p {
  font-size: 14px;
  max-width: 30ch;
}

footer.site h3 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: var(--s3);
}

footer.site ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}

footer.site li {
  margin-bottom: 8px;
}

footer.site a {
  color: var(--text-secondary);
  text-decoration: none;
}

footer.site a:hover {
  color: var(--text);
}

.colophon {
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--s4);
  margin: 0;
  max-width: 70ch;
}

/* ---------------------------------------------------------------- tablet */

@media (max-width: 900px) {
  .hero-grid,
  .feature-grid {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  /* Picture above copy on one column, whichever side it took on two. */
  .feature.reverse .feature-grid > *:first-child {
    order: 0;
  }

  .hero-grid .device,
  .feature-grid .device {
    order: -1;
    max-width: 260px;
  }

  .lede,
  .lede.wide {
    max-width: 56ch;
  }

  footer.site .cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s5);
  }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  :root {
    --s7: 64px;
  }

  .wrap {
    padding: 0 var(--s3);
  }

  header.site .wrap {
    min-height: 54px;
    padding-top: var(--s2);
    padding-bottom: var(--s2);
  }

  nav.site {
    gap: var(--s3);
    font-size: 14px;
  }

  .panel {
    padding: var(--s5) var(--s4);
  }

  /* Two phones, the third would be 90px wide and unreadable. */
  .grid.two {
    grid-template-columns: 1fr;
  }

  .trio {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
  }

  .trio .device:nth-child(3) {
    display: none;
  }

  .trio .device,
  .trio .device:nth-child(2) {
    max-width: 100%;
  }

  .btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  footer.site .cols {
    grid-template-columns: 1fr;
  }
}

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

/* A feature whose screenshot was refused by the capture guard keeps its words
   and closes the gap, rather than leaving half the row empty. */
.feature-grid:not(:has(.device)),
.hero-grid:not(:has(.device)) {
  grid-template-columns: 1fr;
}

.feature-grid:not(:has(.device)) .feature-copy p,
.hero-grid:not(:has(.device)) .lede {
  max-width: 56ch;
}

@media (max-width: 640px) {
  /*
    The header wraps to two rows at this width, and two rows of sticky chrome
    is a tenth of a phone screen given up permanently. It scrolls away instead.
  */
  header.site {
    position: static;
  }

  /*
    Words before the picture, on the hero only.

    The tablet rule lifts every device above its copy, which is right for a
    feature row and wrong for the hero: a 260px-tall phone above an h1 puts the
    headline — the one thing the page has to say — below the fold on arrival.
    Feature rows keep the picture first; by then the reader has been told what
    they are looking at.
  */
  .hero-grid .device {
    order: 0;
  }
}