/* The public page at the domain, in both languages: logical properties, so one sheet reads either way.
   Its colours and type are the app's (ui/src/index.css); its motion is CSS, a little JavaScript
   (site.js) only for the phones that follow the reader, and everything reads without either. */

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('vazirmatn-arabic-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('vazirmatn-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

:root {
  --ink: oklch(23% 0.022 60);
  --ink-2: oklch(38% 0.024 62);
  --muted: oklch(52% 0.022 68);
  --line: oklch(91.5% 0.013 83);
  --line-strong: oklch(85.5% 0.017 80);
  --surface: oklch(100% 0 0);
  --ground: oklch(97.2% 0.009 85);
  --sunken: oklch(95% 0.012 84);
  --primary: oklch(50.8% 0.118 165.612);
  --primary-strong: oklch(43.2% 0.095 166.913);
  --primary-soft: oklch(97.9% 0.021 166.113);
  --negative-strong: oklch(50.5% 0.213 27.518);
  --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --frame: min(1240px, calc(100% - 24px));
  --gutter: clamp(20px, 4vw, 56px);
  --band: clamp(56px, 8vw, 120px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* The screen's height, never 100svh or 100vh alone: Chrome on an iPhone shrinks those with its
     keyboard, and the form moved as the opening above it did. site.js holds it still as one opens. */
  --screen: 100svh;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 72px;
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

:lang(ar) body,
[lang='ar'] {
  line-height: 1.75;
}

a {
  color: var(--primary-strong);
  text-underline-offset: 0.25em;
}

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

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
}

.skip:focus {
  inset-block-start: 12px;
}

/* Buttons, as the app draws them. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button.primary {
  background: var(--primary);
  color: #fff;
}

.button.primary:hover {
  background: var(--primary-strong);
}

.button.secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
}

.button.secondary:hover {
  background: var(--ground);
}

.button.large {
  min-block-size: 48px;
  min-inline-size: min(100%, 220px);
  padding-inline: 20px;
  font-size: 1rem;
}

.small {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}

/* The header, over the page as it scrolls. */
.top {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid var(--line);
  background: var(--surface);
}

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: var(--frame);
  min-block-size: 64px;
  margin-inline: auto;
  padding: 10px clamp(12px, 3vw, 28px);
  border-inline: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 8px;
}

.sections {
  display: none;
  gap: 2px;
  margin-inline-start: 24px;
}

.sections a,
.language {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 12px;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
}

.sections a::after {
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 6px;
  block-size: 2px;
  background: var(--primary);
  content: '';
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}

.sections a:hover,
.language:hover {
  color: var(--ink);
}

.sections a[aria-current='true']::after {
  transform: scaleX(1);
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.actions .language,
.actions .sign-in {
  display: none;
}

/* A page with no menu (privacy, Not found) has nowhere else to change language on a phone. */
.actions:not(:has(.menu-button)) .language {
  display: inline-flex;
}

.menu-button {
  inline-size: 44px;
  padding: 0;
}

.menu {
  position: fixed;
  inset: 64px 0 auto;
  inline-size: var(--frame);
  margin: 0 auto;
  padding: 4px clamp(12px, 3vw, 28px) 16px;
  border: 0;
  border-inline: 1px solid var(--line);
  border-block: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.menu ul {
  padding: 0;
  list-style: none;
}

.menu li {
  border-block-end: 1px solid var(--line);
}

.menu li a {
  display: flex;
  align-items: center;
  min-block-size: 52px;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.menu-foot {
  display: flex;
  gap: 8px;
  padding-block-start: 16px;
}

.menu-foot .button {
  flex: 1;
}

@media (min-width: 64rem) {
  .sections,
  .actions .language,
  .actions .sign-in {
    display: inline-flex;
  }

  .menu-button {
    display: none;
  }
}

/* The page's column, its edges drawn. */
main {
  inline-size: var(--frame);
  margin-inline: auto;
  border-inline: 1px solid var(--line);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.eyebrow::before {
  inline-size: 8px;
  block-size: 8px;
  background: var(--primary);
  content: '';
}

.eyebrow .num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

h1,
h2 {
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 strong,
h2 strong {
  font-weight: 700;
}

h2 {
  margin-block-start: 20px;
  max-inline-size: 22ch;
  font-size: clamp(2rem, 2.6vw + 1.125rem, 3.5rem);
  line-height: 1.12;
}

[lang='ar'] h1,
[lang='ar'] h2 {
  letter-spacing: 0;
  line-height: 1.4;
}

.section-lead {
  margin-block-start: 16px;
  max-inline-size: 40rem;
  color: var(--ink-2);
  font-size: 1.125rem;
  text-wrap: pretty;
}

/* The opening: the promise and the problem, the app beside them on a wide screen. */
.intro {
  display: grid;
}

.hero,
.problem {
  container-type: inline-size;
  padding: clamp(40px, 6vw, 72px) var(--gutter);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding-block: 4px;
  padding-inline: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.chip span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.8125rem;
  font-weight: 700;
}

h1 {
  margin-block-start: 28px;
  font-size: clamp(2.375rem, 11.6cqi, 5.75rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h1 strong {
  display: block;
}

.lead {
  margin-block-start: 24px;
  max-inline-size: 34em;
  color: var(--ink-2);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-block-start: 32px;
}

/* The app on three screens; each picture is the app itself (scripts/site_screens.py). The computer and
   the tablet are behind, the phone ahead in a scene of its own, so that with site.js it leaves them:
   on a wide screen it goes on with the reader into Before Mazraa, on a narrow one it steps out of the
   stage and fills the screen. A scene is laid out in hundredths of its width (cqi), so the two scenes
   coincide at any size. */
.devices,
.stage {
  display: grid;
}

.devices {
  padding: 0 var(--gutter) 8px;
}

.behind,
.ahead {
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  padding: 28px 16px;
  overflow: clip;
  border-radius: 20px;
}

.behind {
  background-color: var(--sunken);
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.5px);
  background-size: 20px 20px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.ahead {
  z-index: 1;
}

/* Short enough to stay whole under the header while the stage holds there. */
.scene {
  container-type: inline-size;
  position: relative;
  inline-size: min(100%, calc((var(--screen) - 180px) * 100 / 142));
  aspect-ratio: 100 / 142;
}

.desktop,
.tablet,
.devices .phone {
  position: absolute;
}

.desktop {
  inset-block-start: 0;
  inset-inline-start: 3cqi;
  z-index: 1;
  inline-size: 94cqi;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;
  box-shadow: var(--shadow);
}

.browser {
  display: flex;
  align-items: center;
  gap: 5px;
  block-size: 24px;
  padding-inline: 10px;
  border-block-end: 1px solid var(--line);
  background: var(--ground);
}

.browser i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.browser span {
  margin-inline: auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.tablet {
  inset-block-start: 34cqi;
  inset-inline-end: -2cqi;
  z-index: 2;
  inline-size: 42cqi;
  padding: 6px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    var(--shadow);
}

.tablet img {
  border-radius: 12px;
}

.phone {
  padding: 6px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    var(--shadow);
}

.phone img {
  border-radius: 22px;
}

/* Whole, as the tablet and the computer are: a phone cut by the stage's edge read as broken. Its
   --t, from 0 to 1, takes it from its place among the others to where it ends (the wide layout's). */
.devices .phone {
  --dx: 0cqi;
  --dy: 0cqi;
  --k0: 1;
  --t: 0;
  inset-block-start: 26cqi;
  inset-inline-start: 4cqi;
  inline-size: 50cqi;
  translate: calc((1 - var(--t)) * var(--dx) * var(--dir)) calc((1 - var(--t)) * var(--dy));
  scale: calc(var(--k0) + (1 - var(--k0)) * var(--t));
}

.devices figcaption {
  margin-block-start: 14px;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Wider, the tablet behind the computer and the phone in front at the end; the phone is laid out
   where it ends, big beside Before Mazraa, and drawn back to its place among the others. */
@media (min-width: 40rem) {
  .scene {
    inline-size: min(100%, 40rem, calc((var(--screen) - 180px) * 100 / 106));
    aspect-ratio: 100 / 106;
  }

  .desktop {
    inset-block-start: 21cqi;
    inset-inline-start: 0;
    inline-size: 84cqi;
  }

  .tablet {
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 0;
    inline-size: 40cqi;
  }

  .devices .phone {
    --dx: 37.5cqi;
    --dy: 18.8cqi;
    --k0: 0.617;
    inset-block-start: 2.7cqi;
    inset-inline-start: 26.5cqi;
    inline-size: 47cqi;
  }
}

/* What it is like today. */
.pains {
  margin-block-start: clamp(32px, 4vw, 48px);
  padding: 0;
  border-block-end: 1px solid var(--line);
  list-style: none;
}

.pains li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-block: 22px;
  border-block-start: 1px solid var(--line);
}

.tile {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.pains p {
  padding-block-start: 6px;
  color: var(--ink-2);
  font-size: 1.125rem;
  text-wrap: pretty;
}

.pains strong {
  color: var(--ink);
}

.problem h2 {
  font-size: clamp(1.875rem, 10cqi, 3.625rem);
}

.problem h2 strong {
  display: block;
}

/* Narrow, with site.js: the stage holds under the header for most of a screen of scrolling (--held is its own
   height). The two behind leave as --out goes to 1, and the phone steps out of the stage as --g does,
   to the middle of the screen at the size that fills it (--gx, --gy and --gk, measured by site.js). */
@media (width < 64rem) {
  /* The phone's scene, grown, is wider than the screen: unclipped, the page scrolled sideways. */
  .travel .devices {
    overflow-x: clip;
  }

  /* --below: what of the grown phone hangs under the stage, kept clear of Before Mazraa. */
  .travel .stage {
    padding-block-end: var(--below, 0px);
  }

  .travel .stage::after {
    grid-area: 1 / 1;
    block-size: calc(var(--held, 0px) + var(--screen) * 0.8);
    content: '';
  }

  .travel .behind,
  .travel .ahead {
    position: sticky;
    inset-block-start: 76px;
    align-self: start;
  }

  .travel .ahead {
    overflow: visible;
  }

  .travel .behind {
    opacity: calc(1 - var(--out, 0));
    scale: calc(1 - var(--out, 0) * 0.08);
  }

  .travel .desktop {
    translate: 0 calc(var(--out, 0) * -16cqi);
  }

  .travel .tablet {
    translate: calc(var(--out, 0) * 40cqi * var(--dir)) 0;
  }

  .travel .ahead .scene {
    transform-origin: var(--gox, 50%) var(--goy, 50%);
    translate: calc(var(--gx, 0px) * var(--g, 0)) calc(var(--gy, 0px) * var(--g, 0));
    scale: calc(1 + (var(--gk, 1) - 1) * var(--g, 0));
  }
}

/* Wide, the screens fill the space beside the promise. Without site.js, or for anyone who asks for
   less motion, they stay there and Before Mazraa takes the whole width below; with it (.travel), the
   phone goes on beside Before Mazraa and grows, and the two behind fade as they scroll away. */
@media (min-width: 64rem) {
  .intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .hero,
  .travel .problem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: calc(var(--screen) - 64px);
  }

  /* Each part at its own width, the Pilot chip around its words rather than across the column. */
  .hero {
    grid-area: 1 / 1;
    align-items: flex-start;
  }

  .problem {
    grid-area: 2 / 1 / 3 / 3;
  }

  .devices {
    grid-area: 1 / 2;
    padding: 0;
  }

  .stage {
    display: contents;
  }

  .behind,
  .ahead {
    align-self: start;
    block-size: calc(var(--screen) - 64px);
    padding: 32px 24px 56px;
    overflow: visible;
    border-radius: 0;
  }

  .behind {
    background: none;
    box-shadow: none;
  }

  .scene {
    inline-size: min(100%, calc((var(--screen) - 152px) * 100 / 106));
  }

  .devices figcaption {
    grid-area: 1 / 1;
    align-self: end;
    margin: 0;
    padding: 0 24px 20px;
  }

  .travel .problem {
    grid-area: 2 / 1;
  }

  .travel .devices {
    grid-row: 1 / 3;
    grid-template-rows: auto 1fr;
  }

  .travel .ahead {
    position: sticky;
    inset-block-start: 64px;
    grid-row: 1 / 3;
  }

  /* As the design draws them leaving: gone by four fifths of the way, each sliding off to its own
     side, the tablet rising and the computer sinking, both a little smaller. */
  .travel .behind .scene {
    opacity: calc(1 - var(--p, 0) * 1.25);
  }

  .travel .behind .desktop {
    translate: calc(var(--p, 0) * -64px * var(--dir)) calc(var(--p, 0) * 24px);
    scale: calc(1 - var(--p, 0) * 0.08);
  }

  .travel .behind .tablet {
    translate: calc(var(--p, 0) * 64px * var(--dir)) calc(var(--p, 0) * -32px);
    scale: calc(1 - var(--p, 0) * 0.08);
  }

  /* Gone before the phone passes over it. */
  .travel .devices figcaption {
    opacity: calc(1 - var(--p, 0) * 3);
  }

  .travel .devices .phone {
    --t: var(--p, 0);
  }
}

/* A band of the page, its top corners marked. */
.band {
  position: relative;
  padding: var(--band) var(--gutter);
  border-block-start: 1px solid var(--line);
}

.band::before,
.band::after {
  position: absolute;
  inset-block-start: -4px;
  inline-size: 7px;
  block-size: 7px;
  border: 1px solid var(--muted);
  background: var(--surface);
  content: '';
}

.band::before {
  inset-inline-start: -4px;
}

.band::after {
  inset-inline-end: -4px;
}

.ground {
  background: var(--ground);
}

/* How it works: three steps, each with the figures it works on. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px 32px;
  margin-block-start: clamp(40px, 5vw, 72px);
  padding: 0;
  list-style: none;
}

.steps li {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  min-inline-size: 0;
  margin-block-end: 34px;
}

.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-num {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary-strong);
  font-weight: 700;
}

.step-num.last {
  background: var(--primary);
  color: #fff;
}

.rule {
  flex: 1;
  block-size: 1px;
  background: var(--line-strong);
}

.steps h3 {
  margin-block-start: 8px;
  font-size: 1.5rem;
  line-height: 1.35;
}

.steps p {
  color: var(--ink-2);
  text-wrap: pretty;
}

.ledger {
  align-self: start;
  margin-block-start: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.9375rem;
}

.ledger-head,
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
}

.ledger-head {
  padding-block: 10px;
  border-block-end: 1px solid var(--line);
  background: var(--ground);
  color: var(--muted);
  font-size: 0.8125rem;
}

.ledger-row + .ledger-row {
  border-block-start: 1px solid var(--line);
}

.ledger-row small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}

.ledger-row b {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ledger-row.total {
  font-size: 1.0625rem;
  font-weight: 700;
}

.ledger-row.total + .ledger-row,
.ledger-row + .ledger-row.total {
  border-block-start-color: var(--ink);
}

.positive {
  color: var(--primary-strong);
}

.negative {
  color: var(--negative-strong);
}

/* What it keeps: a picture under each, or one phone beside them that follows the reading. */
.keeps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 clamp(32px, 5vw, 72px);
  margin-block-start: clamp(32px, 4vw, 56px);
}

.keep-list {
  flex: 1 1 380px;
  min-inline-size: 0;
  border-block-end: 1px solid var(--line);
}

.keep {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-block: 32px;
  border-block-start: 1px solid var(--line);
}

.keep-num {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}

.keep h3 {
  margin-block-start: 4px;
  font-size: clamp(1.5rem, 1vw + 1.125rem, 2rem);
  line-height: 1.25;
}

.keep p {
  max-inline-size: 46ch;
  color: var(--ink-2);
  font-size: 1.125rem;
  text-wrap: pretty;
}

.keep-shot {
  display: flex;
  justify-content: center;
  margin-block-start: 8px;
  padding-block: 28px;
  border: 1px solid var(--line);
  background-color: var(--sunken);
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.5px);
  background-size: 20px 20px;
}

.keep-shot .phone {
  inline-size: min(232px, 72%);
  block-size: max-content;
}

.keep-stage {
  display: none;
}

.ticks {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ticks i {
  inline-size: 20px;
  block-size: 3px;
  background: var(--line-strong);
  transition: background-color 0.3s;
}

/* With site.js, a wide screen keeps one phone in view and changes its screen with the item read. */
@media (min-width: 64rem) {
  .following .keep {
    min-block-size: calc(var(--screen) * 0.7);
  }

  .following .keep-shot {
    display: none;
  }

  .following .keep-stage {
    position: sticky;
    inset-block-start: 96px;
    display: flex;
    flex: 1 1 440px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 24px 32px;
    border: 1px solid var(--line);
    background-color: var(--sunken);
    background-image: radial-gradient(var(--line-strong) 1px, transparent 1.5px);
    background-size: 20px 20px;
  }

  /* A ruler along its top, as the design draws the panel. */
  .following .keep-stage::before {
    align-self: stretch;
    block-size: 28px;
    margin: -24px -24px 4px;
    border-block-end: 1px solid var(--line);
    background-color: var(--ground);
    background-image:
      linear-gradient(to var(--rule-end), var(--muted) 1px, transparent 1px),
      linear-gradient(to var(--rule-end), var(--line-strong) 1px, transparent 1px);
    background-position: var(--rule-start) bottom;
    background-repeat: repeat-x;
    background-size:
      100px 14px,
      10px 7px;
    content: '';
  }

  .keep-stage .phone {
    position: relative;
    block-size: min(650px, calc(var(--screen) - 222px));
    aspect-ratio: 612 / 1310;
  }

  .keep-stage .phone img {
    position: absolute;
    inset: 6px;
    inline-size: calc(100% - 12px);
    opacity: 0;
    transition:
      opacity 0.45s var(--ease),
      transform 0.45s var(--ease);
    transform: translateY(12px);
  }

  .keep-stage .phone img.shown {
    opacity: 1;
    transform: none;
  }

  .ticks i.shown {
    background: var(--primary);
  }

  .keep.shown .keep-num {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
  }
}

/* Made for the farm. */
.specs {
  margin-block-start: clamp(32px, 4vw, 56px);
  padding: 0;
  border-block-start: 1px solid var(--ink);
  list-style: none;
}

.specs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  padding-block: 24px;
  border-block-end: 1px solid var(--line);
}

.spec-num {
  flex: 0 0 56px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.specs h3 {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  gap: 12px;
  font-size: 1.375rem;
  line-height: 1.35;
}

.specs h3 svg {
  color: var(--primary);
}

.specs p {
  flex: 2 1 360px;
  color: var(--ink-2);
}

/* The pilot. */
.pilot {
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
  border-radius: 20px;
  background: var(--ground);
}

.pilot h2 {
  max-inline-size: 14ch;
  font-size: clamp(2.5rem, 4.4vw + 1rem, 5.75rem);
  line-height: 1.04;
}

[lang='ar'] .pilot h2 {
  line-height: 1.3;
}

.pilot-words {
  margin-block: 28px 40px;
  max-inline-size: 30ch;
  font-size: clamp(1.5rem, 1.4vw + 1.0625rem, 2.375rem);
  line-height: 1.4;
}

/* Questions, each opening in place. */
.faq,
.join {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px clamp(32px, 6vw, 96px);
}

.faq > div:first-child {
  flex: 1 1 280px;
}

.questions {
  flex: 2 1 480px;
  min-inline-size: 0;
  border-block-start: 1px solid var(--ink);
}

details {
  border-block-end: 1px solid var(--line);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 72px;
  font-size: 1.1875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.plus {
  position: relative;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  transition: transform 0.3s var(--ease);
}

.plus::before,
.plus::after {
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 14px;
  block-size: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background: var(--ink-2);
  content: '';
}

.plus::after {
  transform: rotate(90deg);
}

details[open] .plus {
  transform: rotate(45deg);
}

details p {
  max-inline-size: 60ch;
  margin-block-end: 24px;
  color: var(--ink-2);
}

/* Ask to join: a plain form, mailed to us and kept nowhere (api/routers/ask_to_join.py). The API sends
   the page back to #asked, #ask-missing, #ask-failed or #ask-unchecked, and :target shows which, so no
   script is needed for that. */
.join > div:first-child {
  flex: 1 1 300px;
}

.ask {
  flex: 1.4 1 420px;
  min-inline-size: 0;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 20px;
  background: var(--ground);
}

.ask-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.field input,
.field textarea,
.field select {
  min-block-size: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.field textarea {
  resize: vertical;
}

/* A phone's country code and its number, once phone.js has the list: on one line, as the number is
   written, the code as wide as its flag and digits and the number the rest. The browser's own select
   lies unseen over the code, so a phone opens its own list, every country named. The arrow is
   --muted, written out, as an image cannot read a variable. */
.number-row {
  display: flex;
  gap: 8px;
}

.number-row input {
  flex: 1 1 0;
  min-inline-size: 0;
}

.calling-code {
  position: relative;
  display: flex;
  flex: none;
}

.calling-code[hidden] {
  display: none;
}

.field .calling-code select {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  opacity: 0;
  cursor: pointer;
}

.calling-code-face {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  padding: 10px 26px 10px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2372675c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  white-space: nowrap;
}

.calling-code select:focus-visible + .calling-code-face {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.field input::placeholder {
  color: var(--muted);
}

.hint {
  color: var(--muted);
  font-size: 0.875rem;
}

/* For scripts alone: out of sight, out of the tab order and out of what a screen reader reads. */
.trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form-error {
  display: none;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--negative-strong);
  background: var(--surface);
  color: var(--negative-strong);
  font-weight: 500;
}

.form-error:target {
  display: block;
}

.ask-form .button {
  inline-size: 100%;
}

.ask-form .small {
  display: block;
  text-align: center;
}

.asked {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: 32px;
  text-align: center;
}

.asked:target {
  display: flex;
}

.asked h3 {
  font-size: 1.5rem;
}

.asked p {
  max-inline-size: 32ch;
  color: var(--ink-2);
}

.ask:has(.asked:target) .ask-form {
  display: none;
}

/* Focused by site.js for a screen reader to read out, never by a person tabbing. */
.asked:focus,
.form-error:focus {
  outline: none;
}

/* A page of words: the privacy notice. */
.prose {
  max-inline-size: 46rem;
  padding: var(--band) var(--gutter);
}

.prose h1 {
  margin-block: 20px 12px;
  font-size: clamp(2.25rem, 3vw + 1.25rem, 3.5rem);
}

.prose h2 {
  max-inline-size: none;
  margin-block: 40px 12px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}

.prose p,
.prose li {
  color: var(--ink-2);
}

.prose p + p {
  margin-block-start: 12px;
}

.prose table {
  inline-size: 100%;
  margin-block-start: 12px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  padding: 10px 12px 10px 0;
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.prose th {
  color: var(--muted);
  font-weight: 600;
}

.prose .dated {
  margin-block-start: 48px;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Not found: shorter than the screen, its column runs down to the foot, and its two ways on sit side
   by side while they fit. */
.short {
  display: flex;
  flex-direction: column;
  min-block-size: var(--screen);
}

.short main {
  flex: auto;
}

/* A field with every row come up but the one the address names, a crow on its sign. */
.lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 6vw, 64px) var(--gutter) var(--band);
  text-align: center;
}

.lost .eyebrow {
  margin-block-start: 28px;
}

.lost h1 {
  margin-block-start: 14px;
  font-size: clamp(2.25rem, 3.4vw + 1.375rem, 4rem);
  line-height: 1.08;
}

.lost .lead {
  margin-block-start: 18px;
}

.lost .cta {
  align-self: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* The drawing is `page/not-found.svg`, which the app's Not found draws too. */
.lost > img {
  inline-size: min(100%, 480px);
  block-size: auto;
}

/* The foot. */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
  inline-size: var(--frame);
  margin-inline: auto;
  padding: 40px var(--gutter) 48px;
  border-inline: 1px solid var(--line);
  border-block-start: 1px solid var(--line);
  background: var(--ground);
}

.foot-brand p {
  margin-block-start: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.foot nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--ink-2);
}

/* Motion. The screens come in as the page opens; site.js lets each part rise as it is scrolled to,
   a receipt's lines arrive one by one, the steps' rules draw, the pilot's words light up as they are
   read and the phone goes on with the reader. None of it for anyone who asks for less, and without
   the script everything simply shows. */
:root {
  --rule-start: left;
  --rule-end: right;
  --dir: 1;
}

[dir='rtl'] {
  --rule-start: right;
  --rule-end: left;
  --dir: -1;
}

@media (prefers-reduced-motion: no-preference) {
  /* The phone comes in by its scene, which is never drawn smaller: animated itself, the phone was drawn
     at full size and shrunk as a picture, blurred for as long as the animation filled forwards. */
  .desktop,
  .tablet,
  .ahead .scene {
    animation: come-in 0.7s var(--ease) backwards;
  }

  .tablet {
    animation-delay: 0.15s;
  }

  .ahead .scene {
    animation-delay: 0.3s;
  }

  .rising {
    opacity: 0;
    transform: translateY(18px);
  }

  .rising.risen {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.6s var(--ease) var(--delay, 0s),
      transform 0.6s var(--ease) var(--delay, 0s);
  }

  .rule.rising {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: var(--rule-start) center;
  }

  .rule.rising.risen {
    transform: none;
    transition: transform 0.8s var(--ease) var(--delay, 0s);
  }

  .pilot-words .word {
    opacity: 0.2;
    transition: opacity 0.3s;
  }

  .pilot-words .word.lit {
    opacity: 1;
  }
}

@keyframes come-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}