/* Dhahir v2, The Aperture: the page CSS. Only what the kit lacks (Appendix C of the build spec): the light theme
   and its switch, the language switch, Arabic typesetting, Dhahir's mark and the aperture, the lit hero frame and the
   product UI drawn for the page (the reception board, the request, the cards' pieces, the thread, the quote, the
   booking page in two languages), the mirrored bilingual band, the close lockup, the privacy page and the 404.
   Physical left and right appear only where the drawing is fixed; everything that flows uses logical properties,
   and public/site/rtl.css holds the rest of the mirroring for /ar. */

/* ================================================================ 1. tokens (spec 3.1, 3.2) */
:root {
  color-scheme: dark;
  --soft: color-mix(in oklab, var(--ink) 80%, var(--bg));   /* round 4: a second voice for body lines, 7:1 or more on both themes */
  --dot: #c8a97e;                                  /* the one gold dot: now line, selected slot, full stop, mark */
  --ap-ink: var(--ink); --ap-cover: var(--bg);     /* aperture strokes and cover */
  --axis: var(--dot);                              /* the Languages band's gold axis */
  /* the brand's faces (brand/tokens/fonts.css): Gabarito 500 English display, Figtree 400/500 English text, Alexandria 500
     Arabic display, IBM Plex Sans Arabic 400/500 Arabic text. A page loads three families at most (perf.mjs fails a
     fourth), so each page sets the other language's runs in one face: on / every Arabic run is Alexandria; on /ar/
     every Latin run is Figtree. A Latin face leads each Arabic stack: it has no Arabic glyphs, so Arabic letters fall
     through to the Arabic face while the ASCII digits stay Latin, and only the Arabic subsets are fetched */
  --font-latin-display: "Gabarito", system-ui, sans-serif;
  --font-latin: "Figtree", system-ui, sans-serif;
  --font-ar-text: "Figtree", "Alexandria", system-ui, sans-serif;
  --font-ar-display: "Gabarito", "Alexandria", system-ui, sans-serif;
  /* product surfaces: one step off the page */
  --rb-bg: #161618; --rb-raise: #1f1f22; --rb-ink: #f5f3ef; --rb-muted: #a2a2a6; --rb-line: rgb(255 255 255 / .08);
  --rb-accent: #f5f3ef; --rb-accent-ink: #0a0a0b; --rb-ok: #9fd3a9; --rb-ok-bg: rgb(126 196 140 / .14);
  --rb-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 30px 70px -30px rgb(0 0 0 / .85);
  --rb-wa: color-mix(in oklab, #25d366 16%, var(--rb-bg));
}
html[lang="ar"] {
  --font-ar-text: "Figtree", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-ar-display: "Figtree", "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-latin-display: "Figtree", system-ui, sans-serif;
}
body { background: var(--bg); }

html[data-theme="light"] {
  color-scheme: light;
  --p-bg: #f5f3ef; --p-surface: #ffffff; --p-ink: #0a0a0b; --p-muted: #3d3d3f;
  --p-accent: #0a0a0b; --p-accent-ink: #f5f3ef; --p-action: #0a0a0b; --p-action-ink: #f5f3ef;
  --p-inv-bg: #0a0a0b; --p-inv-surface: #1a1a1c; --p-inv-ink: #f5f3ef; --p-inv-muted: #a3a3a6;
  --p-inv-accent: #f5f3ef; --p-inv-accent-ink: #0a0a0b; --p-inv-action: #f5f3ef; --p-inv-action-ink: #0a0a0b;
  --rb-bg: #ffffff; --rb-raise: #f6f5f2; --rb-ink: #0a0a0b; --rb-muted: #5e5e62; --rb-line: rgb(0 0 0 / .08);
  --rb-accent: #0a0a0b; --rb-accent-ink: #f5f3ef; --rb-ok: #1d6b39; --rb-ok-bg: #e6f3ea;
  --rb-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 24px 60px -28px rgb(0 0 0 / .4);
  --rb-wa: #dcf5e3;
}
html[data-theme="light"] body { --line: #d5d3cf; }
/* light: the lit grounds (the hero's top glow, the close's halo) lean to the gold, not to the obsidian accent, so the
   parchment stays warm and clean instead of a grey haze */
html[data-theme="light"] { --g-hue-src: var(--dot); }   /* set where the kit declares --g-hue (:root) */
/* product UI on the inverse band takes the other theme's surfaces */
html:not([data-theme="light"]) .ground-inverse {
  --rb-bg: #ffffff; --rb-raise: #f6f5f2; --rb-ink: #0a0a0b; --rb-muted: #5e5e62; --rb-line: rgb(0 0 0 / .08);
  --rb-accent: #0a0a0b; --rb-accent-ink: #f5f3ef; --rb-ok: #1d6b39; --rb-ok-bg: #e6f3ea;
  --rb-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 24px 60px -28px rgb(0 0 0 / .4);
  --rb-wa: #dcf5e3;
}
html[data-theme="light"] .ground-inverse {
  --rb-bg: #161618; --rb-raise: #1f1f22; --rb-ink: #f5f3ef; --rb-muted: #a2a2a6; --rb-line: rgb(255 255 255 / .08);
  --rb-accent: #f5f3ef; --rb-accent-ink: #0a0a0b; --rb-ok: #9fd3a9; --rb-ok-bg: rgb(126 196 140 / .14);
  --rb-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 70px -30px rgb(0 0 0 / .85);
  --rb-wa: color-mix(in oklab, #25d366 16%, var(--rb-bg));
}
/* the statement's one gold element is its full stop (the mark's dot), so the key word ("visible", ظاهر) is marked the
   same way in both themes: it lights to the ink like every word, and an ink rule draws in under it from the reading
   side as it lights, the word made visible */
#visible strong .mo-w { background: linear-gradient(currentColor, currentColor) no-repeat 0 96% / 0 .06em;
  transition: color 160ms ease, background-size 700ms cubic-bezier(.65, 0, .35, 1); }
#visible strong .mo-w.is-on { color: var(--ink); background-size: 100% .06em; }
/* Arabic: the statement sets at 1.46 (Alexandria's tall ascents and the ر tail need the air), and the rule hangs below
   the ر tail's ink, inside the gap before the next line (measured clear of both: r3/rtl/stmt-*.png) */
html[dir="rtl"] #visible .mo-wh__text { line-height: 1.46; }
html[dir="rtl"] #visible strong .mo-w { background-position: 100% 100%; padding-bottom: .14em; }
@media (prefers-reduced-motion: reduce) { #visible strong .mo-w { color: var(--ink); background-size: 100% .06em; transition: none; } }

/* ================================================================ 2. Arabic typesetting (spec 4) */
html[lang="ar"] { --font-display: var(--font-ar-display); --font-text: var(--font-ar-text);
                  --display-tracking: 0; --display-tracking-xl: 0; }
[lang="ar"] { font-family: var(--font-ar-text); letter-spacing: 0; }
:is(h1, h2, .t-display, .mo-wh__text, .lockup__ar, .lang-twin)[lang="ar"],
html[lang="ar"] :is(h1, h2, .t-display, .mo-wh__text, .lockup__ar) { font-family: var(--font-ar-display); letter-spacing: 0; }
html[lang="ar"] body { line-height: 1.7; }
html[lang="ar"] :is(h1, h2, h3) { line-height: 1.3; }
/* a Latin run on the Arabic page keeps the Latin face */
html[lang="ar"] [lang="en"] { font-family: var(--font-latin); }
html[lang="ar"] :is(h1, h2, .lang-twin, .lockup__en)[lang="en"] { font-family: var(--font-latin-display); letter-spacing: -0.04em; line-height: 1.12; }

/* ================================================================ 3. the mark, the switches, the nav */
.ap-dot { fill: var(--dot); }
.nav__logo { gap: 10px; }
.ap-logo { width: 28px; height: 28px; flex: none; display: block; overflow: visible; }
.nav__logo .ap-logo { height: 28px; width: 28px; }
/* 1b. the theme switch opens the other theme through an aperture (page.js swapTheme): the new theme grows as a round
   opening from the button, eased like the hero's iris; nothing else on the page moves */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: ap-theme 640ms cubic-bezier(.65, 0, .35, 1) both; }
@keyframes ap-theme {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to   { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 0)); }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; } }

/* focus and the selected state carry the gold dot: the site's one accent device (director's notes) */
:focus-visible { outline-color: var(--dot); }

.theme-switch, .lang-switch {
  display: inline-grid; place-items: center; height: 44px; min-width: 44px; flex: none; padding: 0; cursor: pointer;
  border-radius: var(--r-btn); border: 1px solid var(--line-strong, var(--line)); background: transparent; color: var(--ink);
  transition: background-color var(--dur, 150ms) var(--ease), border-color var(--dur, 150ms) var(--ease);
}
.lang-switch { padding: 0 var(--s-3); font-size: 15px; font-weight: 500; text-decoration: none; }
.lang-switch[lang="ar"] { font-size: 16px; }
:is(.theme-switch, .lang-switch):hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.theme-switch svg { width: 18px; height: 18px; }
.theme-switch__moon, html[data-theme="light"] .theme-switch__sun { display: none; }
html[data-theme="light"] .theme-switch__moon { display: block; }
.nav__item--lang .nav__link[lang="ar"] { font-size: 16px; }
.lang-switch { display: none; }
@media (min-width: 1280px) { .nav__bar > .theme-switch { margin-inline-end: calc(var(--s-3) - var(--s-8)); } }
@media (min-width: 1024px) and (max-width: 1279px) { .nav__bar > .theme-switch { margin-inline-end: calc(var(--s-3) - var(--s-6)); } }
@media (max-width: 1023px) {
  .nav:not(.is-open) .lang-switch { display: inline-grid; margin-inline-start: auto; }
  .nav:not(.is-open) .lang-switch + .theme-switch { margin-inline-start: 0; }
  .nav:not(.is-open) .theme-switch + .nav__actions { margin-inline-start: 0; }
  :root:has(> body > nav.actionbar) .nav:not(.is-open) .nav__toggle { margin-inline-start: 0; }
  .nav.is-open .theme-switch { position: relative; z-index: 52; margin-inline-start: auto; }
}
@media (max-width: 1023px) and (scripting: none) { .lang-switch { display: inline-grid; } }

/* ================================================================ 4. shared product UI (.rb) */
.rb { --fx-bg: var(--rb-bg); --fx-surface: var(--rb-raise); --fx-ink: var(--rb-ink); --fx-muted: var(--rb-muted); --fx-accent: var(--rb-accent);
      background: var(--rb-bg); color: var(--rb-ink); border-radius: 12px; box-shadow: var(--rb-shadow);
      font: 400 13px/1.35 var(--font-text); text-align: start; overflow: hidden; }
.rb b { font-weight: 500; }
.rb small { display: block; color: var(--rb-muted); font-size: 12px; }
.rb-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--rb-line); color: var(--rb-muted); white-space: nowrap; }
.rb-dots { display: flex; gap: 6px; } .rb-dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in oklab, var(--rb-ink) 16%, var(--rb-bg)); }
.rb-crumb i { font-style: normal; opacity: .5; margin: 0 4px; } .rb-crumb b { color: var(--rb-ink); }
.rb-sp { flex: 1; }
.rb-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap;
           background: color-mix(in oklab, var(--rb-ink) 8%, var(--rb-bg)); color: var(--rb-ink); }
.rb-chip--ok { background: var(--rb-ok-bg); color: var(--rb-ok); }
/* a drawn control is UI scale (28px), so the page keeps one button family */
.rb-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap;
          background: var(--rb-accent); color: var(--rb-accent-ink); }
.rb-btn--ghost { background: color-mix(in oklab, var(--rb-ink) 8%, var(--rb-bg)); color: var(--rb-ink); }
.rb-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 500; flex: none;
         background: color-mix(in oklab, var(--rb-ink) 14%, var(--rb-bg)); color: var(--rb-ink); }
/* a brand's mark sits on a light tile on every surface */
.rb .rb-ic, .rb-req__who small img, .rb-chat__head small img, .rb-note__line img, .rb-ev b img, .rb-mini__row img, .close-line img, .faq-grid__p img, .lang-bubble img {
  background: #fff; border-radius: 6px; padding: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); box-sizing: content-box; flex: none; }
.rb .rb-ic { width: 18px; height: 18px; object-fit: contain; }
.ui-note__ico--brand { background: #fff !important; }
.ui-note__ico--brand img { width: 18px; height: 18px; }

/* ================================================================ 5. the hero */
/* 5.1 the text column: centred against the frame, the facts 56px under the buttons (no hole) */
.hero__proof { font-size: var(--t-small); color: color-mix(in oklab, var(--ink) 74%, var(--bg)); }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.hero-facts > div { display: grid; gap: var(--s-1); align-content: start; }
.hero-facts dt { font-size: var(--t-small); color: var(--muted); }
.hero-facts dd { margin: 0; font-size: var(--t-body); font-weight: 500; line-height: 1.4; text-wrap: balance; }
@media (min-width: 1024px) { .hero--collage .hero__text { align-self: start; } }
@media (min-width: 1280px) {
  .hero--collage .hero__text > .hero-facts { margin-top: 56px; }
  .hero--collage .hero__proof { display: none; }
}
@media (max-width: 1279px) {
  .hero-facts { display: none; }
  /* the second action wraps under the first: its words start on the column's edge */
  .hero--collage .btn-row > .btn--secondary { padding-inline-start: 0; border-inline-start-width: 0; }
}

/* 5.2 the lit sand frame: one soft light */
.hero__art { container-type: size; container-name: hero-art; background:
    radial-gradient(70% 55% at 22% 8%, color-mix(in oklab, var(--ground-surface) 85%, white), transparent 70%),
    radial-gradient(65% 55% at 92% 100%, color-mix(in oklab, var(--ground-bg) 82%, var(--ground-accent)), transparent 70%),
    var(--ground-bg); }

/* 5.3 the reception board: a day, three stylists, the time now; every text 14px or more at 1440 (spec 7.2) */
.hero__art > .ly-piece--main.rb-day { bottom: var(--s-6); display: flex; flex-direction: column; }
.rb-day { --t0: 2; --rows: 10; --t1: calc(var(--t0) + var(--rows)); --lanes: 3; font-size: 14px; }
.rb-day .rb-bar { padding-inline-end: var(--ly-cut-room, 48px); font-size: 14px; flex: none; }
.rb-day .rb-chip { font-size: 14px; height: 26px; }
.rb-day__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; padding-inline-end: var(--ly-cut-room, 48px); flex: none; }
.rb-day__head b { font-size: 17px; letter-spacing: -0.01em; display: block; }
.rb-day__head small { font-size: 14px; }
.rb-day__head .rb-btn { font-size: 14px; height: 30px; }
.rb-day__cols, .rb-day__body { display: grid; grid-template-columns: 56px repeat(var(--lanes), minmax(0, 1fr)); padding-inline-end: var(--ly-cut-room, 48px); }
.rb-day__cols { height: 38px; align-items: center; border-bottom: 1px solid var(--rb-line); flex: none; }
.rb-day__cols > span { display: flex; align-items: center; gap: 8px; padding-inline-start: 10px; font-size: 15px; font-weight: 500; }
.rb-day__cols .rb-av { width: 26px; height: 26px; font-size: 14px; }   /* every board text 14px or more at 1440 */
.rb-day__body { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; overflow: hidden; }
.rb-day__body > * { --row: calc(100cqh / var(--rows)); }
.rb-day__times { position: relative; color: var(--rb-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.rb-day__times span { position: absolute; inset-inline: 0; top: calc((var(--s) - var(--t0)) * var(--row)); height: var(--row); padding: 4px 0 0; padding-inline-start: 12px; border-top: 1px solid var(--rb-line); }
.rb-lane { position: relative; border-inline-start: 1px solid var(--rb-line);
           background: repeating-linear-gradient(to bottom, var(--rb-line) 0 1px, transparent 1px var(--row)); }
.rb-ev { position: absolute; inset-inline: 6px; top: calc((max(var(--s), var(--t0)) - var(--t0)) * var(--row) + 3px);
         height: calc((min(var(--e), var(--t1)) - max(var(--s), var(--t0))) * var(--row) - 6px);
         padding: 3px 9px; border-radius: 8px; overflow: hidden; background: var(--rb-raise); border: 1px solid var(--rb-line); line-height: 17px; }
.rb-ev { container: ev / size; }
/* the name is one line of running text: first and family name a word space apart (the space is in the markup) */
.rb-ev b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; }
.rb-ev b .rb-fn { display: inline; color: inherit; font-size: inherit; }
.rb-ev b .rb-ln { font-style: normal; }
.rb-ev > span { display: block; color: var(--rb-muted); font-size: 14px; white-space: nowrap; overflow: hidden; }
/* a booking shorter than two lines shows its name only; a narrow lane shows first names (1024 to 1279, phone) */
@container ev (max-height: 32px) { .rb-ev > span { display: none; } }
/* a lane too narrow for the service line (1280 to 1440 in a short window) shows the name only, never a cut line */
@container ev (max-width: 139px) { .rb-ev > span { display: none; } }
/* Arabic sets taller: its lines get 21px, and a booking needs 42px for its two */
html[lang="ar"] .rb-ev { line-height: 21px; padding-block: 2px; }
@container ev (max-height: 41px) { html[lang="ar"] .rb-ev > span { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px), (max-width: 639px) { .rb-ev b .rb-ln { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) { .rb-ev > span { font-size: 12px; } }
.rb-ev b img { display: inline-block; vertical-align: -1px; margin-inline-end: 6px; width: 11px; height: 11px; padding: 2px; border-radius: 50%; }
.rb-ev.is-now { background: color-mix(in oklab, var(--rb-ink) 5%, var(--rb-raise)); }
/* light: a booking in progress is a warm stone slab on the white board (R - B 14), never a cool grey */
html[data-theme="light"] .rb-ev.is-now { background: #ece7de; border-color: #ddd6ca; }
/* Noor's new booking: the gold ring is drawn inside, so the booking keeps the board's one block style */
.rb-ev.is-new { box-shadow: inset 3px 0 0 var(--rb-ink), inset 0 0 0 1px var(--rb-ink); }
html[dir="rtl"] .rb-ev.is-new { box-shadow: inset -3px 0 0 var(--rb-ink), inset 0 0 0 1px var(--rb-ink); }
.rb-ev--hole { background: transparent; border: 1.5px dashed color-mix(in oklab, var(--rb-ink) 34%, transparent); visibility: hidden; }
.rb-now { position: absolute; inset-inline-start: 48px; inset-inline-end: var(--ly-cut-room, 48px); top: calc((var(--at) - var(--t0)) * var(--row)); height: 0; border-top: 1px solid var(--dot); z-index: 2; pointer-events: none; }
/* the half-hour label the now line falls in keeps its rule but not its text: the 16:20 pill names that row, and on a
   phone's short rows it would sit on the 16:00 label */
.rb-day__times span.is-under-now { color: transparent; }
.rb-now__dot { position: absolute; inset-inline-start: -5px; top: -5.5px; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
/* the time now names its row in the ink; the gold stays the line and its dot (never a gold-filled area) */
.rb-now span { position: absolute; inset-inline-start: -48px; top: -11px; width: 44px; padding: 1px 0; text-align: center; font-size: 14px; font-weight: 500; line-height: 20px;
               background: var(--rb-bg); color: var(--rb-ink); font-variant-numeric: tabular-nums; }
/* which hours and bookings each view shows (sample-day.json day.view) */
.rb-day__times span:not([data-v~="d"]), .rb-ev:not([data-v~="d"]) { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .rb-day { --lanes: 2; }
  .rb-day__cols > [data-stylist="salma"], .rb-day__body > .rb-lane[data-stylist="salma"] { display: none; }
  .rb-day .rb-bar .rb-chip { display: none; }
}
@media (max-width: 1023px) {
  .rb-day { --t0: 3; --rows: 8; font-size: 13px; }
  .rb-day__times span, .rb-ev { display: block; }
  .rb-day__times span:not([data-v~="t"]), .rb-ev:not([data-v~="t"]) { display: none; }
  .rb-day__head { display: none; }
  .hero__art > .ly-piece--main.rb-day { bottom: var(--s-5); }
}
@media (max-width: 639px) {
  .rb-day { --t0: 5; --rows: 6; --lanes: 2; }
  .rb-day__times span:not([data-v~="p"]), .rb-ev:not([data-v~="p"]) { display: none; }
  .rb-day__times span[data-v~="p"], .rb-ev[data-v~="p"] { display: block; }
  .rb-day__cols > [data-stylist="salma"], .rb-day__body > .rb-lane[data-stylist="salma"] { display: none; }
  .rb-day .rb-bar { display: none; }
  .rb-day__cols, .rb-day__body { grid-template-columns: 46px repeat(2, minmax(0, 1fr)); }
  .rb-day__cols { height: 32px; }
  .rb-day__cols > span { font-size: 13px; }
  .rb-day__times span { font-size: 12px; padding-inline-start: 8px; padding-top: 2px; }
  .rb-ev { padding: 2px 7px; line-height: 15px; }
  .rb-ev b { font-size: 13px; } .rb-ev > span { font-size: 12px; }
  .rb-now { inset-inline-start: 40px; } .rb-now span { inset-inline-start: -40px; width: 38px; font-size: 12px; top: -10px; }
  .hero__art > .ly-piece--main.rb-day { bottom: var(--s-4); }
}
html.ap-run .rb-now__dot { visibility: hidden; }
@media (min-width: 640px) { .hero__art .rb-ev[data-card] { display: none; } }
/* a short frame (a landscape tablet or a low window, 800x700) shows the six rows the phone shows, 15:30 to 18:30, so
   no booking is ever squeezed under its own name; a tablet frame is never under 400px */
@media (min-width: 640px) and (max-width: 1023px) { .hero--collage .hero__art { min-height: 400px; } }
/* a short desktop frame (1280x720, 1024x768) shows the tablet's eight rows, and the small card keeps its title and
   first line, so it never stands over most of the board */
@container hero-art (max-height: 599px) {
  .rb-day { --t0: 3; --rows: 8; }
  .rb-day__times span[data-v~="t"], .rb-ev[data-v~="t"] { display: block; }
  .rb-day__times span:not([data-v~="t"]), .rb-ev:not([data-v~="t"]) { display: none; }
  .hero__art > .ly-piece--note :is([data-step="held"], [data-step="sent"]) { display: none; }
}
@container hero-art (max-height: 459px) {
  .rb-day { --t0: 5; --rows: 6; }
  .rb-day__times span[data-v~="p"], .rb-ev[data-v~="p"] { display: block; }
  .rb-day__times span:not([data-v~="p"]), .rb-ev:not([data-v~="p"]) { display: none; }
}

/* 5.4 the small card: the request that just came in; complete at rest */
.hero__art > .ly-piece--note { inset-inline-start: var(--s-6); bottom: var(--s-6); width: min(316px, 60cqw); z-index: 3; }
.rb-note { padding: 16px 18px 12px; font-size: 14px; }
.rb-note__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.rb-note__row h5 { margin: 0; font: 500 15px/1.3 var(--font-text); color: var(--rb-ink); }
.rb-note .rb-chip { font-size: 13px; }
.rb-note__line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rb-line); color: var(--rb-muted); line-height: 1.4; }
.rb-note__line:first-of-type { border-top: 0; }
.rb-note__line img { width: 14px; height: 14px; padding: 2px; border-radius: 50%; }
.rb-note__line i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 600;
                   background: var(--rb-ok-bg); color: var(--rb-ok); }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { inset-inline-start: var(--s-4); bottom: var(--s-4); width: min(290px, 60cqw); } }
/* two lanes (1024 to 1279): the card covers the first lane only and ends 8px before the second (the board starts 64px
   in, its time column is 56px and its lanes share the width less 140px), so Huda's lane, Layla and Noor stay clear */
@media (min-width: 1024px) and (max-width: 1279px) { .hero__art > .ly-piece--note { width: calc((100cqw - 140px) / 2 + 80px); } }
/* a narrow frame from 1280 (a short window): the board reads by first names */
@container hero-art (max-width: 589px) { .rb-ev b .rb-ln { display: none; } }

/* 5.5 the live event (public/site/hero-loop.js, spec 6.4). The card never goes empty: its title and first line stay */
.hero__art [data-step], .hero__art .rb-ev.is-new, .hero__art .rb-ev--hole { transition: opacity 220ms var(--ease, ease), box-shadow 320ms var(--ease, ease); }
.hero__art[data-live="reset"] :is([data-step="held"], [data-step="sent"], [data-step="chip"]),
.hero__art[data-live="held"] :is([data-step="sent"], [data-step="chip"]),
.hero__art[data-live="landed"] :is([data-step="sent"], [data-step="chip"]) { opacity: 0; }
.hero__art:is([data-live="reset"], [data-live="held"]) .rb-ev.is-new { opacity: 0; }
.hero__art:is([data-live="reset"], [data-live="held"]) .rb-ev--hole { visibility: visible; }
.hero__art[data-live="landed"] .rb-ev.is-new { box-shadow: inset 3px 0 0 var(--rb-ink), inset 0 0 0 1px var(--rb-ink), 0 0 0 3px color-mix(in oklab, var(--rb-ink) 22%, transparent); }
html[dir="rtl"] .hero__art[data-live="landed"] .rb-ev.is-new { box-shadow: inset -3px 0 0 var(--rb-ink), inset 0 0 0 1px var(--rb-ink), 0 0 0 3px color-mix(in oklab, var(--rb-ink) 22%, transparent); }
.rb-ghost { position: absolute; z-index: 4; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
            border-radius: 8px; border: 1px solid var(--rb-ink); background: var(--rb-raise); color: var(--rb-ink); font: 500 14px/1 var(--font-text);
            white-space: nowrap; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6); pointer-events: none; will-change: transform, opacity; }
.hero__art > .loop-pause { z-index: 6; }

/* 5.6 the aperture over the frame (spec 6): the mark at rest, a cover the page's colour with a round hole */
.ap-iris { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; color: var(--ap-ink);
           overflow: hidden; clip-path: inset(0 round var(--r-lg)); }
html.ap-run .ap-iris, .hero__art.is-blink .ap-iris { display: block; }
.ap-cover { fill: var(--ap-cover); }
/* the hero draws the mark at 0.6 of the logo's weight (10.56 units), one weight while it scales: non-scaling strokes in px */
.ap-iris .ap-mark { stroke-width: calc(min(100cqw, 100cqh) * 6.336 / 250); }
.hero__art.is-blink .rb-now__dot { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { html.ap-run .ap-iris { display: none; } html.ap-run .rb-now__dot { visibility: visible; } }

/* 5.7 the phone (spec 6.3): h1, lead, the main button, the frame, then the second link and the proof line */
@media (max-width: 639px) {
  .hero--collage .hero__text, .hero--collage .hero__text > .btn-row { display: contents; }
  .hero--collage .hero__grid > * { min-width: 0; }
  .hero--collage h1 { order: 1; }
  .hero--collage .hero__lead { order: 2; margin-top: var(--s-4); font-size: 17px; line-height: 1.5; }
  .hero--collage .btn-row > .btn--primary { order: 3; margin-top: var(--s-5); width: 100%; }
  .hero--collage .hero__art { order: 4; flex: 1 1 0; height: auto; min-height: 200px; margin-top: var(--s-5); }
  .hero--collage .btn-row > .btn--secondary { order: 5; margin-top: var(--s-3); align-self: start; }
  .hero--collage .hero__proof { order: 6; margin-top: var(--s-2); text-align: start; }
}

/* ================================================================ 6. the board section (app-frame recipe) */
.board-head { align-items: start; }
.board-head h2 { margin: 0; }
.board-head__p { margin: 0; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 60ch; }
.board-head__more { margin: var(--s-4) 0 0; }
.board-head__more .link { font-size: var(--t-body); }
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-inline-start: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
.rb-app { --fx-bg: var(--rb-bg); --fx-surface: var(--rb-raise); --fx-ink: var(--rb-ink); --fx-muted: var(--rb-muted); --fx-accent: var(--rb-ink); --fx-accent-ink: var(--rb-bg); }
.rb-app .ui-win__row.is-sel { background: color-mix(in oklab, var(--rb-ink) 6%, var(--rb-bg)); box-shadow: inset 2px 0 0 var(--rb-ink); }
html[dir="rtl"] .rb-app .ui-win__row.is-sel { box-shadow: inset -2px 0 0 var(--rb-ink); }
.rb-app .ui-win__nav { height: 28px; }
/* the list keeps a Time column (the hour each request came in): stacked rows put it over the status */
.rb-app .ui-win .ui-win__row { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: 20px 24px; height: 62px; row-gap: 2px; align-content: center; }
.rb-app .ui-win .ui-win__row .ui-avatar { grid-row: 1 / 3; }
.rb-app .ui-win .ui-win__who { grid-column: 2; grid-row: 1; line-height: 20px; }
.rb-app .ui-win .ui-win__sub { grid-column: 2; grid-row: 2; line-height: 24px; }
.rb-app .ui-win .ui-win__age { display: block; grid-column: 3; grid-row: 1; justify-self: end; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--u-muted); }
.rb-app .ui-win .ui-win__st { grid-column: 3; grid-row: 2; justify-self: end; }
.rb-app .ui-win .ui-win__cols { display: none; }
.rb-app .ui-win__st.is-off { color: var(--u-soft); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--u-line); }
.rb-app .ui-win__st.is-off::before { opacity: .35; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-inline-start: 0; border-top: 1px solid var(--u-line); }
  /* stacked, the selected row keeps only its gold rule, and her past visits step aside */
  .rb-app .rb-req__hist { display: none; }
  .rb-app .ui-win__row.is-sel { background: transparent; }
}
/* a tablet shows the open request whole under the list: no line cut by the pane */
@media (min-width: 640px) and (max-width: 1023px) {
  main > section#board > .wrap > .rb-app.fill { flex: 0 0 auto; height: auto; grid-template-rows: auto auto; }
  .rb-app > .app__pane--open::after { display: none; }
  .rb-app .rb-req { height: auto; padding-bottom: 22px; }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* the open request: the WhatsApp message, the slot, the confirm, what follows, the reply, her visits */
.rb-req { box-shadow: none; border-radius: 0; height: 100%; font-size: 14px; overflow: visible; }   /* the pane cuts it, under its fade */
.rb-req__head { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-bottom: 1px solid var(--rb-line); }
.rb-req__who b { display: block; font-size: 15px; }
.rb-req__who small { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rb-req__who small img, .rb-chat__head small img { width: 11px; height: 11px; padding: 2px; border-radius: 4px; }
.rb-req__body { display: grid; gap: 16px; padding: 20px 22px 0; align-content: start; }
.rb-bubble { margin: 0; max-width: 76%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.6; }
.rb-bubble--in { justify-self: start; background: var(--rb-raise); border: 1px solid var(--rb-line); border-start-start-radius: 4px; }
.rb-bubble--out { justify-self: end; background: var(--rb-wa); border-start-end-radius: 4px; }
.rb-req__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rb-line); }
.rb-req__fields small { font-size: 13px; }
.rb-req__slots { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rb-req__slots small { width: 100%; font-size: 13px; }
.rb-slot { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: color-mix(in oklab, var(--rb-ink) 8%, var(--rb-bg)); font-variant-numeric: tabular-nums; }
/* the selected slot carries the gold rule (the dot system), on the same ghost fill as every other drawn control */
.rb-slot.is-on { box-shadow: inset 0 0 0 1.5px var(--dot); font-weight: 500; }
.rb-req__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-req__actions .rb-btn { height: 30px; font-size: 14px; }
.rb-req__done { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rb-req__done li { display: flex; align-items: center; gap: 10px; color: var(--rb-ink); }
.rb-req__done i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 600; background: var(--rb-ok-bg); color: var(--rb-ok); }
.rb-swap { display: inline-grid; } .rb-swap > * { grid-area: 1 / 1; justify-self: end; }
.rb-swap .rb-chip { font-size: 13px; height: 24px; }
.rb-swap__a { opacity: 0; }
.rb-req__hist { display: grid; gap: 0; margin-top: 4px; }
.rb-req__hist small { margin-bottom: 6px; font-size: 13px; }
.rb-req__hist > div { display: grid; grid-template-columns: minmax(0, 1fr) 96px 150px; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rb-line); }
.rb-req__hist em { font-style: normal; color: var(--rb-muted); }
/* the loop (spec 7.3 must-fix): it starts on the finished picture and holds it 70% of the cycle; then the confirm is
   pressed again in 1.2 s, and nothing rests below the finished picture for more than 15% of the cycle */
.rb-req { --m-cycle: 4s; --m-still: 0.3; }
.rb-req .rb-btn--press { animation: rb-press var(--m-cycle) linear infinite; }
.rb-req .rb-swap__a { animation: rb-new var(--m-cycle) step-end infinite; }
.rb-req .rb-swap__b { animation: rb-conf var(--m-cycle) step-end infinite; }
.rb-req .rb-req__done li:nth-child(1) { animation: rb-in1 var(--m-cycle) linear infinite; }
.rb-req .rb-req__done li:nth-child(2) { animation: rb-in2 var(--m-cycle) linear infinite; }
.rb-req .rb-req__done li:nth-child(3) { animation: rb-in3 var(--m-cycle) linear infinite; }
.rb-req .rb-bubble--out { animation: rb-in4 var(--m-cycle) linear infinite; }
@keyframes rb-press { 0%, 75% { transform: none; } 77% { transform: scale(.96); } 80%, 100% { transform: none; } }
@keyframes rb-new { 0% { opacity: 0; } 71% { opacity: 1; } 79% { opacity: 0; } 100% { opacity: 0; } }
@keyframes rb-conf { 0% { opacity: 1; } 71% { opacity: 0; } 79% { opacity: 1; } 100% { opacity: 1; } }
@keyframes rb-in1 { 0%, 70% { opacity: 1; transform: none; } 72%, 79% { opacity: .35; transform: translateY(3px); } 82%, 100% { opacity: 1; transform: none; } }
@keyframes rb-in2 { 0%, 70% { opacity: 1; transform: none; } 72%, 81% { opacity: .35; transform: translateY(3px); } 84%, 100% { opacity: 1; transform: none; } }
@keyframes rb-in3 { 0%, 70% { opacity: 1; transform: none; } 72%, 83% { opacity: .35; transform: translateY(3px); } 86%, 100% { opacity: 1; transform: none; } }
@keyframes rb-in4 { 0%, 70% { opacity: 1; transform: none; } 72%, 84% { opacity: .35; transform: translateY(3px); } 87%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rb-req *, .rb-req { animation: none !important; } .rb-req .rb-swap__a { opacity: 0; } }
@media (max-width: 639px) { .rb-req__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rb-req__fields > :last-child { display: none; } .rb-bubble { max-width: 92%; } .rb-req__hist { display: none; } }
/* a phone's open request shows what the section is about, whole: her message, the free slots and the two actions.
   The three fields, what follows and the reply step aside, and the two nearest slots stand in one row, so no line is
   ever cut at the pane's foot (critique W7) */
@media (max-width: 639px) {
  .rb-app :is(.rb-req__fields, .rb-req__done, .rb-bubble--out) { display: none; }
  .rb-app .rb-req__slots > .rb-slot:nth-of-type(3) { display: none; }
  .rb-app .rb-req__actions .rb-btn { height: 32px; }
  #board .board-head__p { font-size: var(--t-body); }
  .app > .app__pane--open::after { display: none; }
}

/* ================================================================ 7. services: three open cards, three kinds of picture */
.svc-cards > .card { grid-column: 1 / -1; }
@media (min-width: 1024px) { .svc-cards > .card { grid-column: auto / span 4; } }
.svc-cards .panel { --p-h: 340px; background:
    radial-gradient(80% 70% at 20% 0%, color-mix(in oklab, var(--ground-surface) 85%, white), transparent 70%), var(--ground-bg); }
.svc-cards .stage > .at-rise { --ax: 22px; --ay: 32px; --fit-max: 340px; }
.svc-cards .stage { --fade-h: 56px; }
.rb-card { padding: 16px 18px 18px; display: grid; gap: 14px; font-size: 14px; }
.rb-card__row { display: flex; align-items: center; gap: 12px; }
.rb-card__row b { font-size: 16px; display: block; }
.rb-card__row small { font-size: 13px; }
.rb-card__open { margin: 0; color: var(--rb-muted); } .rb-card__open span { color: var(--rb-ok); font-weight: 500; }
.rb-card__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-card__btns .rb-btn { padding: 0 11px; }
.rb-card__line { display: flex; align-items: center; gap: 8px; color: var(--rb-muted); padding-top: 12px; border-top: 1px solid var(--rb-line); }
.rb-card__line .rb-ic { width: 14px; height: 14px; }
.svc-cards .ui-notify { --fx-bg: var(--rb-bg); --fx-surface: var(--rb-raise); --fx-ink: var(--rb-ink); --fx-muted: var(--rb-muted); --fx-accent: var(--rb-ink); --fx-accent-ink: var(--rb-bg); }
/* the notify stack at rest: the newest three, whole and at full opacity; the loop replays the afternoon in order */
.svc-cards .ui-notify .rb-t { margin-inline-start: auto; font-size: 13px; font-weight: 400; color: var(--u-soft); font-variant-numeric: tabular-nums; }
.svc-cards .ui-notify .ui-note__title time:empty { display: none; }
.svc-cards .stage > .at-rise.fit:has(> .ui-notify) { --ay: calc((var(--p-h) - 208px) / 2); }
/* three cards across at 1024 to 1279: a long line wraps instead of running past the stack's edge */
@media (min-width: 1024px) and (max-width: 1279px) {
  .svc-cards .ui-note { height: auto; min-height: 64px; padding-block: 10px; align-items: flex-start; }
  .svc-cards .ui-note__ico { margin-top: 2px; }
  .svc-cards :is(.ui-note__title, .ui-note__body) { white-space: normal; text-wrap: pretty; }
  .svc-cards .stage > .at-rise.fit:has(> .ui-notify) { --ay: 24px; }
}
.panel--dg { display: flex; }
.panel--dg > .dg { flex: 1 1 auto; min-height: 0; }
@media (min-width: 640px) and (max-width: 1023px) {
  /* text on five of the page's columns, the picture on the other seven, so both sit on the grid's lines */
  .svc-cards > .card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: min-content; column-gap: var(--gutter); align-content: start; }
  .svc-cards > .card > :not(.panel) { grid-column: 1 / span 5; }
  .svc-cards > .card > .panel { grid-column: 6 / -1; grid-row: 1 / span 4; --p-h: 214px; margin-top: 0; }
}
@media (max-width: 639px) { .svc-cards .panel { --p-h: 232px; } .svc-cards .stage > .at-rise { --ay-sm: 20px; } }

/* ================================================================ 8. the statement: its full stop is the mark's dot */
/* the label heads the section; under it the statement and its mark, centred on each other, fill the screen */
#visible > .wrap { display: flex; flex-direction: column; height: 100%; }
#visible .visible-grid { margin-block: 0 auto; align-items: center; row-gap: var(--s-6); width: 100%; }
/* from 1024 the statement opens level with the mark's top edge and the mark runs on below it */
@media (min-width: 1024px) { #visible .visible-grid { align-items: start; } }
.visible-label { margin: 0 0 var(--s-5); color: var(--muted); }
.ap-stop { position: relative; color: transparent; }
.ap-stop::after { content: ""; position: absolute; inset-inline-start: .02em; bottom: .14em; width: .3em; height: .3em; border-radius: 50%; background: var(--dot); }
/* the mark keeps the full ink (parchment on dark, obsidian on light) at every point of its scrub: never a faded grey */
.visible-mark { width: 100%; max-width: 520px; height: auto; aspect-ratio: 1; justify-self: end; overflow: visible; color: var(--ink); }
@media (min-width: 640px) and (max-width: 1023px) {
  .visible-text { grid-column: 1 / span 8; }
  .visible-mark { grid-column: 9 / span 4; justify-self: stretch; }
}
@media (max-width: 639px) {
  .visible-text, .visible-mark { grid-column: 1 / -1; }
  .visible-mark { justify-self: stretch; width: 100%; max-width: none; height: 280px; aspect-ratio: auto; margin-top: var(--s-4); }
}

/* ================================================================ 9. the free demo: steps beside the thread */
.demo-grid { align-items: start; }
.demo-text h2 { margin: 0 0 var(--s-7); }
#demo .demo-text h2 { margin-bottom: var(--s-7); }
/* the demo's heading is the offer itself, so it stands a step above the section scale: the h1's size and leading, the
   one h2 in main set off the uniform 48 (critique MF6), held one step under the h1 so the levels still rank. A short screen keeps the section size so the steps still fit */
@media (min-width: 1024px) and (min-height: 861px) {
  #demo .demo-text h2 { font-size: calc(var(--ly-h1-col, 64px) * .875); line-height: 1.02; letter-spacing: var(--display-tracking-xl, -0.04em); max-width: 11ch; }
}
.demo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* the number leads its step's title, so every line of the step starts on the column's edge */
.demo-steps li { display: block; padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.demo-steps li:last-child { border-bottom: 1px solid var(--line); }
.demo-steps h3 { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3); font-size: var(--t-card); line-height: 1.3; }
.demo-steps .step-num { flex: none; width: 28px; height: 28px; font-size: 14px; }
.demo-steps p { margin: 0; color: var(--ink); max-width: 46ch; }
@media (min-width: 1024px) {
  #demo .demo-text { align-self: stretch; display: flex; flex-direction: column; height: calc(100svh - var(--padt) - var(--padb) - var(--s-5)); }
  #demo .demo-steps { flex: 1 1 auto; grid-auto-rows: 1fr; }
}
.demo-frame { --ratio: 0px; height: calc(100svh - var(--padt) - var(--padb) - var(--s-5)); }
.demo-frame .stage > .at-rise { width: min(460px, calc(100% - 48px)); --ax: calc(50% - min(230px, 50% - 24px)); --ay: 40px; }
html[dir="rtl"] .demo-frame .stage > .at-rise { left: auto; right: var(--ax); }
.demo-frame .rb-chat { min-height: 100%; }
.rb-chat__head { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--rb-line); }
.rb-chat__head .ap-logo { width: 26px; height: 26px; color: var(--rb-ink); }
.rb-chat__head b { font-size: 15px; }
.rb-chat__head small { display: flex; align-items: center; gap: 6px; }
.rb-chat__body { display: grid; gap: 10px; padding: 18px; }
.rb-msg { margin: 0; max-width: 84%; padding: 10px 14px; border-radius: 14px; border-start-start-radius: 4px; background: var(--rb-raise); border: 1px solid var(--rb-line); font-size: 15px; line-height: 1.5; justify-self: start; }
.rb-msg--me { justify-self: end; border-radius: 14px; border-start-end-radius: 4px; background: var(--rb-wa); border-color: transparent; }
.rb-msg--link { display: grid; gap: 10px; padding: 8px; width: 84%; }
.rb-link__preview { display: grid; gap: 6px; padding: 14px; border-radius: 10px; background: #0a0a0b; color: #f5f3ef; }
html[data-theme="light"] .rb-link__preview { background: #f5f3ef; color: #0a0a0b; }
.rb-link__preview small { color: inherit; opacity: .72; font-size: 13px; }
.rb-link__row { display: flex; gap: 6px; margin-top: 4px; }
.rb-link__row i { font-style: normal; font-size: 13px; padding: 3px 9px; border-radius: 99px; border: 1px solid color-mix(in oklab, currentColor 22%, transparent); font-variant-numeric: tabular-nums; }
.rb-link__row i.is-on { border-color: var(--dot); box-shadow: inset 0 0 0 1px var(--dot); }
.rb-link__cta { display: block; margin-top: 4px; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; text-align: center; color: inherit; background: color-mix(in oklab, currentColor 14%, transparent); }
.rb-link__text { padding: 0 6px 4px; }
.rb-link__text small { font-size: 13px; }
@media (max-width: 1023px) {
  main > section#demo > .wrap.demo-grid { display: flex; flex-direction: column; }
  #demo .demo-text, #demo .demo-art { align-self: stretch; width: 100%; }
  #demo .demo-art { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: var(--s-7); min-height: 0; }
  #demo .demo-art .demo-frame { flex: 1 1 auto; height: auto; min-height: 0; }
}
@media (max-width: 639px) { #demo { --hm: 2; } .demo-frame .stage > .at-rise { --ay-sm: 24px; } }

/* ================================================================ 10. questions */
/* markup: two groups (the phone's two screens): [h2, line, answers 1-3] and [answers 4-6, the quote]. From 1024 the
   groups dissolve into one grid: the h2, the line and the quote on the left, the six answers on the right */
.faq-grid { align-items: start; }
.faq-grid h2 { margin: 0; }
.faq-grid__p { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--t-lead); line-height: 1.5; }
/* the WhatsApp mark leads the line inline, so the line itself starts on the column's edge */
.faq-grid__p img { display: inline-block; vertical-align: -0.12em; width: 16px; height: 16px; border-radius: 50%; margin-inline-end: 10px; }
#faq .faq__item { padding-block: 16px; }
#faq .faq__item h3 { margin-bottom: var(--s-2); }
#faq .faq--a > .faq__item:first-child { padding-top: 0; }
.faq-quote { margin-top: var(--s-6); max-width: 430px; }
.rb-quote { font-size: 14px; }
.rb-quote__body { display: grid; gap: 12px; padding: 18px 20px 20px; }
.rb-quote__body > b { font-size: 16px; }
.rb-quote__intro { max-width: 100%; margin-bottom: 4px; }
.rb-quote__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-top: 9px; border-top: 1px solid var(--rb-line); }
.rb-quote__row em { font-style: normal; color: var(--rb-muted); }
.rb-quote__foot { margin: 4px 0 0; color: var(--rb-muted); }
.rb-quote__btns { display: flex; gap: 8px; }
@media (min-width: 1024px) {
  main > section#faq > .wrap.faq-grid { grid-template-rows: auto auto minmax(0, 1fr); row-gap: 0; align-content: start; }
  #faq .faq-g1, #faq .faq-g2 { display: contents; }
  #faq h2 { grid-column: 1 / span 5; grid-row: 1; }
  #faq .faq-grid__p { grid-column: 1 / span 5; grid-row: 2; }
  #faq .faq-quote { grid-column: 1 / span 5; grid-row: 3; align-self: start; }
  #faq .faq--a { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: start; }
  #faq .faq--b { grid-column: 7 / span 6; grid-row: 3; align-self: start; }
  #faq .faq--a > .faq__item:last-child { border-bottom: 1px solid var(--line); }
  #faq .faq--b > .faq__item:first-child { border-top: 0; }
}
@media (max-width: 1023px) {
  #faq .faq-g1, #faq .faq-g2 { grid-column: 1 / -1; }
  #faq .faq--a { margin-top: var(--s-6); }
}
/* a tablet holds the questions on one screen: the heading and line beside the quote, the six answers in two columns */
@media (min-width: 640px) and (max-width: 1023px) {
  main > section#faq > .wrap.faq-grid { grid-template-rows: auto auto auto; row-gap: 0; align-content: start; }
  #faq .faq-g1, #faq .faq-g2 { display: contents; }
  #faq h2 { grid-column: 1 / span 6; grid-row: 1; }
  #faq .faq-grid__p { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  #faq .faq-quote { grid-column: 7 / -1; grid-row: 1 / span 2; margin-top: 0; max-width: none; }
  #faq .faq--a { grid-column: 1 / span 6; grid-row: 3; margin-top: var(--s-7); }
  #faq .faq--b { grid-column: 7 / -1; grid-row: 3; margin-top: var(--s-7); }
  #faq .faq--b > .faq__item:first-child { padding-top: 0; }
}
@media (max-width: 639px) {
  /* two screens: the heading, the line, the six answers and the quote share what the two screens leave in equal steps,
     so every answer stands the same distance from the next (no hole between the third and the fourth) */
  #faq { --hm: 2; }
  main > section#faq > .wrap.faq-grid { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
  #faq :is(.faq-g1, .faq-g2, .faq--a, .faq--b) { display: contents; }
  #faq .faq--b > .faq__item:first-child { padding-top: 16px; }
  #faq .faq-quote { margin-top: 0; max-width: none; }
}

/* ================================================================ 11. Arabic and English: the mirrored statement on the inverse band */
/* English on the left, Arabic on the right on both pages (the band is not mirrored on purpose): each side takes six of
   the page's twelve columns, so both start on the grid's lines; the gold axis stands in the middle gutter */
.lang-head { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; direction: ltr; }
.lang-head > h2, .lang-head > .lang-twin { margin: 0; font-size: var(--t-h2); line-height: 1.12; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-wrap: balance; }
.lang-head > [lang="ar"] { grid-column: 7 / span 6; grid-row: 1; direction: rtl; text-align: right; line-height: 1.4; font-family: var(--font-ar-display); letter-spacing: 0; font-size: calc(var(--t-h2) * .86); }
.lang-head > [lang="en"] { grid-column: 1 / span 6; grid-row: 1; text-align: left; font-family: var(--font-latin-display); }
.lang-axis { position: absolute; left: 50%; top: 0; width: 1px; height: 64px; background: var(--axis); }
.lang-p { margin: var(--s-4) 0 0; max-width: 62ch; font-size: var(--t-lead); line-height: 1.5; }
.lang-card { position: relative; min-width: 0; }
.rb-site { font-size: 14px; }
.rb-site .rb-crumb b { font-size: 14px; }
.rb-site__body { display: grid; gap: 8px; padding: 20px 24px 22px; align-content: start; }
.rb-site__h { font-size: 22px; letter-spacing: -0.01em; font-weight: 500; }
.rb-site__body[lang="ar"] .rb-site__h { letter-spacing: 0; font-family: var(--font-ar-display); }
.rb-site__body small { font-size: 13px; }
.rb-site__label { margin: 6px 0 0; color: var(--rb-muted); font-size: 13px; }
.rb-opt { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--rb-line); }
.rb-opt em { font-style: normal; color: var(--rb-muted); font-size: 13px; }
.rb-opt.is-on { border-color: var(--rb-ink); box-shadow: inset 0 0 0 1px var(--rb-ink); }
.rb-days, .rb-times { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-days span, .rb-times span { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--rb-line); font-variant-numeric: tabular-nums; }
.rb-days .is-on, .rb-times .is-on { background: var(--rb-ink); color: var(--rb-bg); border-color: var(--rb-ink); }
.rb-site__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rb-line); }
.rb-site__foot small { font-size: 14px; color: var(--rb-ink); }
.rb-site__foot .rb-btn { padding: 0 14px; }
.rb-lang { display: inline-flex; padding: 2px; border-radius: 99px; background: color-mix(in oklab, var(--rb-ink) 7%, var(--rb-bg)); }
.rb-lang span { padding: 3px 10px; border-radius: 99px; font-size: 12px; }
.rb-lang [lang="ar"] { font-family: var(--font-ar-text); }
.rb-lang [lang="en"] { font-family: var(--font-latin); }
.rb-lang .is-on { background: var(--rb-bg); color: var(--rb-ink); box-shadow: 0 0 0 1px var(--rb-line); }
/* each page's WhatsApp confirmation, in its own language, straight under its booking page: what the customer
   gets the moment she confirms. In the flow, so it never covers the page or its neighbour */
.lang-bubble { display: block; margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; border-start-start-radius: 4px; background: var(--rb-wa); color: var(--rb-ink);
               box-shadow: 0 0 0 1px var(--rb-line), 0 18px 40px -24px rgb(0 0 0 / .45); font-size: 14px; line-height: 1.5; }
.lang-bubble img { display: inline-block; vertical-align: -0.2em; width: 14px; height: 14px; border-radius: 50%; margin-inline-end: 10px; }
@media (min-width: 640px) {
  main > section#languages > .wrap.lang-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr); column-gap: var(--gutter); align-content: start; direction: ltr; }
  #languages .lang-g1 { display: contents; }
  #languages .lang-head { grid-column: 1 / -1; grid-row: 1; }
  #languages .lang-p { grid-column: 1 / -1; grid-row: 2; }
  /* English on the left, Arabic on the right, on both pages: the band is not mirrored on purpose */
  #languages .lang-card { grid-row: 3; margin-top: var(--s-6); align-self: start; }
  #languages .lang-card--en { grid-column: 1; direction: ltr; }
  #languages .lang-card--ar { grid-column: 2; }
  #languages .lang-g2 { display: contents; }
}
@media (max-width: 639px) {
  #languages .lang-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  html[lang] #languages .lang-head > h2 { grid-column: 1; grid-row: 1; }
  html[lang] #languages .lang-head > .lang-twin { grid-column: 1; grid-row: 3; }
  #languages .lang-axis { position: static; grid-column: 1; grid-row: 2; width: 48px; height: 1px; }
  html[lang="ar"] #languages .lang-axis { justify-self: end; }
  /* stacked, the twin keeps the page's one text edge */
  html[dir="ltr"] #languages .lang-twin { text-align: left; }
  html[dir="rtl"] #languages .lang-twin { text-align: right; }
  /* the heading pair and the line, then both booking pages: the line never waits a screen under the first page. The two
     screens' room goes evenly before each page, so no band of empty ground opens anywhere in the band; the first
     group (the pair, the line and the first page) stays inside the first screen */
  main > section#languages.g2m > .wrap.lang-wrap { display: flex; flex-direction: column; gap: 0; height: 100%; }
  #languages :is(.lang-g1, .lang-g2) { display: contents; }
  #languages .lang-p { margin: var(--s-2) 0 0; }
  /* the English page follows the line at the card gap, inside the first screen; the Arabic page and its
     confirmation sit in the middle of what is left, so the two open stretches stay even and short */
  #languages .lang-card--en { margin-top: 0; padding-top: var(--s-6); }
  #languages .lang-card--en .lang-bubble { display: none; }
  #languages .lang-card--ar { margin-block: auto 0; padding-top: 0; }  /* sits on the band's foot: the band meets the close at the usual gap */
  #languages .rb-site .rb-opt:nth-of-type(n+2) { display: none; }
  .rb-site__body { padding: 14px 18px 16px; gap: 8px; }
  #languages .group { min-width: 0; }
}
@media (max-width: 379px) { .rb-site .rb-dots { display: none; } .rb-site .rb-bar { gap: 8px; padding: 0 10px; } .rb-site .rb-lang span { padding: 3px 8px; } }

/* ================================================================ 12. the close: the lockup, then the footer */
/* the close's heading is the page's other display line: set at the h1's size, it answers the hero (the one h2 off the
   section scale; the footer's headings are not ranked with main's) */
footer.closing .closing__cta #close-h { font-size: var(--ly-h1-col, 64px); line-height: 1.02; max-width: 18ch; }
html[lang="ar"] footer.closing .closing__cta #close-h { line-height: 1.3; }
.close-line { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--t-lead); line-height: 1.5; }
.close-line img { display: inline-block; vertical-align: -0.16em; width: 16px; height: 16px; padding: 3px; border-radius: 50%; margin-inline-end: 10px; }
.close-line bdi { color: var(--ink); white-space: nowrap; }
.closing__cta > * { flex: none; }
.close-line { max-width: none; }
.lockup { display: block; margin-top: var(--s-2); font-size: clamp(56px, 5.4vw, 80px); line-height: 1.05; color: var(--ink); direction: ltr; text-align: left; white-space: nowrap; }
/* one line of type: the mark, the two words and the gold dot between them sit inline, so the row starts on the edge */
.lockup > * { display: inline-block; vertical-align: baseline; }
.lockup__dot { width: .17em; height: .17em; border-radius: 50%; background: var(--dot); vertical-align: .24em; margin-inline: .3em; }
/* on /ar/ the lockup reads right to left like the nav logo: the mark leads on the start side, then ظاهر, the dot, Dhahir
   (the mark itself is a fixed drawing and is never mirrored) */
html[dir="rtl"] .lockup { direction: rtl; text-align: right; }
.lockup__en { font-family: var(--font-latin-display); font-weight: 500; letter-spacing: -0.03em; }
.lockup__ar { font-family: var(--font-ar-display); font-weight: 500; letter-spacing: 0; line-height: 1; position: relative; top: -.04em; }
.lockup__mark { width: .8em; height: .8em; overflow: visible; vertical-align: -.06em; margin-inline-end: .32em; }
@media (max-width: 639px) { .lockup { font-size: 46px; } #contact .btn--xl { padding-inline: var(--s-5); } }
/* the close's first screen: the heading and its line, the button and the lockup share the screen in even steps (a poster:
   the line, the action, the signature), and the links open the second screen a bar's height down. A tablet's close does
   the same over the room its links leave, so no band of empty ground stands between the lockup and the links */
@media (max-width: 1279px) { footer.closing .closing__cta.close--type { justify-content: space-between; } }
@media (max-width: 639px) { footer.closing.g2m > .wrap { row-gap: calc(var(--padt) + var(--bar)); } }
@media (max-width: 379px) { .lockup { font-size: 40px; } }
@media (max-width: 379px) { #contact .btn--xl { white-space: normal; text-align: start; height: auto; min-height: 48px; padding-block: var(--s-3); line-height: 1.3; } }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.footer__legal-links { display: inline-flex; gap: var(--s-5); align-items: center; }
.footer__legal-links a { color: var(--muted); }
.footer__legal-links a:hover { color: var(--ink); }
.footer__legal-links [lang="ar"] { font-size: 15px; }
.footer__col bdi { white-space: nowrap; }
/* a phone footer has two columns: the WhatsApp line breaks before the number instead of widening its column */
@media (max-width: 639px) { .footer__col a { white-space: normal; flex-wrap: wrap; column-gap: .3em; } }
.footer__city { color: var(--muted); }
.rb-mini { padding: 12px 14px; width: 260px; display: grid; gap: 6px; }
.rb-mini__row { display: flex; align-items: center; gap: 8px; } .rb-mini__row img { width: 12px; height: 12px; padding: 2px; border-radius: 50%; }
.rb-mini p { margin: 0; color: var(--rb-muted); }

/* ================================================================ 13. the privacy page and the 404 */
.privacy-grid { align-items: start; }
.privacy__head h1 { margin: 0; font-size: var(--t-h1, 56px); }
.privacy__date { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--t-small); }
.privacy__body { display: grid; gap: var(--s-6); }
.privacy__part h2 { margin: 0 0 var(--s-3); font-size: var(--t-card); line-height: 1.3; letter-spacing: -0.01em; }
html[lang="ar"] .privacy__part h2 { font-family: var(--font-ar-display); }
.privacy__part p { margin: 0; max-width: 62ch; font-size: var(--t-body); line-height: 1.7; }
.privacy__part p + p { margin-top: var(--s-3); }
@media (max-width: 1023px) { .privacy__body { margin-top: var(--s-7); } }

.nf { min-height: 100svh; display: grid; align-items: center; padding: var(--s-9, 96px) 0; }
.nf__wrap { display: grid; gap: var(--s-7); justify-items: center; text-align: center; }
.nf__mark { width: min(260px, 52vw); height: auto; color: var(--ink); }
.nf__pair { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: var(--s-7); align-items: center; direction: ltr; width: min(100%, 880px); }
.nf__side h1, .nf__line { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; font-weight: 500; }
.nf__side[lang="en"] { text-align: right; } .nf__side[lang="en"] h1 { font-family: var(--font-latin-display); letter-spacing: -0.04em; }
.nf__side[lang="ar"] { text-align: right; } .nf__side[lang="ar"] .nf__line { font-family: var(--font-ar-display); line-height: 1.4; }
.nf__side p { margin: var(--s-3) 0 0; }
.nf .lang-axis { height: 96px; grid-row: 1; }
@media (max-width: 639px) {
  .nf__pair { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .nf__side[lang] { text-align: center; } .nf .lang-axis { grid-row: auto; width: 48px; height: 1px; justify-self: center; }
}

/* ================================================================ 14. tablets and short screens (critique W1)
   From 640 to 1279 a section keeps at least its screens and grows past them (the kit), so a tablet section either
   fills its screen with its own content or runs into the next. These rules fit each section to its screen at the
   tablet sizes (820x1180, 768x1024) and on a short desktop (1024x768, 1280x720, 1366x768): no band of empty ground
   under the last content, and nothing past the screen. */

/* the open request on a tablet: the list shows three whole rows (never a fourth cut in half) */
@media (min-width: 640px) and (max-width: 1023px) {
  .app > .app__pane--list { max-height: none; }
  .rb-app .ui-win__body { min-height: 0; }
  .rb-app .ui-win__row:nth-child(n+4) { display: none; }
}
/* a shorter tablet (768x1024): the request keeps her message, the slots, the actions and the reply; its three fields
   and what follows step aside, so the frame ends on the screen */
@media (min-width: 640px) and (max-width: 1023px) and (max-height: 1099px) {
  .rb-app :is(.rb-req__fields, .rb-req__done) { display: none; }
}

/* services on a tall tablet (820x1180): the three pictures stand taller and fill the screen */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 1100px) {
  .svc-cards > .card > .panel { --p-h: 274px; }
}

/* the statement on a tablet: the words across the column, the mark large under them, filling the screen */
@media (min-width: 640px) and (max-width: 1023px) {
  #visible .visible-grid { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; min-height: 0; row-gap: var(--s-7); margin-block: 0; }
  #visible .visible-text { width: min(100%, 640px); }
  #visible .visible-mark { flex: 1 1 0; min-height: 240px; width: 100%; max-width: none; height: auto; aspect-ratio: auto; justify-self: auto; }
}

/* questions on a tablet: the six answers share the room the screen leaves, in even steps down to its foot */
@media (min-width: 640px) and (max-width: 1023px) {
  main > section#faq > .wrap.faq-grid { grid-template-rows: auto auto minmax(0, 1fr); }
  #faq :is(.faq--a, .faq--b) { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
}

/* the booking pages on a tablet: they stand to the band's foot, their parts in even steps (a real booking page on a
   tall screen has this air), and the confirmation stays under each page */
@media (min-width: 640px) and (max-width: 1023px) {
  #languages .lang-card { align-self: stretch; display: flex; flex-direction: column; }
  #languages .lang-card > .rb-site { flex: 1 1 auto; display: flex; flex-direction: column; }
  #languages .rb-site__body { flex: 1 1 auto; align-content: space-between; }
}

/* a short desktop (1024x768 and the like): the same sections, tighter */
@media (min-width: 1024px) and (max-height: 860px) {
  .svc-cards .panel { --p-h: 236px; }
  .svc-cards .stage > .at-rise { --fit-max: 236px; }
  /* questions: the heading and its line across the top, then the quote and the answers in three columns */
  main > section#faq > .wrap.faq-grid { grid-template-rows: auto auto minmax(0, 1fr); column-gap: var(--gutter); }
  #faq h2 { grid-column: 1 / -1; grid-row: 1; }
  #faq .faq-grid__p { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-3); }
  #faq .faq-quote { grid-column: 1 / span 4; grid-row: 3; margin-top: var(--s-6); max-width: none; }
  #faq .faq--a { grid-column: 5 / span 4; grid-row: 3; margin-top: var(--s-6); }
  #faq .faq--b { grid-column: 9 / span 4; grid-row: 3; margin-top: var(--s-6); }
  #faq .faq--a > .faq__item:last-child { border-bottom: 0; }
  #faq .faq--b > .faq__item:first-child { padding-top: 0; }
  #faq .faq__item { padding-block: 10px; }
  #faq .faq__item h3 { font-size: var(--t-body); margin-bottom: var(--s-1); }
  #faq .faq__item p { font-size: var(--t-small); line-height: 1.5; }
  /* the band: each page keeps its first option and its times; the confirmations step aside */
  #languages .rb-site .rb-opt:nth-of-type(n+2), #languages .rb-site .rb-days, #languages .lang-bubble { display: none; }
  /* the close: the heading at the section size, the button and the lockup on one row */
  footer.closing .closing__cta #close-h { font-size: var(--t-h2); line-height: 1.12; }
  footer.closing > .wrap { row-gap: var(--s-5); }
  footer.closing .closing__links { gap: var(--s-5); }
  footer.closing .closing__cta.close--type { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-7); row-gap: var(--s-5); }
  footer.closing .closing__cta.close--type > .section-head { grid-column: 1 / -1; }
  footer.closing .closing__cta.close--type > .btn--xl { align-self: center; }
  footer.closing .lockup { margin: 0; font-size: 56px; }
}

/* ================================================================ 13. round 4: the live site's selling arc (R4/plan/PAGE-PLAN.md) */
/* 13.1 the problem: the heading and its line at the top, the three published figures on the section's foot (the dealt
   counter-rolls moment; the figures rest on their real values). No gold here: the frame's gold is elsewhere */
#problem .problem-head h2 { margin: 0; max-width: 16ch; }
.problem-p { margin: var(--s-5) 0 0; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 46ch; }
#problem .problem-stats { margin-top: auto; padding-top: var(--s-8); row-gap: var(--s-6); align-items: start; }
.problem-stat { padding-top: var(--s-5); border-top: 1px solid var(--line); min-width: 0; }
.problem-stat__v { margin: 0; line-height: 1; }
.problem-stat__v .t-stat { font-size: clamp(72px, 9vw, 152px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.problem-stat__t { margin: var(--s-4) 0 0; font-size: var(--t-lead); line-height: 1.45; color: var(--ink); max-width: 26ch; }
@media (max-width: 1023px) {
  #problem .problem-stat { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); align-items: baseline; }
  .problem-stat__t { margin: 0; }
  .problem-stat__v .t-stat { font-size: clamp(48px, 8vw, 72px); }
}
@media (max-width: 639px) {
  #problem .problem-stats { row-gap: var(--s-5); padding-top: var(--s-6); }
  #problem .problem-stat { display: block; padding-top: var(--s-4); }
  .problem-stat__t { margin-top: var(--s-2); font-size: var(--t-body); }
  .problem-stat__v .t-stat { font-size: 36px; }
}

/* 13.2 how it works: three steps beside the hub (the place the business shows up), the panel the screen's height */
.how-grid { align-items: start; }
#how .how-text h2 { margin: 0; }
.how-p { margin: var(--s-4) 0 var(--s-6); font-size: var(--t-lead); line-height: 1.5; color: var(--soft); }
.how-panel { position: relative; height: calc(100svh - var(--padt) - var(--padb) - var(--s-5)); max-height: 680px; min-height: 420px; border-radius: var(--r-lg); overflow: hidden; }
.how-panel > .dg { position: absolute; inset: 0; }
@media (min-width: 1024px) {
  #how .how-text { align-self: stretch; display: flex; flex-direction: column; }
  #how .how-steps { flex: 1 1 auto; grid-auto-rows: 1fr; max-height: 520px; }
}
@media (max-width: 1023px) {
  main > section#how > .wrap.how-grid { display: flex; flex-direction: column; }
  #how .how-text, #how .how-art { align-self: stretch; width: 100%; }
  #how .how-art { margin-top: var(--s-7); }
  .how-panel { height: 440px; min-height: 0; }
}
@media (max-width: 639px) { .how-panel { height: 340px; } #how .how-steps li { padding-block: var(--s-5); } }

/* 13.3 the board's two text links side by side */
.board-head__more { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }

/* 13.4 services over two screens: row 1 the cards with how each is paid, row 2 what each includes */
.svc-card > h3 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.svc-badge, .work-card__badge { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong, var(--line)); font-size: 13px; }
.card > p.svc-pay { margin: var(--s-2) 0 var(--s-1); min-height: 0; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
#services .section-head p { margin: 0; color: var(--soft); font-size: var(--t-lead); line-height: 1.5; max-width: 62ch; }
.svc-lists { align-items: stretch; row-gap: var(--s-7); }
.svc-list { display: flex; flex-direction: column; }
.svc-list__t { margin: 0 0 var(--s-3); font-size: var(--t-card); line-height: 1.3; font-weight: 500; }
.svc-list ul { list-style: none; margin: 0; padding: 0; }
.svc-list li { padding: var(--s-4) 0; border-top: 1px solid var(--line); font-size: var(--t-lead); line-height: 1.45; }
.svc-list li:last-child { border-bottom: 1px solid var(--line); }
.svc-note { margin: auto 0 0; padding-top: var(--s-4); color: var(--soft); font-size: var(--t-small); line-height: 1.5; max-width: 40ch; }
@media (min-width: 640px) and (max-width: 1023px) { .svc-lists > .svc-list { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .svc-list li { padding: 9px 0; font-size: var(--t-small); }
}

/* 13.5 the leverage: a split, the system at work in the frame */
.lev-grid { align-items: start; }
#leverage .lev-text h2 { margin: 0; }
.lev-p { margin: var(--s-4) 0 var(--s-6); font-size: var(--t-lead); line-height: 1.5; color: var(--soft); }
.lev-list { list-style: none; margin: 0; padding: 0; }
.lev-list li { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.lev-list li:last-child { border-bottom: 1px solid var(--line); }
.lev-list .lev-list__t { margin: 0 0 var(--s-2); font-size: var(--t-card); line-height: 1.3; font-weight: 500; }
.lev-list p { margin: 0; max-width: 46ch; }
.lev-frame, .guar-frame { --ratio: 0px; height: calc(100svh - var(--padt) - var(--padb) - var(--s-5)); max-height: 680px; }
:is(.lev-frame, .guar-frame) .stage > .at-rise { width: min(440px, calc(100% - 48px)); --ax: calc(50% - min(220px, 50% - 24px)); --ay: max(32px, calc(50% - var(--half, 130px))); }
.lev-frame { --half: 120px; } .guar-frame { --half: 160px; }
html[dir="rtl"] :is(.lev-frame, .guar-frame) .stage > .at-rise { left: auto; right: var(--ax); }
.rb-wait { font-size: 14px; }
.rb-wait .rb-bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--rb-line); }
.rb-wait__list { list-style: none; margin: 0; padding: 8px 16px 16px; display: grid; }
.rb-wait__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rb-line); }
.rb-wait__row:first-child { border-top: 0; }
.rb-wait__who { display: grid; gap: 2px; min-width: 0; }
.rb-wait__who b { font-size: 15px; font-weight: 500; }
.rb-wait__who small { font-size: 13px; color: var(--rb-muted); }
@media (max-width: 1023px) {
  main > section:is(#leverage, #guarantee) > .wrap.grid { display: flex; flex-direction: column; }
  :is(#leverage, #guarantee) .group { align-self: stretch; width: 100%; }
  #leverage .lev-art { margin-top: var(--s-7); }
  .lev-frame, .guar-frame { height: 440px; }
}
@media (max-width: 639px) { .lev-frame, .guar-frame { height: 340px; } }

/* 13.6 the weekend build: the statement, then QahwaPass in one wide browser frame that takes what the screen leaves */
#proof .proof-head { align-items: start; }
#proof .proof-head h2 { margin: 0; }
.proof-p { margin: 0; font-size: var(--t-lead); line-height: 1.5; max-width: 60ch; }
.proof-more { margin: var(--s-4) 0 0; }
.proof-frame { flex: 1 1 auto; min-height: 0; max-height: calc(54vw + 44px); display: flex; flex-direction: column; margin-top: var(--s-7); border-radius: var(--r-lg); overflow: hidden; background: var(--rb-bg); box-shadow: var(--rb-shadow); }
.proof-frame__bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--rb-line); color: var(--rb-ink); }
.proof-frame__bar .rb-dots { justify-self: start; }
.proof-frame__url { font-size: 13px; color: var(--rb-muted); font-family: var(--font-latin); }
.proof-frame__live { justify-self: end; height: 22px; font-size: 12px; background: var(--rb-ok-bg); color: var(--rb-ok); }
.proof-frame__shot { position: relative; flex: 1 1 auto; min-height: 0; }
.proof-frame__shot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
html[dir="rtl"] .proof-frame__bar { direction: ltr; }
@media (max-width: 1023px) { .proof-frame { flex: none; max-height: none; } .proof-frame__shot { flex: none; aspect-ratio: 16 / 10; } }

/* 13.7 six live builds: the client's own screens (desktop, and the phone over its lower end corner), then the card text;
   the whole card is the link. From 1024 each screen's row runs to that screen's foot (the kit's .g2), so the picture
   panel takes the height the text leaves; the screens inside keep their own size (never larger than captured) */
#work .section-head { max-width: none; }
#work .section-head p { margin: 0; color: var(--soft); font-size: var(--t-lead); line-height: 1.5; }
.work-grid { align-items: stretch; row-gap: var(--s-7); }
#work .work-grid > .work-card { grid-column: auto / span 4; }
.work-card { color: inherit; text-decoration: none; transition: transform var(--dur, 200ms) var(--ease, ease); }
.work-card > .work-card__shot { position: relative; flex: 1 1 auto; min-height: 160px; height: auto; overflow: hidden; padding: 0; margin: 0 0 var(--s-5);
  background: color-mix(in oklab, var(--ink) 6%, var(--bg)); box-shadow: inset 0 0 0 1px var(--line); }
.work-card__shot img { position: absolute; max-width: none; height: auto; transition: transform 500ms var(--ease, ease); box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 18px 40px -22px rgb(0 0 0 / .55); }
.work-card__desk { top: 24px; inset-inline-start: 24px; width: calc(100% - 48px); max-height: calc(100% - 48px); object-fit: cover; object-position: 50% 0; border-radius: 8px; transform-origin: 50% 0; }
.work-card__phone { bottom: -56px; inset-inline-end: 24px; width: 32%; border-radius: 14px 14px 0 0; transform-origin: 50% 100%; }
.work-card__shot--app .work-card__phone { inset-inline-end: auto; inset-inline-start: 50%; translate: -50% 0; bottom: auto; top: 24px; width: 44%; }
html[dir="rtl"] .work-card__shot--app .work-card__phone { translate: 50% 0; }
@media (hover: hover) and (pointer: fine) {
  .work-card:hover { transform: translateY(-2px); }
  .work-card:hover .work-card__shot img { transform: scale(1.02); }
  .work-card:hover .work-card__link { text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) { .work-card, .work-card__shot img { transition: none; } .work-card:hover, .work-card:hover .work-card__shot img { transform: none; } }
.work-card__name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.work-card__name > h3 { margin: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--t-card); line-height: 1.3; }
.work-card > p.work-card__v { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--t-small); min-height: 0; }
.work-card > p.work-card__l { margin: var(--s-3) 0 0; min-height: 2lh; }
.work-card__link { margin-top: var(--s-3); align-self: start; }
@media (min-width: 640px) and (max-width: 1023px) {
  main > section#work > .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: var(--gutter); row-gap: var(--s-7); align-content: start; }
  #work .group, #work .work-grid { display: contents; }
  #work .section-head { grid-column: 1 / -1; margin-bottom: 0; }
  #work .work-grid > .work-card { grid-column: auto; }
  .work-card > .work-card__shot { flex: none; height: 300px; }
}
@media (max-width: 639px) {
  #work .work-grid { row-gap: var(--s-5); }
  #work .work-grid > .work-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s-4); align-items: start; }
  #work .work-card > .work-card__shot { grid-row: 1 / span 4; margin: 0; min-height: 0; height: auto; aspect-ratio: 4 / 5; }
  #work .work-card > :not(.work-card__shot) { grid-column: 2; }
  #work .work-card__desk { display: none; }
  #work .work-card__phone, #work .work-card__shot--app .work-card__phone { inset: 10px auto auto 50%; translate: -50% 0; width: 72%; bottom: auto; border-radius: 10px 10px 0 0; }
  html[dir="rtl"] #work .work-card__phone { inset: 10px 50% auto auto; translate: 50% 0; }
  #work .work-card__name > h3 { font-size: var(--t-body); }
  #work .work-card > p.work-card__l { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.45; min-height: 0; }
  #work .work-card__link { margin-top: var(--s-2); font-size: var(--t-small); }
  #work .work-card__badge { height: 20px; font-size: 11px; padding: 0 8px; }
}

/* 13.8 the guarantee: the quote at the start side, the promise and why Dhahir beside it */
.guar-grid { align-items: start; }
#guarantee .guar-text h2 { margin: 0; }
.guar-p { margin: var(--s-4) 0 0; font-size: var(--t-lead); line-height: 1.5; }
.guar-line { margin: var(--s-5) 0 0; font-size: var(--t-card); line-height: 1.35; font-weight: 500; color: var(--ink); }
.guar-why { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); margin-top: var(--s-7); }
.guar-why__item { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.guar-why__item .guar-why__t { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--t-body); font-weight: 500; line-height: 1.35; }
.guar-why__item p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--soft); }
.guar-frame .rb-quote { font-size: 14px; }
@media (max-width: 1023px) { #guarantee .guar-art { margin-top: var(--s-7); } }
@media (max-width: 639px) { .guar-why { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); } }

/* 13.9 the demo's line under its heading; the questions' startup link */
.demo-p { margin: calc(-1 * var(--s-5)) 0 var(--s-6); font-size: var(--t-lead); line-height: 1.5; color: var(--soft); max-width: 44ch; }


/* 13.10 questions without the quote (it moved to #guarantee): the heading and its line hold the start column */
@media (min-width: 1024px) {
  main > section#faq > .wrap.faq-grid { grid-template-rows: auto auto; }
  #faq .faq-head { grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: start; }
  #faq .faq--a { grid-row: 1; }
  #faq .faq--b { grid-row: 2; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  #faq .faq-head { grid-column: 1 / -1; grid-row: 1; }
  #faq .faq--a { grid-column: 1 / span 6; grid-row: 2; }
  #faq .faq--b { grid-column: 7 / span 6; grid-row: 2; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #faq .faq-head { grid-column: 1 / -1; grid-row: 1; }
  #faq .faq--a { grid-column: 1 / span 6; grid-row: 2; }
  #faq .faq--b { grid-column: 7 / -1; grid-row: 2; }
}
/* 13.11 the services' first screen: the three pictures take what the screen leaves under the cards' words */
@media (min-width: 1024px) and (min-height: 861px) {
  #services .svc-cards > .card > .panel { flex: 1 1 auto; height: auto; min-height: var(--p-h); }
}
/* 13.12 a phone's leverage and guarantee frames: the card starts 24px down and the frame holds it whole */
@media (max-width: 639px) {
  :is(.lev-frame, .guar-frame) .stage > .at-rise { --ay: 24px; --ay-sm: 24px; }
  .lev-frame { height: 300px; } .guar-frame { height: 400px; }
}
/* 13.13 the gate's round 1: the board's two links stay one line on a phone; the demo heading two lines; the answers closer */
@media (max-width: 639px) { .board-head__more { gap: var(--s-2) var(--s-5); } .board-head__more .link { font-size: var(--t-small); } }
@media (min-width: 1024px) and (min-height: 861px) { #demo .demo-text h2 { max-width: 15ch; } }
@media (min-width: 1024px) { #faq .faq__item { padding-block: 12px; } #faq .faq__item h3 { margin-bottom: 4px; } }
.proof-p .muted { color: var(--soft); }
/* 13.14 the gate's round 2 */
#work .section-head { margin-bottom: var(--s-5); }
@media (min-width: 1024px) { #work .work-card > .work-card__shot { margin-bottom: var(--s-4); } }
@media (max-width: 639px) {
  .problem-stat__v .t-stat { font-size: 30px; }
  #services .svc-cards .panel { --p-h: 150px; }
  #services .svc-list__t { margin-bottom: var(--s-2); font-size: var(--t-body); }
  #services .svc-list li { padding: 6px 0; font-size: var(--t-small); line-height: 1.4; }
  #services .svc-note { padding-top: var(--s-2); }
  #services .svc-lists { row-gap: var(--s-5); }
}
/* 13.15 critique pass 1 */
/* a tablet: the services run as one column of content (the two-screen split left a screen of ground between the cards and the lists) */
@media (min-width: 640px) and (max-width: 1023px) {
  main > section#services.g2 > .wrap { display: flex; flex-direction: column; row-gap: var(--s-8); }
  #demo .demo-art .demo-frame { min-height: 440px; }
}
/* a short desktop (1024x768): the demo's line under the heading took the third step's room */
@media (min-width: 1024px) and (max-height: 860px) {
  #demo .demo-steps li { padding-block: var(--s-4); }
  #demo .demo-text h2 { margin-bottom: var(--s-6); }
  .demo-p { margin: calc(-1 * var(--s-4)) 0 var(--s-4); font-size: var(--t-body); }
}
/* the close line now carries the reply time: from 1024 it keeps one line, so the lockup stays clear of the links under it */
@media (min-width: 1024px) { footer.closing .closing__cta .section-head { max-width: none; } }
/* the footer's columns now run four links deep (services and work): from 1024 the close's steps and the link rows
   close up a little, so the lockup (and the Arabic word's descent) stays clear of the lede under it */
@media (min-width: 1024px) and (min-height: 861px) {
  footer.closing .closing__cta.close--type { row-gap: var(--s-5); }
  footer.closing .footer__col ul { row-gap: 8px; }
}
@media (min-width: 1024px) { #work .work-grid > .work-card { min-height: 0; } #work .work-card > .work-card__shot { flex: 1 1 0; } }

/* ================================================================ 13.16 round 4 integrate: the reviewers' must-fix (R4/review) */
/* a frame that holds its card whole (D7, and the guarantee's own composition): the stage joins the flow and the frame
   grows to the card, so no row of the card is ever cut */
#guarantee .guar-frame.hug { height: auto; min-height: 0; max-height: none; --ratio: 0px; }
#guarantee .guar-frame.hug > .stage { position: relative; inset: auto; width: 100%; padding: var(--hug-pad, 24px); }
#guarantee .guar-frame.hug > .stage > .at-rise { position: relative; left: auto; right: auto; top: auto; width: 100%; max-width: var(--fit-max, 440px); margin-inline: auto; }
@media (max-width: 639px) {
  #services .svc-cards .panel:has(> .stage > .at-rise), #leverage .lev-frame, #guarantee .guar-frame { height: auto; min-height: 0; max-height: none; --ratio: 0px; }
  :is(#services .svc-cards .panel, #leverage .lev-frame, #guarantee .guar-frame) > .stage:has(> .at-rise) { position: relative; inset: auto; width: 100%; padding: 20px 16px; }
  :is(#services .svc-cards .panel, #leverage .lev-frame, #guarantee .guar-frame) > .stage > .at-rise { position: relative; left: auto; right: auto; top: auto; width: 100%; max-width: none; margin: 0; }
}
/* D1: six equal pictures from 1024, one row of three to each of the two screens (the kit .g2 groups) */
@media (min-width: 1024px) {
  #work .work-grid > .work-card { grid-column: auto / span 4; min-height: 0; }
  #work .work-card > .work-card__shot { flex: none; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
}
/* a phone: the six cards run at one gap (no screen of ground between the third and the fourth) */
@media (max-width: 639px) {
  main > section#work > .wrap { justify-content: center; row-gap: var(--s-5); }
  main > section#work > .wrap > :last-child { margin-block: 0; }
  main > section#work > .wrap > .section-head { margin-bottom: 0; }   /* the head now sits in the .wrap (no .group): the row gap alone parts it from the cards, as before */
}
/* D2: the weekend build's screen whole at no more than its own size (1600px source, 2x screens: 800 CSS px at most) */
@media (min-width: 1024px) {
  .proof-frame { flex: none; max-height: none; width: 100%; max-width: min(800px, calc((100svh - 420px) * 1.6)); margin-inline: auto; }
  .proof-frame__shot { flex: none; aspect-ratio: 16 / 10; }
}
/* D3, F2, D6: each figure is sized to its column and never wraps or runs past it, in either face, rolled or still */
.problem-stat { container-type: inline-size; }
.problem-stat__v .t-stat { white-space: nowrap; }
@media (min-width: 1024px) {
  .problem-stat__v .t-stat { font-size: min(152px, 9vw, 30cqi); }
  html[lang="ar"] .problem-stat__v .t-stat { font-size: min(152px, 9vw, 26cqi); }   /* the Arabic display face sets 30-50% at 3.5em */
}
@media (max-width: 639px) {
  .problem-stat__v .t-stat { font-size: 52px; }
  #problem .problem-stats { margin-top: var(--s-5); padding-top: 0; row-gap: var(--s-4); }
  #problem .problem-stat { padding-top: var(--s-3); }
  #problem .problem-stat__t { margin-top: var(--s-1); }
}
/* D4: each note straight under its own list; from 1024 the card above names the list, so the second name goes */
.svc-list .svc-note { margin: 0; padding-top: var(--s-4); }
@media (min-width: 1024px) { .svc-list .svc-list__t { display: none; } }
/* D5: a phone's two booking pages each with its confirmation and all its services, the room shared evenly */
@media (max-width: 639px) {
  #languages .lang-card--en .lang-bubble { display: block; }
  #languages .rb-site .rb-opt:nth-of-type(n+2) { display: flex; }
  #languages .lang-card--en { margin-block: auto; padding-top: var(--s-5); }
  #languages .lang-card--ar { margin-block: 0; }
}
/* the statement keeps one gold mark: its full stop; the aperture beside it draws its dot in ink */
#visible .visible-mark .ap-dot { fill: currentColor; }
/* the leverage turns the split round (the system first, then the words), and the guarantee's frame holds its quote close */
@media (min-width: 1024px) {
  #guarantee .guar-art { justify-content: center; }
  #guarantee .guar-frame { --hug-pad: 48px; }
}
/* ================================================================ 13.17 round 4 integrate, second pass (R4/final) */
/* D1 + D2: from 1024 each desktop capture shows its top hero band only (top-anchored, never larger than captured),
   so the six pictures crop alike and Amalfi's unloaded gallery row stays out of view; the rows sit one gutter apart,
   the same as the columns */
@media (min-width: 1024px) {
  #work .work-card__desk { height: auto; aspect-ratio: 12 / 5; max-height: none; object-fit: cover; object-position: 50% 0; }
  /* a shorter frame so the phone again overlaps the desktop band's lower end corner, with no empty middle */
  #work .work-card > .work-card__shot { aspect-ratio: 10 / 9; }
}
/* the problem at 1440: the heading and the three figures sit together in the middle of the screen, no hole between */
@media (min-width: 1024px) {
  #problem .problem-wrap { justify-content: center; }
  #problem .problem-stats { margin-top: 0; padding-top: var(--s-8); }
}
/* D7: on a phone the close keeps its content's height (Shells.tsx: no g2m). #demo keeps two screens (its chat fills the
   second; at one screen the chat had no room and vanished) and #faq too (at its own 1.6 screens the next section showed) */
/* F2: between 1024 and 1279 the rolled 30-50% (its digit strips set wider than the still text) ran 19px past its column
   (EN 1024: 672-963 in 672-944); a smaller share of the column keeps it inside, rolled or still, in both faces */
@media (min-width: 1024px) and (max-width: 1279px) { .problem-stat__v .t-stat, html[lang="ar"] .problem-stat__v .t-stat { font-size: min(9vw, 24cqi); } }
/* gate SR-6: the weekend build as a split from 1024: the words from the container's start line, its browser frame on the
   shared split line to the end line (about 628px wide, under the 1600px capture at 2x), both top-aligned; RTL mirrors */
@media (min-width: 1024px) {
  main > section#proof > .wrap.proof-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: center; align-items: start; }
  #proof .proof-head { grid-column: 1 / span 5; grid-row: 1; display: block; }   /* span 5 like every split, so /ar/ mirrors onto the same line */
  #proof .proof-head__text { margin-top: var(--s-5); }
  #proof .proof-frame { grid-column: 7 / -1; grid-row: 1; width: 100%; max-width: none; margin: 0; }
  #proof .proof-frame__shot { aspect-ratio: 4 / 3; }   /* taller, so the split fills the screen (gate: sparse at 49%); the capture is cut at its sides, never enlarged */
}
/* gate section-gaps (/ar/ 1440: 496px from the lists to #leverage against a 304px median): the lists sit in the middle
   of the second screen, not on its top */
@media (min-width: 1024px) { main > section#services.g2 > .wrap > .svc-lists { align-self: center; } }

/* ================================================================ 13.18 round 4 last fixes (R4/final/VERIFY V1) */
/* V1: #work is two screens (as before) but not a .g2: its two rows of three run straight on, and the six cards keep their own height (align-items start,
   no stretched rows), the rows sit one gutter apart like the columns, and the h2 stays --padt under the top as on every
   section, so no band of ground opens between the first row's links and the second row's pictures */
main > section#work { --h: 2; }
@media (min-width: 1024px) {
  /* the grid keeps its content's height (never stretched to a screen); inside a row the three cards share the row's
     height (an Arabic line that wraps once more no longer leaves its row uneven), each card's parts from its top */
  #work .work-grid { flex: none; align-items: stretch; align-content: start; row-gap: var(--gutter); }
  #work .work-grid > .work-card { align-self: stretch; justify-content: flex-start; }
  #work .work-grid + .work-grid { margin-top: var(--gutter); }
}
/* at 1440 the six cards left a fifth of the two screens empty under them (579px to the guarantee against the page's
   300px): from 1024 the frame stands taller (5/6) and its phone shot larger (44%), so the cards fill the two screens and
   the phone still overlaps the desktop band's lower end corner, in the same place on all six */
@media (min-width: 1024px) {
  #work .work-card > .work-card__shot { aspect-ratio: 5 / 6; }
  #work .work-card > .work-card__shot { container-type: inline-size; }
  /* its top 32px over the desktop band's foot (24px in, the band 5/12 of the 48px-narrower width), at every width */
  #work .work-card__phone, #work .work-card__shot--app .work-card__phone { width: 44%; top: calc(24px + (100cqi - 48px) * 5 / 12 - 32px); bottom: auto; }
}
/* V2: a short desktop (1024x768 and the like) set the service pictures at 236px, and the booking card and the notify
   stack ran 25 to 58px past their frames, cut through a line. There the frames grow to hold their card whole (the
   stage joins the flow, as on a phone), and all three share the row's height */
@media (min-width: 1024px) and (max-height: 860px) {
  #services .svc-cards > .card > .panel { flex: 1 1 auto; height: auto; min-height: var(--p-h); max-height: none; }
  #services .svc-cards .panel > .stage:has(> .at-rise) { position: relative; inset: auto; width: 100%; height: auto; padding: 24px 22px; }
  #services .svc-cards .panel > .stage > .at-rise { position: relative; left: auto; right: auto; top: auto; width: 100%; max-width: none; margin: 0; }
}

/* ================================================================ 13.19 polish pass (R4/final/polish) */
/* P2: from 1024 each tile is filled: the desktop capture covers the whole frame inside its 24px margin (cut at its end
   side, top-anchored, shown at under half its captured size), and the phone capture overlaps its lower end corner and
   runs off the frame's foot, the same on all six; RTL mirrors the phone to the other corner */
@media (min-width: 1024px) {
  #work .work-card__desk { top: 24px; inset-inline-start: 24px; width: calc(100% - 48px); height: calc(100% - 48px); aspect-ratio: auto; max-height: none; object-fit: cover; object-position: 0 0; }
  html[dir="rtl"] #work .work-card__desk { object-position: 100% 0; }
  #work .work-card__phone, #work .work-card__shot--app .work-card__phone { width: 40%; top: 42%; bottom: auto; inset-inline-end: 12px; }
}
@media (min-width: 1024px) {
  /* a 10/11 frame, so each desktop capture shows a little over half its width; the two sites whose heading sits in the
     middle of their first screen (Sama Atelier, Amalfi) are anchored on their middle so the heading stays whole */
  #work .work-card > .work-card__shot { aspect-ratio: 10 / 11; }
  #work .work-card:is([data-demo="sama"], [data-demo="amalfi"]) .work-card__desk { object-position: 50% 0; }
  #work .work-card__phone, #work .work-card__shot--app .work-card__phone { top: 36%; }
}
/* P3: the services as three columns, each read top to bottom (name, how it is paid for, line, picture, what it
   includes, the note), in one two-screen section with no second screen of lists */
main > section#services { --h: 2; }
.svc-card > .svc-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: block; }
.svc-card > .svc-note { margin: 0; padding-top: var(--s-4); min-height: 0; }
@media (min-width: 640px) and (max-width: 1023px) { .svc-cards > .card > :is(.svc-list, .svc-note) { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  #services .svc-cards { flex: none; align-items: stretch; }
  #services .svc-cards > .card > .panel { flex: none; height: var(--p-h); min-height: 0; }
}
/* at 1440 the three columns end about 1,260px down the 1,800px section: from 1024 on a full desktop the pictures stand
   taller and the lines more open, and the whole sits in the middle of its two screens */
@media (min-width: 1024px) and (min-height: 861px) {
  main > section#services > .wrap { justify-content: center; }
  #services .svc-cards .panel { --p-h: 440px; }
  #services .svc-cards .stage > .at-rise { --fit-max: 440px; }
  #services .svc-card > .svc-list { margin-top: var(--s-6); }
  #services .svc-card > .svc-list > li { padding-block: 20px; }
}

/* 13.19 The hero headline never breaks a word. At 1024 the kit's auto-hyphenation split "businesses" on the live page. */
#hero-h { hyphens: manual; -webkit-hyphens: manual; }