/* The landing page.
 *
 * Deliberately not an extension of `style.css`. That file dresses the privacy
 * policy and the terms — the two pages App Review opens — and it constrains
 * `main` to 46rem on `--screen`, which is the opposite of what a landing page
 * needs. Sharing it would have meant either overriding half of it or editing
 * it, and editing it puts a marketing change one typo away from the pages a
 * submission depends on. Two stylesheets, no shared risk; the ten lines of
 * duplicated tokens are the cheap half of that trade.
 *
 * No JavaScript on the page at all. The only thing that would have wanted it —
 * the FAQ accordion — is <details>, which has been native everywhere for years.
 */

/* ---- The app's own palette and type ------------------------------------- */

@font-face {
  font-family: "Plex Sans";
  src: url("/fonts/plex-sans-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/fonts/plex-sans-latin-ext.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/fonts/plex-sans-cyrillic.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* One variable file per script, so the Spanish page never downloads Cyrillic
   and the Russian page never downloads the Vietnamese diacritics it has no use
   for. 40 KB on the English page, for the typeface the app is actually set in. */

:root {
  --canvas: #e9e3d7;
  --screen: #f7f3ea;
  --ink: #1c1914;
  --primary: #44644a;
  --muted: rgba(28, 25, 20, 0.62);
  --hairline: rgba(28, 25, 20, 0.13);
  /* The green band and the footer are dark grounds in *both* themes, so their
     text cannot be derived from --screen: that token inverts, and deriving from
     it painted near-black text on the near-black band in dark mode. These two
     stay light-on-dark whichever way the theme goes. */
  --band: var(--primary);
  --band-ink: #f7f3ea;
  --foot: var(--ink);
  --lift: 0 1px 2px rgba(28, 25, 20, 0.05), 0 12px 32px rgba(28, 25, 20, 0.09);
  --sans: "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #14120e;
    --screen: #1d1a14;
    --ink: #ece7dc;
    --primary: #8fb397;
    --muted: rgba(236, 231, 220, 0.62);
    --hairline: rgba(236, 231, 220, 0.14);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.45);
    --band: #24352a;
    --band-ink: #ece7dc;
    --foot: #0d0c09;
  }
}

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

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1rem;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.028em;
  margin: 0;
  /* Headlines are translated six ways and none of them break where English
     does, so the line breaks are handed to the browser rather than guessed at
     with a <br> that would be wrong in five languages. */
  text-wrap: balance;
}

p { text-wrap: pretty; }

h1 {
  font-size: clamp(2.6rem, 6.6vw, 4.3rem);
  line-height: 1.03;
  letter-spacing: -0.038em;
}

h2 {
  font-size: clamp(1.85rem, 3.9vw, 2.7rem);
  line-height: 1.1;
}

h3 { font-size: 1.06rem; line-height: 1.35; letter-spacing: -0.015em; }

.lede {
  font-size: clamp(1.06rem, 1.7vw, 1.28rem);
  line-height: 1.55;
  color: var(--muted);
  margin: 1.4rem 0 0;
  max-width: 34ch;
}

section > .wrap > .lede { max-width: 46ch; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--screen);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 10px 0;
  z-index: 10;
}

.skip:focus { left: 0; }

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

.site-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.12rem;
  text-decoration: none;
}

.brand img { width: 28px; height: 28px; border-radius: 7px; }

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.langs a {
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
}

.langs a:hover { color: var(--ink); background: var(--screen); }

.langs a[aria-current="true"] { color: var(--ink); background: var(--screen); }

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

.hero { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3.5rem, 8vw, 6rem); }

.hero .wrap {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero .wrap { grid-template-columns: 1.08fr 0.92fr; }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  margin-bottom: 1.6rem;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.facts {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  max-width: 34ch;
}

.facts li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.6rem;
  font-size: 0.97rem;
  color: var(--muted);
}

.facts li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--primary);
}

.phone { margin-inline: auto; filter: drop-shadow(0 18px 40px rgba(28, 25, 20, 0.16)); }

.hero .phone { max-width: 302px; }

@media (prefers-color-scheme: dark) {
  .phone { filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.55)); }
}

/* ---- Feature sections ---------------------------------------------------- */

.feature { border-top: 1px solid var(--hairline); }

.feature .wrap {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

@media (min-width: 62rem) {
  .feature .wrap { grid-template-columns: 1fr 0.85fr; }
  /* Alternating sides, marked by the generator rather than by :nth-of-type —
     which counts sections, not features, and so would silently re-order every
     phone the day a section is inserted anywhere above them. */
  .feature.flip .copy { order: 2; }
}

.feature .phone { max-width: 318px; }

.feature p { margin: 1.3rem 0 0; color: var(--muted); max-width: 44ch; }

.feature p strong { color: var(--ink); font-weight: 600; }

/* ---- Who it is for ------------------------------------------------------- */

.audience { border-top: 1px solid var(--hairline); }

.audience .wrap {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.cards {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 46rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .cards { grid-template-columns: repeat(4, 1fr); } }

.cards li {
  background: var(--screen);
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
}

.cards p { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.95rem; }

/* ---- Privacy band -------------------------------------------------------- */

.band {
  background: var(--band);
  color: var(--band-ink);
}

.band .wrap {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.band .eyebrow { color: color-mix(in srgb, var(--band-ink) 68%, transparent); }

.band .lede { color: color-mix(in srgb, var(--band-ink) 84%, transparent); }

.promises {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.6rem 3rem;
}

@media (min-width: 52rem) { .promises { grid-template-columns: repeat(3, 1fr); } }

.promises h3 { margin-bottom: 0.45rem; }

.promises p {
  margin: 0;
  color: color-mix(in srgb, var(--band-ink) 80%, transparent);
  font-size: 0.96rem;
}

.band .more { margin: 2.6rem 0 0; font-size: 0.95rem; }

.band .more a { color: inherit; text-underline-offset: 3px; }

/* ---- Plans --------------------------------------------------------------- */

.plans .wrap {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.tiers {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 46rem) { .tiers { grid-template-columns: repeat(2, 1fr); } }

.tier {
  background: var(--screen);
  border-radius: 16px;
  padding: 2rem 1.8rem;
}

.tier.pro { outline: 1.5px solid color-mix(in srgb, var(--primary) 40%, transparent); }

.tier ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }

.tier li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.65rem;
  font-size: 0.97rem;
  color: var(--muted);
}

.tier li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.58rem;
  border-radius: 50%;
  background: var(--primary);
}

.note { margin: 1.8rem 0 0; font-size: 0.92rem; color: var(--muted); }

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

.faq { border-top: 1px solid var(--hairline); }

.faq .wrap {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

/* Narrowed at the list rather than at the wrapper: centring a narrower .wrap
   would have indented the whole section, and the FAQ would be the one block on
   the page that does not start on the same left edge as everything above it. */
.faq details { max-width: 50rem; }

.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 1.15rem 0;
}

.faq details:first-of-type { border-top: 1px solid var(--hairline); margin-top: 2.6rem; }

.faq summary {
  cursor: pointer;
  font-weight: 600;
  letter-spacing: -0.012em;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  gap: 1rem;
  align-items: start;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--primary);
  justify-self: end;
  line-height: 1.5;
}

.faq details[open] summary::after { content: "–"; }

.faq details p { margin: 0.85rem 0 0; color: var(--muted); max-width: 62ch; }

/* ---- Closing call -------------------------------------------------------- */

.closing { border-top: 1px solid var(--hairline); }

.closing .wrap {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  text-align: center;
}

.closing .status { margin: 0 0 1.8rem; }

.closing .lede { margin-inline: auto; max-width: 42ch; }

.closing .contact { margin: 2.2rem 0 0; font-size: 1rem; }

.closing .contact a { color: var(--primary); text-underline-offset: 3px; }

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

.site-foot {
  background: var(--foot);
  color: color-mix(in srgb, var(--band-ink) 72%, transparent);
  font-size: 0.93rem;
}

.site-foot .wrap {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 46rem) {
  .site-foot .wrap { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 66rem) {
  .site-foot .wrap { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; }
}

.site-foot h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--band-ink) 45%, transparent);
  margin: 0 0 0.9rem;
}

.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.site-foot a { color: color-mix(in srgb, var(--band-ink) 90%, transparent); text-underline-offset: 3px; }

.site-foot .about p { margin: 0 0 1rem; max-width: 38ch; }

/* The "support page is in English" line under the product column. `.note` is
   written for the light sections and inherits --muted, which is near-black and
   invisible against the footer band — so it is re-coloured against --band-ink
   like everything else down here. Absent on the English page, where it would
   be telling an English reader that an English page is in English. */
.site-foot .note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--band-ink) 48%, transparent);
}

.colophon {
  border-top: 1px solid color-mix(in srgb, var(--band-ink) 14%, transparent);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--band-ink) 48%, transparent);
}

.colophon .wrap {
  display: block;
  padding-top: 1.6rem;
  padding-bottom: 2.4rem;
}

.colophon p { margin: 0 0 0.5rem; max-width: 62ch; }

/* ---- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}