/*
  Grasp — the website.

  The palette is lifted from apps/mobile/src/theme/tokens.ts rather than from
  the identity document, for the same reason the app is: those values were
  measured against every background they land on and the document's were not.
  If the two ever disagree, tokens.ts wins.

  IBM Plex Sans is served from this folder rather than from Google, and not
  for performance. A privacy policy that ships the reader's IP address to a
  third party in order to render itself is a policy that contradicts its own
  first paragraph. The font is SIL Open Font Licence, so hosting it here is
  both allowed and the only honest option.
*/

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans_400Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans_600SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans_700Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/*
  Arabic, in the face the app uses (Noto Kufi Arabic, SIL OFL; licence in
  fonts/NotoKufiArabic-OFL.txt). The unicode-range means a browser only
  fetches it for a page that actually contains Arabic. Hindi, Chinese,
  Korean and Japanese use the system's own faces, as the app does.
  Absolute URLs, because the pages live at / and at /<lang>/.
*/
@font-face {
  font-family: 'Noto Kufi Arabic';
  src: url('/fonts/NotoKufiArabic_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  src: url('/fonts/NotoKufiArabic_700Bold.ttf') format('truetype');
  font-weight: 600 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/*
  Three choices, two sets of colours.

  `data-theme` is written onto <html> by theme.js and is *absent* when the
  reader has chosen System — so the media query is what System means. It is
  fenced off from anyone who explicitly asked for light, or the operating
  system would quietly overrule them.

  Every colour is declared on bare :root first and the other blocks only
  reassign. A colour whose only home is inside a media query vanishes the
  moment the toggle wins.

  `color-scheme` rides along so scrollbars and form controls follow the page
  instead of staying stubbornly white on a black background.
*/
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f4f5f7;
  --raised: #e9ebee;
  --border: #dde0e4;
  --border-strong: #c2c7ce;
  --text: #0d0e10;
  --muted: #4e545b;
  --faint: #63696f;
  --accent: #4e7000;
  --accent-muted: #edf7d0;
  --on-accent: #ffffff;
  --glow: rgba(160, 210, 40, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0d0e10;
    --surface: #16181b;
    --raised: #1f2226;
    --border: #292d32;
    --border-strong: #3a3f46;
    --text: #ffffff;
    --muted: #9ba1a8;
    --faint: #888e97;
    --accent: #c6f84e;
    --accent-muted: #232e10;
    --on-accent: #0d0e10;
    --glow: rgba(198, 248, 78, 0.16);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0d0e10;
  --surface: #16181b;
  --raised: #1f2226;
  --border: #292d32;
  --border-strong: #3a3f46;
  --text: #ffffff;
  --muted: #9ba1a8;
  --faint: #888e97;
  --accent: #c6f84e;
  --accent-muted: #232e10;
  --on-accent: #0d0e10;
  --glow: rgba(198, 248, 78, 0.16);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* The system stack is the fallback, not an afterthought: if the font files
     fail to upload, every page still reads. */
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- chrome */

header.site {
  border-bottom: 1px solid var(--border);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
}
header.site nav {
  display: flex;
  gap: 20px;
  font-size: 15px;
  /* Pushes the links and the theme control together against the right edge,
     rather than letting three flex children spread evenly and leave the nav
     stranded in the middle. */
  margin-left: auto;
}
header.site nav a {
  color: var(--muted);
  text-decoration: none;
}
header.site nav a:hover {
  color: var(--text);
}

/* -------------------------------------------------------------- theme */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.theme-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle button svg {
  display: block;
  width: 15px;
  height: 15px;
}
.theme-toggle button:hover {
  color: var(--text);
}
.theme-toggle button[aria-checked='true'] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.theme-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
  The lockup. Height is what is set; the artwork is 5.28 times as wide.

  The colour has to be pinned here. The tally and the letters are drawn in
  `currentColor` so the mark follows the theme, but it sits inside a link, and
  links are the accent — which turned the entire lockup lime and left the
  slash, the one element that is *meant* to be the accent, indistinguishable
  from everything around it.
*/
.lockup {
  display: block;
  height: 26px;
  width: auto;
  color: var(--text);
}

footer.site {
  margin-top: 96px;
  border-top: 1px solid var(--border);
  padding: 32px 0 64px;
  color: var(--faint);
  font-size: 15px;
}
footer.site a {
  color: var(--muted);
}
footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

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

h1 {
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -1.2px;
  font-weight: 700;
  margin: 0 0 20px;
}
h2 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  font-weight: 600;
  margin: 56px 0 12px;
}
h3 {
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  font-weight: 600;
  margin: 32px 0 8px;
}
p {
  margin: 0 0 18px;
}
a {
  color: var(--accent);
}
strong {
  font-weight: 600;
}
ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
li {
  margin-bottom: 10px;
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}
.lede {
  font-size: 21px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 32px;
}
.meta {
  font-size: 15px;
  color: var(--faint);
}

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

.hero {
  padding: 88px 0 24px;
}

.badge {
  display: inline-block;
  background: var(--accent-muted);
  color: var(--accent);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  border-radius: 999px;
  padding: 15px 32px;
}
.cta:hover {
  opacity: 0.9;
}
.cta.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.points {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 32px 0;
  padding: 0;
  list-style: none;
}
.points li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  margin: 0;
}
.points h3 {
  margin: 0 0 6px;
  font-size: 17px;
}
.points p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* A worked example of the thing the app is actually for. */
.ledger {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 32px 0;
}
.ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.ledger-name {
  font-weight: 600;
}
.ledger-figure {
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}
.ledger-why {
  color: var(--muted);
  font-size: 15px;
  margin: 6px 0 0;
}
.ledger-up {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}

/* ------------------------------------------------------ landing, v2 */

/*
  The landing page is wider than the reading pages: it is laid out, not read
  top to bottom. The other pages keep the 720px measure. The phones are
  dark in both themes, because the app is.
*/
.wrap.wide {
  max-width: 1120px;
}
/* The glows behind the phones reach past the edge on purpose; clip, not
   hidden, so this does not become a scroll container. */
.landing main {
  overflow-x: clip;
}

.landing .hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 40px;
}
/* The lime glow the store screenshots and the TikTok videos use, so the
   three read as one brand. */
.landing .hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto 35%;
  height: 120%;
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.landing h1 {
  font-size: 56px;
  letter-spacing: -1.8px;
  line-height: 1.04;
}
.hl {
  color: var(--accent);
}
.landing .lede {
  max-width: 520px;
}

.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.get.center {
  justify-content: center;
}
.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 12px;
  transition: transform 0.15s ease;
}
.store-badge:hover {
  transform: translateY(-2px);
}
.store-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.store-badge img {
  height: 60px;
  width: auto;
}
/* Google's badge carries its own transparent margin (41 of 250 px on every
   side). Trimmed here so the visible badge is the same 60 px as Apple's. */
.store-badge.play img {
  height: 89px;
  margin: -14.6px;
}
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 18px 0 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--muted);
}
.soon svg {
  width: 26px;
  height: 26px;
  color: var(--faint);
}
.soon strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
}
.soon small {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

/* A phone: the screenshot inside a bezel. */
.phone {
  position: relative;
  border-radius: 34px;
  padding: 8px;
  background: #1c1e22;
  border: 1px solid #3a3f46;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 27px;
}

.hero-phones {
  position: relative;
  height: 560px;
}
.hero-phones .phone {
  position: absolute;
  width: 230px;
  top: 50%;
  left: 50%;
}
.hero-phones .front {
  z-index: 2;
  transform: translate(-50%, -50%);
}
.hero-phones .back {
  z-index: 1;
  opacity: 0.92;
}
.hero-phones .left {
  transform: translate(-112%, -46%) rotate(-8deg) scale(0.86);
}
.hero-phones .right {
  transform: translate(12%, -46%) rotate(8deg) scale(0.86);
}

.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.stats-row strong {
  display: block;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--text);
}
.stats-row span {
  font-size: 15px;
  color: var(--muted);
}

/*
  Equipment. The pictures are black kit on transparent, so the tiles stay
  light in both themes, like a catalogue page, or the kit vanishes on dark.
  What is ticked follows the list's data-setup: pure CSS, so the page shows
  the Home setup correctly with scripting off.
*/
.equipment {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.equipment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.equipment-head > div:first-child {
  max-width: 620px;
}
.equipment h2 {
  font-size: 34px;
  letter-spacing: -0.8px;
  margin: 0 0 14px;
}
.equipment p {
  color: var(--muted);
}
.setups {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  margin-bottom: 18px;
}
.setups[hidden] {
  display: none;
}
.setups button {
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.setups button[aria-selected='true'] {
  background: var(--accent);
  color: var(--on-accent);
}
.setups button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.kit {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  max-width: 700px;
  margin: 28px 0 16px;
  padding: 0;
  list-style: none;
}
.kit li {
  position: relative;
  margin: 0;
  padding: 10px 8px 8px;
  border-radius: 14px;
  background: #f4f5f7;
  border: 2px solid var(--border);
  text-align: center;
  opacity: 0.38;
  filter: grayscale(1);
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.kit img {
  display: block;
  width: 72%;
  margin: 0 auto;
  height: auto;
  aspect-ratio: 1;
}
.kit span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: #0d0e10;
}
.kit[data-setup='home'] li[data-in~='home'],
.kit[data-setup='gym'] li[data-in~='gym'] {
  opacity: 1;
  filter: none;
  border-color: #c6f84e;
}
/* The app's tick: a lime square with a dark check, top corner. */
.kit[data-setup='home'] li[data-in~='home']::after,
.kit[data-setup='gym'] li[data-in~='gym']::after {
  content: '';
  position: absolute;
  top: 7px;
  inset-inline-end: 7px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #c6f84e
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0e10' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.kit-note [hidden] {
  display: none;
}

.stat-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.stat-link:hover strong {
  color: var(--accent);
}

.languages {
  padding: 72px 0 24px;
}
.languages h2 {
  margin-top: 0;
  font-size: 34px;
  letter-spacing: -0.8px;
}
.languages-lede {
  color: var(--muted);
  max-width: 620px;
}
.flag-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.flag-grid li {
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.flag-grid li:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.flag-grid img {
  width: 36px;
  height: 27px;
}
/* Arabic's own text runs right to left, but the chip keeps the flag first
   like its neighbours, so the grid reads as one list. */
.flag-grid span[dir='rtl'] {
  unicode-bidi: isolate;
}
/* The tiles are links to each language's page; the padding sits on the link
   so the whole tile is the target. */
.flag-grid a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------ languages */

.lang-switch {
  position: relative;
  flex: none;
}
.lang-switch summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.lang-switch summary::-webkit-details-marker {
  display: none;
}
.lang-switch summary:hover {
  color: var(--text);
}
.lang-switch summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lang-switch img,
.flag-grid img {
  flex: none;
  border-radius: 3px;
  object-fit: cover;
  /* A hairline so white-edged flags (Japan, Poland, Indonesia) keep their
     shape on the light theme. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.lang-switch summary img {
  width: 20px;
  height: 15px;
}
.lang-switch ul {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 10;
  width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
}
.lang-switch li {
  margin: 0;
}
.lang-switch li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}
.lang-switch li a:hover,
.lang-switch li a[aria-current='page'] {
  background: var(--surface);
}
.lang-switch li a[aria-current='page'] {
  font-weight: 600;
}
.lang-switch li img {
  width: 22px;
  height: 16px;
}

.lang-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--accent-muted);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
}
.lang-offer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}
.lang-offer a:hover span:first-of-type {
  text-decoration: underline;
}
.lang-offer img {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.lang-offer button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

/* Fifteen languages means German compounds in 130px tiles and 36px
   headlines. Hyphenate where the language allows, break where it does not,
   never overflow. */
h1,
h2,
.lede,
.stats-row span,
.kit span,
.flag-grid span,
.soon small {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---------------------------------------------------------------- faq */

.faq {
  padding: 72px 0 8px;
}
.faq h2 {
  margin-top: 0;
  font-size: 34px;
  letter-spacing: -0.8px;
}
.faq-list {
  margin-top: 24px;
  border-top: 1px solid var(--border);
}
.faq-list details {
  border-bottom: 1px solid var(--border);
}
.faq-list summary {
  position: relative;
  padding: 18px 36px 18px 0;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
/* A plus that turns into a minus, at the line's trailing end. */
.faq-list summary::after {
  content: '+';
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.faq-list details[open] summary::after {
  content: '–';
}
.faq-list summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.faq-list p {
  margin: 0 0 18px;
  color: var(--muted);
}
[dir='rtl'] .faq-list summary {
  padding: 18px 0 18px 36px;
}
[dir='rtl'] .faq h2 {
  letter-spacing: 0;
}

.footer-note {
  flex-basis: 100%;
  font-size: 13px;
}

/*
  Right to left. Grid and flex already follow the direction; what is left is
  anything placed by a physical side, and Arabic's joined letters, which
  negative letter-spacing pulls apart.
*/
[dir='rtl'] body {
  font-family: 'IBM Plex Sans', 'Noto Kufi Arabic', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  line-height: 1.85;
}
[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] .landing h1,
[dir='rtl'] .feature h2,
[dir='rtl'] .equipment h2,
[dir='rtl'] .languages h2,
[dir='rtl'] .principle h2,
[dir='rtl'] .final h2,
[dir='rtl'] .stats-row strong,
[dir='rtl'] .kicker,
[dir='rtl'] .badge {
  letter-spacing: 0;
}
[dir='rtl'] .landing h1 {
  line-height: 1.35;
}
[dir='rtl'] h2 {
  line-height: 1.5;
}
[dir='rtl'] header.site nav {
  margin-left: 0;
  margin-right: auto;
}
[dir='rtl'] .landing .hero::before {
  inset: -20% 35% auto -10%;
}
/* The logo is a word, not a sentence: it keeps its own direction. */
[dir='rtl'] .lockup {
  direction: ltr;
}

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.feature {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 72px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.feature:last-child {
  border-bottom: 0;
}
.feature.flip {
  grid-template-columns: 300px 1fr;
}
.feature.flip .feature-copy {
  order: 2;
}
.feature h2 {
  font-size: 34px;
  letter-spacing: -0.8px;
  margin: 0 0 14px;
}
.feature-copy {
  max-width: 560px;
}
.feature-copy p {
  color: var(--muted);
}
.feature-shot {
  position: relative;
}
.feature-shot::before {
  content: '';
  position: absolute;
  inset: 10% -25%;
  background: radial-gradient(closest-side, var(--glow), transparent 75%);
}
.feature .ledger {
  margin: 24px 0;
}

.principle {
  margin-top: 24px;
  padding: 72px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.principle h2 {
  margin-top: 0;
  font-size: 34px;
  letter-spacing: -0.8px;
}

.final {
  text-align: center;
  padding: 88px 0 40px;
}
.final h2 {
  margin-top: 0;
  font-size: 40px;
  letter-spacing: -1px;
}
.final .get {
  margin: 28px 0 20px;
}
.disclaimer {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .landing h1 {
    font-size: 42px;
    letter-spacing: -1.2px;
  }
  .hero-phones {
    height: 460px;
  }
  .hero-phones .phone {
    width: 190px;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .flag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .feature,
  .feature.flip {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 0;
  }
  .feature.flip .feature-copy {
    order: 0;
  }
  .feature-shot {
    width: 240px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .landing h1 {
    font-size: 36px;
    letter-spacing: -0.9px;
  }
  .hero-phones {
    height: 380px;
  }
  .hero-phones .phone {
    width: 158px;
    border-radius: 26px;
    padding: 6px;
  }
  .hero-phones .phone img {
    border-radius: 21px;
  }
  .feature h2,
  .principle h2 {
    font-size: 28px;
  }
  .final h2 {
    font-size: 32px;
  }
  .stats-row strong {
    font-size: 28px;
  }
  .languages h2 {
    font-size: 28px;
  }
  .flag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .flag-grid li {
    white-space: normal;
    line-height: 1.25;
  }
  .flag-grid a {
    padding: 10px;
    gap: 10px;
    font-size: 15px;
  }
  .flag-grid img {
    width: 30px;
    height: 22px;
  }
  .equipment h2 {
    font-size: 28px;
  }
  .kit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .kit span {
    font-size: 12px;
  }
  .store-badge img {
    height: 52px;
  }
  .soon {
    height: 52px;
  }
  /* Four links will not fit beside the logo and the theme switch on a phone;
     Features is a jump within this page, so it is the one that goes. */
  .nav-extra {
    display: none;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 34px;
    letter-spacing: -0.8px;
  }
  /* Logo, two links and three buttons will not fit across a 375px phone at
     full size. Shrinking beats hiding: the links are the only way to reach
     the other pages from the top of the screen. */
  header.site .wrap {
    gap: 8px;
  }
  header.site nav {
    gap: 12px;
    font-size: 14px;
  }
  .lockup {
    height: 22px;
  }
  .theme-toggle {
    gap: 0;
    padding: 2px;
  }
  .theme-toggle button {
    width: 28px;
    /* Taller than it is wide, because width is the scarce dimension on a
       phone and the tap target should not lose both. */
    height: 30px;
  }
  .hero {
    padding-top: 56px;
  }
  body {
    font-size: 16px;
  }
}

/* ------------------------------------------------- app screens in HTML */

/*
  Screens drawn in HTML rather than photographed, for features that would
  otherwise need a screenshot per language. Dark in both themes, like the
  app and the phones around the real screenshots. Colours are the app's own
  (apps/mobile/src/theme/tokens.ts): lime for Grasp, violet for routines.
*/
.mock-screen {
  --m-bg: #0d0e10;
  --m-card: #16181b;
  --m-raised: #1f2226;
  --m-line: #292d32;
  --m-text: #ffffff;
  --m-muted: #9ba1a8;
  --m-lime: #c6f84e;
  --m-violet: #b9acff;
  --m-violet-bg: #231f3d;
  aspect-ratio: 540 / 1200;
  border-radius: 27px;
  background: var(--m-bg);
  color: var(--m-text);
  padding: 22px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
}
.mock-screen strong { font-weight: 600; }
.mock-screen small { display: block; color: var(--m-muted); font-size: 11px; }
.ms-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 999px;
  padding: 3px;
  font-weight: 600;
  text-align: center;
}
.ms-switch span { padding: 7px 4px; border-radius: 999px; color: var(--m-muted); }
.ms-switch .on { background: var(--m-violet-bg); color: var(--m-violet); }
.ms-head strong { display: block; font-size: 18px; letter-spacing: -0.3px; }
.ms-card {
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 14px;
  padding: 10px 11px;
}
.ms-ex { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ms-ex strong { font-size: 13px; }
.ms-table { display: flex; flex-direction: column; gap: 2px; }
.ms-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr;
  align-items: center;
  text-align: center;
  padding: 5px 0;
  border-top: 1px solid var(--m-line);
  font-variant-numeric: tabular-nums;
}
.ms-th { border-top: 0; color: var(--m-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.4px; }
.ms-type { color: var(--m-muted); }
.ms-type.on {
  justify-self: center;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--m-violet-bg);
  color: var(--m-violet);
  font-weight: 600;
}
.ms-grasp { color: var(--m-muted); }
.ms-superset {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--m-violet);
}
.ms-label { color: var(--m-violet); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; }
.ms-line { display: flex; flex-direction: column; gap: 2px; }
.ms-button {
  margin-top: auto;
  background: var(--m-lime);
  color: #0d0e10;
  font-weight: 700;
  text-align: center;
  border-radius: 999px;
  padding: 11px;
  font-size: 13px;
}
.ms-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #232e10;
  border: 1px solid var(--m-lime);
  border-radius: 14px;
  padding: 11px 12px;
}
.ms-banner svg { width: 26px; height: 26px; flex: none; color: var(--m-lime); }
.ms-banner strong { display: block; font-size: 13px; color: var(--m-lime); }
.ms-set {
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  padding: 7px 4px;
  border-top: 1px solid var(--m-line);
  font-variant-numeric: tabular-nums;
}
.ms-set .ms-mark { color: var(--m-muted); justify-self: end; }
.ms-set svg { width: 16px; height: 16px; display: block; }
.ms-set.pr { background: #232e10; border-radius: 8px; border-top-color: transparent; }
.ms-set.pr .ms-mark { color: var(--m-lime); }
.ms-summary .ms-label { color: var(--m-lime); display: block; margin-bottom: 4px; }
.ms-rec { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--m-line); }
.ms-rec span { color: var(--m-muted); }
.ms-label { text-transform: uppercase; }