/* Design tokens for loomashop.ai.
   Values come from the approved CHANGE-003 designs (Design-Handoff-v1.0.0
   DESIGN-HANDOFF.md §2). The site is white with a few washes and inset panels;
   every colour, gradient, radius and shadow a component needs is named here so
   a section that hand-rolls its own rgba() is visibly the odd one out.

   Direction: the gradients whose focal point sits to one side read their
   x-position from --focal-start / --focal-end, which flip on <html dir="rtl">.
   <html> is :root, so the gradient tokens below resolve against the flipped
   value without any component knowing about direction. */
:root {
  /* ---------- ink ---------- */
  --c-ink: rgb(31, 41, 55); /* headings, primary text */
  --c-ink-strong: rgb(17, 24, 39); /* phone bezel, store badges */
  --c-secondary: rgb(55, 65, 81); /* nav links, inactive toggles */
  --c-body: rgb(75, 85, 99); /* paragraphs, leads */
  --c-muted: rgb(107, 114, 128); /* captions, small caps, © line */
  --c-ui-grey: rgb(85, 83, 83); /* inactive language items, footer links, mockup UI */

  /* ---------- brand / interactive ---------- */
  --c-primary: rgb(47, 128, 205); /* primary buttons, accents, icons */
  --c-link: rgb(21, 109, 190); /* links, eyebrows, secondary-button text */
  --c-link-hover: rgb(14, 82, 144); /* a:hover, primary hover, current Get Looma */
  --c-sky: rgb(133, 178, 241);
  --c-deep-blue: rgb(26, 92, 165);
  --c-navy: rgb(12, 31, 58);
  --c-navy-mid: rgb(20, 44, 78);
  --c-green: rgb(37, 160, 90); /* success */
  --c-whatsapp: rgb(37, 160, 90); /* WhatsApp green */
  --c-check: rgb(0, 130, 54);
  --c-orange: rgb(226, 76, 25); /* warm accent, never a UI action colour */

  /* ---------- supporting surfaces ---------- */
  --c-pale: rgb(227, 241, 255);
  --c-pale-55: rgba(227, 241, 255, 0.55); /* info boxes, legal TOC */
  --c-pale-60: rgba(227, 241, 255, 0.6);
  --c-tile: rgb(235, 242, 253);
  --c-tile-2: rgb(240, 246, 255);
  --c-lavender: rgb(244, 241, 254);
  --c-periwinkle: rgb(205, 212, 250);
  --c-primary-tint: rgba(47, 128, 205, 0.1); /* accordion icon, plates */
  --c-track: rgba(31, 41, 55, 0.05); /* segmented-control track */

  /* ---------- hairlines ---------- */
  --line-faint: 1px solid rgba(31, 41, 55, 0.06); /* header, light card edges */
  --line-soft: 1px solid rgba(31, 41, 55, 0.08); /* topic cards, legal dividers */
  --line: 1px solid rgba(31, 41, 55, 0.1); /* accordion rows, footer divider */
  --line-white: 1px solid #fff; /* glass card / secondary button on tints */
  --line-on-dark: 1px solid rgba(255, 255, 255, 0.22);

  /* ---------- gradients ---------- */
  --focal-start: 15%;
  --focal-end: 80%;
  --g-hero: linear-gradient(
    to bottom,
    #fff 0%,
    rgba(227, 241, 255, 0.7) 60%,
    rgba(200, 215, 250, 0.55) 100%
  );
  --g-light: linear-gradient(to bottom, #fff 0%, rgba(227, 241, 255, 0.75) 70%, #fff 100%);
  --g-plans-panel: linear-gradient(170deg, #fff 0%, rgb(227, 241, 255) 45%, rgb(205, 212, 250) 100%);
  --g-lavender: linear-gradient(160deg, rgb(244, 241, 254) 0%, rgb(235, 242, 253) 100%);
  --g-cta: radial-gradient(
    90% 120% at var(--focal-start) 0%,
    rgb(82, 160, 232) 0%,
    rgb(47, 128, 205) 45%,
    rgb(26, 92, 165) 100%
  );
  --g-navy: radial-gradient(
    120% 80% at var(--focal-end) 0%,
    rgb(26, 66, 120) 0%,
    rgb(12, 31, 58) 55%,
    rgb(9, 22, 42) 100%
  );
  --g-phone-screen: linear-gradient(to top, rgba(133, 178, 241, 0.5), #fff 82%);
  /* Decorative orbs: radial-gradient(closest-side, colour, transparent). */
  --orb-sky: radial-gradient(closest-side, rgba(133, 178, 241, 0.35), rgba(133, 178, 241, 0));
  --orb-sky-strong: radial-gradient(closest-side, rgba(133, 178, 241, 0.45), rgba(133, 178, 241, 0));
  --orb-lavender: radial-gradient(closest-side, rgba(200, 185, 245, 0.5), rgba(200, 185, 245, 0));
  --orb-lavender-strong: radial-gradient(closest-side, rgba(190, 175, 245, 0.6), rgba(190, 175, 245, 0));
  --orb-lavender-soft: radial-gradient(closest-side, rgba(200, 185, 245, 0.4), rgba(200, 185, 245, 0));
  --orb-on-navy: radial-gradient(closest-side, rgba(133, 178, 241, 0.2), rgba(133, 178, 241, 0));

  /* ---------- radii ---------- */
  --r-pill: 999px; /* buttons, chips, toggles, search field */
  --r-panel: clamp(28px, 4vw, 48px); /* inset full-width panels */
  --r-panel-contained: clamp(24px, 3.4vw, 40px); /* panels inside the container */
  --r-plan: 32px;
  --r-card: 24px; /* topic cards, legal TOC */
  --r-qr: 22px;
  --r-info: 20px; /* info boxes, mobile TOC */
  --r-badge: 14px; /* store badges, icon plates */
  --r-tile: 12px;
  --r-phone: 46px;
  --r-phone-screen: 38px;

  /* ---------- shadows (soft, blue-tinted) ----------
     The design's own values, tucked in with a negative spread
     (`0 16px 36px -26px`) so a surface lifts without a halo around it. The
     Stage 2 screenshots render them that way and are the visual reference, so
     the spread-0 calibration WA-CORR-B04 made against the earlier screenshots
     is undone here and in the components. */
  --sh-btn-s: 0 8px 20px -6px rgba(47, 128, 205, 0.55);
  --sh-btn-m: 0 12px 26px -10px rgba(47, 128, 205, 0.6);
  --sh-btn-l: 0 14px 30px -10px rgba(47, 128, 205, 0.7);
  --sh-btn-inverse: 0 14px 30px -10px rgba(0, 0, 0, 0.35);
  --sh-btn-secondary: 0 8px 24px rgba(31, 38, 135, 0.08);
  --sh-plan: 0 14px 40px rgba(31, 38, 135, 0.1);
  --sh-topic: 0 16px 36px -26px rgba(31, 38, 135, 0.35);
  --sh-topic-hover: 0 20px 40px -24px rgba(31, 38, 135, 0.45);
  --sh-search: 0 14px 40px -14px rgba(31, 38, 135, 0.3);
  --sh-float: 0 14px 30px rgba(31, 38, 135, 0.12);
  --sh-phone: 0 50px 90px -30px rgba(31, 38, 135, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --sh-badge: 0 12px 26px -12px rgba(17, 24, 39, 0.6);
  --sh-segment: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sh-mark: drop-shadow(5px 6px 3px rgba(133, 185, 233, 0.45));
  --sh-mark-lg: drop-shadow(6px 8px 6px rgba(133, 185, 233, 0.45));

  /* ---------- layout ---------- */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-pad: clamp(72px, 9vw, 120px);
  --cta-pad: clamp(80px, 10vw, 130px);
  --hero-pad-top: clamp(56px, 8vw, 100px);
  --hero-pad-bottom: clamp(64px, 8vw, 110px);
  --panel-margin: clamp(10px, 1.5vw, 20px);
  --header-h: 72px; /* reference height of the sticky header, for scroll margins */

  /* ---------- type ---------- */
  --font: 'Poppins', 'Noto Kufi Arabic', sans-serif;
  --font-ar: 'Noto Kufi Arabic', 'Poppins', sans-serif; /* Arabic-only strings: ع, العربية */
  /* Added to line-heights in Arabic (RESPONSIVE-RTL §10: ~+0.1 where glyphs clip). */
  --lh-boost: 0;

  /* ---------- focus ---------- */
  --focus-color: var(--c-primary);
  --focus-width: 2px;
  --focus-offset: 3px;
  /* No composed --focus-ring token: a custom property's var() references are
     resolved where it is declared, so a ring built here would freeze
     --focus-color at :root and the white override on .on-dark / inverse
     buttons would never reach it. Use sites write
     outline: var(--focus-width) solid var(--focus-color). */

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-med: 200ms;
}

html[dir='rtl'] {
  --focal-start: 85%;
  --focal-end: 20%;
}

:lang(ar) {
  --lh-boost: 0.1;
}

:lang(en),
:lang(fr) {
  --lh-boost: 0;
}
/* Base styles for loomashop.ai. Tokens live in tokens.css; component styles
   live in their components. What is here is what every page shares: the reset,
   the type scale, the container, the inset panel shell, focus, and the RTL
   rules that cannot be expressed per component. */

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

html,
body {
  margin: 0;
  padding: 0;
}

/* Anchors (#fragment jumps, scrollIntoView) land below the sticky header
   rather than under it. The router reads this same value for its own anchor
   scrolls (src/router/index.js), since window.scrollTo ignores it. */
html {
  scroll-padding-top: var(--header-h);
}

/* Smooth scrolling only for people who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: calc(1.6 + var(--lh-boost));
  color: var(--c-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The page wrapper (App.vue) clips horizontal overflow — decorative orbs sit
   partly off-canvas. `clip`, not `hidden`, and on the wrapper rather than on
   html/body: `hidden` creates a scroll container, and a scroll container
   between the sticky header and the viewport stops the header sticking. */
.page {
  overflow-x: clip;
}

a {
  color: var(--c-link);
  text-decoration: none;
}
a:hover {
  color: var(--c-link-hover);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}

img,
svg {
  max-width: 100%;
}
img {
  height: auto;
}

/* Defaults. The designs balance display and chapter headings and set leads
   `pretty`, but leave much card and caption copy to break greedily; a
   component whose approved screenshot shows that sets `text-wrap: wrap`. */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
p,
li,
dd {
  text-wrap: pretty;
}

/* ---------- focus ----------
   The design draws no focus state (DESIGN-HANDOFF §10), so this is the brand
   ring: 2px primary blue, offset 3px. Surfaces that are blue or navy set
   --focus-color to white (.on-dark, InsetPanel, CtaPanel). */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) {
  outline: none;
}
.on-dark {
  --focus-color: #fff;
}

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-pad {
  padding-block: var(--section-pad);
}

/* The rounded full-width panel (Plans, final CTAs, navy chapters): the
   viewport minus a small side margin, with the 1240 container nested inside.
   Orbs bleed into it and are clipped by it. InsetPanel/CtaPanel render this. */
.inset-panel {
  position: relative;
  overflow: hidden;
  margin-inline: var(--panel-margin);
  border-radius: var(--r-panel);
  isolation: isolate;
}

/* Decorative orb: place it first in its positioned section, and give the
   content after it `position: relative` so it paints above. */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- type scale (DESIGN-HANDOFF §2.1) ---------- */
.h-display,
.h-statement,
.h-section,
.h-compact,
.h-small,
.h-group,
.h-legal,
.h-card {
  margin: 0;
  font-weight: 600;
  color: inherit;
}

/* Hero H1. Per-page sizes are modifiers; Home is the default. */
.h-display {
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: calc(1.02 + var(--lh-boost));
  letter-spacing: -0.035em;
}
.h-display--page {
  font-size: clamp(44px, 6.2vw, 84px); /* Sellers, Shoppers, Get Looma */
}
.h-display--pricing {
  font-size: clamp(42px, 6vw, 80px);
  line-height: calc(1.03 + var(--lh-boost));
}
.h-display--help {
  font-size: clamp(42px, 6vw, 76px); /* FAQ, Support */
  line-height: calc(1.04 + var(--lh-boost));
}
.h-display--legal {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: calc(1.05 + var(--lh-boost));
}

/* Large chapter / final CTA statement. */
.h-statement {
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: calc(1.04 + var(--lh-boost));
  letter-spacing: -0.035em;
}
/* A step down: Home's customer journey, the Pricing and FAQ closing panels. */
.h-statement--sm {
  font-size: clamp(38px, 5.4vw, 72px);
}
/* Standard chapter heading. Home is the default. */
.h-section {
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: calc(1.06 + var(--lh-boost));
  letter-spacing: -0.03em;
}
.h-section--page {
  font-size: clamp(34px, 4.6vw, 60px); /* Sellers, Shoppers, Get Looma */
}
/* Image Studio, Languages, AI credits. */
.h-compact {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: calc(1.08 + var(--lh-boost));
  letter-spacing: -0.03em;
}
/* FAQ teasers. */
.h-small {
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: calc(1.08 + var(--lh-boost));
  letter-spacing: -0.03em;
}
/* Compare plans, How plans work, Shoppers' "Between you and the seller". */
.h-small--lg {
  font-size: clamp(32px, 4vw, 52px);
}
.h-group {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: calc(1.2 + var(--lh-boost));
  letter-spacing: -0.02em;
}
.h-legal {
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: calc(1.3 + var(--lh-boost));
  letter-spacing: -0.015em;
}
.h-card {
  font-size: 18px;
  line-height: calc(1.35 + var(--lh-boost));
}

/* Very narrow phones: one more step down, so a hero is not 1–2 words a line
   (RESPONSIVE-RTL §1, guidance). */
@media (max-width: 379px) {
  .h-display,
  .h-display--page,
  .h-display--pricing,
  .h-display--help,
  .h-display--legal {
    font-size: 36px;
  }
  .h-statement,
  .h-statement--sm,
  .h-section,
  .h-section--page {
    font-size: 30px;
  }
  .h-compact,
  .h-small,
  .h-small--lg {
    font-size: 28px;
  }
}

.lead {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: calc(1.55 + var(--lh-boost));
  color: var(--c-body);
}
.on-dark .lead {
  color: rgba(255, 255, 255, 0.8);
}

.body-lg {
  margin: 0;
  font-size: 18px;
  line-height: calc(1.6 + var(--lh-boost));
  color: var(--c-body);
}

/* Chapter label. Eyebrow.vue adds the optional numbered circle. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-link);
}
.on-dark .eyebrow {
  color: var(--c-sky);
}

/* Small caps label ("About Looma", "Contents", "Useful links"). */
.label-caps {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* The blue part of an accent heading ("Let Looma organize it."). */
.accent {
  color: var(--c-primary);
}
.on-dark .accent {
  color: var(--c-sky);
}

/* A deliberate heading break that only applies from 640px up; below that the
   heading wraps naturally (RESPONSIVE-RTL §1). TokenText emits it for "\n". */
@media (max-width: 639px) {
  .br-wide {
    display: none;
  }
}

/* ---------- direction ---------- */

/* Arabic script has no case and must not be tracked: drop the uppercase and
   letter-spacing every eyebrow, label and heading carries, except on Latin
   islands (the wordmark, a price) marked lang="en". */
html[lang='ar'] :where(*):not(:lang(en)) {
  letter-spacing: 0;
  text-transform: none;
}

/* A glyph or icon that points along the reading direction. */
html[dir='rtl'] .dir-flip {
  transform: scaleX(-1);
}

/* Content that is left-to-right whatever the page is: prices, URLs, emails,
   SKUs, Latin seller content inside Arabic. */
.ltr-island {
  direction: ltr;
  unicode-bidi: isolate;
}

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

.nowrap {
  white-space: nowrap;
}

/* ---------- motion ---------- */
@keyframes lm-fade-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.lang-selector[data-v-ff692006] {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--c-track);
  white-space: nowrap;
}
.lang-selector__item[data-v-ff692006] {
  padding: 6px 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ui-grey);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.lang-selector__item[data-v-ff692006]:hover {
  color: var(--c-ink);
}
.lang-selector__item.is-selected[data-v-ff692006] {
  background: #fff;
  color: var(--c-ink);
  box-shadow: var(--sh-segment);
}
.lang-selector__item.is-ar[data-v-ff692006] {
  font-family: var(--font-ar);
}
.lang-selector__item[data-v-ff692006]:focus-visible {
  outline-offset: 1px;
}

/* Touch size: each segment is a 44px target. */
.lang-selector--lg[data-v-ff692006] {
  padding: 4px;
}
.lang-selector--lg .lang-selector__item[data-v-ff692006] {
  min-width: 56px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
}

.site-header[data-v-0c548350] {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: var(--line-faint);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header[data-v-0c548350] {
    background: rgba(255, 255, 255, 0.96);
}
}
.site-header__bar[data-v-0c548350] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding-block: 14px;
}

/* ---------- brand ---------- */
.site-header__brand[data-v-0c548350] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  color: var(--c-ink);
  border-radius: 8px;
}
.site-header__brand[data-v-0c548350]:hover {
  color: var(--c-ink);
}
.site-header__mark[data-v-0c548350] {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: var(--sh-mark);
}
.site-header__wordmark[data-v-0c548350] {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ---------- desktop nav ---------- */
.site-header__nav[data-v-0c548350] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin-inline-start: auto;
  white-space: nowrap;
}
.site-header__link[data-v-0c548350] {
  color: var(--c-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  transition: color var(--t-fast) var(--ease);
}
.site-header__link[data-v-0c548350]:hover {
  color: var(--c-link-hover);
}
.site-header__link[aria-current='page'][data-v-0c548350] {
  color: var(--c-link);
  font-weight: 600;
  padding-block-end: 6px;
  margin-block-end: -8px;
  border-bottom: 2px solid var(--c-primary);
  border-radius: 0;
}
.site-header__actions[data-v-0c548350] {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- menu button (mobile only) ---------- */
.site-header__menu-button[data-v-0c548350] {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--c-ink);
}
.site-header__burger[data-v-0c548350] {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.site-header__burger span[data-v-0c548350] {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--t-med) var(--ease),
    opacity var(--t-fast) var(--ease);
}
.site-header__burger span[data-v-0c548350]:nth-child(1) {
  top: 0;
}
.site-header__burger span[data-v-0c548350]:nth-child(2) {
  top: 5px;
}
.site-header__burger span[data-v-0c548350]:nth-child(3) {
  top: 10px;
}
.site-header__burger.is-open span[data-v-0c548350]:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.site-header__burger.is-open span[data-v-0c548350]:nth-child(2) {
  opacity: 0;
}
.site-header__burger.is-open span[data-v-0c548350]:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---------- menu panel ---------- */
.site-header__panel[data-v-0c548350] {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: var(--line-faint);
  box-shadow: 0 24px 40px -24px rgba(31, 38, 135, 0.25);
  animation: lm-fade-down var(--t-med) var(--ease-out) both;
}
.site-header__panel-inner[data-v-0c548350] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: 8px 24px;
}
.site-header__panel-inner > nav[data-v-0c548350] {
  width: 100%;
}
.site-header__panel-links[data-v-0c548350] {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header__panel-link[data-v-0c548350] {
  display: flex;
  min-height: 48px;
  align-items: center;
  border-bottom: var(--line);
  color: var(--c-ink);
  font-size: 17px;
  font-weight: 500;
}
.site-header__panel-link[aria-current='page'][data-v-0c548350] {
  color: var(--c-link);
  font-weight: 600;
}
.site-header__scrim[data-v-0c548350] {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(17, 24, 39, 0.18);
}

/* ---------- breakpoint (guidance: the nav no longer fits under ~900px) ---------- */
@media (max-width: 899px) {
.site-header__bar[data-v-0c548350] {
    flex-wrap: nowrap;
    gap: 12px;
    padding-block: 12px;
}
.site-header__nav[data-v-0c548350],
  .site-header__lang[data-v-0c548350] {
    display: none;
}
.site-header__actions[data-v-0c548350] {
    margin-inline-start: auto;
    gap: 10px;
}
.site-header__menu-button[data-v-0c548350] {
    display: inline-flex;
}
.site-header__bar .site-header__actions .site-header__cta[data-v-0c548350] {
    padding: 10px 16px;
}
}
@media (min-width: 900px) {
.site-header__panel[data-v-0c548350],
  .site-header__scrim[data-v-0c548350] {
    display: none !important;
}
}

.site-footer__inner[data-v-c01f2320] {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-block: clamp(48px, 6vw, 72px) 28px;
}

/* The rule spans the container box (gutters included), as in the designs. */
.site-footer__inner.has-top-rule[data-v-c01f2320] {
  border-top: var(--line-faint);
}

/* ---------- about row ---------- */
.site-footer__about[data-v-c01f2320] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 48px;
  padding-block-end: 32px;
  border-bottom: var(--line);
}
.site-footer__brand-col[data-v-c01f2320] {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.site-footer__brand[data-v-c01f2320] {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--c-ink);
  border-radius: 8px;
}
.site-footer__brand[data-v-c01f2320]:hover {
  color: var(--c-ink);
}
.site-footer__mark[data-v-c01f2320] {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: var(--sh-mark-lg);
}
.site-footer__wordmark[data-v-c01f2320] {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.site-footer__about-text[data-v-c01f2320] {
  display: flex;
  flex: 2 1 480px;
  min-width: 0;
  max-width: 640px;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: calc(1.65 + var(--lh-boost));
  color: var(--c-secondary);
}
.site-footer__about-text p[data-v-c01f2320] {
  margin: 0;
}

/* ---------- nav + languages ---------- */
.site-footer__row[data-v-c01f2320] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  font-size: 14px;
  line-height: 1;
}
.site-footer__nav[data-v-c01f2320] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  white-space: nowrap;
}
.site-footer__link[data-v-c01f2320] {
  color: var(--c-ui-grey);
  border-radius: 4px;
}
.site-footer__link[data-v-c01f2320]:hover {
  color: var(--c-link-hover);
}
.site-footer__link.is-current[data-v-c01f2320] {
  color: var(--c-link);
  font-weight: 600;
}
.site-footer__langs[data-v-c01f2320] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-inline-start: auto;
  color: var(--c-ui-grey);
}
.site-footer__lang-label[data-v-c01f2320] {
  color: var(--c-ink);
  font-weight: 600;
}
.site-footer__lang[data-v-c01f2320] {
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--c-ui-grey);
  font-size: 14px;
  line-height: 1;
}
.site-footer__lang[data-v-c01f2320]:hover {
  color: var(--c-link-hover);
}
.site-footer__lang.is-selected[data-v-c01f2320] {
  color: var(--c-link);
  font-weight: 600;
}
.site-footer__lang.is-ar[data-v-c01f2320] {
  font-family: var(--font-ar);
}
.site-footer__copy[data-v-c01f2320] {
  margin: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--c-muted);
}

/* Phones: the nav becomes two columns and the language list sits below it. */
@media (max-width: 639px) {
.site-footer__nav[data-v-c01f2320] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    width: 100%;
}
.site-footer__link[data-v-c01f2320] {
    display: flex;
    min-height: 44px;
    align-items: center;
}
.site-footer__langs[data-v-c01f2320] {
    margin-inline-start: 0;
}
.site-footer__lang[data-v-c01f2320] {
    min-height: 44px;
}
}

.preview-banner[data-v-2a3cb35a] {
  /* Static, not sticky: the sticky header pins to top: 0 and would cover it. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 8px 16px;
  background: var(--c-ink-strong);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.preview-banner__exit[data-v-2a3cb35a] {
  padding: 4px 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.preview-banner__exit[data-v-2a3cb35a]:hover,
.preview-banner__exit[data-v-2a3cb35a]:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.page[data-v-342b1171] {
  min-height: 100vh;
  background: #fff;
}
main[data-v-342b1171]:focus {
  outline: none;
}
.skip-link[data-v-342b1171] {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link[data-v-342b1171]:focus,
.skip-link[data-v-342b1171]:focus-visible {
  color: #fff;
  transform: none;
}