:root {
  /* The page and what sits on it. */
  --color-page: #fcf2ef;
  --color-card: #ffffff;
  --color-ink: #34202a;
  --color-ink-muted: #6e5560;
  /* Lines: the light one only divides and frames (decoration); a field's edge is the strong one (3:1 on every ground). */
  --color-line: #ebd8d6;
  --color-line-strong: #957482;
  /* The burgundy: the head band, the one action, links; its deep end, and its light tint for notes and pressed states. */
  --color-primary: #7b2145;
  --color-primary-deep: #4f1230;
  --color-primary-tint: #f3dde4;
  /* Writing on the burgundy: cream, and a soft pink for what sits back. */
  --color-on-primary: #fff3ee;
  --color-on-primary-muted: #f3d9e1;
  /* Gold: on the burgundy only (the name's star, the pattern, the band's action), its light end for the arch's frame;
     on a light ground its dark tone (the example's own for marks there, 3:1 on the page and a card) draws a heading's
     star, and its writing tone sits on its tint. */
  --color-gold: #d4af37;
  --color-gold-light: #ebd38a;
  --color-gold-dark: #8a6d12;
  --color-gold-tint: #f7edcb;
  --color-gold-text: #6b520f;
  /* Teal: a quiet second tone, its writing on its tint. */
  --color-teal-text: #1f6b61;
  --color-teal-tint: #d8eeea;
  /* A light photo's tones, for the drawn likeness of her photo before her approval (veiled-photo.tsx). */
  --color-veil-back: #f6e3e7;
  --color-veil-figure: #5a1632;
  --color-veil-face: #d8b49f;

  /* Tajawal for text and Amiri for the name and headings, each self-hosted by each app (next/font/local). The Amiri
     subset keeps the Western digits and the full stop, so a numbered heading stays in one face; neither subset keeps
     Latin letters, so a heading's come from the phone's own serif and the text's (an address in a field) from its own
     sans-serif face. */
  --font-sans: var(--font-text-face), system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-display: var(--font-display-face), var(--font-text-face), "Noto Naskh Arabic", serif;
  /* A clock that counts: the phone's own face, whose digits share one width (Tajawal's do not, and it has no tabular
     figures), so a label that counts down never shifts. */
  --font-numeric: system-ui, "Segoe UI", Tahoma, sans-serif;

  /* Arabic needs more height than Latin at the same size; Amiri, the tallest, keeps its own. */
  --text-small: 0.875rem;
  --text-small--line-height: 1.7;
  --text-body: 1rem;
  --text-body--line-height: 1.8;
  --text-lead: 1.125rem;
  --text-lead--line-height: 1.75;
  --text-heading: 1.5rem;
  --text-heading--line-height: 1.45;
  --text-title: 2rem;
  --text-title--line-height: 1.4;
  /* The name on the head band of a working page, and on the home page, where it grows with the screen. */
  --text-name: 1.75rem;
  --text-name--line-height: 1.3;
  --text-brand: clamp(2.75rem, 13vw, 5rem);
  --text-brand--line-height: 1.25;

  /* Corners: a card, a field and a note; a pill is rounded-full. */
  --radius-card: 1.5rem;
  --radius-field: 1rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * The shared parts of the web and admin apps (DESIGN.md; the owner's look of 2026-10-19, D75): the browser's own
 * surfaces themed from the tokens, the burgundy head band with its pattern of gold eight-pointed stars, the star mark,
 * the arch that frames the drawn likeness of her photo, the card, the actions (the burgundy one, its outlined partner,
 * the quiet link), a field and an answer, and a note. Colors come only from the tokens.
 */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--color-ink-muted) var(--color-page);
    /* A tap shows the action's own pressed state, not the browser's grey box. */
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
    caret-color: var(--color-primary);
  }

  ::selection {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }

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

  h1,
  h2,
  h3,
  figcaption {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  a {
    text-underline-offset: 0.35em;
    text-decoration-thickness: 1px;
  }
}

@layer components {
  /*
   * The head of every page: burgundy falling to its deep end, the writing cream, the bottom corners rounded so the page
   * starts under it as a sheet; on it the focus ring is gold, which reads on both ends (4.6:1 and 6.8:1).
   */
  .band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-primary);
    background-image: linear-gradient(165deg, var(--color-primary), var(--color-primary-deep));
    color: var(--color-on-primary);
    border-end-start-radius: 2rem;
    border-end-end-radius: 2rem;
  }

  .band-home {
    border-end-start-radius: 2.5rem;
    border-end-end-radius: 2.5rem;
  }

  .band :focus-visible {
    outline-color: var(--color-gold);
  }

  /* The band's name as the way to the first page (P19k's D5): the band's own writing, underlined under a pointer. */
  .band-link {
    color: inherit;
    text-decoration-line: none;
  }

  @media (hover: hover) {
    .band-link:hover {
      text-decoration-line: underline;
    }
  }

  /* The band's pattern of eight-pointed stars in gold, a fifth of its strength: drawn behind the writing, never on it. */
  .star-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    color: var(--color-gold);
    opacity: 0.2;
    pointer-events: none;
  }

  /* The eight-pointed star, the look's one mark: before the name, a heading and a note, sized from its writing. */
  .star {
    display: inline-block;
    flex-shrink: 0;
    inline-size: 0.8em;
    block-size: 0.8em;
    fill: currentColor;
  }

  /*
   * How her photo reaches a man before she approves (spec §5.2): a strongly blurred likeness that shows no one, drawn
   * and never photographed (veiled-photo.tsx), in an arch: a frame of gold light whose top is a half circle.
   */
  /* The arch's top is a half circle at any size: half the width across, and 40 % of a 4:5 height down. */
  .veiled-photo {
    inline-size: 10.5rem;
    max-inline-size: 100%;
    aspect-ratio: 4 / 5;
    padding: 4px;
    border-radius: 50% 50% 1.5rem 1.5rem / 40% 40% 1.5rem 1.5rem;
    background-image: linear-gradient(160deg, var(--color-gold), var(--color-gold-light));
  }

  @media (min-width: 48rem) {
    .veiled-photo {
      inline-size: 14rem;
    }
  }

  .veiled-photo > div {
    overflow: hidden;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50% 50% calc(1.5rem - 4px) calc(1.5rem - 4px) / 40% 40% calc(1.5rem - 4px)
      calc(1.5rem - 4px);
    background-color: var(--color-veil-back);
  }

  .veiled-photo svg,
  .veiled-photo img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: blur(9px);
    transform: scale(1.12);
  }

  /* One of her other photos to a man (D92): a tile holding nothing of it. */
  .photo-locked {
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    aspect-ratio: 4 / 5;
    border-radius: 0.75rem;
    background-color: var(--color-veil-back);
    color: var(--color-ink-muted);
  }

  /* An image that could not be shown: the words, in the place it would have held. */
  .photo-failed {
    padding: 1.5rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: 1rem;
    color: var(--color-ink-muted);
    text-align: center;
  }

  /*
   * A white card on the page, framed by the light line. On a small phone its padding stops growing with the text, so a
   * 320-pixel screen with the text twice as large keeps its room for the words.
   */
  .card {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background-color: var(--color-card);
    padding: min(1.25rem, 5vw);
  }

  @media (min-width: 40rem) {
    .card {
      padding: 1.75rem;
    }
  }

  /*
   * The screen's one action: a burgundy pill with cream writing (9.0:1), deeper while pressed or under a pointer; on the
   * head band it is gold with plum writing (7.2:1). Never more than one per screen.
   */
  .action,
  .action-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: 3.25rem;
    padding-block: 0.5rem;
    padding-inline: min(1.75rem, 8vw);
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-size: var(--text-lead);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition:
      background-color 160ms var(--ease-out),
      border-color 160ms var(--ease-out),
      color 160ms var(--ease-out);
  }

  .action {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }

  @media (hover: hover) {
    .action:hover {
      background-color: var(--color-primary-deep);
    }
  }

  .action:active {
    background-color: var(--color-primary-deep);
    transition: none;
  }

  .band .action {
    background-color: var(--color-gold);
    color: var(--color-ink);
  }

  @media (hover: hover) {
    .band .action:hover {
      background-color: var(--color-gold-light);
    }
  }

  .band .action:active {
    background-color: var(--color-gold-light);
  }

  /*
   * A second action beside the one action, or in its place: the same pill drawn as a burgundy outline around burgundy
   * writing, filled with the burgundy's tint while pressed or under a pointer; on the head band, a soft pink outline
   * around cream writing. While the step it starts runs, its outline takes the strong line and its label the muted
   * writing, and it takes no second tap.
   */
  .action-outline {
    border: 1.5px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
  }

  @media (hover: hover) {
    .action-outline:hover {
      background-color: var(--color-primary-tint);
    }
  }

  .action-outline:active {
    background-color: var(--color-primary-tint);
    transition: none;
  }

  .action-outline[aria-disabled="true"] {
    border-color: var(--color-line-strong);
    background-color: transparent;
    color: var(--color-ink-muted);
    cursor: progress;
  }

  .band .action-outline {
    border-color: var(--color-on-primary-muted);
    color: var(--color-on-primary);
  }

  @media (hover: hover) {
    .band .action-outline:hover {
      background-color: var(--color-primary-deep);
    }
  }

  .band .action-outline:active {
    background-color: var(--color-primary-deep);
  }

  /*
   * A screen's actions together: on a phone one under another, each as wide as the column (at most 28rem), so a label
   * that changes never moves them; side by side from 640 px, each as wide as its label.
   */
  .actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    inline-size: min(100%, 28rem);
  }

  .actions > * {
    inline-size: 100%;
  }

  @media (min-width: 40rem) {
    .actions {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      inline-size: auto;
    }

    .actions > * {
      inline-size: auto;
    }
  }

  /*
   * An answer the person taps (the role step's, a support case's category): a white tile as wide as the column, its
   * edge the strong line, the answer in Amiri at the title's size, filled with the burgundy's tint while pressed or under
   * a pointer.
   */
  .choice {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: min(100%, 28rem);
    min-block-size: 4.5rem;
    padding-inline: min(1.5rem, 4vw);
    border: 1.5px solid var(--color-line-strong);
    border-radius: var(--radius-card);
    background-color: var(--color-card);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: 700;
    line-height: var(--text-title--line-height);
    text-align: center;
    transition:
      background-color 160ms var(--ease-out),
      border-color 160ms var(--ease-out);
  }

  @media (hover: hover) {
    .choice:hover {
      border-color: var(--color-primary);
      background-color: var(--color-primary-tint);
    }
  }

  .choice:active {
    border-color: var(--color-primary);
    background-color: var(--color-primary-tint);
    transition: none;
  }

  /*
   * A quiet action, a link's weight beside the actions: burgundy writing (8.9:1 on the page) with its line under it, at
   * least 2.75rem (44 px) tall; the line thickens while a finger presses it and under a hovering pointer. While the step
   * it starts runs, it is muted, without its line, and takes no second tap.
   */
  .quiet-action {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    /* A label that wraps (a small phone with the text set large) keeps to the start edge, as a button would not. */
    text-align: start;
    color: var(--color-primary);
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
  }

  @media (hover: hover) {
    .quiet-action:hover {
      text-decoration-thickness: 2px;
    }
  }

  .quiet-action:active {
    text-decoration-thickness: 2px;
  }

  .quiet-action[aria-disabled="true"] {
    color: var(--color-ink-muted);
    text-decoration-line: none;
    cursor: progress;
  }

  .band .quiet-action {
    color: var(--color-on-primary);
  }

  /*
   * A field: its value in a white box whose edge is the strong line (3:1 on the page and on a card); while she writes,
   * the shared burgundy ring stands around it.
   */
  .field-line {
    min-block-size: 3.25rem;
    padding-block: 0.625rem;
    padding-inline: 1rem;
    border: 1.5px solid var(--color-line-strong);
    border-radius: var(--radius-field);
    background-color: var(--color-card);
    color: var(--color-ink);
  }

  /*
   * The browser's own surfaces on a field: its autofill tint, which no color property overrides, painted over with the
   * card's white from inside (an inset fill, not a depth), and Edge's own reveal control, which the password field
   * already has in words.
   */
  .field-line:-webkit-autofill {
    box-shadow: inset 0 0 0 100vmax var(--color-card);
    -webkit-text-fill-color: var(--color-ink);
    caret-color: var(--color-primary);
  }

  .field-line::-ms-reveal {
    display: none;
  }

  /*
   * A list to choose from as the same white box on every engine (P15b): WebKit's own grey face, square under the
   * corners, taken off, and its arrow drawn at the end edge, the left on these right-to-left pages, in the ink's color
   * (two gradients, since the policy's `img-src` takes no `data:` image). Forced colors drop a gradient, so there the
   * browser's own select comes back. A search box's own clear control goes, as Edge's reveal control does.
   */
  select.field-line {
    appearance: none;
    padding-inline-end: 2.75rem;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-ink) 50%),
      linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
    background-position:
      left 1rem center,
      left 1.375rem center;
    background-size: 0.375rem 0.375rem;
    background-repeat: no-repeat;
  }

  @media (forced-colors: active) {
    select.field-line {
      appearance: auto;
    }
  }

  /* WebKit keeps its control under `appearance: none` alone (P15b's screenshots), so it is taken out of the page. */
  .field-line::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  /*
   * The fields of a form she can only read (a locked profile section, P19m's D6): her answer on the page's own ground
   * in the muted writing (6.1:1), framed by the light line, with no caret and no list's arrow, so none looks open to
   * writing. The engines' own fading of a disabled list is undone, so the answer stays readable.
   */
  .locked .field-line {
    border-color: var(--color-line);
    background-color: var(--color-page);
    background-image: none;
    color: var(--color-ink-muted);
    -webkit-text-fill-color: var(--color-ink-muted);
    caret-color: transparent;
    cursor: default;
    opacity: 1;
  }

  /* A note beside its control: the star in burgundy, then the sentence, on the burgundy's tint (ink 11.7:1). */
  .note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border-radius: var(--radius-field);
    background-color: var(--color-primary-tint);
    color: var(--color-ink);
  }

  .note > .star {
    margin-block-start: 0.5em;
    color: var(--color-primary);
    inline-size: 0.75em;
    block-size: 0.75em;
  }

  /*
   * A note that says a step is done (sent again, accepted, the lock changed) takes the teal's tint and its star (ink
   * 12.5:1), so it never reads as a failure; failures, refusals and reasons keep the burgundy's.
   */
  .note-done {
    background-color: var(--color-teal-tint);
  }

  .note-done > .star {
    color: var(--color-teal-text);
  }

  /* A mark's round ground in one of the three tones, its drawing in the tone's writing color. */
  .tone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 9999px;
  }

  .tone-primary {
    background-color: var(--color-primary-tint);
    color: var(--color-primary);
  }

  .tone-teal {
    background-color: var(--color-teal-tint);
    color: var(--color-teal-text);
  }

  .tone-gold {
    background-color: var(--color-gold-tint);
    color: var(--color-gold-text);
  }
}

/*
 * A card's first part starts at the card's own padding: a margin a page wrote for the space under a title is dropped
 * there. Outside the layers, so it wins over a spacing utility.
 */
.card > :first-child {
  margin-block-start: 0;
}

/*
 * The home page's head on a short screen (a small phone, 360 by 640, or one held sideways): a smaller arch and tighter
 * spaces, so the name, the arch, the line about the service and both actions fit the first view. Outside the layers,
 * so it wins over the spacing utilities.
 */
@media (max-height: 46rem) {
  .home-head {
    row-gap: 1.125rem;
    padding-block: 1.75rem;
  }

  .home-head .veiled-photo {
    inline-size: 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action,
  .action-outline,
  .choice {
    transition: none;
  }
}

/*
 * The public site's own layout (P24b; DESIGN.md): the web app's look on static pages. Colors come only from the
 * tokens, every side is a logical one, and nothing moves but the actions' change of color, which the shared parts
 * already drop under reduced motion.
 *
 * The two faces come in two cuts each: the apps' Arabic subsets, and their own Latin letters for the English pages.
 * Each language lists its own cut first and the other after it, so a line is set in one face and a page fetches the
 * other cut only for the words it holds in the other script (the way to the other language, an address).
 */
@font-face {
  font-family: "Amiri";
  src: url("fonts/amiri-bold-arabic.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("fonts/tajawal-regular-arabic.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("fonts/tajawal-bold-arabic.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Amiri Latin";
  src: url("fonts/amiri-bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal Latin";
  src: url("fonts/tajawal-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal Latin";
  src: url("fonts/tajawal-bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root,
[lang="ar"] {
  --font-text-face: "Tajawal", "Tajawal Latin";
  --font-display-face: "Amiri", "Amiri Latin";
}

[lang="en"] {
  --font-text-face: "Tajawal Latin", "Tajawal";
  --font-display-face: "Amiri Latin", "Amiri";
}

/*
 * A custom property's var() is resolved where it is declared, so the tokens' two lists, made on the root, would keep
 * the root's faces inside a part in the other language (the English half of the lost page, the way to the other
 * language): each language's scope makes them again from its own faces, and sets its text in them.
 */
:root,
[lang] {
  --font-sans: var(--font-text-face), system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-display: var(--font-display-face), var(--font-text-face), "Noto Naskh Arabic", serif;
  font-family: var(--font-sans);
}

/* Latin needs less height than Arabic at the same size (DESIGN.md's Arabic Height Rule): the English pages' ramp. */
html[lang="en"] {
  --text-small--line-height: 1.5;
  --text-body--line-height: 1.6;
  --text-lead--line-height: 1.55;
  --text-heading--line-height: 1.3;
  --text-title--line-height: 1.25;
  --text-name--line-height: 1.2;
  --text-brand--line-height: 1.1;
}

/*
 * The resets join sheet.css's base layer, so its components (the card's padding) win over them as in the apps. A word
 * wider than its line (the English name at 320 pixels with the text twice as large) wraps inside its box, never past it.
 */
@layer base {
  body {
    margin: 0;
    background-color: var(--color-page);
    color: var(--color-ink);
    font-family: var(--font-sans);
    overflow-wrap: anywhere;
  }

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

  ul,
  ol {
    padding: 0;
    list-style: none;
  }
}

.star-gold {
  color: var(--color-gold);
}

.star-on-light {
  color: var(--color-gold-dark);
}

.star-primary {
  color: var(--color-primary);
  inline-size: 0.6em;
  block-size: 0.6em;
  margin-block-start: 0.65em;
}

.fill-veil-back {
  fill: var(--color-veil-back);
}

.fill-veil-figure {
  fill: var(--color-veil-figure);
}

.fill-veil-face {
  fill: var(--color-veil-face);
}

/* The page's column: at most 48rem, with the phone's and the wider screen's gutters. */
.column {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 48rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 40rem) {
  .column {
    padding-inline: 2.5rem;
  }
}

/* The home band: the first view, its group centered on a phone and in two columns from 768 px. */
.home-band {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 85dvh;
}

/* The way to the other language, at the band's top end corner; the group below takes the band's free height. */
.band-top {
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 64rem;
  margin-inline: auto;
  padding-block-start: 0.75rem;
  padding-inline: 1.5rem;
}

/*
 * One column as wide as the band, never as wide as its widest part: a 10.5rem arch with the text twice as large is
 * 336 pixels, wider than a 320-pixel screen, and its own `max-inline-size: 100%` then takes this column's width.
 */
.home-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 1.75rem;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 64rem;
  margin-block: auto;
  margin-inline: auto;
  padding-block: 2rem 3rem;
  padding-inline: 1.5rem;
  text-align: center;
}

/* The band's one action, the mailbox: as wide as the column up to 28rem on a phone, as wide as its label from 640 px. */
.band-action {
  inline-size: 100%;
  max-inline-size: 28rem;
}

.band-action .action {
  box-sizing: border-box;
  inline-size: 100%;
}

@media (min-width: 40rem) {
  .band-action {
    inline-size: auto;
  }

  .band-action .action {
    inline-size: auto;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--text-brand);
  line-height: var(--text-brand--line-height);
}

/* On a phone the figure takes the column's width, so the likeness's `max-inline-size: 100%` holds it inside. */
.arch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  inline-size: 100%;
}

.arch .veiled-photo {
  max-inline-size: calc(100% - 8px);
}

.arch figcaption {
  max-inline-size: 18rem;
  color: var(--color-on-primary);
  text-align: center;
}

.line {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: var(--text-title--line-height);
}

.opening {
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--color-on-primary-muted);
}

@media (min-width: 48rem) {
  .home-band {
    min-block-size: 70dvh;
  }

  .home-head {
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: start;
    column-gap: 6rem;
    padding-block: 3rem 4rem;
    text-align: start;
  }

  .home-head > :not(.arch) {
    grid-column: 1;
  }

  .home-head > .arch {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
    inline-size: auto;
  }
}

/* The short band of a document's page: the star and the name, and the way to the other language. */
.band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
}

.band-name {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--text-name);
  font-weight: 700;
  line-height: var(--text-name--line-height);
}

/* A section's heading after its star, and the space between sections. */
.heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: var(--text-heading--line-height);
}

.section {
  padding-block-start: 3rem;
}

.section > .heading + * {
  margin-block-start: 1.25rem;
}

/*
 * The promises: one card of rows between light lines, each mark beside its sentence, above it where the card is
 * narrower than 14rem of the text (a large text on a small phone), as on the app's home page.
 */
.promises {
  container-type: inline-size;
}

.promises > li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--color-line);
}

.promises > li:first-child {
  padding-block-start: 0;
}

.promises > li:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.promises p {
  padding-block-start: 0.375rem;
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
}

@container (width < 14rem) {
  .promises > li {
    flex-direction: column;
  }
}

/* How it works: the steps on the blush, each number in Amiri and burgundy at its start. */
.steps {
  display: grid;
  row-gap: 1.25rem;
  counter-reset: step;
}

.steps > li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 0.75rem;
  max-inline-size: 60ch;
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1;
}

/*
 * The prices: what women pay at the title's size, then the man's one package at the lead's under a light line, then
 * his rules at the body's; the way to the Terms' refunds under the card.
 */
.price-lead {
  padding-block-end: 1rem;
  margin-block-end: 1rem;
  border-block-end: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: var(--text-title--line-height);
}

.prices .doc-list > li:first-child {
  padding-block-end: 1rem;
  margin-block-end: 0.25rem;
  border-block-end: 1px solid var(--color-line);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
}

.after-card {
  margin-block-start: 1rem;
}

/* A list whose entries each follow a small burgundy star (the documents' and the prices'). */
.doc-list {
  display: grid;
  row-gap: 0.75rem;
}

.doc-list > li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-inline-size: 60ch;
}

/* A document's page: the title on the blush, then the text in one card at the column's width. */
.document {
  padding-block-start: 2rem;
}

.title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
}

.doc {
  margin-block-start: 1.25rem;
}

.doc > .heading:not(:first-child) {
  margin-block-start: 2.5rem;
}

.doc > * + * {
  margin-block-start: 1rem;
}

.doc > p {
  max-inline-size: 60ch;
}

.subheading {
  font-family: var(--font-display);
  font-size: var(--text-lead);
}

/* The foot: the company and its facts, then the documents. */
.foot {
  padding-block: 3rem 4rem;
}

.foot .card {
  margin-block-start: 1.25rem;
}

.facts {
  display: grid;
  row-gap: 0.5rem;
  margin-block-start: 1rem;
}

.facts dt {
  font-weight: 700;
}

.facts dd {
  text-align: start;
  overflow-wrap: anywhere;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-block-start: 1.5rem;
}

/* The page for a lost address: the Arabic words, then the English ones, each a title and one card. */
.not-found {
  padding-block-end: 4rem;
}

.not-found > section + section {
  margin-block-start: 3rem;
}