/*
 * The website's only stylesheet. The palette is the app's own (src/theme/colors.ts):
 * the system greys, the brand blue, and one hairline. Nothing is loaded from
 * anywhere else — no fonts, no scripts, no images beyond the lockup — so the page
 * is one request and a strict Content-Security-Policy can say "self" and mean it.
 *
 * Mobile first: one column, 20px gutters, a 44px tap target on every link. Logical
 * properties throughout, so the Arabic pages (`dir="rtl"`) mirror without a second
 * stylesheet.
 */

:root {
  color-scheme: light dark;

  --brand: #2f6bff;
  --bg: #f2f2f7;
  --surface: #ffffff;
  --text: #121826;
  --secondary: #646a7c;
  --hairline: #e3e7f0;
  --shadow: 0 1px 2px rgba(18, 24, 38, 0.08), 0 8px 24px rgba(18, 24, 38, 0.06);

  --radius: 14px;
  --gutter: 20px;
  /* The page is as wide as a desktop reads comfortably; a document inside it is not, so
     `--measure` is the line length the prose keeps and `--page` is the layout. */
  --page: 70rem;
  --measure: 40rem;

  /* The hero: the words, a fixed gap, and a picture of the phone, which together make a
     row no wider than `--band`. The row is centred in the page and the header and footer
     sit on its outer edges, so the page reads as one column of furniture rather than
     three widths. */
  --hero-copy: 560px;
  --hero-min-copy: 540px;
  --hero-gap: 72px;
  --hero-pad: 24px;

  /* The phone frame: a 10px bezel and a 1px border around the picture, and a shape the
     export already has. Beside the copy its height is what is in hand — the first screen,
     less the header and less what the hero needs for its own padding — and the width
     follows from the export's shape. `--frame-ratio` is 1206 / 2622, the current export;
     the stylesheet tests read the PNG and fail if the two ever disagree. */
  --header-h: 72px; /* the 44px row plus 14px of padding either side */
  --screen-chrome: 22px;
  --screen-wide: 300px;
  --screen-narrow: 240px;
  --screen-stacked: 280px;
  --frame-ratio: 0.459954;
  --frame-fold: 96px;
  --frame-cap: calc(100svh - var(--header-h) - var(--frame-fold));
  --frame-h: clamp(
    calc((var(--screen-narrow) - var(--screen-chrome)) / var(--frame-ratio)),
    calc(var(--frame-cap) - var(--screen-chrome)),
    calc((var(--screen-wide) - var(--screen-chrome)) / var(--frame-ratio))
  );
  --frame-w: calc(var(--frame-h) * var(--frame-ratio) + var(--screen-chrome));
  --band: calc(var(--hero-copy) + var(--hero-gap) + var(--frame-w));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --text: #ffffff;
    --secondary: #8e8e93;
    --hairline: rgba(84, 84, 88, 0.6);
    --shadow: none;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui,
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

/* One column, one gutter, whatever the page. Wide enough for the landing page's two
   columns on a laptop, with a document inside it held to a line length. */
.wrap {
  margin: 0 auto;
  max-width: var(--page);
  padding-inline: var(--gutter);
}

/* A document: the prose keeps its measure and sits in the middle of the page. */
.doc {
  margin-inline: auto;
  max-width: var(--measure);
}

/* ----------------------------------------------------- header and footer */

/* The furniture lines up with the hero's outer edges rather than the page's: the same
   band, plus a gutter either side of the padding it already carries. */
.site-header,
.site-footer {
  margin-inline: auto;
  max-width: calc(var(--band) + var(--gutter) * 2);
}

.site-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 44px;
  padding-block: 14px;
}

.brand {
  display: block;
  line-height: 0;
}

.brand img {
  height: 26px;
  width: auto;
}

.lang {
  align-items: center;
  display: flex;
  font-size: 15px;
  gap: 12px;
}

.lang a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

/* -------------------------------------------------------------- landing */

/*
 * The hero is one column on a phone and two on a laptop: the words, and a picture of
 * the app beside them. `.screen` is only in the markup at all when somebody has
 * exported a screenshot, and then the words keep the row's leading edge on their own.
 */
.hero {
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* The row is its own width, centred in the page: the two columns keep a fixed gap
     instead of being pushed to opposite edges of a container they never fill. */
  margin-inline: auto;
  max-width: var(--band);
  padding-block: var(--hero-pad);
}

.hero-copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

@media (min-width: 64rem) {
  .hero {
    align-items: center;
    flex-direction: row;
    gap: var(--hero-gap);
    /* The words and the phone sit in the middle of the first screen: the room the frame
       leaves over is split evenly above and below it, so the fold lands just under the
       pair. A frame at its widest leaves more room than this needs. */
    padding-block: max(
      var(--hero-pad),
      calc((100svh - var(--header-h) - var(--frame-h) - var(--screen-chrome)) / 2)
    );
  }

  .hero-copy {
    align-items: flex-start;
    /* A column of its own, 560 wide: it does not grow into whatever the picture leaves,
       and it does not shrink below a width the words are still comfortable in. */
    flex: 0 1 var(--hero-copy);
    max-width: var(--hero-copy);
    min-width: var(--hero-min-copy);
    text-align: start;
  }

  /* The frame is the picture and its bezel, so it is as wide as the picture ends up
     rather than the width of the column it sits in. Qualified by the hero, because
     `.screen`'s own rule comes later in the file. */
  .hero .screen {
    flex: 0 0 auto;
    max-width: var(--screen-wide);
    width: fit-content;
  }

  /* The width comes from the height and the export's shape: the cap keeps the whole
     phone inside the first screen. */
  .hero .screen img {
    aspect-ratio: var(--frame-ratio);
    height: var(--frame-h);
    max-width: calc(var(--screen-wide) - var(--screen-chrome));
    width: auto;
  }

  .hero .lede {
    margin-inline: 0;
  }
}

.tagline {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 8px 0 0;
  /* A heading that wraps should not leave one word on its own line. */
  text-wrap: balance;
}

.lede {
  color: var(--secondary);
  margin: 0 auto;
  max-width: 30rem;
}

.badge {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  /* The primary text colour, not the secondary one: on the near-black surface of a dark
     page the grey read as a disabled control, and it is the badge that says where the app
     is. Both schemes clear WCAG AA on their own surface. */
  color: var(--text);
  display: inline-flex;
  gap: 10px;
  margin-top: 16px;
  min-height: 52px;
  padding-inline: 18px;
}

/* The app icon, rounded the way the App Store rounds it. */
.badge-mark {
  border-radius: 7px;
  display: block;
  height: 26px;
  width: 26px;
}

.badge-text {
  font-size: 15px;
  font-weight: 600;
  /* One line, always: the badge is a control, and "Coming soon to the App Store" broken
     over two lines stops looking like one. */
  white-space: nowrap;
}

/* On the narrowest phones the badge gives up air rather than the one line it has. */
@media (max-width: 26rem) {
  .badge {
    gap: 8px;
    padding-inline: 14px;
  }

  .badge-text {
    font-size: 14px;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-block: 24px;
  padding: 20px;
}

.card h2 {
  font-size: 19px;
  margin-block: 0 8px;
}

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

.support-list {
  margin: 0;
  padding-inline-start: 20px;
}

.support-list li {
  margin-block: 6px;
}

/*
 * The three rows under the lede: the same three the app's welcome screen shows, with
 * an inline icon each. The icon is `currentColor`, so one declaration tints all three.
 */
.features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  text-align: start;
}

.features li {
  align-items: center;
  display: flex;
  gap: 12px;
}

.features span {
  color: var(--text);
}

.feature-icon {
  color: var(--brand);
  flex: none;
}

/*
 * The screenshot, in a phone. Under the copy, on a phone, the width is what is in hand and
 * the picture sets the frame's height; beside the copy the hero sizes it from its height
 * instead, so the whole phone stays inside the first screen.
 */
.screen {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 44px;
  box-shadow: var(--shadow);
  flex: 0 0 auto;
  margin: 0 auto;
  max-width: var(--screen-stacked);
  padding: 10px;
  width: 100%;
}

.screen img {
  border-radius: 34px;
  display: block;
  height: auto;
  width: 100%;
}

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

.doc h1 {
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-block: 24px 8px;
}

.doc h2 {
  font-size: 20px;
  margin-block: 32px 8px;
}

.doc p,
.doc li {
  color: var(--text);
}

.doc ul {
  padding-inline-start: 22px;
}

.doc li {
  margin-block: 6px;
}

.meta {
  color: var(--secondary);
  font-size: 15px;
  margin-block: 0 8px;
}

/* The retention table, and the note the Arabic documents set apart. Two columns of
   prose on a phone: small enough to sit side by side, wide enough to read. */
.doc table {
  border-collapse: collapse;
  font-size: 15px;
  margin-block: 12px 20px;
  width: 100%;
}

.doc th,
.doc td {
  border: 1px solid var(--hairline);
  padding: 8px 10px;
  text-align: start;
  vertical-align: top;
}

.doc th {
  background: var(--surface);
  font-weight: 600;
}

.doc blockquote {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius);
  color: var(--secondary);
  margin-block: 18px;
  padding: 12px 16px;
}

.doc blockquote p {
  margin: 0;
}

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

.site-footer {
  border-top: 1px solid var(--hairline);
  color: var(--secondary);
  font-size: 15px;
  margin-top: 40px;
  padding-block: 20px 40px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 10px;
}

.site-footer a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

.site-footer p {
  margin: 0;
}