/* The imported design sets a margin only where it wants one: 588 flow elements
   across the 18 pages set no top margin at all, and relied on the `h1, h2, h3 {
   margin: 0 }` rule styles.css carried before this module was rewritten. Without
   it browsers add their own heading and paragraph margins on top of the authored
   section padding and the layout drifts everywhere. Scoped to design.css because
   the legal documents load styles.css alone and set their own prose spacing. */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

/* ============================================================
   Salventia site — layout system for the design-imported pages.

   The pages carry the design's inline styles verbatim. This sheet owns
   only what an inline style attribute cannot express: the responsive
   collapses, the shared nav/footer/modal chrome, and the tab panels.
   ============================================================ */

/* The nav and footer are React-mounted. `display: contents` keeps their
   mount points out of the box tree so the sticky header sticks against the
   viewport instead of against a 74px-tall wrapper. */
#site-nav, #site-footer { display: contents; }

/* Keep fragment destinations below the sticky chrome. The same measured
   height reserves the mount point below, plus a small reading gutter. */
html {
  --snav-reserved-height: 75px;
  scroll-padding-top: calc(var(--snav-reserved-height) + 13px);
}

/* The design's base link colour. Nav, footer, CTA and card links all set their
   own colour, so this only reaches prose links inside a page body — where an
   underline is the non-colour cue WCAG 1.4.1 requires, matching `.policy a`. */
main a:not([class]):not([style]) { color: #8C6A36; text-decoration: underline; text-underline-offset: 2px; }
main a:not([class]):not([style]):hover { color: #2A2620; }

/* The UA ring has poor contrast on the filled teal controls. */
:focus-visible { outline: 2px solid #1B4D54; outline-offset: 2px; }
.sbtn--teal:focus-visible, .snav__langopt--active:focus-visible,
.sfoot :focus-visible { outline-color: #EDE6D6; }
/* Imported page sections declare their dark background inline, so they need an
   attribute hook for the same light focus indicator used by the footer. */
[style*="background: #211E18"] :focus-visible { outline-color: #EDE6D6; }

/* ---------- Arabic ---------- */
html[lang="ar"] { direction: rtl; }
html[lang="ar"] body {
  direction: rtl;
  font-family: "IBM Plex Sans Arabic", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.8;
}
/* Arabic ignores the Latin tracking the design system uses throughout. */
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: normal !important; }

/* Every direction-dependent style is a logical property, so the layout mirrors
   itself. Icon geometry cannot: an arrow's path points one way, so the icons
   that mean "forward" carry a marker and are flipped here. */
html[lang="ar"] [data-dir-icon] { transform: scaleX(-1); }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- responsive collapses ----------
   The design applied these from a resize listener because a dc preview has
   no stylesheet. Here they are media queries, so first paint is already
   correct and there is no layout flash. Inline grid-template-columns on the
   elements themselves is why these need `!important`. */
@media (max-width: 1079px) {
  [data-hero-grid],
  [data-two-col],
  [data-gap-diagram] { grid-template-columns: 1fr !important; }
  [data-three-col] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-four-col] { grid-template-columns: repeat(2, 1fr) !important; }
  /* The design authored this hook and the old resize script used it; the media
     queries that replaced that script did not, so five columns survived down to
     699px and squeezed each card to ~113px around 48px of padding. */
  [data-five-col] { grid-template-columns: repeat(3, 1fr) !important; }
  /* The arrow inside is flipped by the RTL rule above, so rotating its
     container the same way in both directions lands it pointing down. */
  [data-arrow] { transform: rotate(90deg); padding: 10px 0 !important; }
  html[lang="ar"] [data-arrow] { transform: rotate(-90deg); }
}
@media (max-width: 699px) {
  [data-three-col],
  [data-four-col] { grid-template-columns: 1fr !important; }
  [data-five-col] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-span-two] { grid-column: span 1 !important; }
  [data-modal-two] { grid-template-columns: 1fr !important; }
}

/* Runtime-resolved links hide themselves when their origin is not configured:
   the affiliate programme until public self-signup is on, "Get Started" without
   a consumer origin. Both carry an inline `display`, which beats the UA's
   `[hidden]` rule — the same shape as the tab panes below. */
[data-aff-portal][hidden],
[data-aff-promo][hidden],
[data-b2c-link][hidden] { display: none !important; }

/* ---------- site nav ---------- */
/* A bypass for the ~10 links and two menus above <main> (WCAG 2.4.1). */
.snav__skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 60;
  padding: 12px 18px; border-radius: 0 0 10px 10px;
  background: #1B4D54; color: #FBF8F2; font-size: 14.5px; font-weight: 600;
}
.snav__skip:focus { inset-inline-start: 0; color: #FBF8F2; }

.snav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 242, .86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.snav--stuck { border-bottom-color: #E6DECE; }
.snav__inner {
  max-width: 1200px; margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px);
  display: flex; align-items: center; gap: 16px; height: 74px;
}
.snav__logo { flex: none; }
.snav__logo img { height: 30px; display: block; }
.snav__links { display: flex; align-items: center; gap: 13px; }
.snav__link {
  flex: none; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; color: #4A453B;
  padding: 4px 0; border-bottom: 1.5px solid transparent;
  background: none; border-inline: 0; border-top: 0; font-family: inherit;
}
.snav__link--current { font-weight: 600; color: #2A2620; border-bottom-color: #B08D4C; }
.snav__menu { position: relative; display: inline-flex; flex: none; }
.snav__menu > button { display: inline-flex; align-items: center; gap: 6px; }
.snav__menu > button svg { opacity: .7; }
.snav__pop {
  position: absolute; top: 34px; inset-inline-start: -18px; min-width: 200px;
  background: #FFFFFF; border: 1px solid #DDD3BF; border-radius: 14px; padding: 10px;
  box-shadow: 0 8px 24px -8px rgba(42, 38, 32, .16), 0 40px 80px -32px rgba(42, 38, 32, .22);
  display: grid; gap: 2px; z-index: 2;
}
/* Keep the hover target continuous across the visual gap below the trigger.
   Without this bridge, crossing that strip fires pointerleave on the menu host
   and unmounts the popup before the pointer can reach an item. */
.snav__pop::before {
  content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px;
}
.snav__pop--wide { min-width: 286px; }
.snav__popitem { display: block; padding: 11px 13px; border-radius: 10px; color: #2A2620; }
.snav__popitem:hover { background: #F9F4E6; color: #2A2620; }
.snav__popitem b { display: block; font-size: 14.5px; font-weight: 600; }
.snav__popitem span { display: block; font-size: 12.5px; color: #756E60; line-height: 1.4; margin-top: 2px; }
.snav__popitem--plain { padding: 10px 13px; font-size: 14.5px; font-weight: 600; }
.snav__lang {
  margin-inline-start: auto; display: flex; align-items: center; direction: ltr; flex: none;
  padding: 2px; border: 1px solid #DDD3BF; border-radius: 14px; background: #FFFFFF;
}
.snav__langopt {
  min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px;
  border-radius: 12px; font-size: 12.5px; font-weight: 700; color: #756E60;
}
.snav__langopt--active { background: #1B4D54; color: #FBF8F2; }
.snav__cta { display: flex; align-items: center; gap: 8px; }
.snav__burger {
  display: none; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid #DDD3BF; background: #FFFFFF; color: #4A453B;
}
.snav__panel {
  background: #FBF8F2; border-top: 1px solid #E6DECE;
  padding: 22px clamp(20px, 5vw, 64px) 40px;
  max-height: 80dvh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.snav__panel a, .snav__panel > span {
  display: block; padding: 15px 0; font-size: 19px; font-weight: 600;
  color: #2A2620; border-bottom: 1px solid #E6DECE;
}
.snav__panel > span { border-bottom: 0; padding-bottom: 6px; }
.snav__panel a.snav__panelsub {
  padding-block: 12px; padding-inline-start: 20px;
  font-size: 16px; font-weight: 500; color: #4A453B;
}
.snav__panelcta { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

/* The desktop row cannot wrap: a ~132px logo, six non-wrapping links and menus,
   both locale options and two CTAs need about 1200px. Revealing it at 1119px
   overflowed the document by up to 75px across the whole 1120-1199px range. */
@media (max-width: 1199px) {
  .snav__links { display: none; }
  .snav__burger { display: grid; }
}
@media (min-width: 1200px) {
  /* menuOpen can survive a tablet rotation; desktop must never show both navs. */
  .snav__panel { display: none; }
}
@media (max-width: 679px) {
  .snav__inner { flex-wrap: wrap; height: auto; padding-block: 10px 12px; gap: 10px; }
  /* The active locale is already conveyed by the document language. Keeping
     only the switch target visible lets the logo, locale and burger share the
     first row even at 320px, with the CTA occupying the second row. */
  .snav__langopt--active { display: none; }
  .snav__cta { order: 5; flex-basis: 100%; }
  .snav__cta > * { flex: 1; }
  .snav__burger { order: 4; }
  html { --snav-reserved-height: 111px; }
}

/* ---------- shared button shapes used by nav, footer and modal ---------- */
.sbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; font-family: inherit; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap; box-sizing: border-box;
}
.sbtn--sm { height: 36px; padding: 0 14px; font-size: 13.5px; line-height: 1; }
.sbtn--md { padding: 15px 26px; font-size: 16px; }
.sbtn--block { width: 100%; padding: 15px 26px; font-size: 16px; }
.sbtn--teal { background: #1B4D54; color: #FBF8F2; box-shadow: 0 1px 2px rgba(42, 38, 32, .18); }
.sbtn--teal:hover { background: #164147; color: #FBF8F2; }
.sbtn--ghost { background: transparent; color: #2A2620; border-color: #DDD3BF; }
.sbtn--ghost:hover { border-color: #2A2620; color: #2A2620; }
.sbtn--onDark { background: transparent; color: #EDE6D6; border-color: rgba(255, 255, 255, .28); }
.sbtn--onDark:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }

/* ---------- site footer ---------- */
.sfoot {
  background: #211E18; color: #B7AF9C;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: 54px 40px;
}
.sfoot__inner { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px); }
.sfoot__grid { display: grid; grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr)); gap: 28px; }
.sfoot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 40ch; }
.sfoot__brand img { height: 30px; opacity: .9; }
.sfoot__brand small { font-size: 12.5px; color: #A39C8A; line-height: 1.55; }
.sfoot__col { display: grid; gap: 11px; align-content: start; }
.sfoot__head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #A39C8A; margin-bottom: 3px;
}
.sfoot__col a, .sfoot__link {
  font-size: 14px; color: #B7AF9C; font-family: inherit;
  background: none; border: 0; padding: 0; text-align: start;
}
.sfoot__col a:hover, .sfoot__link:hover { color: #E7E0CE; }
.sfoot__col .sbtn { min-width: 0; padding: 11px 14px; font-size: 13.5px; }
@media (max-width: 1079px) { .sfoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .sfoot__grid { grid-template-columns: 1fr; } }

/* The nav mounts from the bundle, so #site-nav is an empty div at first paint
   and <main> starts at the top of the document, then drops by the header's
   height when React arrives -- measured at 0.139 CLS, most of the page's total.
   Reserving the height it will occupy holds the page still. The footer needs no
   equivalent: nothing follows it, so its arrival shifts nothing.
   `:empty` scopes it to exactly that window: once React mounts children the
   selector stops matching and `display: contents` above takes over again. */
#site-nav:empty { display: block; min-height: var(--snav-reserved-height); }

/* ---------- tab panels ----------
   Every pane ships in the HTML; the controller only flips `hidden`, so the
   page still reads completely with JavaScript disabled. */
/* `!important`: a pane may carry its own inline `display` (the design's grids
   do), which would otherwise beat the UA's `[hidden]` rule and leave every
   pane on screen at once. */
html[data-panels-ready] [data-panel-pane][hidden] { display: none !important; }
/* No controller, no hiding: a pane with no inline display would otherwise stay
   hidden by the UA's own `[hidden]` rule. Deliberately not `!important`, so the
   design's inline `display: grid` still wins and the panes keep their layout. */
html:not([data-panels-ready]) [data-panel-pane][hidden] { display: block; }
[data-panels] [data-panel-tab] {
  font-family: inherit; border-radius: 999px; font-weight: 600; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
[data-panels-style="pill"] { display: flex; padding: 3px; border: 1px solid #DDD3BF; border-radius: 999px; background: #FFFFFF; flex: none; }
[data-panels-style="pill"] [data-panel-tab] {
  padding: 9px 20px; font-size: 14px; border: 1px solid transparent; background: transparent; color: #756E60;
}
[data-panels-style="pill"] [data-panel-tab][aria-pressed="true"] { border-color: #DDD3BF; background: #F9F4E6; color: #2A2620; }
[data-panels-style="chip"] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-panels-style="chip"] [data-panel-tab] {
  padding: 11px 20px; font-size: 14.5px; border: 1px solid #DDD3BF; background: #FFFFFF; color: #4A453B;
}
[data-panels-style="chip"] [data-panel-tab][aria-pressed="true"] { border-color: transparent; background: #2A2620; color: #FFFFFF; }

/* ---------- FAQ disclosure ---------- */
.faq { border-top: 1px solid #E6DECE; }
.faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 17.5px; font-weight: 600; color: #2A2620; letter-spacing: -.008em;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary svg { flex: none; color: #8C6A36; transition: transform .2s ease; }
.faq[open] > summary svg { transform: rotate(180deg); }
.faq > p { color: #756E60; font-size: 16px; line-height: 1.6; padding-bottom: 22px; max-width: 62ch; }

/* ---------- lead form modal ---------- */
.smodal__back {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(33, 30, 24, .5); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
}
.smodal {
  background: #FBF8F2; border: 1px solid #DDD3BF; border-radius: 18px;
  width: min(540px, 100%); max-height: 92vh; overflow-y: auto;
  box-shadow: 0 8px 24px -8px rgba(42, 38, 32, .16), 0 40px 80px -32px rgba(42, 38, 32, .22);
}
.smodal__head { padding: 26px 28px 18px; border-bottom: 1px solid #E6DECE; position: relative; }
.smodal__role {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8C6A36; margin-bottom: 10px;
}
.smodal__head h3 { font-size: 22px; font-weight: 600; letter-spacing: -.012em; margin: 0; max-width: 26ch; }
.smodal__head p { margin: 8px 0 0; font-size: 14.5px; color: #756E60; line-height: 1.5; max-width: 42ch; }
.smodal__x {
  position: absolute; top: 20px; inset-inline-end: 20px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid #DDD3BF; background: #FFFFFF;
  display: grid; place-items: center; color: #756E60;
}
.smodal__body { padding: 24px 28px 28px; }
.smodal__field { margin-bottom: 16px; }
.smodal__field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: #4A453B; }
.smodal__field .req { color: #8C6A36; }
.smodal__field input, .smodal__field select, .smodal__field textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: #2A2620;
  padding: 12px 14px; border-radius: 10px; border: 1px solid #DDD3BF; background: #FFFFFF;
}
.smodal__field textarea { resize: vertical; min-height: 84px; }
.smodal__field--err input, .smodal__field--err select, .smodal__field--err textarea { border-color: #C0533F; }
.smodal__note { font-size: 12.5px; color: #756E60; line-height: 1.45; margin-top: 6px; }
.smodal__err { font-size: 12.5px; color: #B04A38; margin-top: 6px; }
.smodal__alert {
  margin-bottom: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #E3B6AB; background: #FBEDE9; color: #8C3323; font-size: 14px;
}
.smodal__submit {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 16px 30px; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 600;
  background: #1B4D54; color: #FBF8F2; border: 1px solid transparent;
}
.smodal__submit[disabled] { opacity: .7; cursor: progress; }
.smodal__legal { font-size: 12.5px; color: #756E60; text-align: center; margin-top: 14px; line-height: 1.5; }
.smodal__done { text-align: center; padding: 40px 30px 44px; }
.smodal__badge {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px;
  background: #F9F4E6; border: 1px solid #DDD3BF; display: grid; place-items: center; color: #8C6A36;
}
.smodal__done h3 { font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.smodal__done p { color: #756E60; margin: 0 auto 24px; max-width: 40ch; }
.smodal__done .sbtn { padding: 13px 28px; font-size: 15px; }

/* Honeypot: off-screen for pointers but reachable by naive form-filling bots. */
.hp-field { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }