/* Ranok's page, both languages.
 *
 * Every colour is a pair taken from `Ranok/Ranok/Support/Palette.swift`, so the
 * page and the app are one palette: light on :root, dark under the media query.
 * No gradients anywhere (design-guidelines §7.1: near black bands, OLED
 * sharpens it); flat surfaces and hairlines only. No script, no analytics. */

@font-face {
  font-family: "Departure Mono";
  src: url("/assets/DepartureMono-Regular.otf") format("opentype");
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;          /* missionBackground */
  --surface: #ededed;     /* surface 0.93 */
  --line: #c2c2c2;        /* separator 0.76 */
  --text: #0f0f0f;        /* primaryText 0.06 */
  --text-2: #3d3d3d;      /* secondaryText 0.24 */
  --text-3: #616161;      /* tertiaryText 0.38 */
  --pixel: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #121212;   /* 0.07 */
    --line: #3d3d3d;      /* 0.24 */
    --text: #ffffff;
    --text-2: #b8b8b8;    /* 0.72 */
    --text-3: #8a8a8a;    /* 0.54 */
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.6 var(--body);
}

a { color: inherit; }

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

main, .bar, footer {
  width: min(1040px, 100% - 40px);
  margin-inline: auto;
}

/* The pixel face is drawn on an 11 px grid, so its sizes stay on multiples of
 * 11 where the page can afford it (the app's own rule, CLAUDE.md). */
h1, h2, .wordmark {
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: 0;
}

/* 33 px on a phone, and no non-breaking spaces in it: the face's advance is
 * 0.636 em, so «а не відкладати» held together at 44 px is 420 px and pushed a
 * 375 px layout out to 440. The wider face owns every width budget (CLAUDE.md). */
h1 { font-size: 33px; line-height: 1.2; margin: 28px 0 20px; text-wrap: balance; }
h2 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; text-wrap: balance; }
p { margin: 0 0 14px; color: var(--text-2); }

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.wordmark { font-size: 22px; text-decoration: none; }

.lang {
  font-size: 15px;
  color: var(--text-2);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
}
.lang:hover { color: var(--text); border-color: var(--text-3); }

section { padding: 64px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }

/* Raw screens, not the store frames: the app is shot in the page's own theme
 * (`<picture>` swaps dark for light), so a light page shows the light app.
 * The bezel is black in both themes because phones are; the hairline outside
 * it is what separates it from a black page. The screen corner is the
 * 17 Pro Max's, about 14 % of the width. */
.phone {
  margin: 0;
  width: min(300px, 78vw);
  padding: 9px;
  background: #050505;
  border-radius: 52px;
  box-shadow: 0 0 0 1px var(--line);
}
.phone img {
  width: 100%;
  border-radius: 43px;
}

.hero, .row {
  display: grid;
  gap: 48px;
  align-items: center;
}

.icon {
  width: 96px;
  border-radius: 22.37%;
  border: 1px solid var(--line);
}

.lead { font-size: 20px; color: var(--text); }
.plain { font-weight: 600; color: var(--text); }
.note { font-size: 15px; color: var(--text-3); margin-top: 14px; }

.store { display: inline-block; margin-top: 12px; }
.store img { width: 160px; }

.cards {
  display: grid;
  gap: 20px;
}
.cards article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
}
.cards p { margin: 0; }

/* The measure is on the text, not the section, so the section's hairline
 * still runs the full width like every other one. */
.story > *, .limits > * { max-width: 720px; }
.story p { font-size: 20px; color: var(--text); }

.cta { text-align: center; padding: 56px 0 72px; }
.cta .store img { margin-inline: auto; }

footer {
  padding: 28px 0 48px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text-3);
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 10px; }
footer a { color: var(--text-2); }
footer p { color: var(--text-3); margin: 0; }

@media (min-width: 760px) {
  h1 { font-size: 55px; line-height: 1.15; }
  .hero { grid-template-columns: 1.2fr 1fr; }
  .hero .phone { margin-left: auto; }
  .row { grid-template-columns: 300px 1fr; gap: 72px; }
  .row.reverse { grid-template-columns: 1fr 300px; }
  .row.reverse .phone { order: 2; }
  .cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 759px) {
  section { padding: 44px 0; }
  .phone { margin-inline: auto; }
  .row .phone { order: 2; }
}