/* ============================================================
   QUIZORIA — the public site.

   This is the only surface a person sees before they know what QUIZORIA is,
   so it has one job: make the product legible in about eight seconds, and
   make the game look like something worth trying.

   IT CONNECTS THE OTHER TWO SURFACES RATHER THAN COPYING EITHER. The ground
   is the game's midnight blue, because that is the product's face and a white
   marketing page for a dark cinematic quiz would introduce it as something it
   is not. The structure - cards, grids, a quiet grey scale, generous line
   height - is the dashboard's, because the page has to be read rather than
   watched. Two accents, used strictly by ROLE and never decoratively:

       gold    the game. Play, try, the ladder, the prize.
       violet  the product. Build, create, sign up, the plans.

   Nothing here is shared with `styles/tokens.css` or `styles/saas/tokens.css`
   on purpose: those two are load-bearing for a television and for a dense
   admin interface respectively, and a marketing page pulling on either would
   make a typographic decision here into a regression there. The values are
   deliberately the same numbers; the coupling is not.
   ============================================================ */

:root {
  /* ---- ground and ink ---- */
  --s-ink-900: #06070f;          /* the darkest ground, behind the fold */
  --s-ink-850: #0a0b18;          /* the page */
  --s-ink-800: #10122a;          /* raised panels */
  --s-ink-700: #171a3a;          /* borders that need to be seen */
  --s-line:    rgba(160, 170, 230, .14);
  --s-line-strong: rgba(160, 170, 230, .28);

  /* Text on the dark ground. The greys carry a slight indigo bias, which is
     what stops them reading as a screenshot pasted onto a coloured page. */
  --s-text:  #f2f4ff;
  --s-dim:   #a9b1d8;
  --s-faint: #737bab;

  /* ---- the two accents ---- */
  --s-gold:      #f3c860;
  --s-gold-deep: #b8862a;
  --s-gold-pale: #ffeab5;
  --s-violet:      #7c5cf0;
  --s-violet-deep: #5a39cf;
  --s-violet-pale: #cfc7ff;

  --s-gold-fill:   linear-gradient(135deg, #fff2cf 0%, var(--s-gold) 38%, var(--s-gold-deep) 74%, #fbe4a8 100%);
  --s-violet-fill: linear-gradient(135deg, #9b83f6 0%, var(--s-violet) 46%, var(--s-violet-deep) 100%);

  /* ---- rhythm ---- */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;   --s-10: 8rem;

  --s-r-sm: .5rem; --s-r-md: .875rem; --s-r-lg: 1.25rem; --s-r-xl: 2rem;
  --s-wide: 76rem;                 /* the widest a section ever gets */
  --s-read: 42rem;                 /* running text, near 65 characters */

  --s-font: 'Outfit', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --s-font-ar: 'Cairo', 'Segoe UI', Tahoma, sans-serif;

  --s-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .55);
  --s-ease: cubic-bezier(.22, 1, .36, 1);

  color-scheme: dark;
}

html[lang='ar'] { --s-font: var(--s-font-ar); }

/* ============================================================
   base
   ============================================================ */

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

/*
 * `hidden` MEANS HIDDEN.
 *
 * The attribute is how JavaScript in this product shows and hides things, and
 * the browser's own rule for it - `[hidden] { display: none }` - is a
 * user-agent declaration that ANY author rule setting `display` beats. So a
 * component with `display: flex` in a media query silently stops responding to
 * `element.hidden = true`, and does so only at that width.
 *
 * That is not hypothetical: the site's mobile navigation drawer is
 * `position: fixed; inset: 0; display: flex` under 60rem, so closing it did
 * nothing and it covered the page. The menu "stayed open" and the header
 * looked cut off because the drawer was over it.
 *
 * One rule, at the base, so the whole class of bug cannot recur.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--s-ink-850);
  color: var(--s-text);
  font-family: var(--s-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }

/* Every interactive thing announces focus. The ring is gold on dark, which is
   the one pairing that stays visible over both the ground and the panels. */
:focus-visible {
  outline: 2px solid var(--s-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* A skip link that is only a skip link once it is focused. */
.skip {
  position: absolute; inset-block-start: -3rem; inset-inline-start: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--s-violet); color: #fff;
  border-radius: 0 0 var(--s-r-md) var(--s-r-md);
  text-decoration: none; font-weight: 600;
  transition: inset-block-start .18s var(--s-ease);
}
.skip:focus { inset-block-start: 0; }

.wrap { width: min(var(--s-wide), 100% - 2 * var(--s-5)); margin-inline: auto; }

/* ============================================================
   buttons
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s var(--s-ease), box-shadow .16s var(--s-ease),
              background-color .16s var(--s-ease), border-color .16s var(--s-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Gold is play. It is the only gold button on any screen, which is what makes
   it mean something. */
.btn--play {
  background: var(--s-gold-fill);
  color: #1a1305;
  box-shadow: 0 .5rem 1.6rem rgba(243, 200, 96, .22);
}
.btn--play:hover { box-shadow: 0 .7rem 2rem rgba(243, 200, 96, .34); }

/* Violet is build. Signing up, creating, upgrading. */
.btn--build {
  background: var(--s-violet-fill);
  color: #fff;
  box-shadow: 0 .5rem 1.6rem rgba(124, 92, 240, .28);
}
.btn--build:hover { box-shadow: 0 .7rem 2rem rgba(124, 92, 240, .4); }

.btn--quiet {
  background: rgba(255, 255, 255, .05);
  border-color: var(--s-line-strong);
  color: var(--s-text);
}
.btn--quiet:hover { background: rgba(255, 255, 255, .09); }

.btn--plain { padding-inline: 0; background: none; color: var(--s-dim); }
.btn--plain:hover { color: var(--s-text); }

.btn--lg { padding: 1rem 1.9rem; font-size: 1.075rem; }

/* ============================================================
   header
   ============================================================ */

.site-head {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: rgba(10, 11, 24, .82);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--s-line);
}
.site-head__bar {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; font-weight: 800; letter-spacing: .14em;
  font-size: 1.02rem;
}
.brand__mark {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: .6rem;
  background: var(--s-gold-fill);
  color: #1a1305; font-weight: 800; letter-spacing: 0;
}

.site-nav { display: flex; align-items: center; gap: var(--s-5); margin-inline-start: auto; }
.site-nav__links { display: flex; align-items: center; gap: var(--s-5); }
.site-nav__link {
  text-decoration: none; color: var(--s-dim); font-weight: 500; font-size: .96rem;
  padding-block: .35rem;
  border-block-end: 1px solid transparent;
}
.site-nav__link:hover { color: var(--s-text); border-block-end-color: var(--s-line-strong); }
.site-nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.burger { display: none; }

/* The language switch is three letters, not a dropdown: there are three
   languages and a select would hide two of them behind a click. */
.langs { display: flex; gap: .1rem; }
.langs__btn {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--s-faint); padding: .3rem .5rem; border-radius: var(--s-r-sm);
}
.langs__btn:hover { color: var(--s-text); }
.langs__btn[aria-pressed='true'] { color: var(--s-gold); background: rgba(243, 200, 96, .1); }

/* ============================================================
   sections
   ============================================================ */

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.section__head { max-width: var(--s-read); margin-block-end: var(--s-7); }
.section__eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--s-gold); margin-block-end: var(--s-3);
}
.section--build .section__eyebrow { color: var(--s-violet-pale); }
.section__title { font-size: clamp(1.75rem, 3.4vw, 2.55rem); font-weight: 700; }
.section__lead { margin-block-start: var(--s-4); color: var(--s-dim); font-size: 1.1rem; }

html[dir='rtl'] .section__eyebrow { letter-spacing: 0; text-transform: none; }

/* ============================================================
   hero
   ============================================================ */

.hero {
  position: relative;
  padding-block: clamp(var(--s-8), 9vw, var(--s-10)) var(--s-9);
  overflow: hidden;
}

/* Two soft lights rather than a gradient wash: one gold behind the game, one
   violet behind the product, which is the page's whole argument in one image. */
.hero::before,
.hero::after {
  content: ''; position: absolute; z-index: 0;
  width: 48rem; height: 34rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .3;
  pointer-events: none;
}
.hero::before { inset-block-start: -14rem; inset-inline-start: -16rem; background: var(--s-violet); }
.hero::after  { inset-block-start: -8rem;  inset-inline-end: -20rem;   background: var(--s-gold-deep); opacity: .24; }

.hero__grid {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-9); }
}

.hero__pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .4rem .9rem;
  border: 1px solid var(--s-line-strong); border-radius: 999px;
  font-size: .84rem; color: var(--s-dim);
  margin-block-end: var(--s-5);
}
.hero__pill b { color: var(--s-gold); font-weight: 700; }

.hero__title {
  font-size: clamp(2.3rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -.03em;
}
.hero__title em {
  font-style: normal;
  background: var(--s-gold-fill);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__lead {
  margin-block-start: var(--s-5);
  max-width: 34rem;
  font-size: 1.16rem; color: var(--s-dim);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }
.hero__note { margin-block-start: var(--s-4); font-size: .9rem; color: var(--s-faint); }

/* ---- the product, not a picture of it ----
   The hero shows a real question plate and a real ladder, built from this
   stylesheet. A screenshot would go stale the first time the game changed, and
   at this size it would be unreadable. */
.stage {
  position: relative;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-xl);
  background: linear-gradient(160deg, #12142f 0%, #0b0c1c 70%);
  box-shadow: var(--s-shadow);
  padding: var(--s-5);
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr) 7.5rem;
}
@media (max-width: 30rem) { .stage { grid-template-columns: minmax(0, 1fr); } }

.stage__hud {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: .74rem; color: var(--s-faint);
}
.stage__chip {
  padding: .25rem .6rem; border: 1px solid var(--s-line); border-radius: 999px;
}
.stage__chip--gold { color: var(--s-gold-pale); border-color: rgba(243, 200, 96, .35); }
.stage__timer {
  margin-inline-start: auto;
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid var(--s-gold); color: var(--s-gold);
  font-weight: 700; font-size: .78rem;
}

/* The ladder is fifteen rungs tall and the question is two lines, so the row
   heights are the ladder's. Left to stretch, the question plate inflated into
   a mostly-empty box - which is not what the game looks like. Both keep their
   natural height and the slack falls under the answers, as breathing room. */
.stage__question {
  align-self: start;
  border: 1px solid var(--s-line); border-radius: var(--s-r-lg);
  background: rgba(23, 26, 58, .6);
  padding: var(--s-5) var(--s-4);
  text-align: center; font-weight: 600; font-size: 1.02rem;
}

.stage__answers { align-self: start; display: grid; gap: .55rem; }
@media (min-width: 26rem) { .stage__answers { grid-template-columns: 1fr 1fr; } }
.stage__answer {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .8rem;
  border: 1px solid var(--s-line); border-radius: 999px;
  background: rgba(16, 18, 42, .8);
  font-size: .9rem;
}
.stage__answer b {
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem; flex: 0 0 auto;
  transform: rotate(45deg);
  border: 1px solid rgba(243, 200, 96, .5);
  border-radius: .2rem;
  color: var(--s-gold); font-size: .68rem; font-weight: 700;
}
.stage__answer b span { transform: rotate(-45deg); }
.stage__answer--right {
  border-color: rgba(74, 222, 128, .55);
  background: rgba(22, 78, 50, .38);
  color: #d6ffe6;
}
.stage__answer--right b { border-color: rgba(74, 222, 128, .6); color: #86efac; }

.stage__ladder {
  grid-row: 2 / span 2; grid-column: 2;
  display: flex; flex-direction: column-reverse; gap: .12rem;
  border: 1px solid var(--s-line); border-radius: var(--s-r-md);
  padding: .5rem .4rem;
  font-size: .7rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 30rem) { .stage__ladder { display: none; } }
.stage__rung {
  display: flex; justify-content: space-between; gap: .4rem;
  padding: .16rem .35rem; border-radius: .3rem;
  color: var(--s-faint);
}
.stage__rung span:first-child { color: rgba(160, 170, 230, .4); }
/* A prize is a number, and a number reads left to right in every language.
   Left to inherit the page's direction, "1 000 000" arrived in Arabic as
   "000 000 1" - the digit groups mirrored, which is the one thing about a
   number that must never mirror. The game pins Arabic to Latin digits for the
   same reason; this pins their order. */
.stage__rung span:last-child { direction: ltr; unicode-bidi: isolate; }
.stage__rung--safe { color: var(--s-gold-pale); }
.stage__rung--done { color: rgba(243, 200, 96, .6); }
.stage__rung--now {
  background: var(--s-gold-fill); color: #1a1305; font-weight: 700;
}
.stage__rung--now span:first-child { color: rgba(26, 19, 5, .65); }

/* ============================================================
   steps
   ============================================================ */

.steps { counter-reset: step; display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(5, 1fr); } }

.step {
  border: 1px solid var(--s-line); border-radius: var(--s-r-lg);
  background: var(--s-ink-800);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
}
/* The numbers are real: this is a sequence, and each step depends on the one
   before it. Numbering something that is not a sequence is decoration. */
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: rgba(124, 92, 240, .16); color: var(--s-violet-pale);
  font-weight: 700; font-size: .88rem;
}
.step h3 { font-size: 1.02rem; font-weight: 650; }
.step p { color: var(--s-dim); font-size: .93rem; }

/* ============================================================
   cards
   ============================================================ */

.cards { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--s-line); border-radius: var(--s-r-lg);
  background: var(--s-ink-800);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.card__icon { font-size: 1.5rem; line-height: 1; }
.card h3 { font-size: 1.06rem; font-weight: 650; }
.card p { color: var(--s-dim); font-size: .95rem; }

/* ============================================================
   the split feature blocks
   ============================================================ */

.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); }
  .split--flip > :first-child { order: 2; }
}

.panel {
  border: 1px solid var(--s-line-strong); border-radius: var(--s-r-xl);
  background: linear-gradient(160deg, #12142f 0%, #0b0c1c 75%);
  box-shadow: var(--s-shadow);
  padding: var(--s-5);
  overflow: hidden;
}
.panel__bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding-block-end: var(--s-4); margin-block-end: var(--s-4);
  border-block-end: 1px solid var(--s-line);
  font-size: .8rem; color: var(--s-faint);
}
.panel__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--s-line-strong); }

/* One generated question, shown as the product shows it. */
.qcard {
  border: 1px solid var(--s-line); border-radius: var(--s-r-md);
  padding: var(--s-4); display: grid; gap: var(--s-3);
  background: rgba(16, 18, 42, .55);
}
.qcard + .qcard { margin-block-start: var(--s-3); }
.qcard__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag {
  font-size: .7rem; padding: .16rem .5rem; border-radius: 999px;
  border: 1px solid var(--s-line); color: var(--s-faint);
}
.tag--ai { border-color: rgba(124, 92, 240, .45); color: var(--s-violet-pale); }
.tag--ok { border-color: rgba(74, 222, 128, .4); color: #86efac; }
.qcard__q { font-weight: 600; font-size: .98rem; }
.qcard__a { display: grid; gap: .25rem; font-size: .88rem; color: var(--s-dim); }
.qcard__a b { color: #86efac; font-weight: 600; }
.qcard__why { font-size: .84rem; color: var(--s-faint); }

.ticks { display: grid; gap: var(--s-3); margin-block-start: var(--s-5); padding: 0; list-style: none; }
.ticks li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--s-dim); }
.ticks li::before {
  content: '✓'; flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: rgba(124, 92, 240, .18); color: var(--s-violet-pale);
  font-size: .8rem; font-weight: 700;
}

/* ============================================================
   readiness meter (the 15-question rule, shown rather than described)
   ============================================================ */

.meter { display: grid; gap: var(--s-2); }
.meter__row { display: flex; justify-content: space-between; font-size: .88rem; }
.meter__row b { font-variant-numeric: tabular-nums; }
.meter__track {
  height: .5rem; border-radius: 999px;
  background: rgba(160, 170, 230, .12); overflow: hidden;
}
.meter__fill { height: 100%; border-radius: 999px; background: var(--s-violet-fill); }
.meter__fill--full { background: linear-gradient(135deg, #86efac, #22c55e); }

/* ============================================================
   pricing
   ============================================================ */

.plans { display: grid; gap: var(--s-4); }
@media (min-width: 52rem) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  border: 1px solid var(--s-line); border-radius: var(--s-r-lg);
  background: var(--s-ink-800); padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.plan--featured {
  border-color: rgba(124, 92, 240, .55);
  box-shadow: 0 0 0 1px rgba(124, 92, 240, .25), var(--s-shadow);
}
.plan__name { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--s-faint); }
html[dir='rtl'] .plan__name { letter-spacing: 0; text-transform: none; }
.plan__price { font-size: 1.9rem; font-weight: 750; }
.plan__price small { font-size: .9rem; font-weight: 400; color: var(--s-faint); }
.plan__for { color: var(--s-dim); font-size: .94rem; }
.plan ul { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.plan li { font-size: .92rem; color: var(--s-dim); display: flex; gap: .5rem; }
.plan li::before { content: '·'; color: var(--s-faint); }
.plan .btn { margin-block-start: auto; }

.note {
  margin-block-start: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--s-line-strong); border-radius: var(--s-r-md);
  color: var(--s-faint); font-size: .9rem;
  max-width: var(--s-read);
}

/* ============================================================
   closing call to action
   ============================================================ */

.finale {
  position: relative;
  border: 1px solid var(--s-line-strong); border-radius: var(--s-r-xl);
  background: linear-gradient(150deg, #1b1740 0%, #0c0d20 60%);
  padding: clamp(var(--s-6), 6vw, var(--s-9));
  text-align: center;
  overflow: hidden;
}
.finale::after {
  content: ''; position: absolute; inset-block-start: -12rem; inset-inline-start: 50%;
  translate: -50% 0;
  width: 34rem; height: 24rem; border-radius: 50%;
  background: var(--s-violet); filter: blur(100px); opacity: .28;
  pointer-events: none;
}
.finale > * { position: relative; }
.finale h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 750; }
.finale p { margin-block-start: var(--s-4); color: var(--s-dim); margin-inline: auto; max-width: 36rem; }
.finale .hero__cta { justify-content: center; }

/* ============================================================
   footer
   ============================================================ */

.site-foot {
  border-block-start: 1px solid var(--s-line);
  padding-block: var(--s-7) var(--s-6);
  margin-block-start: var(--s-8);
  color: var(--s-faint); font-size: .92rem;
}
.site-foot__grid { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) {
  .site-foot__grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.site-foot h4 {
  margin: 0 0 var(--s-3); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s-dim); font-weight: 700;
}
html[dir='rtl'] .site-foot h4 { letter-spacing: 0; text-transform: none; }
.site-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.site-foot a { text-decoration: none; color: var(--s-faint); }
.site-foot a:hover { color: var(--s-text); }
.site-foot__legal {
  margin-block-start: var(--s-6); padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--s-line);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: .86rem;
}

/* ============================================================
   mobile
   ============================================================ */

@media (max-width: 60rem) {
  .site-nav__links,
  .site-nav__actions .btn--quiet { display: none; }
  .burger {
    display: inline-grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    background: none; border: 1px solid var(--s-line-strong); border-radius: var(--s-r-sm);
    color: var(--s-text); cursor: pointer;
  }

  /* A drawer, not a dropdown: at this width the navigation is the page for as
     long as it is open, and half-covering the content behind it reads as an
     accident. It is `hidden` when closed, so a screen reader is not offered a
     menu the user cannot see. */
  .drawer {
    position: fixed; inset: 0; z-index: 150;
    background: var(--s-ink-900);
    padding: var(--s-6) var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-5);
    overflow-y: auto;
  }
  .drawer__top { display: flex; align-items: center; justify-content: space-between; }
  .drawer__links { display: grid; gap: var(--s-2); }
  .drawer__links a {
    padding: var(--s-3) 0; text-decoration: none; font-size: 1.15rem; font-weight: 600;
    border-block-end: 1px solid var(--s-line);
  }
  .drawer__actions { display: grid; gap: var(--s-3); margin-block-start: auto; }
  .drawer__actions .btn { width: 100%; }
}

@media (min-width: 60.01rem) { .drawer { display: none !important; } }

/*
 * THE HEADER HAS TO FIT THE NARROWEST PHONE, and it did not.
 *
 * Measured: the brand is 130px, the three language buttons 91px, the sign-up
 * button 134px and the menu button 40px. With the 24px gaps that is 443px of
 * content inside a wrapper that is `viewport - 48px` - so it overflowed at
 * 430px and at everything below, and what a person saw was a sign-up button
 * cut in half by the edge of the screen.
 *
 * Three changes, in the order of how much they buy:
 *
 *   the sign-up button leaves the bar below 40rem. It is not lost - it is in
 *   the drawer, and the hero repeats it as the page's main call to action a
 *   few hundred pixels below. A button that is half off the screen is worth
 *   less than one that is a scroll away;
 *
 *   the gaps tighten from 24px to 12px, which a bar of four items can afford;
 *
 *   the language buttons lose a little side padding, because "FR EN ع" is
 *   three targets that still clear 40px of height and do not need 8px of air
 *   on each side to be readable.
 *
 * Leaves brand + languages + menu at about 269px inside a 288px wrapper on a
 * 320px screen: the narrowest phone in circulation, with room to spare.
 */
@media (max-width: 60rem) {
  .site-head__bar { gap: var(--s-3); }
  .site-nav { gap: var(--s-3); }
}

@media (max-width: 40rem) {
  /* Tighter side margins on a phone: 48px of the screen given to whitespace
     is a quarter of a 320px viewport. */
  .wrap { width: min(var(--s-wide), 100% - 2 * var(--s-4)); }

  .site-nav__actions .btn--build { display: none; }
  .langs__btn { padding: .3rem .35rem; }

  .hero__cta .btn { flex: 1 1 100%; }
  .section { padding-block: var(--s-8); }
}

/* ============================================================
   motion
   ============================================================ */

/* Sections settle in as they arrive, FROM A VISIBLE RESTING STATE - the page
   at rest is the page fully readable, so a thumbnail, a shared link and a
   reader who lands mid-page all get content rather than an empty grid waiting
   on an observer. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .6s var(--s-ease) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}