/* Built by scripts/build-site-assets.mjs — do not edit; change resources/{css,js}/site instead. */
/* Customer website stylesheet entry. Built by scripts/build-site-assets.mjs into
   public/assets/site/site.css (imports inlined in this order). Do not edit the built file. */

/* ---- resources\css\site\tokens.css ---- */
/* =====================================================================
   Hawyat customer website — design tokens
   Source of every value: the 73 original Artboards (docs/design/customer/source),
   mainly board 61 "Components". Measured value list: docs/design/customer/DESIGN_SYSTEM.md §1.

   Scoped to .s-site (the <body> of the new Blade layout) so nothing here can
   reach the admin / vendor / staff panels or the legacy customer pages.

   Layer 1  primitives   named by palette step or by measured value (--fs-15 = 15px)
   Layer 2  semantic     what components use (--color-action, --radius-control …)
   Layer 3  component    declared at the top of each components/*.css block

   Brand colours: --brand-* are the only values the admin "General settings"
   colours may override (App\Support\Site\BrandTheme writes validated hex values
   into a <style> block). Defaults below are the Artboard colours.
   ===================================================================== */

.s-site {
  /* ---------- Layer 1: primitives ---------- */

  /* Pine (brand green) — board 61 swatches: العلامة #136050, العلامة الداكن #0b3b33, العلامة الفاتح #f0f8f5 */
  --pine-50: #f0f8f5;
  --pine-100: #ddefe9;
  --pine-200: #b7ddd1;
  --pine-300: #7cbfac;
  --pine-400: #3e9a82;
  --pine-500: #1a7a64;
  --pine-600: #136050;
  --pine-700: #0f4d41;
  --pine-800: #0b3b33;
  --pine-900: #072a24;

  /* Concrete (neutrals) — الخلفية #f5f7f6, الحدود #dde3e1, نص ثانوي #56635f, النص #17211f */
  --concrete-0: #ffffff;
  --concrete-50: #f5f7f6;
  --concrete-100: #ecf0ee;
  --concrete-200: #dde3e1;
  --concrete-300: #c3cac8;
  --concrete-400: #98a29f;
  --concrete-500: #6a7673;
  --concrete-600: #56635f;
  --concrete-700: #3a4744;
  --concrete-800: #26322f;
  --concrete-900: #17211f;
  --concrete-950: #0d1614;

  /* Accent — تمييز #e86a1f; warning stripe — شريط التحذير #d7262e */
  --orange-50: #fff6ef;
  --orange-100: #fdebdd;
  --orange-500: #e86a1f;
  --orange-700: #c2540f;
  --stripe-red: #d7262e;

  /* Status sets (fg = icon/fill, ink = text, soft = background, line = border) — board 61 order statuses and fields */
  --green-500: #24803d;
  --green-ink: #1e6b34;
  --green-soft: #e7f5ec;
  --green-line: #a8d9b6;
  --amber-500: #f2a20c;
  --amber-ink: #8a5300;
  --amber-soft: #fff5dc;
  --amber-line: #f3cf79;
  --red-500: #d92d20;
  --red-ink: #b42318;
  --red-soft: #fdecea;
  --red-line: #f5b5ae;
  --red-tint: #fffafa;
  --blue-500: #2a72b0;
  --blue-ink: #1d5f99;
  --blue-soft: #e8f1fa;
  --blue-line: #aecbea;

  /* Typography */
  --font-family-plex: 'IBM Plex Sans Arabic', 'Readex Pro', system-ui, sans-serif;
  --font-family-readex: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-34: 34px;
  --fs-hero: clamp(1.9rem, 3vw, 2.6rem);
  --lh-135: 1.35;
  --lh-150: 1.5;
  --lh-160: 1.6;
  --lh-170: 1.7;
  --lh-180: 1.8;
  --lh-normal: normal; /* board controls use `font: inherit` with no line-height → the font's own (B0-B2A) */

  /* Spacing (gap / padding values measured on the boards) */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;

  /* Control heights */
  --h-32: 32px;
  --h-40: 40px;
  --h-44: 44px;
  --h-48: 48px;
  --h-50: 50px;
  --h-52: 52px;

  /* Radii — board 61: حقول 12, بطاقات 16, نوافذ 24, شرائح pill */
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-pill: 999px;

  /* Shadows (pine-900 based, as on the boards) */
  --shadow-e1: 0 1px 2px rgba(7, 42, 36, 0.06);
  --shadow-e2: 0 4px 12px rgba(7, 42, 36, 0.08);
  --shadow-e3: 0 8px 24px rgba(7, 42, 36, 0.12);
  --shadow-e4: 0 16px 48px rgba(7, 42, 36, 0.24);
  --shadow-sheet-up: 0 -8px 24px rgba(7, 42, 36, 0.16);
  --shadow-search: 0 8px 24px rgba(7, 42, 36, 0.24);      /* board 20 hero search box */
  --shadow-bar-up: 0 -4px 12px rgba(7, 42, 36, 0.08);     /* board 63 sticky action bar */
  --shadow-bar-up-soft: 0 -4px 12px rgba(7, 42, 36, 0.06); /* boards 11–13 booking footer (phone) */

  /* Overlays behind dialogs (board 61 "نافذة منبثقة" / "الورقة السفلية") */
  --overlay-dialog: rgba(13, 22, 20, 0.62);
  --overlay-sheet: rgba(13, 22, 20, 0.55);

  /* White alphas used on dark brand surfaces (footer, provider banner) */
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a12: rgba(255, 255, 255, 0.12);
  --white-a25: rgba(255, 255, 255, 0.25);
  --white-a06: rgba(255, 255, 255, 0.06);
  --white-a40: rgba(255, 255, 255, 0.4);
  --white-a50: rgba(255, 255, 255, 0.5);
  /* B1-A home: hero shade (pine-900) and the board's "V" mark (pine-800 / pine-600) */
  --pine-900-a95: rgba(7, 42, 36, 0.95);
  --pine-900-a92: rgba(7, 42, 36, 0.92);
  --pine-900-a35: rgba(7, 42, 36, 0.35);
  --pine-900-a10: rgba(7, 42, 36, 0.1);
  --pine-600-a18: rgba(19, 96, 80, 0.18);
  --pine-600-a12: rgba(19, 96, 80, 0.12);
  --pine-900-a94: rgba(7, 42, 36, 0.94);
  --pine-900-a82: rgba(7, 42, 36, 0.82);
  --pine-900-a70: rgba(7, 42, 36, 0.7);
  --pine-900-a30: rgba(7, 42, 36, 0.3);
  --pine-900-a15: rgba(7, 42, 36, 0.15);
  --pine-900-a05: rgba(7, 42, 36, 0.05);
  --pine-800-a90: rgba(11, 59, 51, 0.9);
  --pine-800-a70: rgba(11, 59, 51, 0.7);
  --pine-600-a70: rgba(19, 96, 80, 0.7);
  --teal-500: #23889a;   /* board 20 offer gradient end */
  --teal-50: #e3f2f4;    /* board 20 offer text on the gradient */

  /* Layout — boards use a 1280px box INCLUDING 24px side padding (content 1232px), 1080 and 880 for narrower
     pages; phone boards use 16px. Breakpoints (media queries cannot read variables; use these literals):
     640px (phone → tablet), 1024px (tablet → desktop). Phone boards are 390px wide. */
  --container-1280: 1280px;
  --container-1080: 1080px;
  --container-880: 880px;
  --gutter-phone: 16px;
  --gutter-tablet: 24px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 150ms;

  /* ---------- Brand (admin-overridable, see BrandTheme) ---------- */
  --brand-primary: var(--pine-600);
  --brand-primary-hover: var(--pine-700);
  --brand-primary-strong: var(--pine-800);
  --brand-primary-subtle: var(--pine-50);
  --brand-primary-ring: var(--pine-100);
  --brand-on-primary: var(--concrete-0);
  --brand-primary-text: var(--pine-600);
  --brand-accent: var(--orange-500);
  /* Dark brand surfaces and the text tints used on them (footer pine-800, banner pine-900) */
  --brand-inverse: var(--pine-800);
  --brand-inverse-deep: var(--pine-900);
  --brand-on-inverse: var(--pine-100);
  --brand-on-inverse-muted: var(--pine-200);
  --brand-on-inverse-subtle: var(--pine-300);

  /* ---------- Layer 2: semantic ---------- */
  --color-canvas: var(--concrete-50);
  --color-surface: var(--concrete-0);
  --color-sunken: var(--concrete-100);
  --color-text-primary: var(--concrete-900);
  --color-text-secondary: var(--concrete-600);
  --color-text-muted: var(--concrete-500);
  --color-text-strong: var(--concrete-700);
  --color-text-disabled: var(--concrete-400);
  --color-border: var(--concrete-200);
  --color-border-strong: var(--concrete-300);
  --color-border-subtle: var(--concrete-100);
  --color-border-hover: var(--concrete-400);
  --color-on-action-track: rgba(255, 255, 255, 0.4);
  --color-selection: var(--brand-primary-ring);
  --color-on-selection: var(--brand-primary-strong);

  --color-action: var(--brand-primary);
  --color-action-hover: var(--brand-primary-hover);
  --color-on-action: var(--brand-on-primary);
  --color-action-text: var(--brand-primary-text);
  --color-action-subtle: var(--brand-primary-subtle);
  --color-on-action-subtle: var(--brand-primary-strong);
  --color-brand-dark: var(--brand-primary-strong);
  --color-accent: var(--brand-accent);
  --color-focus: var(--brand-primary);
  --color-focus-ring: var(--brand-primary-ring);

  --color-success: var(--green-500);
  --color-success-text: var(--green-ink);
  --color-success-surface: var(--green-soft);
  --color-success-border: var(--green-line);
  --color-warning: var(--amber-500);
  --color-warning-text: var(--amber-ink);
  --color-warning-surface: var(--amber-soft);
  --color-warning-border: var(--amber-line);
  --color-error: var(--red-500);
  --color-error-text: var(--red-ink);
  --color-error-surface: var(--red-soft);
  --color-error-border: var(--red-line);
  --color-error-field: var(--red-tint);
  --color-info: var(--blue-500);
  --color-info-text: var(--blue-ink);
  --color-info-surface: var(--blue-soft);
  --color-info-border: var(--blue-line);
  /* Brand-coloured status tone (e.g. "الحاوية في موقعك"): pine-50 / pine-700 */
  --color-tone-brand-surface: var(--brand-primary-subtle);
  --color-tone-brand-text: var(--brand-primary-hover);

  --color-inverse-surface: var(--brand-inverse);
  --color-inverse-surface-deep: var(--brand-inverse-deep);
  --color-on-inverse-strong: var(--concrete-0);
  --color-on-inverse: var(--brand-on-inverse);
  --color-on-inverse-muted: var(--brand-on-inverse-muted);
  --color-on-inverse-subtle: var(--brand-on-inverse-subtle);
  --color-inverse-fill: var(--white-a08);
  --color-inverse-control: var(--white-a10);
  --color-inverse-fill-hover: var(--white-a12);
  --color-inverse-line: var(--white-a12);
  --color-inverse-border: var(--white-a25);

  --color-overlay-dialog: var(--overlay-dialog);
  --color-overlay-sheet: var(--overlay-sheet);

  /* Page surfaces (B1-A home / service). Brand-coloured parts follow the brand variables. */
  --color-hero-surface: var(--brand-inverse);
  --color-hero-shade-strong: var(--pine-900-a94);
  --color-hero-shade-mid: var(--pine-900-a82);
  --color-hero-shade-soft: var(--pine-900-a15);
  --color-hero-shade-faint: var(--pine-900-a05);
  --color-hero-shade-phone-strong: var(--pine-900-a95);
  --color-hero-shade-phone-mid: var(--pine-900-a70);
  --color-hero-shade-phone-soft: var(--pine-900-a30);
  /* Sign-in pages (B4, boards 34 – 42, 72): the photo panel's shade and the pale "V" behind the card pages */
  --color-auth-shade-strong: var(--pine-900-a92);
  --color-auth-shade-mid: var(--pine-900-a35);
  --color-auth-shade-soft: var(--pine-900-a10);
  --color-auth-wash: var(--pine-600-a12);
  --color-auth-wash-deep: var(--pine-600-a18);
  --color-mark: var(--pine-800-a90);
  --color-mark-soft: var(--pine-800-a70);
  --color-mark-on-inverse: var(--brand-primary);
  --color-display-on-inverse: var(--pine-400); /* board 51 / 60: the "404" numerals */
  --color-mark-on-inverse-soft: var(--pine-600-a70);
  --color-dot-brand: var(--pine-500);
  --color-dot-light: var(--concrete-0);
  --color-promo-from: var(--brand-primary);
  --color-promo-via: var(--pine-500);
  --color-promo-to: var(--teal-500);
  --color-on-promo-muted: var(--teal-50);
  --color-promo-action: var(--brand-inverse-deep);
  --color-quote-text: var(--concrete-800);
  --color-star: var(--amber-500);
  --color-avatar-surface: var(--pine-100);
  --color-avatar-text: var(--pine-700);
  --color-on-inverse-ghost: var(--white-a06);
  --color-inverse-outline: var(--white-a40);
  --color-inverse-outline-strong: var(--white-a50);
  /* Booking modal (B1-B1, boards 1–5 / 11–13) */
  --color-step-ring: var(--pine-100);
  --color-selected-ring: var(--pine-200);
  --color-accent-surface: var(--orange-50);
  --color-accent-text: var(--orange-700);
  --color-skeleton: var(--concrete-100);
  --color-handle: var(--concrete-300);

  --font-body: var(--font-family-plex);
  --font-display: var(--font-family-readex);
  --text-body: var(--fs-16);
  --text-help: var(--fs-13);
  --leading-body: var(--lh-180);

  --radius-control: var(--r-12);
  --radius-card: var(--r-16);
  --radius-dialog: var(--r-24);
  --radius-pill: var(--r-pill);

  --shadow-card: var(--shadow-e1);
  --shadow-raised: var(--shadow-e3);
  --shadow-dialog: var(--shadow-e4);
  --shadow-sheet: var(--shadow-sheet-up);

  --container-max: var(--container-1280);
  --gutter: var(--gutter-phone);
}

@media (min-width: 640px) {
  .s-site {
    --gutter: var(--gutter-tablet);
  }
}

/* ---- resources\css\site\base.css ---- */
/* Base styles for the customer website. Everything is scoped to .s-site so the
   legacy Bootstrap pages and the panels are never affected. */

.s-site {
  margin: 0;
  min-height: 100vh;
  background: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

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

.s-site :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-600);
  line-height: var(--lh-135);
}

.s-site :where(p, figure, blockquote, dl, dd) {
  margin: 0;
}

.s-site :where(ul, ol)[role='list'] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site :where(img, svg, video) {
  display: block;
  max-width: 100%;
}

.s-site :where(img) {
  height: auto;
}

.s-site :where(a) {
  color: var(--color-action-text);
  text-decoration: none;
}

.s-site :where(a:hover) {
  color: var(--color-on-action-subtle);
}

/* Form normalisation: controls inherit the site font; components add the look. */
.s-site :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.s-site :where(button) {
  cursor: pointer;
}

.s-site :where(button:disabled) {
  cursor: not-allowed;
}

/* One visible focus style for every interactive element (keyboard only). */
.s-site :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.s-site ::selection {
  background: var(--color-selection);
  color: var(--color-on-selection);
}

/* Text styles from board 61 "الخطوط والزوايا" (+ the fluid hero size used on Home).
   Use these instead of setting font sizes in page CSS. */
.s-site .s-text-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-700);
  line-height: var(--lh-135);
}

.s-site .s-text-display {
  font-family: var(--font-display);
  font-size: var(--fs-34);
  font-weight: var(--fw-700);
  line-height: var(--lh-135);
}

.s-site .s-text-title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-600);
  line-height: var(--lh-135);
}

.s-site .s-text-heading {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
  line-height: var(--lh-150);
}

.s-site .s-text-body {
  font-size: var(--fs-16);
  line-height: var(--lh-180);
}

.s-site .s-text-help {
  font-size: var(--text-help);
  line-height: var(--lh-170);
  color: var(--color-text-secondary);
}

.s-site .s-text-caption {
  font-size: var(--fs-12);
  line-height: var(--lh-160);
  color: var(--color-text-secondary);
}

/* Numbers that must stay left-to-right inside Arabic text (phones, prices, order numbers). */
.s-site :where([dir='ltr']) {
  unicode-bidi: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .s-site *,
  .s-site *::before,
  .s-site *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- resources\css\site\utilities.css ---- */
/* Small layout and accessibility utilities. Keep this list short: anything with a
   visual identity belongs in a component. */

/* Visually hidden but read by screen readers. */
.s-site .s-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until focused. */
.s-site .s-skip-link {
  position: absolute;
  inset-inline-start: var(--sp-16);
  inset-block-start: var(--sp-16);
  z-index: 100;
  padding: var(--sp-10) var(--sp-16);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-raised);
  transform: translateY(-200%);
}

.s-site .s-skip-link:focus {
  transform: none;
}

/* Vertical rhythm and inline groups; gap comes from a modifier or --s-gap. */
.s-site .s-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-gap, var(--sp-16));
}

.s-site .s-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-gap, var(--sp-10));
}

.s-site .s-gap-6 { --s-gap: var(--sp-6); }
.s-site .s-gap-8 { --s-gap: var(--sp-8); }
.s-site .s-gap-10 { --s-gap: var(--sp-10); }
.s-site .s-gap-12 { --s-gap: var(--sp-12); }
.s-site .s-gap-16 { --s-gap: var(--sp-16); }
.s-site .s-gap-24 { --s-gap: var(--sp-24); }
.s-site .s-gap-32 { --s-gap: var(--sp-32); }

/* Visibility by viewport (phone boards are 390px, desktop boards 1280/1440px). */
@media (max-width: 639.98px) {
  .s-site .s-hide-phone { display: none !important; }
}

@media (min-width: 640px) {
  .s-site .s-only-phone { display: none !important; }
}

/* ---- resources\css\site\components\container.css ---- */
/* Container — <x-site.container size="default|content|narrow">
   Boards: `max-width: 1280px; margin: 0 auto; padding: 0 24px` with no box-sizing reset, so 1280 is the CONTENT
   width and the padding sits outside it (rendered: content x=80…1360 on a 1440 frame; D15). 1080 and 880 for
   narrower pages; 16px side padding on phone boards. */

.s-site .s-container {
  --container-width: var(--container-max);
  width: 100%;
  max-width: calc(var(--container-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.s-site .s-container--content {
  --container-width: var(--container-1080);
}

.s-site .s-container--narrow {
  --container-width: var(--container-880);
}

/* ---- resources\css\site\components\icon.css ---- */
/* Icon — <x-site.icon name="…" size="20" flip label="…">
   24×24 stroke icons drawn in currentColor, like the boards. */

.s-site .s-icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icons that point in the reading direction (arrows, chevrons) mirror in RTL. */
.s-site .s-icon--flip:dir(rtl) {
  transform: scaleX(-1);
}

/* ---- resources\css\site\components\button.css ---- */
/* Button — <x-site.button variant size block loading disabled href icon icon-end label>

   Board 61 "الأزرار": primary (أساسي), secondary (ثانوي), quiet (هادئ), disabled (معطّل),
   loading (جارٍ الإرسال). Ghost = transparent text button seen on booking boards.
   Sizes measured across the 73 boards:
     sm  40px · padding 0 12px · radius 10 · 14px   (header "احجز الآن", compact actions)
     md  44px · padding 0 18px · radius 12 · 15px   (most page actions)
     lg  48px · padding 0 22px · radius 12 · 15px   (board 61 default, forms)
     xl  52px · padding 0 24px · radius 12 · 16px   (booking modal primary / block CTAs)
   icon-only: square, same height as the size. */

.s-site .s-btn {
  --btn-height: var(--h-48);
  --btn-padding: var(--sp-22);
  --btn-radius: var(--r-12);
  --btn-font-size: var(--fs-15);
  --btn-bg: var(--color-action);
  --btn-fg: var(--color-on-action);
  --btn-border: transparent;
  --btn-border-width: 0;
  --btn-bg-hover: var(--color-action-hover);
  --btn-spinner-track: var(--color-on-action-track);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  height: var(--btn-height);
  padding-block: 0;
  padding-inline: var(--btn-padding);
  border: var(--btn-border-width) solid var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-600);
  line-height: var(--lh-normal);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.s-site .s-btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
}

/* Variants */
.s-site .s-btn--secondary {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text-primary);
  --btn-border: var(--color-border-strong);
  --btn-border-width: 1px;
  --btn-bg-hover: var(--color-canvas);
  --btn-spinner-track: var(--color-border);
}

.s-site .s-btn--quiet {
  --btn-bg: var(--color-action-subtle);
  --btn-fg: var(--color-on-action-subtle);
  --btn-bg-hover: var(--color-focus-ring);
  --btn-spinner-track: var(--color-border);
}

.s-site .s-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-action-text);
  --btn-bg-hover: var(--color-action-subtle);
  --btn-spinner-track: var(--color-border);
}

/* Sizes */
.s-site .s-btn--sm {
  --btn-height: var(--h-40);
  --btn-padding: var(--sp-12);
  --btn-radius: var(--r-10);
  --btn-font-size: var(--fs-14);
}

.s-site .s-btn--md {
  --btn-height: var(--h-44);
  --btn-padding: var(--sp-18);
}

.s-site .s-btn--xl {
  --btn-height: var(--h-52);
  --btn-padding: var(--sp-24);
  --btn-font-size: var(--fs-16);
}

.s-site .s-btn--block {
  display: flex;
  width: 100%;
}

.s-site .s-btn--icon-only {
  width: var(--btn-height);
  padding-inline: 0;
}

/* States: disabled (board 61 معطّل) and loading (جارٍ الإرسال, opacity .85 + spinner). */
.s-site .s-btn:disabled,
.s-site .s-btn[aria-disabled='true'] {
  --btn-bg: var(--color-sunken);
  --btn-bg-hover: var(--color-sunken);
  --btn-fg: var(--color-text-disabled);
  --btn-border-width: 0;
  cursor: not-allowed;
  pointer-events: none;
}

.s-site .s-btn[aria-busy='true'] {
  --btn-bg-hover: var(--btn-bg);
  opacity: 0.85;
  cursor: progress;
  pointer-events: none;
}

.s-site .s-btn__spinner {
  /* board: 16px + 2px border without box-sizing → 20px */
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--btn-spinner-track);
  border-block-start-color: currentColor;
  border-radius: var(--r-pill);
  animation: s-spin 0.8s linear infinite;
}

@keyframes s-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- resources\css\site\components\field.css ---- */
/* Field + input — <x-site.field> wraps label, control, hint and error; <x-site.input> is the control.

   Board 61 "الحقول":
     label   14px / 600
     input   50px rendered (48 + borders) · padding 0 14px · 1px concrete-300 · radius 12 · 15px
     hint    12px secondary text
     error   1.5px red-500 border · red tint background · 12px red-ink message with icon (gap 4)
   Gap between parts: 6px. */

.s-site .s-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

.s-site .s-field__label {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  line-height: var(--lh-150);
  color: var(--color-text-primary);
}

.s-site .s-field__required {
  color: var(--color-error-text);
  margin-inline-start: var(--sp-2);
}

.s-site .s-field__optional {
  color: var(--color-text-secondary);
  font-weight: var(--fw-400);
  margin-inline-start: var(--sp-4);
}

.s-site .s-field__hint {
  font-size: var(--fs-12);
  line-height: var(--lh-160);
  color: var(--color-text-secondary);
}

.s-site .s-field__error {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-12);
  line-height: var(--lh-160);
  color: var(--color-error-text);
}

.s-site .s-field__error[hidden] {
  display: none; /* client-error line until a script fills it */
}

.s-site .s-input {
  --input-border-width: 1px;
  --input-border: var(--color-border-strong);
  --input-bg: var(--color-surface);

  width: 100%;
  height: var(--h-50); /* board: height 48 + 1px borders, content-box → 50 */
  padding-block: 0;
  padding-inline: var(--sp-14);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--radius-control);
  background: var(--input-bg);
  color: var(--color-text-primary);
  font-size: var(--fs-15);
  line-height: var(--lh-150);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

/* Phone numbers, e-mails and codes are typed LTR but keep the RTL alignment of the form (board 61). */
.s-site .s-field:dir(rtl) .s-input[dir='ltr'] {
  text-align: right;
}

.s-site .s-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.s-site .s-input:hover {
  --input-border: var(--color-border-hover);
}

.s-site .s-input:focus-visible {
  outline: none;
  --input-border: var(--color-focus);
  box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.s-site .s-input[aria-invalid='true'] {
  --input-border-width: 1.5px;
  --input-border: var(--color-error);
  --input-bg: var(--color-error-field);
}

.s-site .s-input:disabled {
  --input-bg: var(--color-sunken);
  --input-border: var(--color-border);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.s-site textarea.s-input {
  height: auto;
  min-height: calc(var(--h-48) * 2);
  padding-block: var(--sp-12);
  resize: vertical;
}

/* ---- resources\css\site\components\badge.css ---- */
/* Status badge — <x-site.status-badge type="order|payment" :status="…" size="md|account|sm">. One component, three sizes
   (D18, measured in the reference renders, text line-height = the font's own):
     md       default / sample, board 61: padding 5×12, 13px/600 → 29px
     account  customer account screens (boards 26 / 27 / 31): padding 4×12, 13px/600 → 27px
     sm       phone cards: padding 3×10, 12px/600
   Tones (board 61 "حالات الطلب" / "حالات الدفع"): warning, info, brand, success, error, neutral. */

.s-site .s-badge {
  --badge-bg: var(--color-sunken);
  --badge-fg: var(--color-text-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 5px var(--sp-12);
  border-radius: var(--radius-pill);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  line-height: var(--lh-normal);
  white-space: nowrap;
}

.s-site .s-badge--account {
  padding-block: var(--sp-4);
}

.s-site .s-badge--sm {
  padding: 3px var(--sp-10);
  font-size: var(--fs-12);
}

.s-site .s-badge--warning { --badge-bg: var(--color-warning-surface); --badge-fg: var(--color-warning-text); }
.s-site .s-badge--info { --badge-bg: var(--color-info-surface); --badge-fg: var(--color-info-text); }
.s-site .s-badge--brand { --badge-bg: var(--color-tone-brand-surface); --badge-fg: var(--color-tone-brand-text); }
.s-site .s-badge--success { --badge-bg: var(--color-success-surface); --badge-fg: var(--color-success-text); }
.s-site .s-badge--error { --badge-bg: var(--color-error-surface); --badge-fg: var(--color-error-text); }

/* ---- resources\css\site\components\chip.css ---- */
/* Filter chip — <x-site.chip> (board 61 "شرائح التصفية": one look across the site; bottom sheet uses the
   checkbox form). 40px, padding 0 16 (checkbox form 0 14), pill, 14px; idle: white, border concrete-300,
   text concrete-700; selected (button): action fill, white 600; selected (checkbox): action border,
   pine-50 fill, 600. */

.s-site .s-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--h-40);
  padding-inline: var(--sp-16);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
  white-space: nowrap;
  cursor: pointer;
}

.s-site .s-chip:hover {
  border-color: var(--color-border-hover);
}

.s-site .s-chip[aria-pressed='true'],
.s-site .s-chip[aria-selected='true'],
.s-site .s-chip[aria-current='page'] {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--fw-600);
}

.s-site .s-chip__count {
  opacity: 0.8;
}

.s-site .s-chip--check {
  padding-inline: var(--sp-14);
}

.s-site .s-chip--check input {
  margin: 0;
  accent-color: var(--color-action);
}

.s-site .s-chip--check:has(input:checked) {
  border-color: var(--color-action);
  background: var(--color-action-subtle);
  color: var(--color-text-primary);
  font-weight: var(--fw-600);
}

.s-site .s-chip--check:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.s-site .s-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- resources\css\site\components\tabs.css ---- */
/* Tabs — <x-site.tabs> (board 61 "التبويبات").
   underline: 44px items, padding 0 2px, gap 20, 2px bottom border (action when selected), 15px; selected
              pine-800 600, idle secondary; strip border concrete-200 (account pages).
   segmented: track 4px padding, radius 12, concrete-100; items 40px radius 9, 14px; selected white pine-800 600
              (page sections on phones).
   segmented inverse: track white 10% on dark surfaces; idle text white, selected white bg pine-800. */

.s-site .s-tabs {
  display: flex;
  gap: var(--sp-20);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  /* track line drawn inside the box: the scroll container clips its children to the padding box, and the board's
     2px selected underline lies over this line (B0-B2A) */
  box-shadow: inset 0 -1px 0 var(--color-border);
  scrollbar-width: none;
}

.s-site .s-tabs__tab {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: var(--h-44);
  padding-inline: var(--sp-2);
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  font-weight: var(--fw-400);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.s-site .s-tabs__tab:hover {
  color: var(--color-text-primary);
}

.s-site .s-tabs__tab[aria-selected='true'],
.s-site .s-tabs__tab[aria-current='page'] {
  border-block-end-color: var(--color-action);
  color: var(--color-on-action-subtle);
  font-weight: var(--fw-600);
}

.s-site .s-tabs--segmented {
  gap: 0;
  padding: var(--sp-4);
  box-shadow: none;
  border-radius: var(--r-12);
  background: var(--color-sunken);
}

.s-site .s-tabs--segmented .s-tabs__tab {
  flex: 1;
  justify-content: center;
  height: var(--h-40);
  padding-inline: var(--sp-16);
  margin: 0;
  border: 0;
  border-radius: 9px;
  color: var(--color-text-strong);
  font-size: var(--fs-14);
}

.s-site .s-tabs--segmented .s-tabs__tab[aria-selected='true'],
.s-site .s-tabs--segmented .s-tabs__tab[aria-current='page'] {
  background: var(--color-surface);
  color: var(--color-on-action-subtle);
}

.s-site .s-tabs--inverse {
  display: inline-flex;
  background: var(--color-inverse-control);
}

.s-site .s-tabs--inverse .s-tabs__tab {
  flex: 0 0 auto;
  color: var(--color-on-inverse-strong);
}

.s-site .s-tabs--inverse .s-tabs__tab[aria-selected='true'],
.s-site .s-tabs--inverse .s-tabs__tab[aria-current='page'] {
  background: var(--color-on-inverse-strong);
  color: var(--color-inverse-surface);
}

.s-site .s-tabs--inverse .s-tabs__tab:focus-visible {
  outline-color: var(--color-on-inverse-strong);
}

.s-site .s-tab-panel[hidden] {
  display: none;
}

/* ---- resources\css\site\components\alert.css ---- */
/* Alert — <x-site.alert tone variant title dismissible> (board 61 "رسالة تأكيد عابرة").
   elevated (toast look): white, border concrete-200 (error: red line), radius 12, padding 12 8 12 14, shadow e3;
     32px round icon on the tone surface; title 14/600 (error title red ink), text 13 secondary; 40px close.
   inline (inside a page, after saving): tone surface + tone text, radius 12, padding 12 14, 14/600, icon gap 10.
   The toast placement (bottom centre, auto-hide 5s for success) is the toast region (toast.css, toast.js). */

.s-site .s-alert {
  --alert-surface: var(--color-success-surface);
  --alert-text: var(--color-success-text);
  --alert-icon: var(--color-success);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  border-radius: var(--r-12);
}

.s-site .s-alert--warning { --alert-surface: var(--color-warning-surface); --alert-text: var(--color-warning-text); --alert-icon: var(--color-warning-text); }
.s-site .s-alert--error { --alert-surface: var(--color-error-surface); --alert-text: var(--color-error-text); --alert-icon: var(--color-error-text); }
.s-site .s-alert--info { --alert-surface: var(--color-info-surface); --alert-text: var(--color-info-text); --alert-icon: var(--color-info-text); }

.s-site .s-alert--elevated {
  padding-block: var(--sp-12);
  padding-inline: var(--sp-14) var(--sp-8);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.s-site .s-alert--elevated.s-alert--error {
  border-color: var(--color-error-border);
}

.s-site .s-alert__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--h-32);
  height: var(--h-32);
  border-radius: var(--radius-pill);
  background: var(--alert-surface);
  color: var(--alert-icon);
}

.s-site .s-alert__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.s-site .s-alert__title {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

.s-site .s-alert--error .s-alert__title {
  color: var(--color-error-text);
}

.s-site .s-alert__text {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-alert__close {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-sunken);
  --btn-fg: var(--color-text-secondary);
}

.s-site .s-alert--inline {
  gap: var(--sp-10);
  padding: var(--sp-12) var(--sp-14);
  background: var(--alert-surface);
  color: var(--alert-text);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

.s-site .s-alert--inline .s-alert__text {
  color: inherit;
  font-weight: var(--fw-400);
}

.s-site .s-alert[hidden] {
  display: none;
}

/* ---- resources\css\site\components\toast.css ---- */
/* Toast region — <x-site.toast-region> (board 61 "رسالة تأكيد عابرة": bottom centre, 5s for success).
   The toast itself is the elevated alert (alert.css); this file only places and stacks it: centred, up to 440px wide,
   8px apart (newest at the bottom), 24px above the bottom edge (16px + safe area on phones), above page content.
   While a <dialog> is open the toast manager moves the region inside it (toast.js), the only place above the top layer
   that is not inert; the fixed position keeps it at the bottom centre of the viewport. */

.s-site .s-toasts {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  padding-block-end: calc(var(--sp-16) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.s-site .s-toasts__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-toasts__item {
  pointer-events: auto;
  animation: s-toast-in var(--duration-fast) var(--ease-standard);
}

@keyframes s-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-site .s-toasts__item {
    animation: none;
  }
}

@media (min-width: 640px) {
  .s-site .s-toasts {
    padding-block-end: calc(var(--sp-24) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- resources\css\site\components\empty-state.css ---- */
/* Empty state — <x-site.empty-state icon title text variant> (boards 22, 26, 31, 61).
   dashed (in a page list): white, 1px dashed concrete-300, radius 16, padding 28 (phone 24 16), centred, gap 10;
   56px icon tile radius 16 on concrete-50, secondary icon; title Readex 17/600; text 14 secondary;
   action: md button (padding 20). plain: same content without the frame (inside a card or modal). */

.s-site .s-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-24) var(--sp-16);
  text-align: center;
}

.s-site .s-empty--dashed {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.s-site .s-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-16);
  background: var(--color-canvas);
  color: var(--color-text-secondary);
}

.s-site .s-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-600);
}

.s-site .s-empty__text {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-10);
}

.s-site .s-empty__actions .s-btn {
  --btn-padding: var(--sp-20);
}

@media (min-width: 640px) {
  .s-site .s-empty--dashed {
    padding: var(--sp-28);
  }
}

/* ---- resources\css\site\components\skeleton.css ---- */
/* Loading state — <x-site.skeleton variant="card|lines|block"> (board 61 "جارٍ التحميل").
   concrete-100 blocks pulsing 1.6s (opacity 1 → .55): media 140px radius 12, lines 14px / 18px radius 6,
   button 44px radius 12. aria-busy on the wrapper and a visually hidden label for screen readers. */

.s-site .s-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.s-site .s-skeleton__block {
  display: block;
  border-radius: var(--r-6);
  background: var(--color-skeleton);
  animation: s-pulse 1.6s ease-in-out infinite;
}

.s-site .s-skeleton__media { height: 140px; border-radius: var(--r-12); }
.s-site .s-skeleton__line { height: 14px; }
.s-site .s-skeleton__line--lg { height: 18px; }
.s-site .s-skeleton__button { height: var(--h-44); border-radius: var(--r-12); }
.s-site .s-skeleton__w40 { width: 40%; }
.s-site .s-skeleton__w55 { width: 55%; }
.s-site .s-skeleton__w75 { width: 75%; }
.s-site .s-skeleton__w90 { width: 90%; }

@keyframes s-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---- resources\css\site\components\card.css ---- */
/* Cards — shared surface + the three patterns the pilot screens need.
   Base (board 61 / 26 / 45): white, 1px concrete-200, radius 16, overflow hidden.

   Service card <x-site.service-card> (board 61 "بطاقة الخدمة", used on Home, Services, provider page):
     grid  — image area 180px on pine-50 (image 82% × 85% contain), size pill (white, 13/600 pine-800) at inline-start,
             "مميزة" pill (warning) at inline-end; body padding 16 gap 8: category 13/600 action, title Readex 17/600,
             "بواسطة" 13 concrete-700, city 13 secondary + map pin; footer rule concrete-100, price Readex 19/700
             brand-dark + 13 currency + 13 struck old price, book button md (padding 16).
     row   — padding 14 gap 14; 96×76 image tile radius 12; title Readex 15/600.
   Content card <x-site.card> (board 45 Blog): image 16:10 on concrete-100, body padding 18 gap 10, tag pill,
     title Readex 18/600 line-height 1.5, meta 13 secondary, text link 14/600 at the bottom.
   Order card <x-site.order-card> (boards 26 / 31): desktop row padding 16 gap 16 (80×60 image tile radius 10, ref 13,
     title Readex 16/600, dates 13, badge + money at inline-end, "التفاصيل" secondary md padding 16 / 14px);
     phone (<640px) stacked padding 14 gap 12 (64×50 tile, 12px ref, 15px title, sm badge, rule, 48px full-width button). */

.s-site .s-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.s-site .s-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-600);
}

.s-site .s-card__title a {
  color: var(--color-text-primary);
}

/* Stretched title link: the whole card is clickable, other controls stay above it. */
.s-site .s-card--linked {
  position: relative;
}

.s-site .s-card--linked .s-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.s-site .s-card--linked .s-card__over {
  position: relative;
  z-index: 1;
}

.s-site .s-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-action-subtle);
}

.s-site .s-card__media img {
  display: block;
  object-fit: contain;
}

.s-site .s-card__placeholder {
  color: var(--color-action-text);
}

/* ---- Service card ---- */
.s-site .s-service-card__media {
  position: relative;
  height: 180px;
}

.s-site .s-service-card__media img {
  width: 82%;
  height: 85%;
}

/* Board 61 / 20: no line-height is set anywhere in the card, so every line uses the font's own (B0-B2A). */
.s-site .s-service-card {
  line-height: var(--lh-normal);
}

.s-site .s-service-card__pill {
  position: absolute;
  inset-block-start: var(--sp-12);
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--radius-pill);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
}

.s-site .s-service-card__size {
  inset-inline-start: var(--sp-12);
  background: var(--color-surface);
  color: var(--color-brand-dark);
}

.s-site .s-service-card__featured {
  inset-inline-end: var(--sp-12);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
  font-size: var(--fs-12);
}

.s-site .s-service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-16);
}

.s-site .s-service-card__category {
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--color-action-text);
}

.s-site .s-service-card .s-card__title {
  font-size: var(--fs-17);
  line-height: var(--lh-normal);
}

.s-site .s-service-card__provider {
  font-size: var(--fs-13);
  color: var(--color-text-strong);
}

.s-site .s-service-card__provider strong {
  font-weight: var(--fw-600);
}

.s-site .s-service-card__city {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-service-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-block-start: auto;
  padding-block-start: var(--sp-10);
  border-block-start: 1px solid var(--color-border-subtle);
}

.s-site .s-service-card__book {
  --btn-padding: var(--sp-16);
}

.s-site .s-price {
  font-family: var(--font-display);
  font-size: var(--fs-19);
  font-weight: var(--fw-700);
  color: var(--color-brand-dark);
}

.s-site .s-price__currency {
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
}

.s-site .s-price__old {
  font-size: var(--fs-13);
  font-weight: var(--fw-400);
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.s-site .s-price__pending {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--color-text-secondary);
}

/* Row layout (lists) */
.s-site .s-service-card--row {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-14);
  padding: var(--sp-14);
}

.s-site .s-service-card--row .s-service-card__media {
  flex-shrink: 0;
  width: 96px;
  height: 76px;
  border-radius: var(--r-12);
}

.s-site .s-service-card--row .s-service-card__media img {
  width: 84px;
  height: 60px;
}

/* lg — home "most requested" (board 20: 190px image, body gap 10, title 18, price 20; board 63 phone: 170px image,
   body padding 14 / gap 6). No city line (the boards show none). */
.s-site .s-service-card--lg .s-service-card__media {
  height: 170px;
}

.s-site .s-service-card--lg .s-service-card__body {
  gap: var(--sp-6);
  padding: var(--sp-14);
}

@media (min-width: 640px) {
  .s-site .s-service-card--lg .s-service-card__media {
    height: 190px;
  }

  .s-site .s-service-card--lg .s-service-card__body {
    gap: var(--sp-10);
    padding: var(--sp-16);
  }

  .s-site .s-service-card--lg .s-card__title {
    font-size: var(--fs-18);
  }

  .s-site .s-service-card--lg .s-price {
    font-size: var(--fs-20);
  }
}

.s-site .s-service-card--row .s-service-card__body {
  gap: var(--sp-4);
  padding: 0;
}

.s-site .s-service-card--row .s-card__title {
  font-size: var(--fs-15);
}

/* Row meta (board 61 "صف قائمة"): desktop = provider then price stacked; phone = one line "بواسطة … · 500 ر.س".
   Price here is Readex 16/700 with the currency at the same size (no struck price). */
.s-site .s-service-card--row .s-service-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-4);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-service-card--row .s-service-card__provider {
  color: var(--color-text-secondary);
}

.s-site .s-service-card--row .s-price {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.s-site .s-service-card--row .s-service-card__provider + .s-price::before {
  content: '· ';
}

.s-site .s-service-card--row .s-price__currency {
  font-size: inherit;
  font-weight: inherit;
}

.s-site .s-service-card--row .s-price__old {
  display: none;
}

.s-site .s-service-card--row {
  gap: var(--sp-12);
  padding: var(--sp-10);
  border-radius: var(--r-14);
}

.s-site .s-service-card--row .s-service-card__media {
  width: 76px;
  height: 60px;
  border-radius: var(--r-10);
}

.s-site .s-service-card--row .s-service-card__media img {
  width: 66px;
  height: 46px;
}

@media (min-width: 640px) {
  .s-site .s-service-card--row {
    gap: var(--sp-14);
    padding: var(--sp-14);
    border-radius: var(--r-16);
  }

  .s-site .s-service-card--row .s-service-card__media {
    width: 96px;
    height: 76px;
    border-radius: var(--r-12);
  }

  .s-site .s-service-card--row .s-service-card__media img {
    width: 84px;
    height: 60px;
  }

  .s-site .s-service-card--row .s-service-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .s-site .s-service-card--row .s-service-card__provider + .s-price::before {
    content: none;
  }

  .s-site .s-service-card--row .s-price {
    font-family: var(--font-display);
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-brand-dark);
  }
}

/* ---- Content card ---- */
.s-site .s-content-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-sunken);
  color: var(--color-text-muted);
}

.s-site .s-content-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-site .s-content-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-18);
}

.s-site .s-content-card .s-card__title {
  font-size: var(--fs-18);
  line-height: var(--lh-150);
}

.s-site .s-content-card__tag {
  align-self: flex-start;
}

.s-site .s-content-card__meta {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-content-card__text {
  font-size: var(--fs-14);
  line-height: var(--lh-170);
  color: var(--color-text-secondary);
}

.s-site .s-content-card__more {
  color: var(--color-action-text);
  margin-block-start: auto;
  padding-block: var(--sp-6);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

/* ---- Order card ---- */
.s-site .s-order-card {
  gap: var(--sp-12);
  padding: var(--sp-14);
}

.s-site .s-order-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
}

.s-site .s-order-card__media {
  flex-shrink: 0;
  width: 64px;
  height: 50px;
  border-radius: var(--r-10);
}

.s-site .s-order-card__media img {
  width: 56px;
  height: 40px;
}

.s-site .s-order-card__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.s-site .s-order-card__ref {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.s-site .s-order-card .s-card__title {
  font-size: var(--fs-15);
  line-height: var(--lh-150);
}

.s-site .s-order-card__status {
  align-self: flex-start;
}

.s-site .s-order-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-block-start: var(--sp-10);
  border-block-start: 1px solid var(--color-border-subtle);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-order-card__dates-wide,
.s-site .s-order-card__side {
  display: none;
}

.s-site .s-order-card__action {
  --btn-font-size: var(--fs-15);
}

@media (min-width: 640px) {
  .s-site .s-order-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-16);
    padding: var(--sp-16);
  }

  .s-site .s-order-card__head {
    flex: 1 1 240px;
    align-items: center;
    gap: var(--sp-16);
  }

  .s-site .s-order-card__media {
    width: 80px;
    height: 60px;
  }

  .s-site .s-order-card__media img {
    width: 70px;
    height: 48px;
  }

  .s-site .s-order-card__ref {
    font-size: var(--fs-13);
  }

  .s-site .s-order-card .s-card__title {
    font-size: var(--fs-16);
  }

  .s-site .s-order-card__status--phone,
  .s-site .s-order-card__meta {
    display: none;
  }

  .s-site .s-order-card__dates-wide {
    display: block;
    font-size: var(--fs-13);
    color: var(--color-text-secondary);
  }

  .s-site .s-order-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-8);
    font-size: var(--fs-13);
    color: var(--color-text-secondary);
  }

  .s-site .s-order-card__action {
    --btn-height: var(--h-44);
    --btn-padding: var(--sp-16);
    --btn-font-size: var(--fs-14);
    display: inline-flex;
    width: auto;
  }
}

/* ---- resources\css\site\components\dialog.css ---- */
/* Dialogs — one base for every overlay, driven by the single dialog manager (resources/js/site/components/dialog.js).
   Native <dialog> + showModal(): the page behind is inert, Esc closes, focus is moved in and restored.

   modal       (board 61 "نافذة منبثقة"): white, radius 24, shadow e4, backdrop rgba(13,22,20,.62);
               head padding 18 20 14 + rule concrete-100, title Readex 18/600 brand-dark, subtitle 13 secondary,
               44px close (border concrete-200, concrete-700 icon); body padding 18 20; footer padding 12 20 + rule.
               Below 640px the modal becomes a full-screen page (board 61 note).
   sheet       (board 61 "الورقة السفلية"): bottom, top radius 24, 44×5 handle concrete-300, head padding 10 16 12,
               body padding 16, footer padding 12 16 20, shadow up, backdrop .55. Max 560px wide on larger screens.
   fullscreen  (board 62 mobile menu): the whole viewport, white. */

.s-site .s-dialog {
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  overflow: hidden;
}

.s-site .s-dialog::backdrop {
  background: var(--color-overlay-dialog);
}

.s-site .s-dialog[open] {
  display: flex;
  flex-direction: column;
}

.s-site .s-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-18) var(--sp-20) var(--sp-14);
  border-block-end: 1px solid var(--color-border-subtle);
}

.s-site .s-dialog__titles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.s-site .s-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
  color: var(--color-brand-dark);
}

.s-site .s-dialog__subtitle {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-dialog__close {
  --btn-border: var(--color-border);
  --btn-fg: var(--color-text-strong);
}

.s-site .s-dialog__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-18) var(--sp-20);
}

.s-site .s-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-12) var(--sp-20);
  border-block-start: 1px solid var(--color-border-subtle);
}

/* Modal: full screen on phones, centred card from 640px. */
.s-site .s-dialog--modal {
  width: 100vw;
  height: 100dvh;
}

@media (min-width: 640px) {
  .s-site .s-dialog--modal {
    width: min(var(--dialog-width, 640px), calc(100vw - 2 * var(--sp-24)));
    height: auto;
    max-height: calc(100dvh - 2 * var(--sp-24));
    border-radius: var(--radius-dialog);
    box-shadow: var(--shadow-dialog);
  }

  .s-site .s-dialog--wide {
    --dialog-width: 760px;
  }

  .s-site .s-dialog--narrow {
    --dialog-width: 480px;
  }
}

/* Bottom sheet */
.s-site .s-dialog--sheet {
  width: min(100vw, 560px);
  max-height: 88dvh;
  margin-block-end: 0;
  border-radius: var(--radius-dialog) var(--radius-dialog) 0 0;
  box-shadow: var(--shadow-sheet);
}

.s-site .s-dialog--sheet::backdrop {
  background: var(--color-overlay-sheet);
}

.s-site .s-dialog__handle {
  align-self: center;
  width: var(--h-44);
  height: 5px;
  margin-block-start: var(--sp-10);
  border-radius: 5px;
  background: var(--color-handle);
}

.s-site .s-dialog--sheet .s-dialog__head {
  padding: var(--sp-10) var(--sp-16) var(--sp-12);
}

.s-site .s-dialog--sheet .s-dialog__title {
  color: var(--color-text-primary);
}

.s-site .s-dialog--sheet .s-dialog__body {
  padding: var(--sp-16);
}

.s-site .s-dialog--sheet .s-dialog__footer {
  padding: var(--sp-12) var(--sp-16) var(--sp-20);
}

/* Full screen (mobile menu) */
.s-site .s-dialog--fullscreen {
  width: 100vw;
  height: 100dvh;
}

.s-site .s-dialog--fullscreen::backdrop {
  background: var(--color-surface);
}

/* Entry motion; reduced-motion users get none (base.css). */
.s-site .s-dialog[open] {
  animation: s-dialog-in 160ms var(--ease-standard);
}

.s-site .s-dialog--sheet[open] {
  animation-name: s-sheet-in;
}

@keyframes s-dialog-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes s-sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* Scroll lock while any dialog is open (set by the dialog manager on <body class="s-site">;
   body overflow propagates to the viewport). */
.s-site.s-scroll-locked {
  overflow: hidden;
}

/* ---- resources\css\site\components\header.css ---- */
/* Site header — <x-site.header>. Boards 20 (Home desktop) and 63 (MHome phone).
   Provider banner: pine-900 strip; desktop 56px rendered, 13px, truck icon; phone 42px rendered, 12px, short text + CTA.
   Desktop bar (≥1024px): 76px, white, bottom border; logo 42px; nav links 10/12px padding, radius 10, 15px,
   text concrete-700, current item pine-50 / pine-800 600; actions: login (secondary, 44px, padding 16) + book (44px).
   Phone bar (<1024px): 64px; 44px menu button (radius 12, border concrete-200); logo 34px; book button 40px (sm). */

.s-site .s-banner {
  background: var(--color-inverse-surface-deep);
  color: var(--color-on-inverse);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
}

/* Phone (board 63): padding 8, no minimum height (renders 42px), no icon, short text and CTA, label in body font. */
.s-site .s-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding-block: var(--sp-8);
}

.s-site .s-banner__text {
  margin: 0;
}

.s-site .s-banner__icon {
  display: none;
}

.s-site .s-banner__strong {
  font-weight: var(--fw-600);
  color: var(--color-on-inverse-strong);
}

.s-site .s-banner__link {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--radius-pill);
  background: var(--color-inverse-fill-hover);
  color: var(--color-on-inverse-strong);
  font-weight: var(--fw-600);
}

.s-site .s-banner__link:hover {
  background: var(--color-inverse-fill-hover);
  color: var(--color-on-inverse-strong);
}

.s-site .s-banner__long {
  display: none;
}

.s-site .s-header {
  position: relative;
  z-index: 20;
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}

.s-site .s-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: 64px;
}

.s-site .s-header__logo {
  display: block;
  flex-shrink: 0;
}

.s-site .s-header__logo img {
  display: block;
  height: 34px;
  width: auto;
}

.s-site .s-header__menu-button {
  --btn-border: var(--color-border);
  --btn-height: calc(var(--h-44) + 2px); /* board 63: 44px link + 1px borders, content-box → 46 */
}

.s-site .s-header__nav,
.s-site .s-header__actions {
  display: none;
}

.s-site .s-header__book-phone {
  display: inline-flex;
}

/* Desktop navigation */
.s-site .s-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-nav__item {
  position: relative;
}

.s-site .s-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-12);
  border: 0;
  border-radius: var(--r-10);
  background: transparent;
  color: var(--color-text-strong);
  font-size: var(--fs-15);
  font-weight: var(--fw-400);
  line-height: var(--lh-normal);
  text-decoration: none;
}

.s-site .s-nav__link:hover {
  background: var(--color-canvas);
  color: var(--color-text-primary);
}

.s-site .s-nav__link[aria-current='page'],
.s-site .s-nav__link--current {
  background: var(--color-action-subtle);
  color: var(--color-on-action-subtle);
  font-weight: var(--fw-600);
}

.s-site .s-nav__chevron {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.s-site .s-nav__link[aria-expanded='true'] .s-nav__chevron {
  transform: rotate(180deg);
}

.s-site .s-nav__submenu {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-6));
  inset-inline-start: 0;
  z-index: 30;
  min-width: 220px;
  margin: 0;
  padding: var(--sp-6);
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--r-12);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.s-site .s-nav__submenu[hidden] {
  display: none;
}

.s-site .s-nav__sublink {
  display: flex;
  align-items: center;
  min-height: var(--h-44);
  padding-inline: var(--sp-12);
  border-radius: var(--r-10);
  color: var(--color-text-strong);
  font-size: var(--fs-15);
}

.s-site .s-nav__sublink:hover,
.s-site .s-nav__sublink[aria-current='page'] {
  background: var(--color-action-subtle);
  color: var(--color-on-action-subtle);
}

@media (min-width: 640px) {
  .s-site .s-banner {
    font-size: var(--fs-13);
  }

  .s-site .s-banner__long {
    display: inline;
  }

  .s-site .s-banner__short {
    display: none;
  }

  /* Desktop (board 20): min-height 40 + padding 8 in content-box → 56px; 16px truck icon; label in Readex. */
  .s-site .s-banner__inner {
    min-height: calc(var(--h-40) + 2 * var(--sp-8));
  }

  .s-site .s-banner__text {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
  }

  .s-site .s-banner__icon {
    display: inline-block;
    color: var(--color-on-inverse-subtle); /* board 20: stroke #7cbfac */
  }

  .s-site .s-banner__strong {
    font-family: var(--font-display);
  }

  .s-site .s-banner__link {
    min-height: var(--h-32);
    padding: 0 var(--sp-14);
    background: var(--color-inverse-control);
  }
}

@media (min-width: 1024px) {
  .s-site .s-header__bar {
    flex-wrap: wrap;
    min-height: 76px;
  }

  .s-site .s-header__logo img {
    height: 42px;
  }

  .s-site .s-header__menu-button,
  .s-site .s-header__book-phone {
    display: none;
  }

  .s-site .s-header__nav,
  .s-site .s-header__actions {
    display: flex;
  }

  .s-site .s-header__actions {
    gap: var(--sp-8);
  }

  /* Board 20: the login button is 16px wide-padded, the book button keeps md (18px). */
  .s-site .s-header__login {
    --btn-padding: var(--sp-16);
    --btn-height: calc(var(--h-44) + 2px); /* board 20: 44px link + 1px borders, content-box → 46 */
  }
}

/* ---- resources\css\site\components\mobile-menu.css ---- */
/* Mobile menu — <x-site.mobile-menu>, board 62 (MMenu, 390×844). A full-screen dialog (s-dialog--fullscreen)
   managed by the shared dialog JS. Top bar 64px (logo 34px + 44px close); items 52px, radius 12, 16px;
   "الصفحات" group as <details> with 44px / 15px children and a 2px concrete-100 inline-start rule;
   footer: call button 48px + login / book 52px in two columns (15px). */

.s-site .s-mobile-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.s-site .s-mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 65px; /* board 62: 64 + 1px bottom border, content-box */
  padding-inline: var(--sp-16);
  border-block-end: 1px solid var(--color-border-subtle);
}

.s-site .s-mobile-menu__top img {
  display: block;
  height: 34px;
  width: auto;
}

.s-site .s-mobile-menu__close {
  --btn-border: var(--color-border);
  --btn-fg: var(--color-text-strong);
}

.s-site .s-mobile-menu__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-16);
}

.s-site .s-mobile-menu__link,
.s-site .s-mobile-menu__group > summary {
  display: flex;
  align-items: center;
  height: var(--h-52);
  padding-inline: var(--sp-14);
  border-radius: var(--r-12);
  color: var(--color-text-primary);
  font-size: var(--fs-16);
  text-decoration: none;
  line-height: var(--lh-normal);
}

.s-site .s-mobile-menu__group > summary {
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.s-site .s-mobile-menu__group > summary::-webkit-details-marker {
  display: none;
}

.s-site .s-mobile-menu__link[aria-current='page'] {
  background: var(--color-action-subtle);
  color: var(--color-on-action-subtle);
  font-weight: var(--fw-600);
}

.s-site .s-mobile-menu__children {
  display: flex;
  flex-direction: column;
  margin-inline-start: var(--sp-14);
  padding-inline-start: var(--sp-14);
  padding-block-end: var(--sp-6);
  border-inline-start: 2px solid var(--color-border-subtle);
}

.s-site .s-mobile-menu__sublink {
  display: flex;
  align-items: center;
  height: var(--h-44);
  padding-inline: var(--sp-14);
  color: var(--color-text-strong);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
}

.s-site .s-mobile-menu__sublink[aria-current='page'] {
  color: var(--color-on-action-subtle);
  font-weight: var(--fw-600);
}

.s-site .s-mobile-menu__divider {
  height: 1px;
  margin-block: var(--sp-8);
  background: var(--color-border-subtle);
}

.s-site .s-mobile-menu__secondary {
  height: var(--h-48);
  color: var(--color-text-strong);
  font-size: var(--fs-15);
}

.s-site .s-mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-12) var(--sp-16) var(--sp-20);
  border-block-start: 1px solid var(--color-border-subtle);
}

.s-site .s-mobile-menu__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-10);
}

/* Board 62 uses 15px text on its 52px buttons (xl is 16px elsewhere). Its bordered buttons are links with
   1px borders in content-box, so they render 2px taller: call 48 → 50, login 52 → 54. The nav takes the rest
   of the height, so these heights also set how much the board's 52px menu links shrink (to 49.27px). */
.s-site .s-mobile-menu__actions .s-btn {
  --btn-font-size: var(--fs-15);
}

.s-site .s-mobile-menu__actions .s-btn--secondary {
  --btn-height: calc(var(--h-52) + 2px);
}

.s-site .s-mobile-menu__footer > .s-btn--secondary {
  --btn-height: calc(var(--h-48) + 2px);
  gap: var(--sp-8);
}

/* ---- resources\css\site\components\footer.css ---- */
/* Site footer — <x-site.footer>. Boards 20 (desktop) and 63 (phone).
   Desktop: pine-800 band, padding 48 / 24, columns auto-fit min 200px gap 32; brand 20px/700 white; about 14px/1.8
   pine-200; newsletter input 44px radius 10 on white 8%; 40px social squares; group titles 15px white, links 14px
   pine-100 gap 10; bottom rule white 12%, copyright 13px pine-300.
   Phone (D17 — the 9 phone boards): 13px pine-200, padding 24 / 28, everything 14px apart; brand 18px; newsletter
   13px; link groups are collapsed <details> with the native disclosure marker (summary white 600, padding 12);
   one "phone · e-mail" line; no about text, social links, address, contact title or copyright (data kept). */

.s-site .s-footer {
  background: var(--color-inverse-surface);
  color: var(--color-on-inverse-muted);
  font-size: var(--fs-13);
  line-height: var(--lh-normal); /* board: only the about text sets a line-height (1.8) */
}

.s-site .s-footer a {
  color: var(--color-on-inverse);
}

.s-site .s-footer a:hover {
  color: var(--color-on-inverse-strong);
}

.s-site .s-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding-block: var(--sp-24) var(--sp-28);
}

.s-site .s-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-14);
}

.s-site .s-footer__about {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
}

/* Phone: hidden parts (D17). */
.s-site .s-footer__text,
.s-site .s-footer__social,
.s-site .s-footer__address,
.s-site .s-footer__contact-title,
.s-site .s-footer__bottom {
  display: none;
}

.s-site .s-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-700);
  color: var(--color-on-inverse-strong);
}

.s-site .s-footer__brand img {
  display: block;
  height: 34px;
  width: auto;
}

.s-site .s-footer__text {
  font-size: var(--fs-14);
  line-height: var(--lh-180);
  color: var(--color-on-inverse-muted);
}

.s-site .s-footer__newsletter {
  display: flex;
  gap: var(--sp-6);
}

/* board 20: height 44 + 1px borders, content-box → 46 (the subscribe button stays 44) */
.s-site .s-footer__input {
  flex: 1;
  min-width: 0;
  height: calc(var(--h-44) + 2px);
  padding-inline: var(--sp-10);
  border: 1px solid var(--color-inverse-border);
  border-radius: var(--r-10);
  background: var(--color-inverse-fill);
  color: var(--color-on-inverse-strong);
  font-size: inherit;
}

.s-site .s-footer__input::placeholder {
  color: var(--color-on-inverse-muted);
  opacity: 1;
}

.s-site .s-footer__input:focus-visible {
  outline: 2px solid var(--color-on-inverse-strong);
  outline-offset: 2px;
}

.s-site .s-footer__subscribe {
  height: var(--h-44);
  padding-inline: var(--sp-14);
  border: 0;
  border-radius: var(--r-10);
  background: var(--color-on-inverse-strong);
  color: var(--color-inverse-surface);
  font-size: inherit;
  font-weight: var(--fw-600);
}

.s-site .s-footer :focus-visible {
  outline-color: var(--color-on-inverse-strong);
}

.s-site .s-footer__social {
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-40);
  height: var(--h-40);
  border-radius: var(--r-10);
  background: var(--color-inverse-fill);
  color: var(--color-on-inverse-strong);
  font-size: var(--fs-12);
}

.s-site .s-footer__social a:hover {
  background: var(--color-inverse-fill-hover);
}

.s-site .s-footer__group {
  border-block-start: 1px solid var(--color-inverse-line);
  padding-block-start: var(--sp-10);
}

.s-site .s-footer__title {
  margin: 0;
  padding-block: var(--sp-12);
  color: var(--color-on-inverse-strong);
  font-weight: var(--fw-600);
  cursor: pointer;
}

.s-site .s-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
  padding: var(--sp-8) 0 0;
  list-style: none;
}

.s-site .s-footer__links a {
  color: var(--color-on-inverse);
}

/* Phone: the contact column is one line, "phone · e-mail", read left to right and aligned to the start (D17). */
.s-site .s-footer__group--contact {
  border-block-start: 0;
  padding-block-start: 0;
}

.s-site .s-footer__contact {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  direction: ltr;
}

.s-site .s-footer__contact a {
  color: inherit;
}

.s-site .s-footer__contact li + li::before {
  content: '\00a0\00b7\00a0';
}

.s-site .s-footer__bottom {
  padding-block-start: var(--sp-20);
  border-block-start: 1px solid var(--color-inverse-line);
  font-size: var(--fs-13);
  color: var(--color-on-inverse-subtle);
}

@media (min-width: 640px) {
  .s-site .s-footer__inner {
    gap: var(--sp-32);
    padding-block: var(--sp-48) var(--sp-24);
  }

  .s-site .s-footer {
    color: var(--color-on-inverse);
    font-size: var(--fs-14);
  }

  .s-site .s-footer__inner {
    padding-block-end: var(--sp-24);
  }

  .s-site .s-footer__columns {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-32);
  }

  .s-site .s-footer__about {
    gap: var(--sp-12);
  }

  .s-site .s-footer__text,
  .s-site .s-footer__contact-title,
  .s-site .s-footer__bottom {
    display: block;
  }

  .s-site .s-footer__social {
    display: flex;
  }

  .s-site .s-footer__address {
    display: list-item;
  }

  .s-site .s-footer__newsletter {
    margin-block-start: var(--sp-4);
  }

  .s-site .s-footer__input {
    padding-inline: var(--sp-12);
  }

  .s-site .s-footer__subscribe {
    padding-inline: var(--sp-16);
  }

  .s-site .s-footer__brand {
    font-size: var(--fs-20);
  }

  .s-site .s-footer__group {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .s-site .s-footer__title {
    padding-block: 0;
    font-size: var(--fs-15);
    font-weight: var(--fw-700); /* board 20: <strong>, bold */
    list-style: none;
    cursor: default;
    pointer-events: none;
  }

  .s-site .s-footer__title::-webkit-details-marker {
    display: none;
  }

  .s-site .s-footer__links {
    padding-block-start: var(--sp-10);
  }

  .s-site .s-footer__contact {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-10);
    padding-block-start: var(--sp-10);
    direction: inherit;
  }

  .s-site .s-footer__contact a {
    color: var(--color-on-inverse);
  }

  .s-site .s-footer__contact li + li::before {
    content: none;
  }
}

/* The contact column is not collapsible (board 63 shows it as plain text). */
.s-site .s-footer__group--contact .s-footer__title {
  cursor: default;
}

/* ---- resources\css\site\components\breadcrumbs.css ---- */
/* Breadcrumbs — <x-site.breadcrumbs> (board 21 "مسار التنقل"): 14px secondary links, current page in primary text,
   "›" with 8px around (mirrors in RTL like the board's own character). */
.s-site .s-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-breadcrumbs__item {
  display: flex;
  gap: var(--sp-8);
}

.s-site .s-breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.s-site .s-breadcrumbs [aria-current='page'] {
  color: var(--color-text-primary);
}

/* ---- resources\css\site\components\category-card.css ---- */
/* Category card — <x-site.category-card> (board 20 / 63 "فئات الحاويات").
   Phone: padding 12, gap 10, 48px tile radius 12 (image 42×30), name 14/600, count 12, radius 14.
   Desktop: padding 18, gap 14, 56px tile radius 14 (image 48×34), name Readex 16/600, count 13, radius 16. */
.s-site .s-category-card {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  height: 100%;
  padding: var(--sp-12);
  border: 1px solid var(--color-border);
  border-radius: var(--r-14);
  background: var(--color-surface);
  color: var(--color-text-primary);
  line-height: var(--lh-normal);
  text-decoration: none;
}

.s-site a.s-category-card:hover {
  border-color: var(--color-border-hover);
}

.s-site .s-category-card__tile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--h-48);
  height: var(--h-48);
  border-radius: var(--r-12);
  background: var(--color-action-subtle);
  color: var(--color-action);
}

.s-site .s-category-card__tile img {
  width: 42px;
  height: 30px;
  object-fit: contain;
}

.s-site .s-category-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.s-site .s-category-card__name {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

.s-site .s-category-card__count {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

@media (min-width: 640px) {
  .s-site .s-category-card {
    gap: var(--sp-14);
    padding: var(--sp-18);
    border-radius: var(--r-16);
  }

  .s-site .s-category-card__tile {
    width: 56px;
    height: 56px;
    border-radius: var(--r-14);
  }

  .s-site .s-category-card__tile img {
    width: 48px;
    height: 34px;
  }

  .s-site .s-category-card__text {
    gap: var(--sp-4);
  }

  .s-site .s-category-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-16);
  }

  .s-site .s-category-card__count {
    font-size: var(--fs-13);
  }
}

/* ---- resources\css\site\components\provider-card.css ---- */
/* Provider card — <x-site.provider-card> (board 20 featured providers, board 63 phone row).
   Phone: padding 14, gap 10, radius 14; 44px initial tile radius 12; name 14/600; "visit" 40px radius 10.
   Desktop: padding 18, gap 12, radius 16; 56px tile radius 14, Readex 22/700; name Readex 16/600, place 13;
   count 13 strong; "زيارة المتجر" 44px radius 12, 1px concrete-300, 15/600. The name link covers the card. */
.s-site .s-provider-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  height: 100%;
  padding: var(--sp-14);
  border: 1px solid var(--color-border);
  border-radius: var(--r-14);
  background: var(--color-surface);
  color: var(--color-text-primary);
  line-height: var(--lh-normal);
}

.s-site .s-provider-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.s-site .s-provider-card__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border-radius: var(--r-12);
  background: var(--color-action-subtle);
  color: var(--color-action);
  font-weight: var(--fw-700);
}

.s-site .s-provider-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-site .s-provider-card__id {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.s-site .s-provider-card__name {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

.s-site .s-provider-card__name a {
  color: inherit;
  text-decoration: none;
}

.s-site .s-provider-card.s-card--linked .s-provider-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.s-site .s-provider-card__place,
.s-site .s-provider-card__count {
  display: none;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-provider-card__count {
  color: var(--color-text-strong);
}

.s-site .s-provider-card__visit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h-40);
  margin-block-start: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-10);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

.s-site .s-provider-card:hover .s-provider-card__visit {
  background: var(--color-canvas);
}

@media (min-width: 640px) {
  .s-site .s-provider-card {
    gap: var(--sp-12);
    padding: var(--sp-18);
    border-radius: var(--r-16);
  }

  .s-site .s-provider-card__head {
    gap: var(--sp-12);
  }

  .s-site .s-provider-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--r-14);
    font-family: var(--font-display);
    font-size: var(--fs-22);
  }

  .s-site .s-provider-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-16);
  }

  .s-site .s-provider-card__place,
  .s-site .s-provider-card__count {
    display: block;
  }

  .s-site .s-provider-card__visit {
    height: calc(var(--h-44) + 2px); /* a link with 1px borders, content-box (board 20) */
    border-radius: var(--r-12);
    font-size: var(--fs-15);
  }
}

/* ---- Directory variant (boards 22 / 66; board 61 "مميز / عادي · صفحة مقدمي الخدمات") ----
   Phone (board 66): a 14px-padded row card — 52px tile, name Readex 16/600 with one muted line "place · ★ rating · count"
   under it, the "مميز" pill at the end, a 42px outlined "visit". Desktop: 88px dark band with the warning stripe, the 60px
   tile overlapping it (margin-top -28), name Readex 18/600, place 14, rating + count line 14, 44px outlined visit button. */
.s-site .s-provider-card--directory {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-16);
}

.s-site .s-provider-card--directory .s-provider-card__banner,
.s-site .s-provider-card--directory .s-provider-card__stats,
.s-site .s-provider-card--directory .s-provider-card__place {
  display: none;
}

.s-site .s-provider-card--directory .s-provider-card__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'avatar id featured'
    'visit visit visit';
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-14);
}

.s-site .s-provider-card--directory .s-provider-card__avatar {
  grid-area: avatar;
  width: 52px;
  height: 52px;
  border-radius: var(--r-14);
  font-family: var(--font-display);
  font-size: var(--fs-20);
}

.s-site .s-provider-card--directory .s-provider-card__id {
  grid-area: id;
  gap: var(--sp-2);
}

.s-site .s-provider-card--directory .s-provider-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-16);
}

.s-site .s-provider-card--directory .s-provider-card__meta {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-provider-card--directory .s-provider-card__featured {
  grid-area: featured;
  padding: 3px var(--sp-8);
  border-radius: var(--radius-pill);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
  font-size: var(--fs-11);
  font-weight: var(--fw-700);
}

.s-site .s-provider-card--directory .s-provider-card__visit {
  grid-area: visit;
  margin-block-start: 0;
}

.s-site .s-provider-card--directory .s-provider-card__star {
  color: var(--color-star);
}

@media (min-width: 640px) {
  .s-site .s-provider-card--directory .s-provider-card__banner {
    position: relative;
    display: block;
    height: 88px;
    background: var(--color-hero-surface);
  }

  .s-site .s-provider-card--directory .s-provider-card__banner::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 6px;
    background: repeating-linear-gradient(135deg, var(--stripe-red) 0 12px, var(--color-dot-light) 12px 24px);
  }

  .s-site .s-provider-card--directory .s-provider-card__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-12);
    padding: 0 var(--sp-18) var(--sp-18);
  }

  .s-site .s-provider-card--directory .s-provider-card__featured {
    position: absolute;
    inset-block-start: var(--sp-12);
    inset-inline-start: var(--sp-12);
    padding: var(--sp-4) var(--sp-10);
    font-size: var(--fs-12);
    font-weight: var(--fw-600);
  }

  .s-site .s-provider-card--directory .s-provider-card__avatar {
    position: relative;
    align-self: flex-start;
    box-sizing: border-box;
    width: 62px; /* board: 60 + 1px borders, content-box */
    height: 62px;
    margin-block-start: -28px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-16);
    background: var(--color-surface);
    font-size: var(--fs-24);
    box-shadow: var(--shadow-e1);
  }

  .s-site .s-provider-card--directory .s-provider-card__id {
    gap: var(--sp-4);
  }

  .s-site .s-provider-card--directory .s-provider-card__name {
    font-size: var(--fs-18);
  }

  .s-site .s-provider-card--directory .s-provider-card__place {
    display: block;
    font-size: var(--fs-14);
  }

  .s-site .s-provider-card--directory .s-provider-card__meta {
    display: none;
  }

  .s-site .s-provider-card--directory .s-provider-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-16);
    font-size: var(--fs-14);
    color: var(--color-text-strong);
  }

  .s-site .s-provider-card--directory .s-provider-card__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
  }

  .s-site .s-provider-card--directory .s-provider-card__count {
    display: inline;
    font-size: inherit;
    font-weight: var(--fw-400);
    color: inherit;
  }

  .s-site .s-provider-card--directory .s-provider-card__visit {
    margin-block-start: auto;
    height: calc(var(--h-44) + 2px);
  }
}

/* ---- resources\css\site\components\page-hero.css ---- */
/* Page hero band — <x-site.page-hero> (boards 24 / 64 services, 23 / 67 provider profile).
   Band: inverse surface, the "V" mark at the end corner, breadcrumb 13 on the muted inverse colour, title Readex 700 with
   a 3px white bar (clamp(1.9rem, 3vw, 2.5rem); phone 26), warning stripe 6px / 14px stops (phone 5px / 10px).
   Padding 40 / 44 (phone 22 / 24). Profile variant: 96px white tile (phone 72), title without the bar, facts row,
   stripe 8px / 16px stops. */
.s-site .s-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-hero-surface);
  color: var(--color-on-inverse-strong);
  line-height: var(--lh-normal);
}

.s-site .s-page-hero__mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 120px;
  aspect-ratio: 100 / 86;
  pointer-events: none;
}

.s-site .s-page-hero__mark span {
  position: absolute;
  inset: 0;
}

.s-site .s-page-hero__mark span:first-child {
  transform: translateX(-40%);
  background: var(--color-mark-on-inverse-soft);
  clip-path: polygon(0 0, 24% 0, 74% 100%, 50% 100%);
}

.s-site .s-page-hero__mark span:last-child {
  background: var(--color-mark-on-inverse);
  clip-path: polygon(0 0, 24% 0, 50% 52%, 76% 0, 100% 0, 50% 100%);
}

.s-site .s-page-hero__inner {
  position: relative;
  padding-block: var(--sp-22) var(--sp-24);
}

.s-site .s-page-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.s-site .s-page-hero__crumbs {
  display: none;
}

.s-site .s-page-hero .s-breadcrumbs__list {
  font-size: var(--fs-13);
  color: var(--color-on-inverse-muted);
}

.s-site .s-page-hero .s-breadcrumbs a,
.s-site .s-page-hero .s-breadcrumbs [aria-current='page'] {
  color: var(--color-on-inverse-muted);
}

.s-site .s-page-hero__title {
  display: flex;
  gap: var(--sp-12);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: var(--fw-700);
  line-height: var(--lh-normal);
}

.s-site .s-page-hero__title::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--color-on-inverse-strong);
}

.s-site .s-page-hero__text {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-on-inverse);
}

.s-site .s-page-hero__stripe {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 5px;
  background: repeating-linear-gradient(135deg, var(--stripe-red) 0 10px, var(--color-dot-light) 10px 20px);
}

/* ---- Profile variant (phone first: tile above the title) ---- */
.s-site .s-page-hero--profile .s-page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding-block: var(--sp-22) var(--sp-28);
}

.s-site .s-page-hero--profile .s-page-hero__mark {
  width: 130px;
}

.s-site .s-page-hero--profile .s-page-hero__title {
  font-size: var(--fs-22);
}

.s-site .s-page-hero--profile .s-page-hero__title::before {
  display: none;
}

.s-site .s-page-hero__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-action);
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-700);
}

.s-site .s-page-hero__lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-site .s-page-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-13);
  color: var(--color-on-inverse);
}

.s-site .s-page-hero__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
}

.s-site .s-page-hero__fact--pill {
  padding: 1px var(--sp-8);
  border-radius: var(--radius-pill);
  background: var(--white-a12);
}

.s-site .s-page-hero__star {
  color: var(--color-star);
}

@media (min-width: 640px) {
  .s-site .s-page-hero__mark {
    width: 220px;
  }

  .s-site .s-page-hero__inner {
    padding-block: var(--sp-40) 44px;
  }

  .s-site .s-page-hero__crumbs {
    display: block;
  }

  .s-site .s-page-hero__title {
    gap: var(--sp-16);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
  }

  .s-site .s-page-hero__stripe {
    height: 6px;
    background: repeating-linear-gradient(135deg, var(--stripe-red) 0 14px, var(--color-dot-light) 14px 28px);
  }

  .s-site .s-page-hero--profile .s-page-hero__mark {
    display: none;
  }

  .s-site .s-page-hero--profile .s-page-hero__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-24);
    padding-block: 36px 44px;
  }

  .s-site .s-page-hero--profile .s-page-hero__body {
    flex: 1 1 420px;
    gap: var(--sp-8);
  }

  .s-site .s-page-hero--profile .s-page-hero__title {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
  }

  .s-site .s-page-hero--profile .s-page-hero__stripe {
    height: 8px;
    background: repeating-linear-gradient(135deg, var(--stripe-red) 0 16px, var(--color-dot-light) 16px 32px);
  }

  .s-site .s-page-hero__lead {
    width: 96px;
    height: 96px;
    border-radius: var(--r-24);
    font-size: 40px;
  }

  .s-site .s-page-hero__facts {
    gap: var(--sp-16);
    font-size: var(--fs-14);
  }
}

/* ---- Intro variant (boards 22 / 66): the phone shows the dark band with title + line; desktop a light block ---- */
.s-site .s-page-hero__eyebrow {
  display: none;
}

@media (min-width: 640px) {
  .s-site .s-page-hero--intro {
    background: var(--color-surface);
    color: var(--color-text-primary);
  }

  .s-site .s-page-hero--intro .s-page-hero__mark,
  .s-site .s-page-hero--intro .s-page-hero__stripe {
    display: none;
  }

  .s-site .s-page-hero--intro .s-page-hero__inner {
    padding-block: var(--sp-40) 0;
  }

  .s-site .s-page-hero--intro .s-page-hero__body {
    gap: var(--sp-8);
  }

  .s-site .s-page-hero--intro .s-page-hero__eyebrow {
    display: block;
    font-size: var(--fs-14);
    font-weight: var(--fw-600);
    color: var(--color-action);
  }

  .s-site .s-page-hero--intro .s-page-hero__title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
  }

  .s-site .s-page-hero--intro .s-page-hero__title::before {
    display: none;
  }

  .s-site .s-page-hero--intro .s-page-hero__text {
    font-size: var(--fs-16);
    color: var(--color-text-secondary);
  }
}

/* ---- resources\css\site\components\pagination.css ---- */
/* Pager — <x-site.pagination> (board 24: previous · numbers · next, 44px, radius 12, gap 6; board 64 phone: two 46px
   buttons around "1 من 2"). The current page is the filled action tile; a missing neighbour is a muted, unlinked tile. */
.s-site .s-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  line-height: var(--lh-normal);
}

.s-site .s-pagination__pages {
  display: none;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-pagination__step,
.s-site .s-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px; /* phone board: 46 + borders */
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-12);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--fs-14);
  text-decoration: none;
}

.s-site .s-pagination__step {
  flex: 1;
}

.s-site .s-pagination__step[aria-disabled='true'] {
  border-color: var(--color-border-subtle);
  color: var(--color-text-disabled);
}

.s-site a.s-pagination__step:hover,
.s-site .s-pagination__page:hover {
  background: var(--color-surface);
}

.s-site .s-pagination__page {
  width: 46px; /* board 24: 44 + borders */
  height: 46px;
}

.s-site .s-pagination__page[aria-current='page'] {
  width: 44px; /* the current tile has no border on the board */
  height: 44px;
  border: 0;
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--fw-600);
}

.s-site .s-pagination__gap {
  padding-inline: var(--sp-4);
  color: var(--color-text-secondary);
}

.s-site .s-pagination__status {
  padding-inline: var(--sp-12);
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-pagination a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .s-site .s-pagination {
    justify-content: center;
    gap: var(--sp-6);
  }

  .s-site .s-pagination__pages {
    display: flex;
  }

  .s-site .s-pagination__status {
    display: none;
  }

  .s-site .s-pagination__step {
    flex: none;
    height: 46px;
    padding-inline: var(--sp-14);
  }
}

/* ---- resources\css\site\components\booking.css ---- */
/* Booking modal — site/booking/modal.blade.php on the shared dialog (dialog.css), B1-B1.
   Phone (boards 11, 68, 12, 69, 13; < 640px): full screen; head 14 16 12 with back 44 (concrete-50), title Readex
   18/600 brand-dark, "الخطوة ١ من ٥" 13; five 4px progress bars, gap 6; body 18 16, gap 22; footer 12 16 20 with
   "عرض الملخص" (40px) + total Readex 20/700 and a full-width 52px action, soft shadow up. The summary opens as a
   panel stuck to the bottom of the scroll area (and sits under the review on step 5).
   Card (from 640px): dialog radius 24 / shadow e4; head 22 32 18, title Readex 22/600, subtitle 14; numbered stepper
   (32px dots, current ring 4px pine-100, pending 1.5px concrete-300, done = check) 0 32 20 with 2px connectors;
   body 24 32; footer 16 32 with Previous (48, padding 0 22) and Next (48, padding 0 28). Board size 1000 × 740.
   From 1024px: summary column 300px on concrete-50 (padding 28 24, gap 18) and the two-column date step. */

.s-site .s-dialog--booking {
  --bk-pad: var(--sp-16);
}

.s-site .s-booking,
.s-site .s-booking :is(h2, h3) {
  line-height: var(--lh-normal); /* the boards set none; site headings default to 1.35 */
}

/* ---- Head ---- */
.s-site .s-booking__head {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-14) var(--bk-pad) 0;
}

.s-site .s-booking__back {
  --btn-height: var(--h-44);
  --btn-bg: var(--color-canvas);
  --btn-fg: var(--color-text-strong);
  --btn-padding: 0;
  --btn-radius: var(--r-12);
  width: var(--h-44);
}

.s-site .s-booking[data-step='1'] .s-booking__back {
  display: none;
}

.s-site .s-booking__titles {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.s-site .s-booking__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
  color: var(--color-brand-dark);
}

.s-site .s-booking__title-wide,
.s-site .s-booking__subtitle {
  display: none;
}

.s-site .s-booking__subtitle,
.s-site .s-booking__count {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-booking__close {
  --btn-border: var(--color-border);
  --btn-fg: var(--color-text-strong);
}

/* ---- Progress: bars on phones, numbered stepper on cards ---- */
.s-site .s-booking__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-6);
  margin: 0;
  padding: var(--sp-12) var(--bk-pad);
  border-block-end: 1px solid var(--color-border-subtle);
  list-style: none;
}

.s-site .s-booking__line {
  display: none;
}

.s-site .s-booking__step-mark {
  height: 4px;
  border-radius: 4px;
  background: var(--color-border);
}

.s-site .s-booking__step-mark.is-done,
.s-site .s-booking__step-mark.is-current {
  background: var(--color-action);
}

.s-site .s-booking__dot,
.s-site .s-booking__mark-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Body and summary ---- */
.s-site .s-booking__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.s-site .s-booking__body {
  flex: 1 0 auto;
  padding: var(--sp-18) var(--bk-pad);
}

.s-site .s-booking__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-22);
}

.s-site .s-booking__panel[hidden] {
  display: none;
}

.s-site .s-booking__panel:focus {
  outline: none;
}

.s-site .s-booking__summary {
  display: none;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--sp-18) var(--bk-pad);
  border-block-start: 1px solid var(--color-border-subtle);
  background: var(--color-canvas);
}

.s-site .s-booking.is-summary-open .s-booking__summary {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  box-shadow: var(--shadow-bar-up-soft);
}

.s-site .s-booking[data-step='5'] .s-booking__summary {
  position: static;
  display: flex;
  box-shadow: none;
}

.s-site .s-booking__summary-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
}

.s-site .s-bk-sum {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  margin: 0;
  font-size: var(--fs-14);
}

.s-site .s-bk-sum > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-12);
}

.s-site .s-bk-sum > div[hidden] {
  display: none;
}

.s-site .s-bk-sum dt {
  color: var(--color-text-secondary);
}

.s-site .s-bk-sum dd {
  margin: 0;
  font-weight: var(--fw-600);
  text-align: end;
}

.s-site .s-bk-sum__sub {
  display: block;
  font-weight: var(--fw-400);
  color: var(--color-text-secondary);
}

.s-site .s-booking[data-step='5'] .s-bk-sum > div:not([data-s-sum-row='rent']) {
  display: none;
}

.s-site .s-booking[data-step='5'] .s-bk-sum > div[data-s-sum-row='rent'] {
  display: flex;
}

.s-site .s-bk-sum__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block-start: var(--sp-18);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
}

.s-site .s-bk-sum__pay {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}

.s-site .s-bk-sum__pay[hidden] {
  display: none;
}

.s-site .s-bk-sum__pay strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-600);
  text-align: end;
}

.s-site .s-bk-amount {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-700);
  color: var(--color-brand-dark);
  white-space: nowrap;
}

.s-site .s-bk-amount__currency {
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
}

.s-site .s-bk-amount--total {
  font-size: var(--fs-26);
}

.s-site .s-bk-amount--total .s-bk-amount__currency {
  font-size: var(--fs-14);
}

.s-site .s-bk-note {
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-160);
  color: var(--color-text-secondary);
}

.s-site .s-bk-note[hidden] {
  display: none;
}

/* ---- Footer ---- */
.s-site .s-booking__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-12) var(--bk-pad) calc(var(--sp-20) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  box-shadow: var(--shadow-bar-up-soft);
}

.s-site .s-booking__summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--h-40);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}

.s-site .s-booking__summary-label {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-booking__summary-toggle[aria-expanded='true'] .s-icon {
  transform: rotate(180deg);
}

.s-site .s-booking[data-step='5'] .s-booking__summary-toggle,
.s-site .s-booking__prev {
  display: none;
}

.s-site .s-booking__prev {
  gap: var(--sp-8);
}

.s-site .s-booking__prev:disabled .s-icon {
  display: none; /* board 1: the disabled "السابق" has no arrow */
}

.s-site .s-booking__next,
.s-site .s-booking__submit {
  --btn-height: var(--h-52);
  --btn-font-size: var(--fs-16);
}

.s-site .s-booking__next[hidden],
.s-site .s-booking__submit[hidden] {
  display: none;
}

/* ---- Shared step pieces ---- */
.s-site .s-bk-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.s-site .s-bk-block__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
}

.s-site fieldset.s-bk-block > legend {
  margin-block-end: var(--sp-10);
}

.s-site .s-bk-link {
  padding: var(--sp-8) var(--sp-4);
  border: 0;
  background: none;
  color: var(--color-action);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  text-decoration: underline;
  cursor: pointer;
}

.s-site .s-bk-link[hidden] {
  display: none;
}

/* Step 1: container + durations */
.s-site .s-bk-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
}

.s-site .s-bk-item__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: var(--color-action-subtle);
  color: var(--color-text-disabled);
}

.s-site .s-bk-item__media img {
  width: 220px;
  height: 140px;
  object-fit: contain;
}

.s-site .s-bk-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-14);
}

.s-site .s-bk-item__category {
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  color: var(--color-action);
}

.s-site .s-bk-item__name {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
}

.s-site .s-bk-item__pills {
  display: none;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.s-site .s-bk-item__pills span {
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
  font-size: var(--fs-13);
  color: var(--color-text-strong);
}

.s-site .s-bk-item__provider {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-inline-end: 64px; /* room for "تغيير" on phones */
  font-size: var(--fs-13);
  color: var(--color-text-strong);
}

.s-site .s-bk-item__provider strong {
  font-weight: var(--fw-400);
}

.s-site .s-bk-item__initial {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-6);
  background: var(--color-action);
  color: var(--color-on-action);
  font-size: var(--fs-11);
  font-weight: var(--fw-700);
}

.s-site .s-bk-item__change {
  position: absolute;
  inset-inline-end: var(--sp-14);
  inset-block-end: var(--sp-8);
  padding: var(--sp-8) 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--color-action);
}

.s-site .s-bk-options {
  display: grid;
  gap: var(--sp-10);
}

.s-site .s-bk-option {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-14);
  border: 1px solid var(--color-border);
  border-radius: var(--r-14);
  cursor: pointer;
}

.s-site .s-bk-option:has(input:checked) {
  padding: calc(var(--sp-14) - 1px);
  border: 2px solid var(--color-action);
  background: var(--color-action-subtle);
}

.s-site .s-bk-option:has(input:focus-visible),
.s-site .s-bk-slot:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.s-site .s-bk-option input,
.s-site .s-bk-slot input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-action);
}

.s-site .s-bk-option__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.s-site .s-bk-option__title {
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
}

.s-site .s-bk-option__note {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.s-site .s-bk-option__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
}

.s-site .s-bk-option__price .s-bk-amount {
  font-size: var(--fs-18);
}

.s-site .s-bk-option__price .s-bk-amount__currency {
  font-size: var(--fs-12);
}

.s-site .s-bk-option__old {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-bk-single {
  display: flex;
  align-items: baseline;
  gap: var(--sp-10);
  margin: 0;
}

/* Step 2: location */
.s-site .s-bk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
}

.s-site .s-bk-area {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 5px var(--sp-12);
  border-radius: var(--radius-pill);
  background: var(--color-info-surface);
  color: var(--color-info-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
}

.s-site .s-bk-locate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12) var(--sp-14);
  padding: var(--sp-16);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  background: var(--color-canvas);
}

.s-site .s-bk-locate.is-set {
  border-color: var(--color-action);
  background: var(--color-action-subtle);
}

.s-site .s-bk-locate__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--h-44);
  height: var(--h-44);
  border-radius: var(--r-12);
  background: var(--color-accent-surface);
  color: var(--color-accent-text);
}

.s-site .s-bk-locate__text {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-bk-locate__text strong {
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  color: var(--color-text-primary);
}

.s-site .s-bk-locate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
}

.s-site .s-bk-fields {
  display: grid;
  gap: var(--sp-16);
}

/* Step 3: calendar + windows */
.s-site .s-bk-recheck[hidden] {
  display: none;
}

.s-site .s-bk-date {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
}

.s-site .s-bk-cal,
.s-site .s-bk-times {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-width: 0;
}

.s-site .s-bk-cal > .s-bk-block__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.s-site .s-bk-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s-site .s-bk-cal__arrow {
  --btn-height: var(--h-44);
  --btn-border: var(--color-border);
  --btn-fg: var(--color-text-strong);
  --btn-padding: 0;
  --btn-radius: var(--r-10);
  width: var(--h-44);
}

.s-site .s-bk-cal__arrow:disabled {
  --btn-border: var(--color-border-subtle);
  --btn-fg: var(--color-border-strong);
  opacity: 1;
}

.s-site .s-bk-cal__month {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
}

.s-site .s-bk-cal__grid,
.s-site .s-bk-cal__weeks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.s-site .s-bk-cal__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-4);
}

.s-site .s-bk-cal__weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: var(--fs-11);
  font-weight: var(--fw-600);
  color: var(--color-text-secondary);
}

.s-site .s-bk-cal__cell {
  display: flex;
  min-height: var(--h-44);
}

.s-site .s-bk-day {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 0;
  height: var(--h-44);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--r-10);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  cursor: pointer;
}

.s-site .s-bk-day:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.s-site .s-bk-day__today {
  display: none;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: var(--color-accent);
}

.s-site .s-bk-day.is-today {
  font-weight: var(--fw-600);
}

.s-site .s-bk-day.is-today .s-bk-day__today {
  display: block;
}

.s-site .s-bk-day[data-state='past'] {
  border-color: transparent;
  background: transparent;
  color: var(--color-border-strong);
  cursor: default;
}

.s-site .s-bk-day[data-state='full'] {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: repeating-linear-gradient(135deg, var(--color-canvas) 0 6px, var(--color-border-subtle) 6px 12px);
  color: var(--color-text-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

.s-site .s-bk-day[data-state='closed'] {
  border-color: transparent;
  background: var(--color-canvas);
  color: var(--color-text-disabled);
  text-decoration: line-through;
  cursor: not-allowed;
}

.s-site .s-bk-day[data-state='loading'] {
  border-color: transparent;
  background: var(--color-skeleton);
  color: transparent;
  cursor: progress;
}

.s-site .s-bk-day[aria-pressed='true'] {
  border-color: transparent;
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--fw-700);
  box-shadow: 0 0 0 3px var(--color-selected-ring);
}

.s-site .s-bk-cal__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8) var(--sp-12);
}

.s-site .s-bk-cal__status[hidden],
.s-site [data-s-bk-cal-retry][hidden],
.s-site [data-s-bk-slots-retry][hidden],
.s-site .s-bk-times__loading[hidden],
.s-site .s-bk-day-info[hidden],
.s-site .s-bk-times__message[hidden] {
  display: none;
}

.s-site .s-bk-cal__message,
.s-site .s-bk-times__message {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-bk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-14);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.s-site .s-bk-legend li {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.s-site .s-bk-legend__swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-4);
  background: var(--color-surface);
}

.s-site .s-bk-legend__swatch--selected {
  border-color: var(--color-action);
  background: var(--color-action);
}

.s-site .s-bk-legend__swatch--full {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: repeating-linear-gradient(135deg, var(--color-canvas) 0 3px, var(--color-border-subtle) 3px 6px);
}

.s-site .s-bk-legend__swatch--closed {
  border-color: transparent;
  background: var(--color-canvas);
}

.s-site .s-bk-times__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10);
}

.s-site .s-bk-times__day {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-bk-day-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-14);
  border-radius: var(--r-12);
  background: var(--color-action-subtle);
  color: var(--color-tone-brand-text);
  font-size: var(--fs-14);
}

.s-site .s-bk-day-info strong {
  font-weight: var(--fw-600);
}

.s-site .s-bk-slots {
  display: grid;
  gap: var(--sp-8);
}

.s-site .s-bk-slot {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  min-height: calc(var(--h-52) + 2px); /* boards: 52px + 1px borders, content-box */
  padding: 0 var(--sp-14);
  border: 1px solid var(--color-border);
  border-radius: var(--r-12);
  font-size: var(--fs-15);
  font-weight: var(--fw-500);
  cursor: pointer;
}

.s-site .s-bk-slot input {
  width: 18px;
  height: 18px;
}

.s-site .s-bk-slot:has(input:checked) {
  min-height: calc(var(--h-52) + 4px); /* the chosen one's 2px border grows it, as on the boards */
  padding-inline: calc(var(--sp-14) - 1px);
  border: 2px solid var(--color-action);
  background: var(--color-action-subtle);
  font-weight: var(--fw-600);
}

.s-site .s-bk-slot.is-unavailable {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-canvas);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.s-site .s-bk-slot.is-unavailable .s-bk-slot__time {
  text-decoration: line-through;
}

.s-site .s-bk-slot__state {
  margin-inline-start: auto;
  font-size: var(--fs-12);
}

/* One window only: shown as information, nothing to choose (board 3 note) */
.s-site .s-bk-slots.is-single .s-bk-slot:not(.is-unavailable) input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Step 4: details / sign-in */
.s-site .s-bk-auth {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
}

.s-site .s-bk-auth > * {
  flex: 1 1 180px;
}

/* Step 5: review */
.s-site .s-bk-review {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
}

.s-site .s-bk-card {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  padding: var(--sp-14);
}

.s-site .s-bk-card + .s-bk-card {
  border-block-start: 1px solid var(--color-border-subtle);
}

.s-site .s-bk-card__thumb,
.s-site .s-bk-card__icon {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.s-site .s-bk-card__thumb {
  width: 72px;
  height: 56px;
  border-radius: var(--r-10);
  background: var(--color-action-subtle);
}

.s-site .s-bk-card__thumb img {
  width: 64px;
  height: 44px;
  object-fit: contain;
}

.s-site .s-bk-card__icon {
  width: var(--h-44);
  height: var(--h-44);
  border-radius: var(--r-12);
  background: var(--color-action-subtle);
  color: var(--color-action);
}

.s-site .s-bk-card__icon--accent {
  background: var(--color-accent-surface);
  color: var(--color-accent-text);
}

.s-site .s-bk-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.s-site .s-bk-card__label {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.s-site .s-bk-card__value {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  overflow-wrap: anywhere;
}

.s-site .s-bk-card .s-bk-link {
  flex-shrink: 0;
}

/* ---- Card (from 640px) ---- */
@media (min-width: 640px) {
  .s-site .s-dialog--booking {
    --bk-pad: var(--sp-32);
    width: min(1000px, calc(100vw - 2 * var(--sp-24)));
    height: min(740px, calc(100dvh - 2 * var(--sp-24)));
  }

  .s-site .s-booking__head {
    padding: var(--sp-22) var(--bk-pad) var(--sp-18);
  }

  .s-site .s-booking__back,
  .s-site .s-booking__title-phone,
  .s-site .s-booking__count {
    display: none;
  }

  .s-site .s-booking__title-wide,
  .s-site .s-booking__subtitle {
    display: block;
  }

  .s-site .s-booking__titles {
    gap: var(--sp-4);
  }

  .s-site .s-booking__title {
    font-size: var(--fs-22);
  }

  .s-site .s-booking__subtitle {
    font-size: var(--fs-14);
  }

  .s-site .s-booking__steps {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    padding: 0 var(--bk-pad) var(--sp-20);
  }

  .s-site .s-booking__line {
    display: block;
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--color-border);
  }

  .s-site .s-booking__step-mark.is-done + .s-booking__line {
    background: var(--color-action);
  }

  .s-site .s-booking__step-mark,
  .s-site .s-booking__step-mark.is-done,
  .s-site .s-booking__step-mark.is-current {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    height: auto;
    background: none;
  }

  .s-site .s-booking__dot,
  .s-site .s-booking__mark-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .s-site .s-booking__dot {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--fs-14);
    font-weight: var(--fw-600);
  }

  .s-site .s-booking__dot-done {
    display: none;
  }

  .s-site .s-booking__mark-label {
    font-size: var(--fs-15);
    color: var(--color-text-secondary);
  }

  .s-site .s-booking__step-mark.is-current .s-booking__dot,
  .s-site .s-booking__step-mark.is-done .s-booking__dot {
    border: 0;
    background: var(--color-action);
    color: var(--color-on-action);
  }

  .s-site .s-booking__step-mark.is-current .s-booking__dot {
    box-shadow: 0 0 0 4px var(--color-step-ring);
  }

  .s-site .s-booking__step-mark.is-done .s-booking__dot-n {
    display: none;
  }

  .s-site .s-booking__step-mark.is-done .s-booking__dot-done {
    display: block;
  }

  .s-site .s-booking__step-mark.is-current .s-booking__mark-label {
    font-weight: var(--fw-600);
    color: var(--color-brand-dark);
  }

  .s-site .s-booking__step-mark.is-done .s-booking__mark-label {
    font-weight: var(--fw-500);
    color: var(--color-action);
  }

  .s-site .s-booking__body {
    padding: var(--sp-24) var(--bk-pad);
  }

  .s-site .s-booking__panel {
    gap: var(--sp-18);
  }

  .s-site .s-booking__panel[data-s-booking-step='1'] {
    gap: var(--sp-28);
  }

  .s-site .s-booking__panel[data-s-booking-step='5'] {
    gap: var(--sp-14);
  }

  .s-site .s-booking__summary {
    display: flex;
  }

  .s-site .s-booking__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-16) var(--bk-pad);
    box-shadow: none;
  }

  .s-site .s-booking__summary-toggle {
    display: none;
  }

  .s-site .s-booking__prev {
    --btn-height: var(--h-48);
    --btn-border: var(--color-border-strong);
    --btn-padding: var(--sp-22);
    display: inline-flex;
  }

  .s-site .s-booking__prev:disabled {
    --btn-border: var(--color-border);
    --btn-fg: var(--color-text-disabled);
    opacity: 1;
  }

  .s-site .s-booking__next {
    --btn-height: var(--h-48);
    --btn-padding: var(--sp-28);
    --btn-font-size: var(--fs-15);
  }

  .s-site .s-booking__submit {
    --btn-padding: 36px;
    font-weight: var(--fw-700);
  }

  .s-site .s-bk-block {
    gap: var(--sp-12);
  }

  .s-site fieldset.s-bk-block > legend {
    margin-block-end: var(--sp-12);
  }

  .s-site .s-bk-block__title {
    font-size: var(--fs-17);
  }

  .s-site .s-bk-item {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-20);
    padding: var(--sp-16);
  }

  .s-site .s-bk-item__media {
    flex-shrink: 0;
    width: 168px;
    height: 112px;
    border-radius: var(--r-12);
  }

  .s-site .s-bk-item__media img {
    width: 150px;
    height: 100px;
  }

  .s-site .s-bk-item__body {
    flex: 1;
    gap: var(--sp-10);
    padding: 0;
  }

  .s-site .s-bk-item__category {
    font-size: var(--fs-13);
  }

  .s-site .s-bk-item__name {
    font-size: var(--fs-18);
  }

  .s-site .s-bk-item__pills {
    display: flex;
  }

  .s-site .s-bk-item__provider {
    padding: 0;
    font-size: var(--fs-14);
  }

  .s-site .s-bk-item__provider strong {
    font-weight: var(--fw-600);
    color: var(--color-text-primary);
  }

  .s-site .s-bk-item__initial {
    width: 24px;
    height: 24px;
    font-size: var(--fs-12);
  }

  .s-site .s-bk-item__city {
    display: none;
  }

  .s-site .s-bk-item__change {
    position: static;
    align-self: flex-start;
    padding: var(--sp-10) var(--sp-4);
  }

  .s-site .s-bk-options--duration,
  .s-site .s-bk-options--pay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-12);
  }

  .s-site .s-bk-options--duration .s-bk-option {
    align-items: flex-start;
    padding: var(--sp-16) var(--sp-18);
    border-radius: var(--r-16);
  }

  .s-site .s-bk-options--duration .s-bk-option:has(input:checked) {
    padding: calc(var(--sp-16) - 1px) calc(var(--sp-18) - 1px);
  }

  .s-site .s-bk-options--duration input {
    margin-block-start: var(--sp-2);
  }

  .s-site .s-bk-options--duration .s-bk-option__text {
    gap: var(--sp-4);
  }

  .s-site .s-bk-options--duration .s-bk-option__title {
    font-size: var(--fs-16);
  }

  .s-site .s-bk-option__note {
    font-size: var(--fs-13);
  }

  .s-site .s-bk-option__price .s-bk-amount {
    font-size: var(--fs-20);
  }

  .s-site .s-bk-option__price .s-bk-amount__currency {
    font-size: var(--fs-13);
  }

  .s-site .s-bk-options--pay {
    gap: var(--sp-10);
  }

  .s-site .s-bk-options--pay .s-bk-option {
    padding: var(--sp-14) var(--sp-16);
  }

  .s-site .s-bk-options--pay .s-bk-option:has(input:checked) {
    padding: calc(var(--sp-14) - 1px) calc(var(--sp-16) - 1px);
  }

  .s-site .s-bk-options--pay .s-bk-option__note {
    font-size: var(--fs-13);
  }

  .s-site .s-bk-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-site .s-bk-cal__weekday {
    height: 28px;
    font-size: var(--fs-12);
  }

  .s-site .s-bk-cal__arrow {
    --btn-height: var(--h-40);
    width: var(--h-40);
  }

  .s-site .s-bk-cal__cell,
  .s-site .s-bk-day {
    min-height: 46px;
    height: 46px;
  }

  .s-site .s-bk-times {
    gap: var(--sp-14);
  }

  .s-site .s-bk-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-10);
  }

  .s-site .s-bk-slot {
    min-height: calc(56px + 2px);
    padding: 0 var(--sp-16);
  }

  .s-site .s-bk-slot:has(input:checked) {
    min-height: calc(56px + 4px);
    padding-inline: calc(var(--sp-16) - 1px);
  }

  .s-site .s-bk-review {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-12);
    border: 0;
  }

  .s-site .s-bk-card,
  .s-site .s-bk-card + .s-bk-card {
    padding: var(--sp-16);
    border: 1px solid var(--color-border);
    border-radius: var(--r-16);
  }

  .s-site .s-bk-card__thumb,
  .s-site .s-bk-card__icon {
    display: flex;
  }

  .s-site .s-bk-card__label {
    font-size: var(--fs-13);
  }

  .s-site .s-bk-card__value {
    font-size: var(--fs-15);
  }
}

/* ---- Summary column and the two-column date step (from 1024px) ---- */
@media (min-width: 1024px) {
  .s-site .s-booking__main {
    flex-direction: row;
    overflow: hidden;
  }

  .s-site .s-booking__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .s-site .s-booking__summary,
  .s-site .s-booking[data-step='5'] .s-booking__summary {
    flex: 0 0 300px;
    gap: var(--sp-18);
    padding: var(--sp-28) var(--sp-24);
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border-subtle);
    overflow-y: auto;
  }

  .s-site .s-booking[data-step='5'] .s-booking__summary {
    gap: var(--sp-16);
  }

  .s-site .s-bk-amount--total {
    font-size: var(--fs-26);
  }

  .s-site .s-booking[data-step='5'] .s-bk-amount--total {
    font-size: var(--fs-28);
  }

  .s-site .s-bk-date {
    flex-direction: row;
    gap: var(--sp-28);
  }

  .s-site .s-bk-cal {
    flex: 0 0 360px;
    gap: var(--sp-12);
  }

  .s-site .s-bk-cal > .s-bk-block__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .s-site .s-bk-times {
    flex: 1;
    padding-block-start: var(--sp-2);
  }

  .s-site .s-bk-times__day {
    display: none;
  }

  .s-site .s-booking__panel[data-s-booking-step='3'] {
    margin-block-start: calc(var(--sp-20) - var(--sp-24));
  }
}

/* Sending the order (B1-B2): the error line above the footer and the confirmation (step 6, boards 6 / 15).
   Step 6 drops the stepper, the summary and the footer; the dialog is just the confirmation. */
.s-site .s-bk-submit-error[hidden] {
  display: none;
}

.s-site .s-booking[data-step='6'] :is(.s-booking__steps, .s-booking__summary, .s-booking__foot, .s-booking__back, .s-booking__subtitle, .s-booking__count),
.s-site .s-booking[data-step='7'] :is(.s-booking__steps, .s-booking__summary, .s-booking__foot, .s-booking__back, .s-booking__subtitle, .s-booking__count),
.s-site .s-booking[data-step='8'] :is(.s-booking__steps, .s-booking__summary, .s-booking__foot, .s-booking__back, .s-booking__subtitle, .s-booking__count),
.s-site .s-booking[data-step='9'] :is(.s-booking__steps, .s-booking__summary, .s-booking__foot, .s-booking__back, .s-booking__subtitle, .s-booking__count) {
  display: none;
}

.s-site .s-bk-done {
  align-items: center;
  gap: var(--sp-12);
  text-align: center;
}

.s-site .s-bk-done__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--r-pill);
  background: var(--color-success-surface);
  color: var(--color-success-text);
}

.s-site .s-bk-done__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
  color: var(--color-brand-dark);
}

.s-site .s-bk-done__number {
  margin: 0;
  color: var(--color-text-muted);
}

.s-site .s-bk-done__number strong {
  color: var(--color-text-strong);
  unicode-bidi: plaintext;
}

.s-site .s-bk-done__status {
  margin: 0;
  padding: var(--sp-4) var(--sp-14);
  border-radius: var(--r-pill);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
}

.s-site .s-bk-done__grid {
  display: grid;
  gap: var(--sp-12);
  width: 100%;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-16);
  border-radius: var(--r-16);
  background: var(--color-sunken);
  text-align: start;
}

.s-site .s-bk-done__grid > div[hidden] {
  display: none;
}

.s-site .s-bk-done__grid dt {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
}

.s-site .s-bk-done__grid dd {
  margin: var(--sp-2) 0 0;
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-bk-done__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  width: 100%;
}

@media (min-width: 640px) {
  .s-site .s-bk-done__grid {
    grid-template-columns: 1fr 1fr;
  }

  .s-site .s-bk-done__actions {
    flex-direction: row-reverse;
    justify-content: center;
  }
}

/* B1-B3. Recovery view of step 3 (boards 10 / 19): the alert, the nearest open days as radio cards, "show the full
   calendar", and a footer note; the calendar stays hidden until asked for. Phone: rows (day, date), 52px; desktop:
   four cards in a row (radio + day, date below). */
.s-site .s-bk-nearest[hidden],
.s-site .s-bk-nodays[hidden],
.s-site .s-booking__foot-note[hidden],
.s-site .s-bk-date[hidden] {
  display: none;
}

.s-site .s-bk-recheck:focus {
  outline: none;
}

.s-site .s-bk-nearest {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.s-site .s-bk-nearest legend {
  padding: 0;
  margin-block-end: var(--sp-10);
}

.s-site .s-bk-nearest__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.s-site .s-bk-nearest__card {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  min-height: calc(var(--h-52) + 2px);
  padding: 0 var(--sp-14);
  border: 1px solid var(--color-border);
  border-radius: var(--r-12);
  cursor: pointer;
}

.s-site .s-bk-nearest__card input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
}

.s-site .s-bk-nearest__card:has(input:checked) {
  padding-inline: calc(var(--sp-14) - 1px);
  border: 2px solid var(--color-action);
  background: var(--color-action-subtle);
}

.s-site .s-bk-nearest__card:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.s-site .s-bk-nearest__day {
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-bk-nearest__date {
  margin-inline-start: auto;
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}

.s-site .s-bk-nearest .s-bk-link {
  align-self: flex-start;
  min-height: var(--h-44);
}

/* In the recovery view the day cards replace the calendar, and the windows show once a day is chosen. */
.s-site .s-booking__panel[data-recovery='cards'] .s-bk-cal,
.s-site .s-booking__panel[data-recovery='cards'][data-picked='0'] .s-bk-times {
  display: none;
}

.s-site .s-booking__panel[data-recovery='cards'] .s-bk-date {
  display: block;
}

.s-site .s-booking__foot-note {
  margin: 0;
  font-size: var(--fs-13);
  text-align: center;
  color: var(--color-text-muted);
}

/* Boards 9 / 18: the "nothing to book" panel (warning surface, calendar icon, call + other services). */
.s-site .s-bk-unavail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-16);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--r-16);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}

.s-site .s-bk-unavail__head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.s-site .s-bk-unavail__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-12);
  background: var(--color-canvas);
}

.s-site .s-bk-unavail__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
}

.s-site .s-bk-unavail__text {
  margin: 0;
  line-height: var(--lh-170);
}

.s-site .s-bk-unavail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.s-site .s-bk-card--solo {
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
}

.s-site .s-bk-card--solo .s-bk-card__thumb {
  display: flex;
}

.s-site .s-booking--unavailable .s-booking__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

@media (min-width: 640px) {
  .s-site .s-booking.is-recovery .s-booking__steps {
    display: none;
  }

  .s-site .s-bk-nearest__list {
    flex-direction: row;
  }

  .s-site .s-bk-nearest__card {
    display: grid;
    flex: 1;
    grid-template-columns: auto 1fr;
    align-content: center;
    row-gap: var(--sp-4);
    min-height: 74px;
  }

  .s-site .s-bk-nearest__date {
    grid-column: 2;
    margin-inline-start: 0;
  }

  .s-site .s-booking__foot-note {
    flex: 1;
    text-align: start;
    font-size: var(--fs-14);
  }

  .s-site .s-bk-unavail__actions {
    flex-direction: row;
  }
}

/* Boards 9 / 18 on the phone: the actions sit in a bar at the bottom (call, then other services), not in the panel. */
.s-site .s-bk-unavail__bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin-block-start: auto;
  padding-block-start: var(--sp-16);
}

.s-site .s-bk-unavail--bar .s-bk-unavail__actions {
  display: none;
}

.s-site .s-booking--unavailable .s-booking__main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.s-site .s-booking--unavailable .s-booking__body {
  flex: 1;
}

@media (min-width: 640px) {
  .s-site .s-bk-unavail__bar {
    display: none;
  }

  .s-site .s-bk-unavail--bar .s-bk-unavail__actions {
    display: flex;
  }
}

/* Boards 10 / 19 have no order summary: the recovery view is the alert, the day cards and "continue". The summary
   returns on the review (step 5). The alert shows its title and its text on separate lines. */
.s-site .s-booking.is-recovery :is(.s-booking__summary, .s-booking__summary-toggle) {
  display: none;
}

.s-site .s-bk-recheck [data-s-bk-recheck-title],
.s-site .s-bk-recheck [data-s-bk-recheck-text] {
  display: block;
}

.s-site .s-bk-recheck [data-s-bk-recheck-title] {
  font-weight: var(--fw-600);
}

.s-site .s-bk-recheck [data-s-bk-recheck-text] {
  font-weight: var(--fw-400);
}

.s-site .s-bk-pay {
  align-items: center;
  gap: var(--sp-12);
  text-align: center;
}

.s-site .s-bk-pay__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-sunken);
  border-top-color: var(--color-brand-dark);
  border-radius: var(--r-pill);
  animation: s-bk-pay-spin 0.9s linear infinite;
}

@keyframes s-bk-pay-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-site .s-bk-pay__spinner {
    animation: none;
  }
}

.s-site .s-bk-pay__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}

.s-site .s-bk-pay__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
  color: var(--color-brand-dark);
}

.s-site .s-bk-pay__text {
  margin: 0;
  color: var(--color-text-muted);
}

.s-site .s-bk-pay__amount {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--r-12);
  background: var(--color-sunken);
}

.s-site .s-bk-pay__amount strong {
  color: var(--color-text-strong);
  unicode-bidi: plaintext;
}

.s-site .s-bk-pay__secure {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-muted);
}

.s-site .s-bk-pay__error {
  width: 100%;
  padding: var(--sp-10) var(--sp-14);
  border-radius: var(--r-12);
  background: var(--color-error-surface);
  color: var(--color-error-text);
  font-size: var(--fs-14);
}

.s-site .s-bk-pay__error[hidden],
.s-site .s-bk-pay__instead[hidden] {
  display: none;
}

.s-site .s-bk-pay__actions {
  width: 100%;
}

.s-site .s-bk-pay__instead {
  display: grid;
  gap: var(--sp-8);
  width: 100%;
}

.s-site .s-bk-pay__help {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}

/* ---- resources\css\site\pages\home.css ---- */
/* Homepage composition (B1-A; boards 20 desktop / 63 phone). Page layout only: the pieces are shared components
   (header, cards, buttons, chips, footer). Phone values first, desktop from 640px. Board measurements:
   hero 600px min (phone: 120px top space), search box radius 18 / padding 10 / fields 52 on concrete-50;
   sections 1280 content, titles Readex 28 (phone 22/20); panels radius 24, padding 32 (phone 20 / 22). */

/* Shared bits: dot grids, the warning stripe, the "V" mark */
.s-site .s-dots {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 10px);
  gap: 7px;
  width: calc(3 * 10px + 2 * 7px);
  height: calc(4 * 10px + 3 * 7px);
  background: radial-gradient(circle, currentColor 4.5px, transparent 5px) 0 0 / 17px 17px;
  pointer-events: none;
}

.s-site .s-stripe {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 6px;
  background: repeating-linear-gradient(135deg, var(--stripe-red) 0 12px, var(--color-dot-light) 12px 24px);
}

/* ---- Hero ---- */
.s-site .s-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-hero-surface);
  color: var(--color-on-inverse-strong);
}

.s-site .s-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

.s-site .s-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-hero-shade-phone-strong) 0%, var(--color-hero-shade-phone-mid) 55%, var(--color-hero-shade-phone-soft) 100%);
}

.s-site .s-hero__mark {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  width: 150px;
  aspect-ratio: 100 / 86;
  pointer-events: none;
}

.s-site .s-hero__mark span,
.s-site .s-why__mark span {
  position: absolute;
  inset: 0;
}

.s-site .s-hero__mark span:first-child {
  transform: translateX(-40%);
  background: var(--color-mark-soft);
  clip-path: polygon(0 0, 24% 0, 74% 100%, 50% 100%);
}

.s-site .s-hero__mark span:last-child {
  background: var(--color-mark);
  clip-path: polygon(0 0, 24% 0, 50% 52%, 76% 0, 100% 0, 50% 100%);
}

.s-site .s-hero__dots {
  display: none;
}

.s-site .s-hero__inner {
  position: relative;
  padding-block: 28px 32px;
}

.s-site .s-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding-block-start: 120px;
}

.s-site .s-hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-inline-start: 15px; /* 3px bar + 12px gap (board 63) */
  border-inline-start: 3px solid var(--color-on-inverse-strong);
  border-radius: 0;
}

.s-site .s-hero__eyebrow {
  font-size: var(--fs-12);
  letter-spacing: 2px;
  color: var(--color-on-inverse-muted);
}

.s-site .s-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-700);
  line-height: var(--lh-135);
}

.s-site .s-hero__search {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-10);
  border-radius: var(--r-16);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.s-site .s-hero__field {
  position: relative;
}

.s-site .s-hero__field select {
  width: 100%;
  height: var(--h-48);
  padding-inline: var(--sp-12);
  border: 0;
  border-radius: var(--r-10);
  background: var(--color-canvas);
  color: var(--color-text-primary);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  appearance: none;
  cursor: pointer;
}

.s-site .s-hero__field select:invalid,
.s-site .s-hero__field select:has(option:checked[value='']) {
  color: var(--color-text-muted);
}

.s-site .s-hero__field .s-icon {
  display: none;
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 17px;
  color: var(--color-action);
  pointer-events: none;
}

.s-site .s-hero__submit {
  --btn-height: 50px;
  --btn-radius: var(--r-10);
}

.s-site .s-hero__submit .s-icon {
  display: none;
}

/* ---- Sections ---- */
.s-site .s-home__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding-block: 28px 8px;
}

.s-site .s-home__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-16);
}

.s-site .s-home__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.s-site .s-home__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  color: var(--color-action-text);
}

.s-site .s-home__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-600);
  line-height: var(--lh-normal);
}

.s-site .s-home__title--center {
  text-align: start;
}

.s-site .s-home ul,
.s-site .s-home ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Categories: phone = one swipe row (board 63), desktop = grid */
.s-site .s-home__categories,
.s-site .s-home__providers {
  display: flex;
  gap: var(--sp-10);
  overflow-x: auto;
  scrollbar-width: none;
}

.s-site .s-home__categories > li {
  flex: 0 0 220px;
}

.s-site .s-home__providers > li {
  flex: 0 0 240px;
}

/* Steps */
.s-site .s-home__section--steps {
  padding-block: 20px 0;
}

.s-site .s-home__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-20);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-20);
  background: var(--color-surface);
}

.s-site .s-home__section--steps .s-home__title {
  font-size: var(--fs-20);
}

.s-site .s-home__steps-action {
  display: none;
}

.s-site .s-home__steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.s-site .s-home__step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
}

.s-site .s-home__step-number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--h-32);
  height: var(--h-32);
  border-radius: var(--r-10);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--fw-700);
}

.s-site .s-home__step-text {
  display: flex;
  flex-direction: column;
}

.s-site .s-home__step-title {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
}

.s-site .s-home__step-note {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

/* Featured ("most requested"): phone = stacked cards, desktop = 4-up carousel with arrows */
.s-site .s-home__arrows {
  display: none;
  gap: var(--sp-8);
}

.s-site .s-home__track {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

/* Offer */
.s-site .s-home__section--offer {
  padding-block: 20px 0;
}

.s-site .s-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  overflow: hidden;
  padding: var(--sp-22);
  border-radius: var(--r-20);
  background: linear-gradient(120deg, var(--color-promo-from) 0%, var(--color-promo-via) 45%, var(--color-promo-to) 100%);
  color: var(--color-on-inverse-strong);
}

.s-site .s-offer__dots {
  display: none;
}

.s-site .s-offer__text {
  display: contents;
}

.s-site .s-offer__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-700);
  line-height: 1.4;
}

.s-site .s-offer__note {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-180);
  color: var(--color-on-promo-muted);
}

.s-site .s-offer__media {
  display: flex;
  justify-content: center;
  order: 3;
}

.s-site .s-offer__media img {
  width: 80%;
  object-fit: contain;
}

.s-site .s-offer__action {
  --btn-height: 46px;
  --btn-bg: var(--color-promo-action);
  --btn-bg-hover: var(--color-promo-action);
  order: 4;
  width: 100%;
}

/* Latest services: chips + row cards */
.s-site .s-home__chips {
  display: flex;
  gap: var(--sp-8);
  overflow-x: auto;
  scrollbar-width: none;
}

.s-site .s-home__chips .s-chip {
  flex: 0 0 auto;
}

@media (max-width: 639.98px) {
  .s-site .s-home__chips .s-chip {
    height: 38px;
    padding-inline: var(--sp-14);
    font-size: var(--fs-13);
  }
}

.s-site .s-home__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
}

.s-site .s-home__more {
  --btn-height: 46px;
  display: none;
  align-self: center;
}

/* Providers */
.s-site .s-home__link {
  padding-block: var(--sp-8);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--color-action-text);
}

.s-site .s-home__link-wide {
  display: none;
}

/* Testimonials */
.s-site .s-home__band {
  margin-block-start: var(--sp-24);
  background: var(--color-surface);
}

.s-site .s-home__section--testimonials {
  padding-block: var(--sp-24);
}

.s-site .s-home__figure {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-700);
  color: var(--color-brand-dark);
}

.s-site .s-home__quotes-track {
  display: flex;
  gap: var(--sp-20);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.s-site .s-home__quotes-track > * {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.s-site .s-quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
  padding: 18px;
  border-radius: var(--r-16);
  background: var(--color-canvas);
}

.s-site .s-quote__rating {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-quote__stars {
  letter-spacing: 2px;
  color: var(--color-star);
}

.s-site .s-quote__stars-off {
  color: var(--color-border-strong);
}

.s-site .s-quote__summary {
  display: none;
}

.s-site .s-quote__text {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.9;
  color: var(--color-quote-text);
}

.s-site .s-quote__author {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-13);
}

.s-site .s-quote__avatar {
  display: none;
}

.s-site .s-quote__who {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-4);
}

.s-site .s-quote__who span::before {
  content: '· ';
}

.s-site .s-snap-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
}

.s-site .s-snap-dots__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--color-border-strong);
  cursor: pointer;
}

.s-site .s-snap-dots__dot[aria-current='true'] {
  width: 18px;
  background: var(--color-action);
}

/* Why us */
.s-site .s-home__section--why {
  padding-block: 20px 0;
}

.s-site .s-why {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  overflow: hidden;
  padding: var(--sp-22);
  border-radius: var(--r-20);
  background: var(--color-inverse-surface);
  color: var(--color-on-inverse-strong);
}

.s-site .s-why__mark {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  width: 180px;
  aspect-ratio: 100 / 86;
}

.s-site .s-why__mark span:first-child {
  transform: translateX(-40%);
  background: var(--color-mark-on-inverse-soft);
  clip-path: polygon(0 0, 24% 0, 74% 100%, 50% 100%);
}

.s-site .s-why__mark span:last-child {
  background: var(--color-mark-on-inverse);
  clip-path: polygon(0 0, 24% 0, 50% 52%, 76% 0, 100% 0, 50% 100%);
}

.s-site .s-why__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-600);
}

.s-site .s-why__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.s-site .s-why__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-inline-start: 15px;
  border-inline-start: 3px solid var(--color-on-inverse-strong);
}

.s-site .s-why__item-title {
  font-size: var(--fs-17);
  font-weight: var(--fw-700);
}

.s-site .s-why__item-text {
  font-size: var(--fs-13);
  line-height: var(--lh-170);
  color: var(--color-on-inverse);
}

/* FAQ */
.s-site .s-home__section--faq {
  gap: var(--sp-10);
  padding-block: 24px 8px;
}

.s-site .s-home__faqs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.s-site .s-faq {
  padding-inline: var(--sp-14);
  border: 1px solid var(--color-border);
  border-radius: var(--r-14);
  background: var(--color-surface);
}

.s-site .s-faq__question {
  padding-block: var(--sp-14);
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  cursor: pointer;
}

.s-site .s-faq__answer {
  margin: 0 0 var(--sp-14);
  font-size: var(--fs-14);
  line-height: var(--lh-180);
  color: var(--color-text-strong);
}

/* Provider invitation (M1) */
.s-site .s-home__section--join {
  padding-block: 20px 0;
}

.s-site .s-join {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-22);
  border-radius: var(--r-20);
  background: var(--color-inverse-surface-deep);
  color: var(--color-on-inverse-strong);
}

.s-site .s-join__head,
.s-site .s-join__heading,
.s-site .s-join__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.s-site .s-join__heading {
  gap: var(--sp-8);
}

.s-site .s-join__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  color: var(--color-on-inverse-subtle);
}

.s-site .s-join__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-600);
}

.s-site .s-join__note,
.s-site .s-join__login,
.s-site .s-join__points {
  display: none;
}

.s-site .s-join__note {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--color-on-inverse-muted);
}

.s-site .s-join__signup {
  --btn-height: 46px;
  --btn-bg: var(--color-surface);
  --btn-bg-hover: var(--color-canvas);
  --btn-fg: var(--color-brand-dark);
}

.s-site .s-join__packages {
  --btn-height: 46px;
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-inverse-fill);
  --btn-border: var(--color-inverse-outline);
  --btn-border-width: 1px;
}

.s-site .s-join__login {
  align-items: center;
  height: var(--h-48);
  padding-inline: var(--sp-18);
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  color: var(--color-on-inverse);
  text-decoration: underline;
}

.s-site .s-join__points li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-18);
  border: 1px solid var(--color-inverse-control);
  border-radius: var(--r-16);
  background: var(--color-on-inverse-ghost);
}

.s-site .s-join__points strong {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
}

.s-site .s-join__points span {
  font-size: var(--fs-14);
  color: var(--color-on-inverse-muted);
}

/* Closing call to action: desktop only; phones get the sticky action bar (board 63) */
.s-site .s-close {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--color-action);
  color: var(--color-on-inverse-strong);
}

.s-site .s-close__dots {
  inset-inline-end: 32px;
  inset-block-start: 50%;
  gap: 8px;
  width: calc(3 * 10px + 2 * 8px);
  background-size: 18px 18px;
  color: var(--color-dot-light);
  opacity: 0.5;
  transform: translateY(-50%);
}

.s-site .s-close__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
  padding-block: var(--sp-48);
}

.s-site .s-close__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-inline-start: 21px; /* 3px bar + 18px gap */
  border-inline-start: 3px solid var(--color-on-inverse-strong);
}

.s-site .s-close__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-700);
}

.s-site .s-close__note {
  margin: 0;
  font-size: var(--fs-16);
  color: var(--color-on-inverse);
}

.s-site .s-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
}

.s-site .s-close__book {
  --btn-padding: 26px;
  --btn-bg: var(--color-surface);
  --btn-bg-hover: var(--color-canvas);
  --btn-fg: var(--color-brand-dark);
}

.s-site .s-close__call {
  --btn-padding: var(--sp-22);
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-inverse-fill);
  --btn-border: var(--color-inverse-outline-strong);
  --btn-border-width: 1px;
  --btn-height: calc(var(--h-52) + 2px); /* a link with 1px borders, content-box (board 20) */
  gap: var(--sp-8);
}

/* Sticky action bar (phones) */
.s-site .s-actionbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 900;
  display: flex;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-16) calc(var(--sp-18) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-bar-up);
}

.s-site .s-actionbar__call {
  --btn-border: var(--color-border-strong);
  --btn-fg: var(--color-action);
  --btn-height: calc(var(--h-52) + 2px);
}

.s-site .s-actionbar__main {
  flex: 1;
}

.s-site .s-home__footer {
  padding-block-end: 86px; /* room for the action bar (board 63 footer bottom padding 110 incl. its own 24) */
}

/* ---- Desktop (board 20) ---- */
@media (min-width: 640px) {
  .s-site .s-stripe {
    height: 8px;
    background: repeating-linear-gradient(135deg, var(--stripe-red) 0 16px, var(--color-dot-light) 16px 32px);
  }

  .s-site .s-hero {
    min-height: 600px;
  }

  .s-site .s-hero__image {
    object-position: 30% 50%;
  }

  .s-site .s-hero__shade {
    background: linear-gradient(to left, var(--color-hero-shade-strong) 0%, var(--color-hero-shade-mid) 42%, var(--color-hero-shade-soft) 78%, var(--color-hero-shade-faint) 100%);
  }

  .s-site .s-hero__shade:dir(ltr) {
    background: linear-gradient(to right, var(--color-hero-shade-strong) 0%, var(--color-hero-shade-mid) 42%, var(--color-hero-shade-soft) 78%, var(--color-hero-shade-faint) 100%);
  }

  .s-site .s-hero__mark {
    width: 32%;
    max-width: 480px;
  }

  .s-site .s-hero__dots {
    display: grid;
  }

  .s-site .s-hero__dots--brand {
    inset-inline-end: 46%;
    inset-block-start: 150px;
    color: var(--color-dot-brand);
  }

  .s-site .s-hero__dots--light {
    inset-inline-end: 14%;
    inset-block-end: 60px;
    color: var(--color-dot-light);
  }

  .s-site .s-hero__inner {
    padding-block: 80px 96px;
  }

  .s-site .s-hero__content {
    max-width: 600px;
    gap: var(--sp-24);
    padding-block-start: 0;
  }

  .s-site .s-hero__heading {
    gap: var(--sp-10);
    padding-inline-start: 23px; /* 3px bar + 20px gap */
  }

  .s-site .s-hero__eyebrow {
    font-size: var(--fs-14);
  }

  .s-site .s-hero__title {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
  }

  .s-site .s-hero__search {
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 18px;
    box-shadow: var(--shadow-search);
  }

  .s-site .s-hero__field {
    flex: 1 1 200px;
  }

  .s-site .s-hero__field select {
    height: var(--h-52);
    padding-inline-start: 42px;
    border-radius: var(--r-12);
  }

  .s-site .s-hero__field .s-icon,
  .s-site .s-hero__submit .s-icon {
    display: block;
  }

  .s-site .s-hero__submit {
    --btn-height: var(--h-52);
    --btn-padding: 26px;
    --btn-radius: var(--r-12);
    gap: var(--sp-8);
  }

  .s-site .s-home__section {
    gap: var(--sp-20);
    padding-block: 16px 40px;
  }

  .s-site .s-home__title {
    font-size: var(--fs-28);
  }

  .s-site .s-home__eyebrow {
    font-size: var(--fs-14);
  }

  .s-site .s-home__title--center {
    text-align: center;
  }

  .s-site .s-home__section--categories {
    padding-block: 56px 16px;
  }

  .s-site .s-home__categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-16);
    overflow: visible;
  }

  .s-site .s-home__section--steps {
    padding-block: 40px;
  }

  .s-site .s-home__panel {
    gap: var(--sp-24);
    padding: var(--sp-32);
    border-radius: var(--r-24);
  }

  .s-site .s-home__section--steps .s-home__title {
    font-size: var(--fs-28);
  }

  .s-site .s-home__steps-action {
    --btn-height: 46px;
    display: inline-flex;
  }

  .s-site .s-home__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-16);
  }

  .s-site .s-home__step {
    flex-direction: column;
    gap: var(--sp-10);
    padding: var(--sp-20);
    border-radius: var(--r-16);
    background: var(--color-canvas);
  }

  .s-site .s-home__step-number {
    width: var(--h-40);
    height: var(--h-40);
    border-radius: var(--r-12);
    font-family: var(--font-display);
    font-size: var(--fs-17);
  }

  .s-site .s-home__step-text {
    gap: var(--sp-10);
  }

  .s-site .s-home__step-title {
    font-size: var(--fs-17);
  }

  .s-site .s-home__step-note {
    font-size: var(--fs-14);
    line-height: var(--lh-170);
  }

  .s-site .s-home__arrows {
    display: flex;
  }

  .s-site .s-home__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--sp-20)) / 4);
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .s-site .s-home__track > li {
    display: flex;
    scroll-snap-align: start;
  }

  .s-site .s-home__track > li > * {
    flex: 1;
  }

  .s-site .s-home__section--offer {
    padding-block: 16px 40px;
  }

  .s-site .s-offer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: var(--r-24);
  }

  .s-site .s-offer__dots {
    display: grid;
    inset-inline-end: 24px;
    inset-block-start: 20px;
    grid-template-columns: repeat(6, 8px);
    gap: 10px;
    width: calc(6 * 8px + 5 * 10px);
    height: calc(2 * 8px + 10px);
    background: radial-gradient(circle, currentColor 3.5px, transparent 4px) 0 0 / 18px 18px;
    color: var(--color-dot-light);
    opacity: 0.45;
  }

  .s-site .s-offer__text {
    position: relative;
    display: flex;
    flex: 1 1 520px;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-14);
    padding: var(--sp-40);
  }

  .s-site .s-offer__title {
    font-size: var(--fs-30);
    line-height: var(--lh-135);
  }

  .s-site .s-offer__note {
    font-size: var(--fs-16);
  }

  .s-site .s-offer__action {
    --btn-height: var(--h-48);
    --btn-padding: var(--sp-24);
    align-self: flex-start;
    width: auto;
    margin-block-start: var(--sp-6);
  }

  .s-site .s-offer__media {
    position: relative;
    flex: 1 1 320px;
    align-items: center;
    min-height: 240px;
  }

  .s-site .s-offer__media img {
    width: 82%;
    max-width: 400px;
  }

  .s-site .s-home__chips {
    flex-wrap: wrap;
    overflow: visible;
  }

  .s-site .s-home__rows {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-20);
  }

  .s-site .s-home__more {
    display: inline-flex;
  }

  .s-site .s-home__link {
    padding-block: var(--sp-10);
    font-size: var(--fs-15);
  }

  .s-site .s-home__link-wide {
    display: inline;
  }

  .s-site .s-home__link-short {
    display: none;
  }

  .s-site .s-home__providers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-20);
    overflow: visible;
  }

  .s-site .s-home__band {
    margin-block-start: 0;
    border-block: 1px solid var(--color-border-subtle);
  }

  .s-site .s-home__section--testimonials {
    gap: var(--sp-24);
    padding-block: var(--sp-56);
  }

  .s-site .s-home__quotes-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    overflow: visible;
  }

  .s-site .s-home__quotes .s-snap-dots {
    display: none;
  }

  .s-site .s-quote {
    gap: var(--sp-14);
    padding: var(--sp-22);
  }

  .s-site .s-quote__stars {
    font-size: var(--fs-16);
  }

  .s-site .s-quote__summary {
    display: inline;
  }

  .s-site .s-quote__text {
    font-size: var(--fs-15);
  }

  .s-site .s-quote__avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    background: var(--color-avatar-surface);
    color: var(--color-avatar-text);
    font-weight: var(--fw-700);
  }

  .s-site .s-quote__who {
    flex-direction: column;
    gap: 0;
  }

  .s-site .s-quote__who strong {
    font-size: var(--fs-15);
    font-weight: var(--fw-600);
  }

  .s-site .s-quote__who span {
    color: var(--color-text-secondary);
  }

  .s-site .s-quote__who span::before {
    content: none;
  }

  .s-site .s-home__section--why {
    padding-block: 56px 8px;
  }

  .s-site .s-why {
    gap: var(--sp-14);
    min-height: 240px;
    padding: var(--sp-32);
    border-radius: var(--r-24);
  }

  .s-site .s-why__mark {
    display: block;
  }

  .s-site .s-why__title {
    font-size: var(--fs-28);
  }

  .s-site .s-why__list {
    margin-block-start: auto;
  }

  .s-site .s-why__item {
    gap: var(--sp-6);
    padding-inline-start: 19px; /* 3px bar + 16px gap */
  }

  .s-site .s-why__item-title {
    font-family: var(--font-display);
    font-size: var(--fs-22);
  }

  .s-site .s-why__item-text {
    font-size: var(--fs-15);
  }

  .s-site .s-home__section--faq {
    gap: var(--sp-20);
    padding-block: var(--sp-56);
  }

  .s-site .s-faq {
    padding-inline: var(--sp-18);
  }

  .s-site .s-faq__question {
    padding-block: var(--sp-16);
    font-size: var(--fs-16);
  }

  .s-site .s-faq__answer {
    margin-block-end: var(--sp-16);
    font-size: var(--fs-15);
  }

  .s-site .s-home__section--join {
    padding-block: 0 56px;
  }

  .s-site .s-join {
    gap: 28px;
    padding: 36px;
    border-radius: var(--r-24);
  }

  .s-site .s-join__head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-20);
  }

  .s-site .s-join__heading {
    flex: 1 1 420px;
  }

  .s-site .s-join__eyebrow {
    font-size: var(--fs-13);
  }

  .s-site .s-join__title {
    font-size: var(--fs-26);
  }

  .s-site .s-join__note {
    display: block;
  }

  .s-site .s-join__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-10);
  }

  .s-site .s-join__signup,
  .s-site .s-join__packages {
    --btn-height: var(--h-48);
  }

  .s-site .s-join__packages {
    --btn-height: calc(var(--h-48) + 2px);
  }

  .s-site .s-join__login {
    display: flex;
  }

  .s-site .s-join__points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-14);
  }

  .s-site .s-close {
    display: block;
  }

  .s-site .s-actionbar {
    display: none;
  }

  .s-site .s-home__footer {
    padding-block-end: 0;
  }
}

/* ---- resources\css\site\pages\service.css ---- */
/* Container (service) details composition (B1-A; boards 21 desktop / 65 phone). Page layout only: header, breadcrumbs,
   buttons, alert, modal and footer are shared components. Phone values first, desktop from 640px. Board measurements:
   desktop main padding 24/64, gap 28; columns flex 999 1 560 and 1 1 340 (max 400), gap 32; cards radius 20,
   padding 24 (price card 22 + shadow e2). Phone: 64px bar (back / logo / share), full-bleed 260px gallery on pine-50,
   content padding 18 16 120, gap 18; cards radius 16, padding 16; blocks reordered: gallery, title, price, provider,
   description, features, working days; sticky bar with days + price and the main action. */

/* Phone top bar (board 65 header); the site header takes over from 640px */
.s-site .s-service-page__chrome {
  display: none;
}

.s-site .s-detailbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(64px + 1px); /* board: 64 + its 1px border, content-box */
  padding-inline: var(--sp-16);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.s-site .s-detailbar__back,
.s-site .s-detailbar__share {
  --btn-height: var(--h-44);
  width: var(--h-44);
  padding: 0;
  color: var(--color-text-primary);
}

/* The back control is a bordered link on the board (44 + 1px borders, content-box = 46); share is a <button> (44) */
.s-site .s-detailbar__back {
  --btn-height: calc(var(--h-44) + 2px);
  width: calc(var(--h-44) + 2px);
}

.s-site .s-detailbar__logo img {
  display: block;
  height: 34px;
}

/* Page frame */
.s-site .s-service-page,
.s-site .s-service-page__bar {
  line-height: var(--lh-normal); /* the boards set no line-height */
}

.s-site .s-service-page {
  background: var(--color-canvas);
  color: var(--color-text-primary);
}

.s-site .s-service-page__inner {
  padding-block: 0 120px;
}

.s-site .s-service-page__crumbs {
  display: none;
}

.s-site .s-service-page__grid,
.s-site .s-service-page__main,
.s-site .s-service-page__aside {
  display: contents;
}

.s-site .s-service-page__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
}

.s-site .s-gallery { order: 1; }
.s-site .s-service-page__intro { order: 2; }
.s-site .s-price-card { order: 3; }
.s-site .s-service-provider { order: 4; }
.s-site .s-service-page__description { order: 5; }
.s-site .s-service-page__features-card { order: 6; }
.s-site .s-service-page__hours { order: 7; }

/* Gallery: phone swipe track, desktop frame + thumbnails */
.s-site .s-gallery {
  margin-inline: calc(-1 * var(--gutter));
  padding-block-end: var(--sp-12);
  background: var(--color-surface);
}

.s-site .s-gallery__frame,
.s-site .s-gallery__thumbs {
  display: none;
}

.s-site .s-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.s-site .s-gallery__track::-webkit-scrollbar {
  display: none;
}

.s-site .s-gallery__slide {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  height: 260px;
  scroll-snap-align: center;
  background: var(--color-action-subtle);
}

.s-site .s-gallery__slide img {
  width: 85%;
  height: 85%;
  object-fit: contain;
}

.s-site .s-gallery__placeholder {
  color: var(--color-text-disabled);
}

.s-site .s-gallery .s-snap-dots {
  padding-block-start: var(--sp-10);
}

/* Title block */
.s-site .s-service-page__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.s-site .s-service-page__category {
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--color-action);
}

.s-site .s-service-page__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-700);
  line-height: 1.4;
}

.s-site .s-service-page__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-service-page__facts li {
  padding: 5px var(--sp-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--fs-13);
}

.s-site .s-service-page__fact-label {
  display: none;
}

/* Description, features, working days */
.s-site .s-service-page__subtitle {
  margin: 0;
  font-family: var(--font-display);
  line-height: var(--lh-normal);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
}

.s-site .s-service-page__description {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.s-site .s-service-page__description p {
  margin: 0;
  max-width: 720px;
  font-size: var(--fs-15);
  line-height: 1.9;
  color: var(--color-text-strong);
}

.s-site .s-service-page__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-16);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  background: var(--color-surface);
}

.s-site .s-service-page__features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-service-page__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  font-size: var(--fs-14);
  line-height: var(--lh-160);
}

.s-site .s-service-page__check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-6);
  background: var(--color-success-surface);
  color: var(--color-success);
}

.s-site .s-service-page__hours {
  display: block;
  padding-block: 0;
}

.s-site .s-service-page__hours > summary {
  padding-block: var(--sp-16);
  font-size: var(--fs-17);
  cursor: pointer;
}

.s-site .s-service-page__note {
  display: none;
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-service-page__days {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin: 0 0 var(--sp-14);
  font-size: var(--fs-14);
}

.s-site .s-service-page__days > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-8);
}

.s-site .s-service-page__days dt {
  font-weight: var(--fw-600);
}

.s-site .s-service-page__days dd {
  margin: 0;
  color: var(--color-text-strong);
}

/* Price card */
.s-site .s-price-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-16);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  background: var(--color-surface);
}

.s-site .s-price-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-8);
}

.s-site .s-price-card__amount {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-700);
  color: var(--color-brand-dark);
}

.s-site .s-price-card__currency {
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
}

.s-site .s-price-card__old {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-price-card__pending {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-600);
  color: var(--color-brand-dark);
}

.s-site .s-price-card__days {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-price-card__durations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
}

.s-site .s-duration {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-12);
  border: 1px solid var(--color-border);
  border-radius: var(--r-12);
  cursor: pointer;
}

.s-site .s-duration:has(input:checked) {
  padding: calc(var(--sp-12) - 1px);
  border: 2px solid var(--color-action);
  background: var(--color-action-subtle);
}

.s-site .s-duration:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.s-site .s-duration input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-action);
}

.s-site .s-duration__days {
  font-size: var(--fs-14);
  font-weight: var(--fw-700);
}

.s-site .s-duration__price {
  grid-column: 2;
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.s-site .s-duration:has(input:checked) .s-duration__price {
  color: var(--color-tone-brand-text);
}

/* The phone board keeps the main action in the sticky bar */
.s-site .s-price-card__book,
.s-site .s-price-card__info {
  display: none;
}

.s-site .s-price-card__info {
  flex-direction: column;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-14);
  color: var(--color-text-strong);
}

.s-site .s-price-card__info li {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.s-site .s-price-card__info .s-icon {
  flex-shrink: 0;
  color: var(--color-action);
}

/* Provider */
.s-site .s-service-provider {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-14);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.s-site .s-service-provider.s-card--linked:hover {
  border-color: var(--color-border-hover);
}

.s-site .s-service-provider__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-12);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--fw-700);
}

.s-site .s-service-provider__id {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.s-site .s-service-provider__label {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.s-site .s-service-provider__name {
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
}

.s-site .s-service-provider__name a {
  color: inherit;
  text-decoration: none;
}

.s-site .s-service-provider__name a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.s-site .s-service-provider__name a:focus-visible {
  outline: none;
}

.s-site .s-service-provider:has(a:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.s-site .s-service-provider__place,
.s-site .s-service-provider__chevron {
  display: none;
}

.s-site .s-service-provider__place {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-service-provider__visit {
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--color-action);
}

.s-site .s-service-provider__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* Sticky bar (phones) */
.s-site .s-service-page__footer {
  padding-block-end: 86px; /* room for the sticky bar */
}

.s-site .s-service-page__bar {
  align-items: center;
  gap: var(--sp-12);
}

.s-site .s-service-page__bar-price {
  display: flex;
  flex-direction: column;
}

.s-site .s-service-page__bar-days {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

.s-site .s-service-page__bar-amount {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-700);
  color: var(--color-brand-dark);
}

/* ---- Desktop (board 21) ---- */
@media (min-width: 640px) {
  .s-site .s-service-page__chrome {
    display: block;
  }

  .s-site .s-detailbar {
    display: none;
  }

  .s-site .s-service-page__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-28);
    padding-block: var(--sp-24) 64px;
  }

  .s-site .s-service-page__crumbs {
    display: block;
  }

  .s-site .s-service-page__grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-32);
  }

  .s-site .s-service-page__main,
  .s-site .s-service-page__aside {
    display: flex;
    flex-direction: column;
  }

  .s-site .s-service-page__main {
    flex: 999 1 560px;
    min-width: 0;
    gap: var(--sp-28);
  }

  .s-site .s-service-page__aside {
    flex: 1 1 340px;
    max-width: 400px;
    gap: var(--sp-16);
  }

  .s-site .s-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    margin-inline: 0;
    padding: 0;
    background: none;
  }

  .s-site .s-gallery__swipe {
    display: none;
  }

  .s-site .s-gallery__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--color-border);
    border-radius: var(--r-20);
    background: var(--color-surface);
  }

  .s-site .s-gallery__frame img {
    width: 80%;
    height: 80%;
    object-fit: contain;
  }

  .s-site .s-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-10);
  }

  .s-site .s-gallery__thumb {
    box-sizing: content-box; /* board: the ratio applies inside border + padding, so the chosen one sets the row (168px) */
    overflow: hidden;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--r-12);
    background: var(--color-surface);
    cursor: pointer;
  }

  .s-site .s-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .s-site .s-gallery__thumb[aria-pressed='true'] {
    padding: var(--sp-6);
    border: 2px solid var(--color-action);
  }

  .s-site .s-gallery__thumb[aria-pressed='true'] img {
    object-fit: contain;
  }

  .s-site .s-gallery__thumb:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .s-site .s-service-page__intro {
    gap: var(--sp-12);
  }

  .s-site .s-service-page__category {
    font-size: var(--fs-14);
  }

  .s-site .s-service-page__title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.3;
  }

  .s-site .s-service-page__facts {
    gap: var(--sp-8);
  }

  .s-site .s-service-page__facts li {
    padding: var(--sp-6) var(--sp-12);
    font-size: var(--fs-14);
  }

  .s-site .s-service-page__fact-label {
    display: inline;
  }

  /* Board 21 shows the description as the last line of the title block, without its own heading */
  .s-site .s-service-page__description {
    margin-block-start: calc(var(--sp-12) - var(--sp-28));
  }

  .s-site .s-service-page__description .s-service-page__subtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .s-site .s-service-page__description p {
    font-size: var(--fs-16);
  }

  .s-site .s-service-page__subtitle {
    font-size: var(--fs-20);
  }

  .s-site .s-service-page__card {
    gap: var(--sp-14);
    padding: var(--sp-24);
    border-radius: var(--r-20);
  }

  .s-site .s-service-page__features {
    gap: var(--sp-12);
  }

  .s-site .s-service-page__features li {
    gap: var(--sp-10);
    font-size: var(--fs-15);
  }

  .s-site .s-service-page__check {
    width: 24px;
    height: 24px;
    border-radius: var(--r-8);
  }

  .s-site .s-service-page__hours[open] {
    display: flex;
  }

  .s-site .s-service-page__hours > summary {
    padding: 0;
    font-size: var(--fs-20);
    list-style: none;
    cursor: default;
    pointer-events: none;
  }

  .s-site .s-service-page__hours > summary::-webkit-details-marker {
    display: none;
  }

  .s-site .s-service-page__note {
    display: block;
  }

  .s-site .s-service-page__days {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-8);
    margin: var(--sp-14) 0 0; /* the details' content is one box, so the card's gap stops at the summary */
  }

  .s-site .s-service-page__days > div {
    padding: var(--sp-10) var(--sp-12);
    border-radius: var(--r-10);
    background: var(--color-canvas);
  }

  .s-site .s-price-card {
    gap: var(--sp-16);
    padding: var(--sp-22);
    border-radius: var(--r-20);
    box-shadow: var(--shadow-e2);
  }

  .s-site .s-price-card__price {
    gap: var(--sp-10);
  }

  .s-site .s-price-card__amount {
    font-size: var(--fs-34);
  }

  .s-site .s-price-card__currency,
  .s-site .s-price-card__old {
    font-size: var(--fs-16);
  }

  .s-site .s-duration {
    gap: var(--sp-2) var(--sp-8);
  }

  .s-site .s-duration__days {
    font-weight: var(--fw-600);
  }

  .s-site .s-duration__price {
    font-size: var(--fs-13);
  }

  .s-site .s-price-card__book {
    display: flex;
  }

  .s-site .s-price-card__info {
    display: flex;
  }

  .s-site .s-service-provider {
    gap: var(--sp-14);
    padding: var(--sp-18);
    border-radius: var(--r-20);
  }

  .s-site .s-service-provider__avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--r-14);
    font-family: var(--font-display);
    font-size: var(--fs-22);
  }

  .s-site .s-service-provider__id {
    gap: var(--sp-2);
  }

  .s-site .s-service-provider__name {
    font-family: var(--font-display);
    font-size: var(--fs-16);
  }

  .s-site .s-service-provider__place {
    display: block;
  }

  .s-site .s-service-provider__chevron {
    display: block;
  }

  .s-site .s-service-provider__visit {
    display: none;
  }

  .s-site .s-service-page__bar {
    display: none;
  }

  .s-site .s-service-page__footer {
    padding-block-end: 0;
  }
}

/* ---- resources\css\site\pages\catalog.css ---- */
/* Catalog pages (B2-A): services list + filters (boards 24 desktop / 64 phone / 14 filter sheet), providers directory
   (22 / 66) and provider profile (23 / 67). Page composition only: cards, chips, buttons, hero, pager, tabs and the sheet are
   shared components. Phone values first; the filter panel appears from 1024px (below it the phone toolbar + sheet are used),
   everything else changes at 640px like the other pages. Board measurements are noted where a number is not a token. */

/* ======================================================================== */
/* Filter fields (panel and sheet)                                           */
/* ======================================================================== */
.s-site .s-filter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  line-height: var(--lh-normal);
}

.s-site .s-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s-site .s-filter__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
}

.s-site .s-filter__reset {
  padding-block: var(--sp-8);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--color-action);
}

.s-site .s-filter__field,
.s-site .s-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.s-site .s-filter__group {
  gap: var(--sp-10);
}

.s-site .s-filter__label {
  padding: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--color-text-primary);
}

.s-site .s-filter__group > .s-filter__label {
  margin-block-end: var(--sp-10);
}

.s-site .s-filter__field--small {
  gap: var(--sp-4);
}

.s-site .s-filter__sublabel {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

/* Text input / select: the sheet uses the 50px field of board 14 (48 + borders), the panel the 48px of board 24. */
.s-site .s-filter__input,
.s-site .s-filter__select {
  box-sizing: border-box;
  width: 100%;
  height: 50px; /* the boards' inputs are content-box (48 + borders); their selects border-box (48) */
  padding-block: 0;
  padding-inline: var(--sp-12);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-12);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--fs-15);
}

.s-site .s-filter__select {
  height: 48px;
}

.s-site .s-filter__input::placeholder {
  color: var(--color-text-muted);
}

.s-site .s-filter__input:focus-visible,
.s-site .s-filter__select:focus-visible,
.s-site .s-catalog__search-input:focus-visible,
.s-site .s-vendors__input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-focus);
}

.s-site .s-filter__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
}

.s-site .s-filter__prices .s-filter__input {
  height: 46px;
  padding-inline: var(--sp-10);
  border-radius: var(--r-10);
}

.s-site .s-filter__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-filter__list--tight {
  gap: var(--sp-6);
}

.s-site .s-filter__option {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  min-height: 32px;
  font-size: var(--fs-14);
  cursor: pointer;
}

.s-site .s-filter__option input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-action);
}

.s-site .s-filter__option-label {
  flex: 1;
}

.s-site .s-filter__option-count {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-filter__option.is-empty {
  color: var(--color-text-secondary);
}

.s-site .s-filter__more > summary {
  padding-block: var(--sp-6);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--color-action);
  list-style: none;
  cursor: pointer;
}

.s-site .s-filter__more > summary::-webkit-details-marker {
  display: none;
}

.s-site .s-filter__more[open] > summary {
  margin-block-end: var(--sp-10);
}

.s-site .s-filter__more-close,
.s-site .s-filter__more[open] .s-filter__more-open {
  display: none;
}

.s-site .s-filter__more[open] .s-filter__more-close {
  display: inline;
}

.s-site .s-filter__apply {
  margin-block-start: var(--sp-4);
}

.s-site:where(.s-js *) .s-filter--panel .s-filter__apply {
  display: none;
}

/* Board 14: the sheet's top edge sits 96px below the screen's top, whatever its content */
.s-site .s-dialog--sheet.s-catalog-sheet {
  max-height: calc(100dvh - 96px);
}

/* Sheet footer (board 14): the reset button keeps its own width, "show results" takes the rest. */
.s-site .s-dialog__footer:has(.s-filter__show) {
  display: flex;
  gap: var(--sp-10);
}

.s-site .s-filter__clear {
  --btn-padding: var(--sp-18);
  --btn-font-size: var(--fs-15);
}

.s-site .s-filter__show {
  flex: 1;
  --btn-font-size: var(--fs-16);
}

/* Price slider (added by price-range.js over the two number fields) */
.s-site .s-range {
  position: relative;
  height: 24px;
}

.s-site .s-range__track,
.s-site .s-range__fill {
  position: absolute;
  inset-block-start: 10px;
  height: 4px;
  border-radius: 4px;
}

.s-site .s-range__track {
  inset-inline: 0;
  background: var(--color-border);
}

.s-site .s-range__fill {
  inset-inline-start: var(--range-from, 0%);
  inset-inline-end: calc(100% - var(--range-to, 100%));
  background: var(--color-action);
}

.s-site .s-range__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.s-site .s-range__input::-webkit-slider-runnable-track {
  background: transparent;
}

.s-site .s-range__input::-moz-range-track {
  background: transparent;
}

.s-site .s-range__input::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  pointer-events: auto;
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
}

.s-site .s-range__input::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-action);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  pointer-events: auto;
  cursor: grab;
}

.s-site .s-range__input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ======================================================================== */
/* Services page                                                             */
/* ======================================================================== */
.s-site .s-catalog {
  background: var(--color-canvas);
  line-height: var(--lh-normal);
}

/* The boards set no line-height on their headings: the font's own, not the site's heading ratio. */
.s-site .s-filter__title,
.s-site .s-vendor__services-title,
.s-site .s-vendor__card-title,
.s-site .s-vendors__join h2 {
  line-height: var(--lh-normal);
}

.s-site .s-catalog__inner {
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-14) 64px;
}

.s-site .s-catalog__aside {
  display: none;
}

.s-site .s-catalog__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
  min-width: 0;
}

/* Phone toolbar (board 64): the title search, then the filter button next to the sort select. */
.s-site .s-catalog__phone-tools {
  display: contents;
}

.s-site .s-catalog__search {
  position: relative;
  grid-column: 1 / -1;
  order: 1;
}

.s-site .s-catalog__search-input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding-block: 0;
  padding-inline: var(--sp-12) 42px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-12);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--fs-15);
}

.s-site .s-catalog__search-icon {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-end: 14px;
  color: var(--color-text-secondary);
  pointer-events: none;
}

.s-site .s-catalog__phone-row {
  order: 2;
}

.s-site .s-catalog__filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-action);
  border-radius: var(--r-12);
  background: var(--color-action-subtle);
  color: var(--color-brand-dark);
  font: inherit;
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  cursor: pointer;
}

.s-site .s-catalog__bar {
  display: contents;
}

.s-site .s-catalog__sort {
  display: flex;
  order: 3;
  min-width: 0;
}

.s-site .s-catalog__sort-label,
.s-site .s-catalog__views {
  display: none;
}

.s-site .s-catalog__sort-select {
  height: 46px;
  padding-inline: var(--sp-10);
  font-size: var(--fs-14);
}

.s-site .s-catalog__count {
  grid-column: 1 / -1;
  order: 5;
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-strong);
}

.s-site .s-catalog__count strong {
  font-weight: var(--fw-600);
  color: var(--color-text-primary);
}

.s-site .s-catalog__chips {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  order: 4;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-catalog__chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding-inline: var(--sp-6) var(--sp-10);
  border-radius: var(--radius-pill);
  background: var(--color-action-subtle);
  color: var(--color-on-action-subtle);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  text-decoration: none;
}

.s-site .s-catalog__chip-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: var(--fs-16);
}

.s-site .s-catalog__chip:hover .s-catalog__chip-x {
  background: var(--color-focus-ring);
  border-radius: var(--radius-pill);
}

.s-site .s-catalog__grid,
.s-site .s-catalog__rows {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  order: 6;
  gap: var(--sp-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-catalog__grid > li,
.s-site .s-catalog__rows > li {
  display: flex;
  min-width: 0;
}

.s-site .s-catalog__grid > li > .s-service-card,
.s-site .s-catalog__rows > li > .s-service-card {
  flex: 1;
}

.s-site .s-service-card__city-inline {
  display: none;
}

/* Phone cards (board 64): 170px picture, body padding 14 / gap 6, button text 14; "by X · city" on one line, no divider above the price */
.s-site .s-catalog__grid .s-service-card__city {
  display: none;
}

.s-site .s-catalog__grid .s-service-card__city-inline {
  display: inline;
}

.s-site .s-catalog__grid .s-service-card__footer {
  margin-block-start: var(--sp-6);
  padding-block-start: 0;
  border-block-start: 0;
}

.s-site .s-catalog__grid .s-service-card__media {
  height: 170px;
}

.s-site .s-catalog__grid .s-service-card__body {
  gap: var(--sp-6);
  padding: var(--sp-14);
}

.s-site .s-catalog__grid .s-service-card__category {
  font-size: var(--fs-12);
}

.s-site .s-catalog__grid .s-service-card__book {
  --btn-font-size: var(--fs-14);
}

.s-site .s-catalog__pager,
.s-site .s-catalog__empty {
  grid-column: 1 / -1;
  order: 7;
}

/* ---- Tablet / desktop (boards 24) ---- */
@media (min-width: 640px) {
  .s-site .s-catalog__inner {
    padding-block: var(--sp-28) 64px;
  }

  .s-site .s-catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-20);
  }

  .s-site .s-catalog__grid .s-service-card__media {
    height: 180px;
  }

  .s-site .s-catalog__grid .s-service-card__body {
    gap: var(--sp-8);
    padding: var(--sp-16);
  }

  .s-site .s-catalog__grid .s-service-card__category {
    font-size: var(--fs-13);
  }

  .s-site .s-catalog__grid .s-service-card__city {
    display: flex;
  }

  .s-site .s-catalog__grid .s-service-card__city-inline {
    display: none;
  }

  .s-site .s-catalog__grid .s-service-card__footer {
    margin-block-start: auto;
    padding-block-start: var(--sp-10);
    border-block-start: 1px solid var(--color-border-subtle);
  }

  .s-site .s-catalog__grid .s-service-card__book {
    --btn-font-size: var(--fs-15);
  }

  .s-site .s-catalog__rows {
    gap: var(--sp-12);
  }
}

/* Desktop: filter panel at the start, results beside it (board 24) */
@media (min-width: 1024px) {
  .s-site .s-catalog__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-28);
  }

  .s-site .s-catalog__aside {
    display: block;
    flex: 0 0 348px; /* board 24 rendered: 306 content + 2 × 20 padding + borders; the results take the rest (904 at 1440) */
    box-sizing: border-box;
    padding: var(--sp-20);
    border: 1px solid var(--color-border);
    border-radius: var(--r-20);
    background: var(--color-surface);
  }

  .s-site .s-filter--panel {
    gap: var(--sp-22);
  }

  .s-site .s-filter--panel .s-filter__input {
    height: 48px;
    font-size: var(--fs-14);
  }

  .s-site .s-filter--panel .s-filter__select {
    height: 46px;
    font-size: var(--fs-14);
  }

  .s-site .s-filter--panel .s-filter__prices .s-filter__input {
    height: 42px;
    font-size: var(--fs-14);
  }

  .s-site .s-catalog__results {
    display: flex;
    flex: 999 1 560px;
    flex-direction: column;
    gap: var(--sp-18);
  }

  .s-site .s-catalog__phone-tools {
    display: none;
  }

  .s-site .s-catalog__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
  }

  .s-site .s-catalog__count {
    font-size: var(--fs-15);
  }

  .s-site .s-catalog__sort {
    align-items: center;
    gap: var(--sp-10);
  }

  .s-site .s-catalog__sort-label {
    display: block;
    font-size: var(--fs-14);
    color: var(--color-text-secondary);
  }

  .s-site .s-catalog__sort-select {
    width: auto;
    height: 44px;
    padding-inline: var(--sp-12);
  }

  .s-site .s-catalog__views {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--r-12);
  }

  .s-site .s-catalog__view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 42px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
  }

  .s-site .s-catalog__view + .s-catalog__view {
    border-inline-start: 1px solid var(--color-border-strong);
  }

  .s-site .s-catalog__view[aria-current='true'] {
    background: var(--color-action-subtle);
    color: var(--color-action);
  }

  .s-site .s-catalog__chips {
    gap: var(--sp-8);
    order: 0;
  }

  .s-site .s-catalog__chip {
    height: 34px;
    padding-inline: var(--sp-6) var(--sp-12);
    font-size: var(--fs-13);
  }

  .s-site .s-catalog__count,
  .s-site .s-catalog__sort,
  .s-site .s-catalog__grid,
  .s-site .s-catalog__rows,
  .s-site .s-catalog__pager,
  .s-site .s-catalog__empty {
    order: 0;
  }

  .s-site .s-catalog__pager {
    margin-block-start: var(--sp-8);
  }
}

/* ======================================================================== */
/* Providers directory                                                       */
/* ======================================================================== */
.s-site .s-vendors {
  background: var(--color-canvas);
  line-height: var(--lh-normal);
}

.s-site .s-vendors__search {
  padding-block: var(--sp-14) 0;
}

.s-site .s-vendors__form {
  display: flex;
  gap: var(--sp-8);
}

.s-site .s-vendors__name {
  position: relative;
  flex: 2 1 0;
  min-width: 0;
}

.s-site .s-vendors__input {
  box-sizing: border-box;
  width: 100%;
  height: 50px; /* phone board: 48 + borders; the desktop board is border-box 52 */
  padding-block: 0;
  padding-inline: var(--sp-12) 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-12);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--fs-14);
}

.s-site .s-vendors__icon {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 14px;
  color: var(--color-text-secondary);
  pointer-events: none;
}

.s-site .s-vendors__city {
  flex: 1 1 0;
  min-width: 0;
}

.s-site .s-vendors__select {
  height: 48px;
  padding-inline: var(--sp-8);
  font-size: var(--fs-14);
}

.s-site .s-vendors__submit {
  display: none;
}

.s-site .s-vendors__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding-block: var(--sp-14) 64px;
}

.s-site .s-vendors__count {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-vendors__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-vendors__grid > li {
  display: flex;
}

.s-site .s-vendors__grid > li > .s-provider-card {
  flex: 1;
}

.s-site .s-vendors__join {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  margin-block-start: var(--sp-12);
  padding: var(--sp-24) var(--sp-20);
  border-radius: var(--r-20);
  background: var(--color-inverse-surface-deep);
  color: var(--color-on-inverse-strong);
}

.s-site .s-vendors__join h2 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-600);
}

.s-site .s-vendors__join p {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--color-on-inverse-muted);
}

.s-site .s-vendors__join-action {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-brand-dark);
  --btn-border: transparent;
  --btn-bg-hover: var(--color-action-subtle);
  align-self: flex-start;
}

@media (min-width: 640px) {
  .s-site .s-vendors__search {
    padding-block: var(--sp-20) var(--sp-28);
    border-block-end: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
  }

  .s-site .s-vendors__form {
    flex-wrap: wrap;
    gap: var(--sp-10);
  }

  .s-site .s-vendors__name {
    flex: 2 1 280px;
  }

  .s-site .s-vendors__input {
    height: 52px;
    padding-inline: var(--sp-14) 44px;
    font-size: var(--fs-15);
  }

  .s-site .s-vendors__icon {
    inset-block-start: 17px;
  }

  .s-site .s-vendors__city {
    flex: 1 1 180px;
  }

  .s-site .s-vendors__select {
    height: 52px;
    padding-inline: var(--sp-14);
    font-size: var(--fs-15);
  }

  .s-site .s-vendors__submit {
    display: inline-flex;
    --btn-height: 52px;
    --btn-padding: var(--sp-24);
  }

  .s-site .s-vendors__inner {
    gap: var(--sp-20);
    padding-block: var(--sp-28) 64px;
  }

  .s-site .s-vendors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-20);
  }

  .s-site .s-vendors__join {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-block-start: var(--sp-24);
    padding: var(--sp-32);
    border-radius: var(--r-24);
  }

  .s-site .s-vendors__join h2 {
    font-size: var(--fs-22);
  }

  .s-site .s-vendors__join-text {
    flex: 1 1 380px;
  }

  .s-site .s-vendors__join-action {
    align-self: center;
    --btn-height: 48px;
    --btn-padding: var(--sp-22);
  }
}

/* ======================================================================== */
/* Provider profile                                                          */
/* ======================================================================== */
.s-site .s-vendor {
  background: var(--color-canvas);
  line-height: var(--lh-normal);
}

.s-site .s-vendor__chrome {
  display: none;
}

.s-site .s-vendor__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding-block: var(--sp-14) 64px;
}

.s-site .s-vendor__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-20);
  border: 1px solid var(--color-border);
  border-radius: var(--r-20);
  background: var(--color-surface);
}

.s-site .s-vendor__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-600);
}

.s-site .s-vendor__card-note {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-vendor__card-text {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-180);
  color: var(--color-text-strong);
}

.s-site .s-vendor__address {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
}

/* Phone: the contact buttons are a plain two-column row above the tabs (board 67); the aside card is for 640px and up */
.s-site .s-vendor__phone-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-8);
}

.s-site .s-vendor__phone-contact .s-btn--secondary {
  --btn-height: 48px; /* 46 + its border on the board */
}

.s-site .s-vendor__phone-contact .s-btn--quiet {
  --btn-height: 46px;
}

.s-site .s-vendor__phone-contact .s-btn {
  --btn-font-size: var(--fs-14);
  --btn-padding: var(--sp-12);
}

.s-site .s-vendor__contact {
  display: none;
}

.s-site .s-vendor__contact-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
}

.s-site .s-vendor__panel[hidden] {
  display: none; /* the phone tabs; author display rules above would otherwise win over [hidden] */
}

.s-site .s-vendor__tabs {
  display: none;
}

.s-site:where(.s-js *) .s-vendor__tabs {
  display: flex;
}

.s-site .s-vendor__layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
}

.s-site .s-vendor__aside {
  display: contents;
}

.s-site .s-vendor__services {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  min-width: 0;
}

.s-site .s-vendor__services-title {
  display: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
}

.s-site .s-vendor__services-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
}

.s-site .s-vendor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.s-site .s-vendor__chips--single {
  display: none;
}

.s-site .s-vendor__grid {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-vendor__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-vendor__rows > li {
  display: flex;
}

.s-site .s-vendor__rows > li > .s-service-card {
  flex: 1;
}

/* Phone row (board 67): 84 × 70 picture, category 12 / title 15 / "size · price" 13, 40px button */
.s-site .s-service-card--detailed {
  gap: var(--sp-12);
  padding: var(--sp-12);
  border-radius: var(--r-16);
}

.s-site .s-service-card--detailed .s-service-card__media {
  width: 84px;
  height: 70px;
  border-radius: var(--r-10);
}

.s-site .s-service-card--detailed .s-service-card__media img {
  width: 76px;
  height: 56px;
}

.s-site .s-service-card--detailed .s-service-card__body {
  flex: 1;
  gap: var(--sp-4);
}

.s-site .s-service-card--detailed .s-service-card__category {
  font-size: var(--fs-12);
}

.s-site .s-service-card--detailed .s-card__title {
  font-size: var(--fs-15);
}

.s-site .s-service-card--detailed .s-service-card__meta {
  flex-direction: row;
  align-items: baseline;
}

.s-site .s-service-card--detailed .s-service-card__row-size + .s-price::before {
  content: '· ';
}

.s-site .s-service-card--detailed .s-service-card__book {
  --btn-height: 40px;
  --btn-padding: var(--sp-12);
  --btn-radius: var(--r-10);
  --btn-font-size: var(--fs-13);
}

.s-site .s-vendor__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
}

.s-site .s-vendor__textarea {
  height: auto;
  min-height: 112px;
  padding-block: var(--sp-12);
  font: inherit;
  resize: vertical;
}

.s-site .s-vendor__form-status {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-success-text);
}

.s-site .s-vendor__form-status.is-error {
  color: var(--color-error-text);
}

.s-site .s-vendor__days {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin: 0;
}

.s-site .s-vendor__day {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-10);
  background: var(--color-canvas);
  font-size: var(--fs-14);
}

.s-site .s-vendor__day dt {
  font-weight: var(--fw-600);
}

.s-site .s-vendor__day dd {
  margin: 0;
  color: var(--color-text-strong);
}

.s-site .s-vendor__day.is-closed dd {
  color: var(--color-text-secondary);
}

@media (min-width: 640px) {
  .s-site .s-vendor__chrome {
    display: block;
  }

  .s-site .s-vendor__inner {
    gap: var(--sp-16);
    padding-block: var(--sp-32) 64px;
  }

  .s-site .s-vendor__tabs,
  .s-site:where(.s-js *) .s-vendor__tabs {
    display: none;
  }

  /* All panels are shown; the phone tabs only switch them below 640px */
  .s-site .s-vendor__panel[hidden] {
    display: flex;
  }

  .s-site .s-vendor__layout {
    gap: var(--sp-16);
  }

  .s-site .s-vendor__aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
  }

  .s-site .s-vendor__phone-contact {
    display: none;
  }

  .s-site .s-vendor__contact {
    display: flex;
    gap: var(--sp-12);
    padding: var(--sp-20);
  }

  .s-site .s-vendor__contact-actions .s-btn {
    --btn-font-size: var(--fs-15);
    --btn-height: 48px;
  }

  .s-site .s-vendor__contact-actions .s-btn--quiet {
    --btn-height: 46px;
  }

  .s-site .s-vendor__services-title {
    display: block;
  }

  .s-site .s-vendor__chips--single {
    display: flex;
  }

  .s-site .s-vendor__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-20);
  }

  .s-site .s-vendor__grid > li {
    display: flex;
  }

  .s-site .s-vendor__grid > li > .s-service-card {
    flex: 1;
  }

  .s-site .s-vendor__grid .s-service-card__media {
    height: 170px;
  }

  .s-site .s-vendor__grid .s-service-card__body {
    gap: var(--sp-10);
  }

  .s-site .s-vendor__rows {
    display: none;
  }
}

@media (min-width: 900px) {
  .s-site .s-vendor__layout {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-32);
  }

  .s-site .s-vendor__services {
    flex: 999 1 600px;
  }

  .s-site .s-vendor__aside {
    flex: 1 1 320px;
    max-width: 380px;
  }
}

/* ---- resources\css\site\pages\content.css ---- */
/* Content pages (B2): About (boards 43 / 52), Contact (44 / 53), Blog (45 / 54), Blog post (46 / 55), FAQ (47 / 56), How it works
   (48 / 57), additional pages (49 / 58) and the 404 (51 / 60). Page composition only: hero, buttons, chips, cards, pager, alert,
   fields, badge and the FAQ item are shared components. Phone values first; layouts change at 640px (tablet) and 1024px (desktop)
   like the other pages. Bands on a dark surface restyle the shared buttons through the band's own selector, as the provider
   page does, so no new button variant exists. */

/* ======================================================================== */
/* Hero of the content boards (43 – 49: title 2.6rem and 48px below, the catalog boards use 2.5rem / 44px) */
/* ======================================================================== */
@media (min-width: 640px) {
  .s-site :is(.s-about, .s-contact, .s-blog, .s-faqpage, .s-how, .s-page) .s-page-hero__inner {
    padding-block-end: 48px;
  }

  .s-site :is(.s-about, .s-contact, .s-blog, .s-faqpage, .s-how, .s-page, .s-post) .s-page-hero__title {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
  }
}

/* ======================================================================== */
/* Rich text of the admin (About, posts, additional pages) — already purified */
/* ======================================================================== */
.s-site .s-prose {
  font-size: var(--fs-16);
  line-height: var(--lh-180);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.s-site .s-prose > :first-child {
  margin-block-start: 0;
}

.s-site .s-prose > :last-child {
  margin-block-end: 0;
}

.s-site .s-prose p,
.s-site .s-prose ul,
.s-site .s-prose ol,
.s-site .s-prose blockquote,
.s-site .s-prose table {
  margin-block: 0 var(--sp-16);
}

.s-site .s-prose h2,
.s-site .s-prose h3,
.s-site .s-prose h4 {
  margin-block: var(--sp-24) var(--sp-12);
  font-family: var(--font-display);
  font-weight: var(--fw-600);
  line-height: var(--lh-150);
  scroll-margin-block-start: var(--sp-24);
}

.s-site .s-prose h2 {
  font-size: var(--fs-22);
}

.s-site .s-prose h3 {
  font-size: var(--fs-18);
}

.s-site .s-prose h4 {
  font-size: var(--fs-16);
}

.s-site .s-prose ul,
.s-site .s-prose ol {
  padding-inline-start: var(--sp-24);
}

.s-site .s-prose li + li {
  margin-block-start: var(--sp-6);
}

.s-site .s-prose a[href] {
  color: var(--color-action-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-site .s-prose img,
.s-site .s-prose video,
.s-site .s-prose iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-12);
}

.s-site .s-prose blockquote {
  padding: var(--sp-12) var(--sp-16);
  border-inline-start: 4px solid var(--color-border-strong);
  background: var(--color-sunken);
  border-radius: var(--r-8);
}

.s-site .s-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.s-site .s-prose th,
.s-site .s-prose td {
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--color-border);
}

/* ======================================================================== */
/* Steps (About, How it works)                                               */
/* ======================================================================== */
.s-site .s-steps {
  display: grid;
  gap: var(--sp-14);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-16);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  background: var(--color-surface);
  line-height: var(--lh-normal);
}

.s-site .s-steps__number {
  display: grid;
  place-items: center;
  width: var(--h-40);
  height: var(--h-40);
  border-radius: var(--r-10);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-700);
}

.s-site .s-steps__item h2,
.s-site .s-steps__item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
}

.s-site .s-steps__item p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-170);
  color: var(--color-text-secondary);
}

/* ======================================================================== */
/* About                                                                      */
/* ======================================================================== */
.s-site .s-about__story {
  padding-block: var(--sp-28);
  background: var(--color-canvas);
}

.s-site .s-about__story-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
}

.s-site .s-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
  min-width: 0;
}

.s-site .s-about__heading,
.s-site .s-about__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-700);
  line-height: var(--lh-normal);
}

.s-site .s-about__prose {
  font-size: var(--fs-16);
  line-height: var(--lh-180);
}

.s-site .s-about__action {
  align-self: flex-start;
}

.s-site .s-about__callout {
  margin: 0;
  padding: var(--sp-16) var(--sp-20);
  border-radius: var(--r-16);
  background: var(--color-tone-brand-surface);
  color: var(--color-tone-brand-text);
  font-weight: var(--fw-600);
  line-height: var(--lh-170);
}

.s-site .s-about__list {
  padding: var(--sp-22);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
}

.s-site .s-about__list-title {
  margin: 0 0 var(--sp-10);
  font-family: var(--font-display);
  font-size: var(--fs-19);
  font-weight: var(--fw-600);
  line-height: var(--lh-normal);
}

.s-site .s-about__list p {
  margin: 0 0 var(--sp-8);
  color: var(--color-text-secondary);
}

.s-site .s-about__list ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin: 0;
  padding-inline-start: var(--sp-20);
  color: var(--color-text-strong);
  line-height: var(--lh-180);
}

.s-site .s-about__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-24);
  background: var(--color-sunken);
}

.s-site .s-about__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.s-site .s-about__features,
.s-site .s-about__steps,
.s-site .s-about__reviews,
.s-site .s-about__custom {
  padding-block: var(--sp-28);
}

.s-site .s-about__features,
.s-site .s-about__reviews {
  border-block: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.s-site .s-about__eyebrow,
.s-site .s-how__eyebrow {
  display: block;
  margin-block-end: var(--sp-6);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--color-action-text);
}

.s-site .s-about__title {
  margin-block-end: var(--sp-20);
  font-size: var(--fs-22);
}

.s-site .s-about__feature-grid,
.s-site .s-about__review-grid {
  display: grid;
  gap: var(--sp-14);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-about__feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-16);
  border-radius: var(--r-16);
  background: var(--color-canvas);
  line-height: var(--lh-normal);
}

.s-site .s-about__feature h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-600);
}

.s-site .s-about__feature p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-170);
  color: var(--color-text-secondary);
}

.s-site .s-about__tick {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-10);
  background: var(--color-action);
  color: var(--color-on-action);
}

.s-site .s-review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-18);
  border-radius: var(--r-16);
  background: var(--color-canvas);
  line-height: var(--lh-normal);
}

.s-site .s-review__stars {
  color: var(--color-star);
  letter-spacing: 2px;
}

.s-site .s-review blockquote {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.9;
  color: var(--color-quote-text);
}

.s-site .s-review__by {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-review__by strong {
  color: var(--color-text-primary);
}

/* ======================================================================== */
/* Contact                                                                    */
/* ======================================================================== */
.s-site .s-contact {
  background: var(--color-canvas);
}

.s-site .s-contact__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding-block: var(--sp-24) var(--sp-32);
}

.s-site .s-contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.s-site .s-contact__cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-contact__card {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  padding: 17px var(--sp-20);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  background: var(--color-surface);
  color: var(--color-text-primary);
  line-height: var(--lh-normal);
}

.s-site .s-contact__card--whatsapp {
  border-color: var(--color-success-border);
  background: var(--color-success-surface);
}

.s-site .s-contact__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--h-50);
  height: var(--h-50);
  border-radius: var(--r-12);
  background: var(--color-action-subtle);
  color: var(--color-action-text);
}

.s-site .s-contact__card--whatsapp .s-contact__icon {
  background: var(--color-surface);
  color: var(--color-success-text);
}

.s-site .s-contact__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.s-site .s-contact__label {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-contact__value {
  font-size: var(--fs-17);
  font-weight: var(--fw-600);
  overflow-wrap: anywhere;
}

.s-site .s-contact__cta,
.s-site .s-post__cta {
  padding: var(--sp-20);
  border-radius: var(--r-20);
  background: var(--color-inverse-surface);
  color: var(--color-on-inverse-strong);
  line-height: var(--lh-normal);
}

.s-site .s-contact__cta h2,
.s-site .s-post__cta h2 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-19);
  font-weight: var(--fw-600);
}

.s-site .s-contact__cta p,
.s-site .s-post__cta p {
  margin: 0 0 var(--sp-14);
  font-size: var(--fs-14);
  color: var(--color-on-inverse-muted);
}

.s-site .s-contact__form-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  min-width: 0;
  padding: var(--sp-20);
  border: 1px solid var(--color-border);
  border-radius: var(--r-20);
  background: var(--color-surface);
}

.s-site .s-contact__form-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-600);
  line-height: var(--lh-normal);
}

.s-site .s-contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.s-site .s-contact__row {
  display: grid;
  gap: var(--sp-16);
}

.s-site textarea.s-contact__textarea {
  min-height: 170px;
  padding-block: var(--sp-12);
  resize: vertical;
}

.s-site .s-contact__actions {
  display: flex;
}

.s-site .s-contact__captcha {
  margin-block: var(--sp-2);
  direction: ltr; /* the Google widget is a fixed-size LTR box */
  max-inline-size: 100%;
  overflow-x: auto;
}

.s-site .s-contact__trap {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.s-site .s-contact__summary {
  align-items: flex-start;
}

.s-site .s-contact__summary:focus-visible,
.s-site .s-contact__notice:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--color-action));
  outline-offset: 2px;
}

.s-site .s-contact__summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.s-site .s-contact__summary-list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-site .s-contact__unavailable {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--lh-170);
}

/* Buttons that sit on a dark band: the shared button's own custom properties are overridden, no new variant */
.s-site :is(.s-contact__cta, .s-post__cta, .s-faqpage__band, .s-how__cta, .s-nf) .s-btn--secondary {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-brand-dark);
  --btn-border: transparent;
  --btn-border-width: 0;
  --btn-bg-hover: var(--color-canvas);
}

.s-site :is(.s-faqpage__band, .s-how__cta, .s-nf) .s-btn--ghost {
  --btn-fg: var(--color-on-inverse-strong);
  --btn-border: var(--color-inverse-border);
  --btn-border-width: 1px;
  --btn-bg-hover: var(--white-a10);
}

/* ======================================================================== */
/* FAQ                                                                        */
/* ======================================================================== */
.s-site .s-faqpage {
  background: var(--color-canvas);
}

.s-site .s-faqpage__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding-block: var(--sp-24) var(--sp-32);
}

.s-site .s-faqpage__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.s-site .s-faqpage .s-faq {
  padding-inline: var(--sp-20);
  border-radius: var(--r-16);
}

.s-site .s-faqpage .s-faq__question {
  padding-block: var(--sp-18);
  font-family: var(--font-display);
  font-size: var(--fs-17);
  line-height: var(--lh-normal);
}

.s-site .s-faqpage .s-faq__answer {
  margin: 0 0 var(--sp-18);
  font-size: var(--fs-15);
  line-height: 1.9;
}

.s-site .s-faqpage__band {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-24);
  border-radius: var(--r-20);
  background: var(--color-inverse-surface);
  color: var(--color-on-inverse-strong);
  line-height: var(--lh-normal);
}

.s-site .s-faqpage__band h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-19);
  font-weight: var(--fw-600);
}

.s-site .s-faqpage__band p {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-on-inverse-muted);
}

.s-site .s-faqpage__band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
}

/* ======================================================================== */
/* How it works                                                               */
/* ======================================================================== */
.s-site .s-how {
  background: var(--color-canvas);
}

.s-site .s-how__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding-block: var(--sp-24) var(--sp-32);
}

.s-site .s-how__track {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-20);
  border: 1px solid var(--color-border);
  border-radius: var(--r-24);
  background: var(--color-surface);
  line-height: var(--lh-normal);
}

.s-site .s-how__track h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
  line-height: var(--lh-normal);
}

.s-site .s-how__track p {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-how__stages {
  display: grid;
  gap: var(--sp-10);
  margin: var(--sp-8) 0;
  padding: 0;
  list-style: none;
}

.s-site .s-how__stage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

.s-site .s-how__stage span {
  display: block;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--color-action);
}

.s-site .s-how__track .s-how__note {
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-12);
  background: var(--color-canvas);
}

.s-site .s-how__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  padding: var(--sp-32);
  border-radius: var(--r-24);
  background: var(--color-action);
  color: var(--color-on-action);
}

.s-site .s-how__cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: var(--fw-700);
  line-height: var(--lh-normal);
}

/* ======================================================================== */
/* Blog list                                                                  */
/* ======================================================================== */
.s-site .s-blog {
  background: var(--color-canvas);
}

.s-site .s-blog__search {
  position: relative;
  display: flex;
  max-width: 360px;
  margin-block-start: var(--sp-6);
}

.s-site .s-blog__input {
  width: 100%;
  height: var(--h-50);
  padding-inline: var(--sp-16) var(--sp-48);
  border: 0;
  border-radius: var(--r-12);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--fs-15);
}

.s-site .s-blog__search-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: var(--h-50);
  color: var(--color-text-secondary);
}

.s-site .s-blog__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-22);
  padding-block: var(--sp-20) var(--sp-32);
}

.s-site .s-blog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
}

.s-site .s-blog__grid {
  display: grid;
  gap: var(--sp-22);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-blog__grid > li {
  display: flex;
  min-width: 0;
}

.s-site .s-blog__grid .s-card {
  flex: 1;
}

/* ======================================================================== */
/* Blog post                                                                  */
/* ======================================================================== */
.s-site .s-post {
  background: var(--color-canvas);
}

.s-site .s-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-13);
  color: var(--color-on-inverse-muted);
}

.s-site .s-post__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding-block: var(--sp-20) var(--sp-32);
}

.s-site .s-post__article {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--r-20);
  background: var(--color-surface);
}

.s-site .s-post__figure {
  margin: 0;
  background: var(--color-sunken);
}

.s-site .s-post__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.s-site .s-post__body {
  padding: var(--sp-20);
}

.s-site .s-post__body .s-prose {
  font-size: var(--fs-17);
  line-height: 2;
}

.s-site .s-post__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
  margin-block-start: var(--sp-20);
  padding-block-start: var(--sp-16);
  border-block-start: 1px solid var(--color-border);
}

.s-site .s-post__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
  min-width: 0;
}

.s-site .s-post__box {
  padding: var(--sp-22);
  border: 1px solid var(--color-border);
  border-radius: var(--r-20);
  background: var(--color-surface);
  line-height: var(--lh-normal);
}

.s-site .s-post__box h2 {
  margin: 0 0 var(--sp-10);
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-600);
  line-height: var(--lh-normal);
}

.s-site .s-post__box ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-post__box a {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-12);
  color: var(--color-text-strong);
  font-size: var(--fs-14);
  line-height: 1.6;
}

.s-site .s-post__box ul:has(.s-post__count) {
  gap: var(--sp-10);
}

.s-site .s-post__box li:has(.s-post__count) a {
  line-height: 1.4;
}

.s-site .s-post__box ul:not(:has(.s-post__count)) a {
  padding-block-end: var(--sp-10);
  border-block-end: 1px solid var(--color-border-subtle);
}

.s-site .s-post__box ul:not(:has(.s-post__count)) li:last-child a {
  border-block-end: 0;
  padding-block-end: 0;
}

.s-site .s-post__count {
  color: var(--color-text-secondary);
}

/* ======================================================================== */
/* Additional page                                                            */
/* ======================================================================== */
.s-site .s-page {
  background: var(--color-canvas);
}

.s-site .s-page__updated {
  font-size: var(--fs-13);
  color: var(--color-on-inverse-muted);
}

.s-site .s-page__inner {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-16);
  padding-block: var(--sp-20) var(--sp-32);
}

.s-site .s-page__article {
  min-width: 0;
  padding: var(--sp-20);
  border: 1px solid var(--color-border);
  border-radius: var(--r-20);
  background: var(--color-surface);
}

.s-site .s-page__article .s-prose {
  line-height: 2;
}

.s-site .s-page__aside {
  padding: var(--sp-16) var(--sp-20);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  background: var(--color-surface);
  line-height: var(--lh-normal);
}

.s-site .s-page__aside h2 {
  margin: 0 0 var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

.s-site .s-page__aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-page__aside a {
  display: block;
  padding-block: var(--sp-8);
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-page__others {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid var(--color-border);
}

.s-site .s-page__others a {
  color: var(--color-action-text);
}

/* ======================================================================== */
/* 404                                                                        */
/* ======================================================================== */
.s-site .s-nf {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-hero-surface);
  color: var(--color-on-inverse-strong);
  line-height: var(--lh-normal);
}

.s-site .s-nf__mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: min(60vw, 560px);
  aspect-ratio: 100 / 86;
  pointer-events: none;
}

.s-site .s-nf__mark span {
  position: absolute;
  inset: 0;
}

.s-site .s-nf__mark span:first-child {
  transform: translateX(-40%);
  background: var(--color-mark-on-inverse-soft);
  clip-path: polygon(0 0, 24% 0, 74% 100%, 50% 100%);
}

.s-site .s-nf__mark span:last-child {
  background: var(--color-mark-on-inverse);
  clip-path: polygon(0 0, 24% 0, 50% 52%, 76% 0, 100% 0, 50% 100%);
}

.s-site .s-nf__inner {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-block: var(--sp-24);
  padding-inline: var(--sp-24);
}

.s-site .s-nf__brand {
  align-self: flex-start;
  color: inherit;
  font-family: var(--font-display);
  font-weight: var(--fw-700);
}

.s-site .s-nf__brand img {
  display: block;
  height: 36px;
  width: auto;
}

.s-site .s-nf__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-10);
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.s-site .s-nf__code {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 22vw, 7.5rem);
  font-weight: var(--fw-700);
  line-height: 1;
  color: var(--color-display-on-inverse);
}

.s-site .s-nf__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-26); /* 32px from 640px */
  font-weight: var(--fw-700);
  line-height: var(--lh-normal);
}

.s-site .s-nf__text {
  margin: 0;
  color: var(--brand-on-inverse);
}

.s-site .s-nf__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  margin-block-start: var(--sp-14);
}

.s-site .s-nf__link {
  color: var(--brand-on-inverse);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.s-site .s-nf__stripe {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 8px;
  background: repeating-linear-gradient(135deg, var(--stripe-red) 0 8px, var(--concrete-0) 8px 16px);
}

/* ======================================================================== */
/* Tablet and desktop                                                         */
/* ======================================================================== */
@media (min-width: 640px) {
  .s-site .s-about__heading,
  .s-site .s-about__title {
    font-size: var(--fs-28);
  }

  .s-site .s-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-site .s-about__feature-grid,
  .s-site .s-about__review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-site .s-blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-site .s-contact__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-site .s-faqpage__band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .s-site .s-how__stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .s-site .s-how__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .s-site .s-nf__body {
    gap: var(--sp-14);
  }

  .s-site .s-nf__title {
    font-size: 32px; /* board 51 */
  }
}

@media (min-width: 1024px) {
  .s-site .s-about__heading {
    font-size: 32px; /* board 43 */
  }

  .s-site .s-about__title {
    font-size: var(--fs-28);
  }

  .s-site .s-blog .s-page-hero__facts {
    position: absolute;
    inset-inline-end: var(--sp-24);
    inset-block-end: var(--sp-24);
    width: 360px;
  }

  .s-site .s-blog .s-blog__search {
    margin: 0;
  }

  .s-site .s-how__stages {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .s-site .s-about__story {
    padding-block: var(--sp-56);
  }

  .s-site .s-about__story-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-40);
  }

  .s-site .s-about__text {
    flex: 1;
  }

  .s-site .s-about__figure {
    flex: none;
    width: 380px;
  }

  .s-site .s-about__action {
    align-self: flex-start;
  }

  .s-site .s-about__features,
  .s-site .s-about__steps,
  .s-site .s-about__reviews,
  .s-site .s-about__custom {
    padding-block: var(--sp-56);
  }

  .s-site .s-about__title {
    margin-block-end: var(--sp-24);
  }

  .s-site .s-about__feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-18);
  }

  .s-site .s-about__feature {
    padding: var(--sp-22);
    gap: var(--sp-10);
    border-radius: 18px;
  }

  .s-site .s-about__review-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-16);
  }

  .s-site .s-review {
    padding: var(--sp-22);
    gap: var(--sp-12);
  }

  .s-site .s-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-16);
  }

  .s-site .s-about__steps .s-steps__item {
    padding: var(--sp-20);
  }

  .s-site .s-steps--cards {
    gap: 18px;
  }

  .s-site .s-steps--cards .s-steps__item {
    padding: var(--sp-24);
    gap: var(--sp-12);
    border-radius: var(--r-20);
  }

  .s-site .s-contact__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-28);
    padding-block: var(--sp-40) 64px;
  }

  .s-site .s-contact__aside {
    flex: none;
    width: 320px;
  }

  .s-site .s-contact__form-card {
    flex: 1;
    padding: 26px;
  }

  .s-site .s-blog__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .s-site .s-blog__inner {
    gap: var(--sp-22);
    padding-block: var(--sp-32) 64px;
  }

  .s-site .s-post__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-32);
    padding-block: 36px 64px;
  }

  .s-site .s-post__article {
    flex: 1;
  }

  .s-site .s-post__body {
    padding: var(--sp-32);
  }

  .s-site .s-post__aside {
    flex: none;
    width: 300px;
  }

  .s-site .s-page__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-28);
    padding-block: 36px 64px;
  }

  .s-site .s-page__article {
    flex: 1;
    padding: var(--sp-32);
  }

  .s-site .s-page__aside {
    flex: none;
    order: -1;
    width: 254px;
  }

  .s-site .s-faqpage__inner {
    gap: var(--sp-12);
    padding-block: 36px 64px;
  }

  .s-site .s-faqpage__band {
    margin-block-start: var(--sp-16);
  }

  .s-site .s-how__inner {
    gap: var(--sp-40);
    padding-block: var(--sp-40) 64px;
  }

  .s-site .s-how__track {
    padding: var(--sp-28);
    gap: var(--sp-20);
  }
}

/* Contact: map shown on request (no request to Google before the button is pressed). */
.s-site .s-contact__map h2 {
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-20);
}

.s-site .s-contact__map-box {
  border: 1px solid var(--color-border);
  border-radius: var(--r-20);
  overflow: hidden;
  background: var(--color-surface);
}

.s-site .s-contact__map-ph {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-12);
  min-block-size: 14rem;
  padding: var(--sp-20);
  text-align: center;
}

.s-site .s-contact__map-ph p {
  margin: 0;
}

.s-site .s-contact__map-box iframe {
  display: block;
  inline-size: 100%;
  block-size: 20rem;
  border: 0;
}

/* ---- resources\css\site\pages\auth.css ---- */
/* Customer sign-in pages (B4; boards 34 – 42, 72): login, register (split: form + photo panel), forgot, reset, verify (centred cards).
   Measured on the boards (desktop 1440 / phone 390):
     split    photo panel 696px, the form column 744px (padding 28 24 40), form 420 (login) / 440 (register) wide, gap 18,
              title 30/700 + 15px line, fields 52, button 52; phone: 200px banner (photo, shade, "V", quality line 18/700, 5px stripe) then
              the form (padding 22 16 28, gap 14, title 24, fields 48)
     card     page padding 28 24 48, brand 96x48, cards 476 wide (phone 358), padding 32 (phone 21), radius 24, gap 18, title 26/700,
              state title 22/600, icon tile 52 (radius 14)
   Colours only through tokens (tokens.css: --color-auth-*, brand, status). The shared field / button / alert components do the rest. */

.s-site .s-auth {
  position: relative;
  display: grid;
  min-height: 100vh;
  background: var(--color-canvas);
  color: var(--color-text-primary);
}

.s-site .s-auth__brand {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--sp-28);
  inset-inline-start: var(--sp-24);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-brand-dark);
  font-weight: var(--fw-700);
  text-decoration: none;
}

.s-site .s-auth__brand img {
  display: block;
  width: auto;
  height: 44px;
}

/* ---- split: login and register */
.s-site .s-auth--split {
  grid-template-columns: minmax(0, 1fr) 696px;
  grid-template-areas: 'main aside';
}

.s-site .s-auth--split .s-auth__main {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px var(--sp-24) var(--sp-40);   /* brand row (28 + 44) + 24: the form is centred in what is left, as on the board */
}

.s-site .s-auth__aside {
  grid-area: aside;
  position: relative;
  overflow: hidden;
  background: var(--color-hero-surface);
  color: var(--color-on-inverse);
}

.s-site .s-auth__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
}

.s-site .s-auth__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-auth-shade-strong) 0%, var(--color-auth-shade-mid) 55%, var(--color-auth-shade-soft) 100%);
}

/* the "V" of the brand: two clipped bands in the corner */
.s-site .s-auth__v {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 320px;
  height: 275px;
  overflow: hidden;
}

.s-site .s-auth__v::before,
.s-site .s-auth__v::after {
  content: '';
  position: absolute;
  inset: 0;
}

.s-site .s-auth__v::before {
  background: var(--color-mark-soft);
  clip-path: polygon(0 0, 24% 0, 74% 100%, 50% 100%);
  transform: translateX(-40%);
}

.s-site .s-auth__v::after {
  background: var(--color-mark);
  clip-path: polygon(0 0, 24% 0, 50% 52%, 76% 0, 100% 0, 50% 100%);
}

.s-site .s-auth__v:dir(ltr) {
  transform: scaleX(-1);
}

.s-site .s-auth__line {
  position: absolute;
  inset-block-end: 56px;
  inset-inline-start: 48px;
  display: flex;
  gap: var(--sp-18);
  margin: 0;
  color: var(--color-on-inverse);
}

.s-site .s-auth__tag {
  font-family: var(--font-display);
  font-size: var(--fs-34);
  font-weight: var(--fw-700);
  line-height: 1.27;
}

.s-site .s-auth__bar {
  flex: none;
  width: 3px;
  border-radius: 3px;
  background: var(--color-dot-light);
}

.s-site .s-auth__line em {
  font-style: normal;
  color: var(--color-display-on-inverse);
}

.s-site .s-auth__dots {
  position: absolute;
  inset-block-end: 64px;
  inset-inline-end: 48px;
  display: grid;
  grid-template-columns: repeat(3, 10px);
  gap: 7px;
}

.s-site .s-auth__dots i {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--color-dot-light);
}

.s-site .s-auth__stripe {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 8px;
  background: repeating-linear-gradient(135deg, var(--stripe-red) 0 16px, var(--color-dot-light) 16px 32px);
}

/* ---- the form (split) and the cards (card) */
.s-site .s-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
  width: 100%;
  max-width: 420px;
}

.s-site .s-auth__main--lg .s-auth__form {
  max-width: 440px;
}

.s-site .s-auth__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.s-site .s-auth__head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-700);
  line-height: 1.27;
  color: var(--color-brand-dark);
}

.s-site .s-auth__head p {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.s-site .s-auth .s-input {
  height: var(--h-52);
}

.s-site .s-auth__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}

/* password field: the eye sits at the start side of the input, the label row can hold a link */
.s-site .s-pw__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
}

.s-site .s-pw__control {
  position: relative;
}

.s-site .s-pw__input {
  padding-inline-end: var(--sp-14);
}

.s-site .s-pw__toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  margin: auto 0;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-10);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.s-site:where(.s-js *) .s-pw__toggle {
  display: inline-flex;
}

.s-site:where(.s-js *) .s-pw__input {
  padding-inline-start: 52px;
}

.s-site .s-pw__toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.s-site .s-auth__link {
  display: inline-block;
  padding-block: 5px;   /* a 30px tap target without changing the line: the margin takes the padding back */
  margin-block: -5px;
  color: var(--color-action);
  font-weight: var(--fw-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-site .s-auth__link--small {
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
}

.s-site .s-auth__link--error {
  color: var(--color-error-text);
  font-size: inherit;
  font-weight: var(--fw-600);
}

.s-site .s-auth__alt {
  margin: 0;
  text-align: center;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-auth__alt--small {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
}

.s-site .s-auth__note {
  margin: 0;
  text-align: center;
  font-size: var(--fs-13);
  color: var(--color-text-muted);
}

.s-site .s-auth__or {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-13);
  color: var(--color-text-muted);
}

.s-site .s-auth__or::before,
.s-site .s-auth__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.s-site .s-auth__social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-10);
}

.s-site .s-auth__provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: var(--h-48);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-12);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  text-decoration: none;
}

.s-site .s-auth__provider:hover {
  border-color: var(--color-border-hover);
}

.s-site .s-auth__terms {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.s-site .s-auth__check {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-auth__check input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--color-action);
}

.s-site .s-auth__captcha {
  direction: ltr;
  max-width: 100%;
  overflow-x: auto;
}

.s-site .s-auth__unavailable {
  max-width: 420px;
  margin: 0;
  padding: var(--sp-16);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  background: var(--color-surface);
  text-align: center;
  color: var(--color-text-secondary);
}

/* ---- card pages */
.s-site .s-auth--card {
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding: var(--sp-28) var(--sp-24) var(--sp-48);
  overflow: hidden;
}

.s-site .s-auth--card {
  --auth-flip: 1;   /* the pale "V" sits in the corner at the end side; mirrored in LTR */
}

.s-site .s-auth--card:dir(ltr) {
  --auth-flip: -1;
}

.s-site .s-auth--card::before,
.s-site .s-auth--card::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 623px;
  height: 536px;
  pointer-events: none;
}

.s-site .s-auth--card::before {
  background: var(--color-auth-wash-deep);
  clip-path: polygon(0 0, 24% 0, 74% 100%, 50% 100%);
  transform: scaleX(var(--auth-flip)) translateX(-40%);
}

.s-site .s-auth--card::after {
  background: var(--color-auth-wash);
  clip-path: polygon(0 0, 24% 0, 50% 52%, 76% 0, 100% 0, 50% 100%);
  transform: scaleX(var(--auth-flip));
}

.s-site .s-auth--card .s-auth__brand {
  position: relative;
  inset: auto;
  justify-self: center;
  grid-row: 1;
  min-height: 48px;
}

.s-site .s-auth--card .s-auth__brand img {
  height: 48px;
}

.s-site .s-auth--card .s-auth__main {
  position: relative;
  z-index: 1;
  grid-row: 2;
  width: 100%;
  max-width: 476px;
  margin-block-start: var(--sp-48);
  align-self: start;
}

.s-site .s-auth__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
  width: 100%;
  padding: var(--sp-32);
  border: 1px solid var(--color-border);
  border-radius: var(--r-24);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.s-site .s-auth__card .s-auth__head h1 {
  font-size: var(--fs-26);
}

.s-site .s-auth__card--state {
  gap: var(--sp-14);
}

.s-site .s-auth__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 52px;
  height: 52px;
  border-radius: var(--r-14);
  background: var(--color-action-subtle);
  color: var(--color-action);
}

.s-site .s-auth__icon--ok {
  background: var(--color-success-surface);
  color: var(--color-success-text);
}

.s-site .s-auth__icon--error {
  background: var(--color-error-surface);
  color: var(--color-error-text);
}

.s-site .s-auth__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: var(--fw-700);
  color: var(--color-brand-dark);
}

.s-site .s-auth__title--state {
  font-size: var(--fs-22);
  font-weight: var(--fw-600);
  color: var(--color-text-primary);
}

.s-site .s-auth__text {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.s-site .s-auth__text--note {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
}

.s-site .s-auth__back {
  align-self: center;
  padding: var(--sp-8);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
}

.s-site .s-auth__title:focus,
.s-site .s-auth__head h1:focus {
  outline: none;
}

/* ---- phone and tablet: the photo becomes a 200px banner above the form */
@media (max-width: 959px) {
  .s-site .s-auth--split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 200px auto;
    grid-template-areas: 'aside' 'main';
  }

  .s-site .s-auth--split .s-auth__main {
    display: block;
    padding: var(--sp-22) var(--sp-16) var(--sp-28);
  }

  .s-site .s-auth--split .s-auth__form,
  .s-site .s-auth__main--lg .s-auth__form {
    max-width: none;
    gap: var(--sp-14);
  }

  .s-site .s-auth--split .s-auth__brand {
    inset-block-start: 11px;
    inset-inline-start: var(--sp-16);
  }

  .s-site .s-auth--split .s-auth__brand img {
    height: 34px;
  }

  .s-site .s-auth__shade {
    background: linear-gradient(to top, var(--color-hero-shade-phone-strong), var(--color-hero-shade-phone-soft));
  }

  .s-site .s-auth__v {
    width: 120px;
    height: 103px;
  }

  .s-site .s-auth__dots {
    display: none;
  }

  .s-site .s-auth__line {
    inset-block-end: 17px;
    inset-inline-start: 16px;
    gap: var(--sp-10);
  }

  .s-site .s-auth__tag {
    font-size: var(--fs-18);
  }

  .s-site .s-auth__stripe {
    height: 5px;
    background: repeating-linear-gradient(135deg, var(--stripe-red) 0 10px, var(--color-dot-light) 10px 20px);
  }

  .s-site .s-auth__head h1 {
    font-size: var(--fs-24);
  }

  .s-site .s-auth__head p {
    font-size: var(--fs-14);
  }

  .s-site .s-auth .s-input {
    height: var(--h-48);
  }

  .s-site .s-auth__pair {
    grid-template-columns: 1fr;
    gap: var(--sp-14);
  }

  .s-site .s-auth--card {
    padding: var(--sp-20) var(--sp-16) var(--sp-48);
  }

  .s-site .s-auth--card .s-auth__brand {
    min-height: 44px;
  }

  .s-site .s-auth--card .s-auth__brand img {
    height: 40px;
  }

  .s-site .s-auth--card .s-auth__main {
    margin-block-start: var(--sp-24);
  }

  .s-site .s-auth__card {
    padding: var(--sp-20);
    gap: var(--sp-16);
    border-radius: var(--r-16);
  }

  .s-site .s-auth__back {
    padding-block: var(--sp-12);
  }

  .s-site .s-auth__icon {
    width: 48px;
    height: 48px;
  }

  .s-site .s-auth__card .s-auth__head h1,
  .s-site .s-auth__title {
    font-size: var(--fs-22);
  }
}

/* ---- resources\css\site\pages\packages.css ---- */
/* Vendor packages page (B5; boards 50 desktop / 59 phone). Measured on the boards (1440 / 390):
     hero     dark band 283 high (phone 254), the "V" mark 260 wide (phone 120) at the end corner, centred eyebrow 14 / title 2.6rem (phone 28) / line 16 (phone 15),
              the term tabs (inverse segmented, phone full width), warning stripe 6px (phone 5px)
     body     padding 40 0 64 (phone 30 / 28), cards in two columns, gap 22 (phone one column, gap 24); card padding 28 (phone 24 18 18), radius 24 (phone 16),
              gap 18 (phone 16), title 22/600 (phone 20), price 44/700, features 15 with a 22px tick tile, button 52
     The recommended card has a 2px brand border, a shadow and a pill that sits half outside the top edge. Colours only through tokens. */

.s-site .s-packages {
  background: var(--color-canvas);
}

.s-site .s-packages__hero .s-page-hero__mark {
  width: 260px;
}

.s-site .s-packages__hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding-block: 44px 52px;
  text-align: center;
}

.s-site .s-packages__hero .s-page-hero__eyebrow {
  display: block;
  font-size: var(--fs-14);
  color: var(--color-on-inverse-muted);
}

.s-site .s-packages__hero .s-page-hero__title {
  justify-content: center;
  font-size: 2.6rem;
}

.s-site .s-packages__hero .s-page-hero__title::before {
  display: none;
}

.s-site .s-packages__hero .s-page-hero__text {
  font-size: var(--fs-16);
  color: var(--color-on-inverse-strong);
}

.s-site .s-packages__hero .s-tabs {
  margin-block-start: var(--sp-6);
}

.s-site .s-packages__hero .s-tabs__tab {
  padding-inline: var(--sp-20);
}

.s-site .s-packages__hero .s-page-hero__stripe {
  height: 6px;
  background: repeating-linear-gradient(135deg, var(--stripe-red) 0 14px, var(--color-dot-light) 14px 28px);
}

.s-site .s-packages__body {
  max-inline-size: 1128px;   /* the boards' width: 1080 of content between the 24px gutters */
  padding-block: var(--sp-40) 64px;
}

.s-site .s-packages__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-22);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-packages__grid > li {
  display: flex;
  min-width: 0;
}

.s-site .s-pack {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-18);
  padding: var(--sp-28);
  border: 1px solid var(--color-border);
  border-radius: var(--r-24);
  background: var(--color-surface);
}

.s-site .s-pack--recommended {
  border: 2px solid var(--color-action);
  box-shadow: var(--shadow-raised);
}

.s-site .s-pack__flag {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-start: var(--sp-28);
  padding: 5px var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--color-action);
  color: var(--color-on-action);
  font-size: var(--fs-12);
  font-weight: var(--fw-700);
}

.s-site .s-pack__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-600);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
}

.s-site .s-pack__sub {
  margin: calc(-1 * var(--sp-12)) 0 0;
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}

.s-site .s-pack__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-6);
  margin: 0;
}

.s-site .s-pack__amount {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--fw-700);
  line-height: 1.25;
  color: var(--color-brand-dark);
}

.s-site .s-pack__period {
  font-size: var(--fs-16);
  color: var(--color-text-secondary);
}

.s-site .s-pack__trial {
  margin: calc(-1 * var(--sp-8)) 0 0;
  font-size: var(--fs-14);
  color: var(--color-success-text);
}

.s-site .s-pack__features {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-15);
}

.s-site .s-pack__feature {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.s-site .s-pack__tick {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-6);
  background: var(--color-success-surface);
  color: var(--color-success-text);
}

.s-site .s-pack__feature.is-off {
  color: var(--color-text-muted);
}

.s-site .s-pack__feature.is-off .s-pack__tick {
  background: var(--color-canvas);
  color: var(--color-text-muted);
}

.s-site .s-pack__features--plain {
  gap: var(--sp-10);
  color: var(--color-text-secondary);
}

.s-site .s-pack--plain .s-pack__amount {
  color: var(--color-brand-dark);
}

@media (max-width: 959px) {
  .s-site .s-packages__hero .s-page-hero__mark {
    width: 120px;
  }

  .s-site .s-packages__hero-inner {
    padding-block: var(--sp-28) 30px;
    gap: var(--sp-10);
  }

  .s-site .s-packages__hero .s-page-hero__eyebrow {
    font-size: var(--fs-13);
  }

  .s-site .s-packages__hero .s-page-hero__title {
    font-size: var(--fs-28);
  }

  .s-site .s-packages__hero .s-page-hero__text {
    font-size: var(--fs-15);
    line-height: 1.8;
  }

  .s-site .s-packages__hero .s-page-hero__stripe {
    height: 5px;
    background: repeating-linear-gradient(135deg, var(--stripe-red) 0 10px, var(--color-dot-light) 10px 20px);
  }

  .s-site .s-packages__hero .s-tabs {
    align-self: stretch;
  }

  .s-site .s-packages__hero .s-tabs__tab {
    flex: 1;
    min-height: 44px;
  }

  .s-site .s-packages__body {
    padding-block: var(--sp-28) var(--sp-28);
  }

  .s-site .s-packages__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-24);
  }

  .s-site .s-pack {
    gap: var(--sp-16);
    padding: var(--sp-24) var(--sp-18) var(--sp-18);
    border-radius: var(--r-16);
  }

  .s-site .s-pack__title {
    font-size: var(--fs-20);
  }

  .s-site .s-pack__flag {
    inset-inline-start: var(--sp-18);
  }
}

/* ---- resources\css\site\pages\account.css ---- */
/* Customer account pages (B1-C1; boards 26 / 27 desktop, 31 / 32 phone): the frame (navigation + content), the
   appointments list and the appointment details. Shared components do the rest (header, footer, order card, status
   badge, chip, empty state, breadcrumbs, alert, buttons). Phone first, desktop from 1024px.
   Board measurements: page on sunken, padding 28 80 (desktop) / 16 (phone); navigation card 262 wide, radius 20,
   items 48px; list gap 12; details: header card radius 20 / padding 24, main + 320px side, gap 20, step dots 28px. */

.s-site .s-account {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-16) var(--sp-40);
  background: var(--color-sunken);
}

.s-site .s-account__nav {
  min-width: 0;
}

.s-site .s-account__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  min-width: 0;
}

/* ---- Navigation: chips on the phone, a card from 1024px ---- */
.s-site .s-account-nav__list {
  display: flex;
  gap: var(--sp-8);
  margin: 0;
  padding: 0 0 var(--sp-4);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.s-site .s-account-nav__list::-webkit-scrollbar {
  display: none;
}

.s-site .s-account-nav__list > li {
  flex-shrink: 0;
}

.s-site .s-account-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--h-44);
  padding: 0 var(--sp-18);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  font-size: var(--fs-15);
  font-weight: var(--fw-500);
  white-space: nowrap;
  color: var(--color-text-primary);
  text-decoration: none;
}

.s-site .s-account-nav__link[aria-current='page'] {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--fw-600);
}

.s-site .s-account-nav__link--danger {
  color: var(--color-error-text);
}

.s-site .s-account-nav__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- List page ---- */
.s-site .s-account__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.s-site .s-account__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: var(--fw-700);
  color: var(--color-text-strong);
}

.s-site .s-account__search {
  position: relative;
  display: flex;
  align-items: center;
}

.s-site .s-account__search-input {
  width: 100%;
  padding-inline-end: var(--sp-48);
}

.s-site .s-account__search-button {
  position: absolute;
  inset-inline-end: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-44);
  height: var(--h-44);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.s-site .s-account__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.s-site .s-account__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-account__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
}

.s-site .s-account__page-of {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

/* ---- Details ---- */
.s-site .s-account__crumbs {
  margin: 0;
}

.s-site .s-acc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--sp-18);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-16);
  background: var(--color-surface);
}

.s-site .s-acc-card__title,
.s-site .s-acc-banner__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-acc-card__sub {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-acc-head {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-14);
}

.s-site .s-acc-head__media {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 56px;
  border-radius: var(--r-12);
  background: var(--color-action-subtle);
}

.s-site .s-acc-head__media img {
  width: 64px;
  height: 44px;
  object-fit: contain;
}

.s-site .s-acc-head__text {
  flex: 1 1 220px;
  min-width: 0;
}

.s-site .s-acc-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-700);
  color: var(--color-text-strong);
}

.s-site .s-acc-head__sub {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-acc-head__action {
  flex: 1 1 100%;
}

.s-site .s-acc-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.s-site .s-acc-grid__main,
.s-site .s-acc-grid__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  min-width: 0;
}

.s-site .s-acc-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--sp-18);
  border-radius: var(--r-16);
  background: var(--color-brand-dark);
  color: var(--color-on-inverse);
}

.s-site .s-acc-banner__title {
  color: var(--color-on-inverse-strong);
}

.s-site .s-acc-banner__text {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-14);
  color: var(--color-on-inverse);
}

.s-site .s-acc-banner .s-btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-brand-dark);
  width: 100%;
}

/* Stages */
.s-site .s-acc-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-acc-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-14);
  padding-block-end: var(--sp-20);
}

.s-site .s-acc-step:last-child {
  padding-block-end: 0;
}

.s-site .s-acc-step::before {
  content: '';
  position: absolute;
  inset-block: 28px 0;
  inset-inline-start: 13px;
  width: 2px;
  background: var(--color-border);
}

.s-site .s-acc-step:last-child::before {
  display: none;
}

.s-site .s-acc-step.is-done::before {
  background: var(--color-action);
}

.s-site .s-acc-step__dot {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--color-on-action);
}

.s-site .s-acc-step.is-done .s-acc-step__dot {
  border-color: var(--color-action);
  background: var(--color-action);
}

.s-site .s-acc-step.is-current .s-acc-step__dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-warning-surface);
}

.s-site .s-acc-step__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.s-site .s-acc-step__title {
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-acc-step:not(.is-done) .s-acc-step__title {
  color: var(--color-text-secondary);
}

.s-site .s-acc-step__when {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

/* Facts, location, payment */
.s-site .s-acc-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  margin: 0;
}

.s-site .s-acc-facts > div {
  padding: var(--sp-10) var(--sp-14);
  border-radius: var(--r-12);
  background: var(--color-sunken);
}

.s-site .s-acc-facts dt,
.s-site .s-acc-rows dt,
.s-site .s-acc-location__label {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-acc-facts dd,
.s-site .s-acc-rows dd {
  margin: var(--sp-2) 0 0;
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-acc-location {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-14);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-12);
}

.s-site .s-acc-location__value {
  display: block;
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-acc-pay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
}

.s-site .s-acc-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
}

.s-site .s-acc-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
}

.s-site .s-acc-rows dd {
  margin: 0;
  text-align: end;
}

.s-site .s-acc-rows__due {
  padding-block-start: var(--sp-10);
  border-block-start: 1px solid var(--color-border-subtle);
}

.s-site .s-acc-rows__due dd {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  color: var(--color-brand-dark);
}

.s-site .s-acc-collections {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-acc-collections li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-12);
  background: var(--color-sunken);
  font-size: var(--fs-14);
}

.s-site .s-acc-contact {
  border-color: var(--color-success-border);
  background: var(--color-success-surface);
}

@media (min-width: 640px) {
  .s-site .s-acc-facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .s-site .s-acc-head__action {
    flex: 0 0 auto;
  }

  .s-site .s-acc-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .s-site .s-acc-banner .s-btn {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .s-site .s-account {
    display: grid;
    grid-template-columns: 262px minmax(0, 1fr);
    align-items: start;
    column-gap: var(--sp-28);
    padding: var(--sp-28) calc(var(--sp-40) * 2) calc(var(--sp-32) * 2);
  }

  .s-site .s-account--detail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-20);
  }

  .s-site .s-account__nav {
    grid-column: 1;
    grid-row: 1;
  }

  .s-site .s-account__content {
    grid-column: 2;
    grid-row: 1;
  }

  .s-site .s-account-nav__list {
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-10);
    overflow: visible;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--r-20);
    background: var(--color-surface);
  }

  .s-site .s-account-nav__link {
    min-height: var(--h-48);
    padding: 0 var(--sp-14);
    border: 0;
    border-radius: var(--r-12);
    background: transparent;
  }

  .s-site .s-account-nav__link[aria-current='page'] {
    background: var(--color-action-subtle);
    color: var(--color-on-action-subtle);
  }

  .s-site .s-account-nav__logout {
    margin-block-start: var(--sp-6);
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid var(--color-border-subtle);
  }

  .s-site .s-account__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .s-site .s-account__search {
    width: 340px;
  }

  .s-site .s-acc-card {
    padding: var(--sp-24);
    border-radius: var(--r-20);
  }

  .s-site .s-acc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-20);
    align-items: start;
  }

  .s-site .s-acc-grid__main {
    grid-column: 1;
    grid-row: 1;
  }

  .s-site .s-acc-grid__side {
    grid-column: 2;
    grid-row: 1;
  }

  .s-site .s-acc-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Overview and updates (B1-C2; boards 25 / 30, 28 / 33) ---- */
.s-site .s-acc-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-brand-dark);
  color: var(--color-on-inverse-strong);
}

.s-site .s-acc-hero::before,
.s-site .s-acc-hero::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: -40px;
  width: 90px;
  background: var(--color-on-inverse-ghost);
  transform: skewX(-24deg);
  pointer-events: none;
}

.s-site .s-acc-hero::after {
  inset-inline-end: 70px;
  width: 36px;
}

.s-site .s-acc-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--sp-20) var(--sp-16);
}

.s-site .s-acc-hero__eyebrow {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-14);
  color: var(--color-on-inverse-muted);
}

.s-site .s-acc-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
  line-height: 1.3;
  color: var(--color-on-inverse-strong);
}

.s-site .s-acc-hero__action {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-brand-dark);
  width: 100%;
}

.s-site .s-acc-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-14) var(--sp-16);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--r-16);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}

.s-site .s-acc-notice__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-12);
  background: var(--color-surface);
}

.s-site .s-acc-notice__text {
  flex: 1 1 200px;
  min-width: 0;
}

.s-site .s-acc-notice__title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
}

.s-site .s-acc-notice__sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14);
}

.s-site .s-acc-notice form,
.s-site .s-acc-notice .s-btn {
  width: 100%;
}

.s-site .s-acc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-acc-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-14) var(--sp-16);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-16);
  background: var(--color-surface);
}

.s-site .s-acc-stat__label {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-acc-stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-700);
  line-height: 1.2;
  color: var(--color-text-strong);
}

.s-site .s-acc-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
}

.s-site .s-acc-link {
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  color: var(--color-action-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s-site .s-acc-link:focus-visible {
  border-radius: var(--r-4);
  outline: 2px solid var(--color-focus-ring, var(--color-action));
  outline-offset: 2px;
}

.s-site .s-acc-pair {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.s-site .s-acc-muted {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.s-site .s-acc-latest {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-acc-latest__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-18);
}

.s-site .s-acc-latest__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-action);
}

.s-site .s-acc-latest__title {
  font-size: var(--fs-15);
  font-weight: var(--fw-500);
  color: var(--color-text-primary);
  text-decoration: none;
}

.s-site .s-acc-latest__title:hover {
  text-decoration: underline;
}

.s-site .s-acc-latest__when {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-acc-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
}

.s-site .s-acc-info__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-16);
  font-size: var(--fs-15);
}

.s-site .s-acc-info dt {
  color: var(--color-text-secondary);
}

.s-site .s-acc-info dd {
  margin: 0;
  min-width: 0;
  font-weight: var(--fw-600);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* Updates feed */
.s-site .s-acc-day {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.s-site .s-acc-day__title {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-acc-feed {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-16);
  background: var(--color-surface);
}

.s-site .s-acc-feed__item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-14) var(--sp-16);
}

.s-site .s-acc-feed__item + .s-acc-feed__item {
  border-block-start: 1px solid var(--color-border-subtle);
}

.s-site .s-acc-feed__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-12);
  background: var(--color-sunken);
  color: var(--color-text-strong);
}

.s-site .s-acc-feed__icon--dropped,
.s-site .s-acc-feed__icon--completed {
  background: var(--color-action-subtle);
  color: var(--color-on-action-subtle);
}

.s-site .s-acc-feed__icon--payment,
.s-site .s-acc-feed__icon--refund {
  background: var(--color-success-surface);
  color: var(--color-success-text);
}

.s-site .s-acc-feed__icon--cancelled {
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}

.s-site .s-acc-feed__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.s-site .s-acc-feed__title {
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  color: var(--color-text-primary);
}

.s-site .s-acc-feed__meta {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-acc-feed__link {
  flex: none;
}

@media (min-width: 1024px) {
  .s-site .s-acc-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-28) calc(var(--sp-40) * 2);
  }

  .s-site .s-acc-hero__title {
    font-size: var(--fs-30);
  }

  .s-site .s-acc-hero__action {
    width: auto;
  }

  .s-site .s-acc-notice {
    flex-wrap: nowrap;
  }

  .s-site .s-acc-notice form,
  .s-site .s-acc-notice .s-btn {
    width: auto;
  }

  .s-site .s-acc-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .s-site .s-acc-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-20);
    align-items: stretch;
  }
}

/* ---- Profile and password (B1-C3; boards 29 / 34) ---- */
.s-site .s-acc-form__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-600);
  color: var(--color-text-strong);
}

.s-site .s-acc-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
}

.s-site .s-acc-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-16);
}

.s-site .s-acc-form__actions .s-btn {
  width: 100%;
}

.s-site .s-acc-summary {
  align-items: flex-start;
}

.s-site .s-acc-summary:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--color-action));
  outline-offset: 2px;
}

.s-site .s-acc-summary__list {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.s-site .s-acc-summary__list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 1024px) {
  .s-site .s-acc-form__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .s-site .s-acc-form__wide {
    grid-column: 1 / -1;
  }

  .s-site .s-acc-form__actions .s-btn {
    width: auto;
  }
}

.s-site .s-acc-pending__cancel {
  margin-block-start: var(--sp-8);
}

/* ---- resources\css\site\pages\products.css ---- */
/* Products (the shop): list and product page (Blade, B6). Colours only through tokens (tokens.css). */

.s-site .s-products {
  background: var(--color-canvas);
  line-height: var(--lh-normal);
}

.s-site .s-products__body {
  padding-block: var(--sp-20) var(--sp-32);
}

.s-site .s-products__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-8);
}

.s-site .s-products__search {
  position: relative;
  flex: 2 1 240px;
  min-width: 0;
}

.s-site .s-products__search .s-vendors__input {
  width: 100%;
}

.s-site .s-products__icon {
  position: absolute;
  inset-inline-end: var(--sp-12);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.s-site .s-products__sort {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 160px;
}

.s-site .s-products__sort label {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.s-site .s-products__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-block: var(--sp-16);
}

.s-site .s-products__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-14);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--fs-14);
  text-decoration: none;
}

.s-site .s-products__chip[aria-current="true"] {
  border-color: var(--color-action);
  background: var(--color-action-subtle);
  color: var(--color-action);
  font-weight: var(--fw-600);
}

.s-site .s-products__chip-count {
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
}

.s-site .s-products__count {
  margin-block: var(--sp-8) var(--sp-16);
  color: var(--color-text-secondary);
  font-size: var(--fs-14);
}

.s-site .s-products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-site .s-products__pager {
  margin-top: var(--sp-28);
}

.s-site .s-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-20);
  background: var(--color-surface);
}

.s-site .s-product-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--color-canvas);
  color: var(--color-text-secondary);
}

.s-site .s-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-site .s-product-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-16);
}

.s-site .s-product-card__category {
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
}

.s-site .s-product-card__title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
  line-height: 1.5;
}

.s-site .s-product-card__title a {
  color: var(--color-text-strong);
  text-decoration: none;
}

.s-site .s-product-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-top: auto;
}

/* product page */

.s-site .s-product {
  background: var(--color-canvas);
  line-height: var(--lh-normal);
}

.s-site .s-product__inner {
  padding-block: var(--sp-16) var(--sp-32);
}

.s-site .s-product__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-32);
  margin-top: var(--sp-16);
}

.s-site .s-product__main-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-20);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.s-site .s-product__main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-site .s-product__thumbs {
  display: flex;
  gap: var(--sp-8);
  margin: var(--sp-12) 0 0;
  padding: 0;
  list-style: none;
}

.s-site .s-product__thumbs img {
  width: 72px;
  height: 72px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-12);
  object-fit: cover;
}

.s-site .s-product__category {
  color: var(--color-text-secondary);
  font-size: var(--fs-13);
}

.s-site .s-product__title {
  margin: var(--sp-6) 0 var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-600);
  line-height: 1.4;
}

.s-site .s-product__rating,
.s-site .s-product__stock {
  margin: 0 0 var(--sp-8);
  color: var(--color-text-secondary);
  font-size: var(--fs-14);
}

.s-site .s-product__price {
  margin-block: var(--sp-12);
}

.s-site .s-product__summary {
  color: var(--color-text-primary);
}

.s-site .s-product__buy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin-top: var(--sp-20);
}

.s-site .s-product__qty {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.s-site .s-product__qty input {
  width: 96px;
  height: 44px;
  padding-inline: var(--sp-12);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-12);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.s-site .s-product__cart-msg {
  min-height: 1.5em;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-14);
}

.s-site .s-product__details,
.s-site .s-product__related {
  margin-top: var(--sp-32);
}

.s-site .s-product__details h2,
.s-site .s-product__related h2 {
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-20);
  font-weight: var(--fw-600);
}

.s-site .s-product__content {
  color: var(--color-text-primary);
}

@media (max-width: 900px) {
  .s-site .s-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-site .s-product__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-20);
  }
}

@media (max-width: 560px) {
  .s-site .s-products__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-16);
  }

  .s-site .s-products__form > * {
    flex-basis: 100%;
  }
}