/* Layout: the Stripe system from awesome-design-md, in XP's own colours. A white canvas with an animated gradient mesh
   across the upper third, thin display type, one filled pill per band, tabular figures, cards on near-white with
   hairlines and soft blue shadows, and a composited product UI beside every explanation. One committed light look
   with a dark band, so every ground and ink is set explicitly. */
:root {
  --canvas: #FFFFFF;
  --canvas-soft: #F6F9FC;
  --cream: #F7EFE1;
  --ink: #0B1F3A;
  --ink-2: #2B3C55;
  --ink-mute: #5B6B82;
  --hairline: #E3E8EE;
  --primary: #2B50E0;
  --primary-press: #1D3AB0;
  --primary-soft: #E7ECFD;
  --primary-deep: #2341C4;
  --dark: #0A1B3F;
  --dark-deep: #0A111E;
  --dark-line: rgba(255, 255, 255, 0.12);
  --on-dark-mute: #AAB7CD;
  --gold: #C9A063;
  --shadow-1: 0 1px 3px rgba(0, 55, 112, 0.08);
  --shadow-2: 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);
  --shadow-float: 0 30px 60px -12px rgba(11, 31, 58, 0.22), 0 18px 36px -18px rgba(0, 0, 0, 0.2);
  --font: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display-xxl: clamp(2.5rem, 1.45rem + 3.3vw, 4.25rem);
  --display-xl: clamp(2rem, 1.45rem + 1.7vw, 3rem);
  --heading: 1.375rem;
  --body: clamp(1.0625rem, 1rem + 0.2vw, 1.15rem);
  --small: 0.875rem;
  --gx: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --r: 12px;
  --r-mock: 16px;
  --section: clamp(80px, 9vw, 128px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  position: relative; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: var(--body);
  font-weight: 350; line-height: 1.55; font-feature-settings: "cv11"; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--canvas); }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2 { font-weight: 300; text-wrap: balance; }
h3 { font-weight: 450; text-wrap: balance; }
p, dd { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible { outline-color: #FFFFFF; }
.num { font-feature-settings: "tnum", "cv11"; }

.wrap {
  width: 100%; max-width: calc(var(--maxw) + 2 * var(--gx)); margin-inline: auto;
  padding-left: max(var(--gx), env(safe-area-inset-left, 0px)); padding-right: max(var(--gx), env(safe-area-inset-right, 0px));
}
.band { padding-block: var(--section); }
.band--soft { background: var(--canvas-soft); }
.sec-head { display: grid; gap: 16px; max-width: 44rem; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head h2 { font-size: var(--display-xl); line-height: 1.1; letter-spacing: -0.02em; }
.lead { font-size: var(--body); color: var(--ink-2); }

/* Pills: the only button shape. One filled pill per band. */
.pill {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 10px 20px; border-radius: 999px;
  font: 500 1rem/1 var(--font); text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.pill--primary { background: var(--primary); color: #FFFFFF; }
.pill--primary:hover { background: var(--primary-deep); }
.pill--primary:active { background: var(--primary-press); }
.pill--ghost { color: var(--primary); }
.pill--ghost:hover { color: var(--primary-press); }
.pill--light { background: #FFFFFF; color: var(--dark); }
.pill--light:hover { background: var(--primary-soft); }
.harrow { width: 10px; height: 10px; margin-left: 7px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.harrow__line { opacity: 0; transition: opacity 180ms ease; }
.harrow__tip { transition: transform 180ms ease; }
a:hover .harrow__line { opacity: 1; }
a:hover .harrow__tip { transform: translateX(3px); }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); font-size: var(--small); font-weight: 500; line-height: 1.4; white-space: nowrap; }

/* Navigation: floats on the mesh, turns to frosted white once the page moves. */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; transition: background-color 250ms ease, box-shadow 250ms ease; }
.nav.is-scrolled { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 0 var(--hairline); }
.nav__in { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.nav__brand img { height: 36px; width: auto; }
.nav__links { display: none; gap: 28px; margin-left: auto; font-size: var(--small); font-weight: 500; }
.nav__links a { text-decoration: none; color: var(--ink); opacity: 0.86; transition: opacity 150ms ease; }
.nav__links a:hover { opacity: 1; }
.nav__cta { margin-left: auto; min-height: 40px; padding: 8px 16px; font-size: var(--small); }
@media (min-width: 960px) { .nav__links { display: flex; } .nav__cta { margin-left: 0; } }

/* The mesh: XP's sand, gold, sky, blue and navy, washed across the top of the page. */
.mesh { position: absolute; top: 0; left: 0; right: 0; height: 760px; z-index: 0; overflow: hidden; transform: skewY(-6deg); transform-origin: 0 0; pointer-events: none; }
.mesh canvas { position: absolute; inset: -12% 0 0 0; width: 100%; height: 112%; display: block; }
.mesh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.42) 38%, rgba(255, 255, 255, 0) 64%); }
@media (max-width: 959px) {
  .mesh { height: 640px; }
  .mesh::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.62) 46%, rgba(255, 255, 255, 0.9) 100%); }
}
.hero { position: relative; z-index: 1; }

/* Hero: words on the left, the product of the deal on the right. */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.hero__grid { display: grid; gap: clamp(40px, 6vw, 56px); align-items: center; }
.hero__copy { display: grid; gap: 24px; justify-items: start; max-width: 34rem; }
.hero h1 { font-size: var(--display-xxl); line-height: 1.03; letter-spacing: -0.03em; }
.hero__sub { font-size: var(--body); color: var(--ink-2); max-width: 32rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 8px; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .hero__copy { grid-column: 1 / span 6; }
  .stage { grid-column: 7 / span 6; }
}

/* Mockups: XP's deal drawn as product UI. Values are schematic and marked Example. */
.mock { background: #FFFFFF; border-radius: var(--r-mock); box-shadow: var(--shadow-float); color: var(--ink); }
.mock__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mock__head--start { justify-content: flex-start; gap: 8px 12px; }
.mock__title { font-size: var(--heading); font-weight: 450; letter-spacing: -0.01em; }
.mock__label { font-size: var(--small); color: var(--ink-mute); font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--small); color: var(--ink-mute); }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key::before { content: ""; width: 18px; height: 0; }
.key--base::before { border-top: 2px dashed #8D9BB0; }
.key--line::before { border-top: 3px solid var(--primary); border-radius: 2px; }
.key--gain::before { height: 10px; width: 14px; border-radius: 3px; background: rgba(43, 80, 224, 0.22); }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: #EDF1F6; stroke-width: 1; }
.chart .base { stroke: #8D9BB0; stroke-width: 1.5; stroke-dasharray: 5 6; fill: none; }
.chart .mark { stroke: #C9D3E0; stroke-width: 1; stroke-dasharray: 3 5; }
.chart .line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.chart .area { fill: url(#g-gain); }
.chart .dot { fill: var(--primary); stroke: #FFFFFF; stroke-width: 3; }
.chart.is-drawing .line { animation: draw 1.8s var(--ease) both; }
.chart.is-drawing .area, .chart.is-drawing .dot { animation: fade 900ms 1.1s ease both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.stage { position: relative; display: grid; gap: 14px; }
.mock--chart { display: grid; gap: 14px; padding: 20px 22px 18px; }
.mock--fee { display: grid; gap: 4px; padding: 18px 20px; }
.mock__big { font-size: var(--display-xl); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
.mock__note { font-size: var(--small); color: var(--ink-mute); line-height: 1.4; }
.mock--deal { display: grid; gap: 12px; padding: 18px 20px; background: var(--dark); color: #FFFFFF; }
.mock--deal .mock__label { color: var(--on-dark-mute); }
.deal-rows { display: grid; gap: 8px; font-size: var(--small); }
.deal-rows div { display: flex; justify-content: space-between; gap: 16px; }
.deal-rows dt { color: var(--on-dark-mute); }
.deal-rows dd { text-align: right; }
.signs { display: flex; flex-wrap: wrap; gap: 8px; }
.sign { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: var(--small); }
.tick { width: 16px; height: 16px; flex: none; transform-origin: 50% 50%; }
.tick circle { fill: var(--primary); }
.tick path { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) and (max-width: 1023px) { .stage { grid-template-columns: 1fr 1fr; } .mock--chart { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .stage { display: block; height: 576px; }
  .mock--chart { position: absolute; top: 100px; left: 0; right: 0; }
  .mock--fee { position: absolute; top: 0; right: -20px; width: 236px; }
  .mock--deal { position: absolute; left: -20px; bottom: 0; width: 320px; }
}
@media (min-width: 1280px) { .mock--deal { left: -44px; } }

/* How it works: three cards, each paired with the piece of work it describes. */
.steps { display: grid; gap: 20px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: var(--shadow-1); transition: box-shadow 250ms ease, transform 250ms var(--ease); }
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.step { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 24px 24px 28px; }
@media (min-width: 900px) { .steps { grid-template-rows: auto auto 1fr auto; } .step { grid-row: span 4; grid-template-rows: subgrid; } }
.step h3 { font-size: var(--heading); margin-top: 12px; }
.step p { color: var(--ink-2); }
.step .tag { justify-self: start; }
/* Tablet: each card sets its piece of work beside its words, so the three steps read as rows, not a tower. */
@media (min-width: 600px) and (max-width: 899px) {
  .step { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); grid-template-rows: auto auto 1fr; column-gap: 28px; row-gap: 12px; padding: 24px; }
  .step > .vig { grid-column: 1; grid-row: 1 / span 3; }
  .step > h3 { grid-column: 2; grid-row: 1; margin-top: 4px; }
  .step > p { grid-column: 2; grid-row: 2; }
  .step > .tag { grid-column: 2; grid-row: 3; align-self: start; }
}
.vig { display: grid; gap: 8px; align-content: start; min-height: 204px; padding: 16px; border-radius: 10px; background: var(--canvas-soft); border: 1px solid var(--hairline); font-size: var(--small); }
.vig__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--hairline); }
.vig__row--plain { justify-content: flex-start; gap: 10px; }
.vig__title { font-weight: 500; }
.vig .tag { padding: 1px 8px; }
.vig__status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 500; }

/* What we improve: pick a number in the row of tabs; the wide dashboard below redraws its chart and its agreement. */
.live { position: relative; }
.t-in { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tabs { display: grid; gap: 10px; margin-bottom: 20px; }
@media (min-width: 560px) { .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.tab { display: grid; gap: 2px; align-content: start; padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--hairline); background: #FFFFFF; cursor: pointer; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; }
.tab:hover { border-color: #B9C6F6; }
.tab__name { font-weight: 500; }
.tab__desc { font-size: var(--small); color: var(--ink-mute); }
#t-conv:checked ~ .tabs [for="t-conv"], #t-repeat:checked ~ .tabs [for="t-repeat"],
#t-loans:checked ~ .tabs [for="t-loans"], #t-time:checked ~ .tabs [for="t-time"] {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-1);
}
#t-conv:focus-visible ~ .tabs [for="t-conv"], #t-repeat:focus-visible ~ .tabs [for="t-repeat"],
#t-loans:focus-visible ~ .tabs [for="t-loans"], #t-time:focus-visible ~ .tabs [for="t-time"] { outline: 2px solid var(--primary); outline-offset: 3px; }
.dash { display: grid; gap: 28px; padding: clamp(20px, 3vw, 40px); border-radius: var(--r-mock); background: #FFFFFF; border: 1px solid var(--hairline); box-shadow: var(--shadow-2); }
.dash__set { display: none; gap: 24px 56px; align-items: start; }
#t-conv:checked ~ .dash .s-conv, #t-repeat:checked ~ .dash .s-repeat, #t-loans:checked ~ .dash .s-loans, #t-time:checked ~ .dash .s-time { display: grid; }
.dash__plot { display: grid; gap: 16px; }
.terms { display: grid; border-top: 1px solid var(--hairline); }
.terms div { display: grid; gap: 4px; padding-block: 14px; border-bottom: 1px solid var(--hairline); }
@media (min-width: 560px) { .terms div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; } }
.terms dt { font-size: var(--small); color: var(--ink-mute); font-weight: 500; padding-top: 2px; }
.terms .pay dd { font-weight: 450; }
@media (min-width: 1024px) {
  .dash__set { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .terms { border-top: 0; }
  .terms div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 0 16px; margin-bottom: 16px; }
  .terms div:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
}
.dash__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dash__foot p { font-size: var(--small); color: var(--ink-mute); }

/* Track record: the dark band, set on XP's own render of its mark in dark glass, lit gold from below. The figures stand
   free on it, large and tabular, the way the reference sets its numbers on its dark band. */
.dark { position: relative; overflow: hidden; background: var(--dark-deep); color: #FFFFFF; padding-block: var(--section); isolation: isolate; }
.dark__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 100%; pointer-events: none; }
@media (max-width: 1023px) { .dark__img { object-position: 64% 100%; opacity: 0.55; } }
.dark .lead { color: var(--on-dark-mute); }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
@media (min-width: 1024px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.figure { display: grid; gap: 14px; justify-items: start; align-content: start; }
.figure__n { font-size: var(--display-xxl); font-weight: 300; letter-spacing: -0.04em; line-height: 0.95; }
.figure__what { color: #E6EBF4; max-width: 22ch; }
.worked { display: grid; gap: 14px; margin-top: clamp(56px, 7vw, 96px); padding-top: 32px; border-top: 1px solid var(--dark-line); }
.worked__list { display: flex; flex-wrap: wrap; gap: 8px clamp(28px, 4.5vw, 64px); font-size: var(--heading); font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.9); }
.worked__label { font-size: var(--small); color: var(--on-dark-mute); }

/* Pricing: two tiers, the featured one dark, then the questions they raise. */
.plans { display: grid; gap: 20px; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 16px; padding: 32px; border-radius: var(--r); background: #FFFFFF; border: 1px solid var(--hairline); box-shadow: var(--shadow-1); }
.plan h3 { font-size: var(--heading); font-weight: 400; letter-spacing: -0.01em; }
.plan p { color: var(--ink-2); }
.plan__price { display: grid; gap: 4px; padding-block: 16px; border-block: 1px solid var(--hairline); }
.plan__big { font-size: var(--display-xl); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
.plan__price span:last-child { color: var(--ink-2); font-size: var(--small); }
.plan__list { display: grid; gap: 10px; align-content: start; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan__list .tick { margin-top: 4px; }
.plan .pill { justify-self: start; }
.plan--featured { background: var(--dark); color: #FFFFFF; border-color: var(--dark); box-shadow: var(--shadow-2); }
.plan--featured p, .plan--featured .plan__price span:last-child { color: var(--on-dark-mute); }
.plan--featured .plan__price { border-color: var(--dark-line); }

/* Questions: every answer open, two by two, on the soft ground. */
.qa { display: grid; gap: 40px 64px; }
@media (min-width: 820px) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa__item { display: grid; gap: 10px; align-content: start; }
.qa dt { font-size: var(--heading); font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.qa dd { margin: 0; color: var(--ink-2); max-width: 50ch; }

/* Contact: the warm cream interlude, with the city. */
.cta { display: grid; gap: 32px; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-mock); background: var(--cream); align-items: center; }
@media (min-width: 900px) { .cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }
.cta__copy { display: grid; gap: 20px; }
.cta__copy h2 { font-size: var(--display-xl); line-height: 1.1; letter-spacing: -0.02em; }
.cta__rows { display: grid; gap: 8px; max-width: 28rem; }
.cta__rows div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid rgba(11, 31, 58, 0.1); }
.cta__rows dt { color: var(--ink-mute); }
.cta__rows dd { text-align: right; font-weight: 450; user-select: all; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 4px; }
.cta__note { font-size: var(--small); color: var(--ink-mute); }
.cta__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 82% 50%; border-radius: var(--r); }

/* Footer. */
.foot { border-top: 1px solid var(--hairline); padding-block: 64px 32px; color: var(--ink-mute); font-size: var(--small); }
.foot__grid { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot__brand { grid-column: 1 / -1; display: grid; gap: 14px; max-width: 22rem; }
.foot__brand img { height: 36px; width: auto; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col h3 { font-size: var(--small); font-weight: 500; color: var(--ink); }
.foot__col a { text-decoration: none; }
.foot__col a:hover { color: var(--primary); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.foot__legal a { text-decoration: none; }
.foot__legal a:hover { color: var(--primary); }
@media (min-width: 900px) { .foot__grid { grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2fr)); } .foot__brand { grid-column: auto; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---- Brand voice: titles, eyebrows, buttons and footer headings in capitals. Source text stays sentence case. ---- */
h1, h2, .pill, .eyebrow, .foot__col h3, .tag, .mock__title, .tab__name { text-transform: uppercase; }
h1 { letter-spacing: -0.01em !important; }
h2 { letter-spacing: 0 !important; }
.pill { letter-spacing: 0.04em; font-size: 0.9375rem; }
.eyebrow { font-size: var(--small); font-weight: 500; letter-spacing: 0.12em; color: var(--ink-mute); }
.dark .eyebrow { color: var(--gold); }
.foot__col h3 { letter-spacing: 0.08em; }
.kitline { font-size: var(--small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }

/* Language switch in the bar. */
.nav__lang { font-size: var(--small); font-weight: 500; text-decoration: none; color: var(--ink); opacity: 0.86; }
.nav__lang:hover { opacity: 1; }
.nav__links .nav__lang { display: none; }
@media (max-width: 959px) { .nav__lang--bar { margin-left: auto; } .nav__lang--bar + .nav__cta { margin-left: 0; } }

/* Inner pages: a quiet header band, prose, a comparison table and numbered steps. */
.page-head { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 88px) clamp(40px, 5vw, 64px); }
.page-head__in { display: grid; gap: 20px; justify-items: start; }
.page-head__in > * { max-width: 46rem; }
.page-head h1 { font-size: var(--display-xl); line-height: 1.08; font-weight: 300; }
.answer { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.5; color: var(--ink); font-weight: 400; max-width: 44rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--small); color: var(--ink-mute); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: #B5C0CF; }
.prose { display: grid; gap: 16px; max-width: 46rem; }
.prose p { color: var(--ink-2); }
.numbered { display: grid; gap: 0; counter-reset: n; border-top: 1px solid var(--hairline); max-width: 52rem; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 8px 16px; padding-block: 24px; border-bottom: 1px solid var(--hairline); }
.numbered li::before { content: counter(n, decimal-leading-zero); font-feature-settings: "tnum"; color: var(--primary); font-weight: 500; grid-row: 1 / span 2; padding-top: 2px; }
.numbered h3 { font-size: var(--heading); font-weight: 450; }
.numbered p { color: var(--ink-2); grid-column: 2; }
.numbered .tag { grid-column: 2; justify-self: start; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r); background: #FFFFFF; box-shadow: var(--shadow-1); }
.tbl { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--small); }
.tbl caption { text-align: start; padding: 16px 20px 0; color: var(--ink-mute); }
.tbl th, .tbl td { text-align: start; padding: 14px 20px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tbl thead th { font-weight: 500; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.tbl tbody th { font-weight: 500; color: var(--ink); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl .ours { background: var(--primary-soft); }
.defs { display: grid; gap: 0; border-top: 1px solid var(--hairline); max-width: 52rem; }
.defs div { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--hairline); }
@media (min-width: 640px) { .defs div { grid-template-columns: 12rem minmax(0, 1fr); gap: 24px; } }
.defs dt { font-weight: 500; }
.defs dd { margin: 0; color: var(--ink-2); }
.updated { font-size: var(--small); color: var(--ink-mute); }
.mesh--short { height: 520px; }

/* ---- Arabic, right to left. ---- */
html[dir="rtl"] { --font: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
html[dir="rtl"] body { font-weight: 400; line-height: 1.75; }
html[dir="rtl"] h1, html[dir="rtl"] h2 { font-weight: 500; line-height: 1.3; letter-spacing: 0 !important; }
html[dir="rtl"] .hero h1 { line-height: 1.25; }
html[dir="rtl"] .pill, html[dir="rtl"] .kitline, html[dir="rtl"] .eyebrow, html[dir="rtl"] .foot__col h3, html[dir="rtl"] .tbl thead th { letter-spacing: 0; }
html[dir="rtl"] .harrow { transform: scaleX(-1); margin-left: 0; margin-right: 7px; }
html[dir="rtl"] a:hover .harrow__tip { transform: translateX(3px); }
html[dir="rtl"] .nav__links, html[dir="rtl"] .nav__cta { margin-left: 0; margin-right: auto; }
@media (min-width: 960px) { html[dir="rtl"] .nav__cta { margin-right: 0; } }
@media (max-width: 959px) { html[dir="rtl"] .nav__lang--bar { margin-left: 0; margin-right: auto; } html[dir="rtl"] .nav__lang--bar + .nav__cta { margin-right: 0; } }
html[dir="rtl"] .mesh { transform: skewY(6deg); transform-origin: 100% 0; }
html[dir="rtl"] .mesh::after { background: linear-gradient(270deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.42) 38%, rgba(255, 255, 255, 0) 64%); }
@media (max-width: 959px) { html[dir="rtl"] .mesh::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.62) 46%, rgba(255, 255, 255, 0.9) 100%); } }
@media (min-width: 1024px) {
  html[dir="rtl"] .mock--fee { right: auto; left: -20px; }
  html[dir="rtl"] .mock--deal { left: auto; right: -20px; }
}
@media (min-width: 1280px) { html[dir="rtl"] .mock--deal { left: auto; right: -44px; } }
html[dir="rtl"] .deal-rows dd, html[dir="rtl"] .cta__rows dd { text-align: left; }
html[dir="rtl"] .chart { transform: scaleX(-1); }
html[dir="rtl"] .sign { padding: 4px 6px 4px 10px; }
html[dir="rtl"] .cta__img { object-position: 82% 50%; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--dark); color: #FFFFFF; text-decoration: none; }
.skip:focus { top: 12px; }
.prose .pill { white-space: normal; padding-inline: 0; }
.nav__brand { flex: none; }
@media (max-width: 479px) { .nav__in { gap: 16px; } .nav__brand img { height: 30px; } .nav__cta { padding-inline: 14px; letter-spacing: 0.02em; font-size: 0.8125rem; } }
@media (max-width: 399px) { .pill:not(.nav__cta) { white-space: normal; text-align: start; } .plan { padding: 24px; } }


/* Ribbon: every brand our team has worked with, two rows moving in opposite directions (Arabic home). */
.ribbon { position: relative; z-index: 1; padding-block: 28px; background: #FFFFFF; border-bottom: 1px solid var(--hairline); }
.ribbon__in { display: grid; gap: 14px; align-items: center; }
@media (min-width: 900px) { .ribbon__in { grid-template-columns: 11rem minmax(0, 1fr); gap: 40px; } }
.ribbon__label { font-size: var(--small); font-weight: 500; color: var(--ink-mute); }
.ribbon__view { display: grid; gap: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.ribbon__track { display: flex; align-items: center; width: max-content; animation: ribbon var(--dur, 60s) linear infinite; }
.ribbon__track--rev { animation-name: ribbon-rev; }
.ribbon:hover .ribbon__track, .ribbon:focus-within .ribbon__track { animation-play-state: paused; }
.ribbon__item { flex: none; display: flex; align-items: center; height: 56px; padding-inline: clamp(22px, 2.8vw, 40px); }
.ribbon__item img { height: var(--h, 26px); width: auto; max-width: none; filter: brightness(0); opacity: 0.62; }
.ribbon__item img.is-ejari { width: calc(var(--h) * 2.2); }
.ribbon__item--text span { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; color: #000000; opacity: 0.62; }
@keyframes ribbon { to { transform: translateX(-50%); } }
@keyframes ribbon-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
html[dir="rtl"] .ribbon__track { animation-name: ribbon-rtl; }
html[dir="rtl"] .ribbon__track--rev { animation-name: ribbon-rtl-rev; }
@keyframes ribbon-rtl { to { transform: translateX(50%); } }
@keyframes ribbon-rtl-rev { from { transform: translateX(50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ribbon__track { width: auto; flex-wrap: wrap; row-gap: 8px; }
  .ribbon__item[aria-hidden="true"] { display: none; }
  .ribbon__view { -webkit-mask-image: none; mask-image: none; }
}