/* ============================================================
   Lynvato — "Jet Lacquer + Copper Leaf"
   Bidirectional design system (ar / RTL primary, en / LTR)
   Authored in CSS logical properties: layout flips from [dir] alone.

   THREE surfaces carry the system, where a two-accent palette had room for
   only two:
     · the jet canvas        (body, cards, splits)
     · the bone inset        (conversion surfaces: form panels, CTA band)
     · the burgundy lacquer  (editorial features: .cap.feat, .gcard.mid)

   Copper is sampled off the brand mark. Burgundy is the second accent and is
   NEVER text on the canvas -- 1.74:1 there. It is a surface, a gradient
   terminus, a glow, and the ink on the bone inset, where the same colour
   reaches 9.47:1. That inversion is the system's whole argument.
   ============================================================ */

:root {
  /* ---- base -- jet night ---------------------------------------------- */
  /* #0b0b0c is not an arbitrary dark grey: copper measures 5.17:1 on it and
     only 4.99:1 on the charcoal this system replaced. The ground is what
     keeps the accent above 5:1. */
  --lv-bg: #0b0b0c;
  --lv-bg-2: #0f0f11;
  --lv-slate-1: #16161a;
  --lv-slate-2: #1e1d21;
  --lv-graphite-1: #282428;
  --lv-graphite-2: #352c30;   /* biased wine, not blue */

  /* ---- accent 1 -- copper, off the mark -------------------------------- */
  --lv-cu: #b6733f;           /* 5.17:1 on --lv-bg · fills, dots, glows      */
  --lv-cu-hi: #d08f55;        /* 7.25:1 on --lv-bg, 6.70:1 on the glass cards
                                 · THIS, not --lv-cu, is the label text tone */
  --lv-cu-deep: #6e3f14;      /* 7.39:1 on --lv-bone · light surfaces only   */
  --lv-cu-rgb: 182 115 63;
  --lv-cu-deep-rgb: 110 63 20;
  --lv-cu-wash: rgb(var(--lv-cu-rgb) / .1);
  --lv-cu-line: rgb(var(--lv-cu-rgb) / .3);
  --lv-on-cu: #120c05;        /* 5.10:1 on copper. White on copper is 3.81:1
                                 and FAILS -- dark-on-copper only.           */

  /* ---- accent 2 -- burgundy. Surface / glow / light-surface ink ONLY ---- */
  --lv-wine: #6b1f2e;         /* 1.74:1 on jet -- never text there.
                                 9.47:1 on --lv-bone -- excellent there.     */
  --lv-wine-hi: #9c3247;      /* 2.75:1 on jet: fails text AND the 3:1
                                 non-text UI floor. Not a border, not a ring */
  --lv-wine-rgb: 107 31 46;
  --lv-wine-wash: rgb(var(--lv-wine-rgb) / .22);
  --lv-lacquer: linear-gradient(var(--lv-panel-angle), #26121a, #14090d 62%, #0d0a0b);

  /* ---- gradients -- two, and NOT interchangeable ----------------------- */
  /* --lv-grad has a real hue journey copper -> wine. Use it for AREAS and for
     1px rules. Never under a glyph and never on a bar thinner than ~8px: the
     wine terminus sinks into the canvas and any ink on it drops to ~1.7:1.
     Anything carrying a glyph, or that must stay visible when thin, uses
     --lv-grad-cu. */
  --lv-grad: linear-gradient(135deg, #e8c49f 0%, #b6733f 46%, #6b1f2e 100%);
  --lv-grad-cu: linear-gradient(135deg, #c98a52, #8a4f26);

  /* ---- bone -- the inset surface and the ink that sits on it ----------- */
  --lv-bone: #f2ebe2;
  --lv-bone-2: #e4d8c9;
  --lv-bone-rgb: 242 235 226;
  --lv-ink: #141112;          /* 15.75:1 on --lv-bone */
  --lv-ink-soft: #4a4340;
  --lv-ink-rgb: 20 17 18;
  --lv-bone-line: rgb(var(--lv-ink-rgb) / .14);
  --lv-bone-surface: linear-gradient(var(--lv-panel-angle), #f7f1ea, #e9ded2);

  /* ---- text on the jet canvas ------------------------------------------ */
  --lv-tx: rgb(var(--lv-bone-rgb) / .78);   /* 10.20:1 composited */
  --lv-tx-strong: #f4efe8;
  --lv-muted: #a9a29a;                      /*  7.79:1 */
  /* Tertiary labels (.metric .lbl, .post-meta, .calc-form__label) sit on the
     lifted glass cards, not on --lv-bg. That ground composites to ~#171517,
     where #8d877d lands at 5.10:1 and anything dimmer drops under AA. On the
     bare canvas the same value is 5.52:1. */
  --lv-dim: #8d877d;

  /* ---- lines / glass ---------------------------------------------------- */
  --lv-line: rgb(var(--lv-bone-rgb) / .1);
  --lv-line-soft: rgb(var(--lv-bone-rgb) / .055);
  --lv-glass: rgb(var(--lv-bone-rgb) / .028);
  --lv-glass-2: rgb(var(--lv-bone-rgb) / .05);
  --lv-veil-rgb: 11 11 12;                  /* jet as a triple, for scrims */

  /* ---- state ------------------------------------------------------------ */
  --lv-up: #6fd39b;           /* 10.73:1 on jet */
  --lv-down: #e8826d;         /*  7.29:1 on jet */
  --lv-error-ink: #8e1f1a;    /*  7.47:1 on --lv-bone -- .phone-error lives on
                                 the bone panel, not on the canvas          */

  /* ---- radii ------------------------------------------------------------ */
  --lvr-sm: 6px;
  --lvr-md: 10px;
  --lvr-lg: 16px;
  --lvr-xl: 22px;
  --lvr-pill: 9999px;

  /* ---- shadow / glow ---------------------------------------------------- */
  --lvs-sh: 0 30px 72px -28px rgb(0 0 0 / .9);
  --lvs-glow: 0 0 30px -10px rgb(var(--lv-cu-rgb) / .55);
  --lvs-wine: 0 0 46px -14px rgb(var(--lv-wine-rgb) / .8);  /* lets a card come
                 forward chromatically instead of by value */
  --lvs-bone: 0 22px 54px -24px rgb(0 0 0 / .78);

  /* ---- fonts ------------------------------------------------------------ */
  /* Readex Pro and IBM Plex Sans Arabic both cover Arabic AND Latin, so mixed
     runs never fall through to a system face and no :lang() selectors are
     needed. Readex Pro's figures are PROPORTIONAL, unlike the Space Grotesk
     this replaces -- every animated counter therefore asks for tabular-nums
     explicitly, or it jitters horizontally while counting. */
  --lvf-disp: 'Readex Pro', 'Segoe UI', sans-serif;
  --lvf-body: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
  --lvf-mono: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;

  --lv-mw: 1240px;
  --lv-nav-h: 76px;

  /* direction-dependent gradient geometry (flipped for RTL below) */
  --lv-bloom-x: 100%;
  --lv-panel-angle: 155deg;
  --lv-hero-angle: 150deg;
  --lv-copy-angle: 160deg;
  --lv-shaft-tilt: 4deg;
}

[dir="rtl"] {
  --lv-bloom-x: 0%;
  --lv-panel-angle: 205deg;
  --lv-hero-angle: 210deg;
  --lv-copy-angle: 200deg;
  --lv-shaft-tilt: -4deg;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--lvf-body);
  background: var(--lv-bg);
  color: var(--lv-tx);
  line-height: 1.75;
  padding-block-start: var(--lv-nav-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ---- charcoal night ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgb(var(--lv-cu-rgb) / .075), transparent 55%),
    radial-gradient(90% 62% at var(--lv-bloom-x) 10%, rgb(var(--lv-wine-rgb) / .34), transparent 62%),
    /* the mirrored corner comes free: calc() against the same flipped prop */
    radial-gradient(70% 50% at calc(100% - var(--lv-bloom-x)) 88%, rgb(var(--lv-wine-rgb) / .18), transparent 64%),
    linear-gradient(180deg, #101011 0%, #0b0b0c 44%, #070708 100%);
}
/* copper shaft — the light source the bone insets are lit by */
body::after {
  content: "";
  position: fixed;
  top: -10%;
  inset-inline-start: 50%;
  width: 38vw;
  height: 120%;
  transform: translateX(-50%) rotate(var(--lv-shaft-tilt));
  z-index: -2;
  background: linear-gradient(180deg, rgb(var(--lv-cu-rgb) / .09), rgb(var(--lv-bone-rgb) / .014) 32%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  opacity: .7;
}
[dir="rtl"] body::after { transform: translateX(50%) rotate(var(--lv-shaft-tilt)); }

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--lv-mw); margin-inline: auto; padding-inline: 24px; }

/* a11y helpers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -60px; inset-inline-start: 16px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 var(--lvr-sm) var(--lvr-sm);
  background: var(--lv-cu); color: var(--lv-on-cu);
  font-family: var(--lvf-disp); font-weight: 700; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }

/* Latin runs inside Arabic flow must not be reordered by the bidi algorithm.
   Without this, "+34.7%" renders as "34.7%+". */
.lv-ltr { direction: ltr; unicode-bidi: isolate; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--lvf-disp);
  color: var(--lv-tx-strong);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.display {
  font-family: var(--lvf-disp);
  font-weight: 300;
  line-height: 1.35;
  color: var(--lv-tx-strong);
}
.display b { font-weight: 700; }
/* Arabic has no true italic — synthetic obliquing breaks the script.
   Emphasis is a colour shift into the brand gold instead. */
.display .hi { font-weight: 500; color: var(--lv-cu-hi); }
h1.display { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2.display { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

.eyebrow {
  font-family: var(--lvf-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lv-muted);
}
.eyebrow.acc { color: var(--lv-cu-hi); }

.lede { color: var(--lv-muted); font-size: 1.02rem; max-width: 48ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--lvf-disp);
  font-weight: 500;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: var(--lvr-pill);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--lv-cu); color: var(--lv-on-cu); font-weight: 700; box-shadow: var(--lvs-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 44px -6px rgb(var(--lv-cu-rgb) / .7); }
.btn-ghost {
  background: var(--lv-glass-2);
  color: var(--lv-tx-strong);
  border-color: var(--lv-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--lv-cu); background: var(--lv-cu-wash); }

/* Directional icons mirror under RTL; semantic icons must not. */
[dir="rtl"] .btn svg,
[dir="rtl"] .gcta svg,
[dir="rtl"] .cbtn svg { transform: scaleX(-1); }

/* ---- panel base ---- */
.panel {
  background: linear-gradient(180deg, var(--lv-glass-2), var(--lv-glass));
  border: 1px solid var(--lv-line);
  border-radius: var(--lvr-lg);
  backdrop-filter: blur(14px);
  box-shadow: var(--lvs-sh);
}

/* Two featured surfaces, not one, and they mean different things.

   BONE (.hero-right, .form-card.solo, .cta-band, .calc-results__final) is the
   conversion surface: dark-on-light, inverted against the jet night, reserved
   for the places we are asking for something.

   WINE LACQUER (.cap.feat, .gcard.mid) is the editorial feature: still dark,
   lifted chromatically by --lvs-wine instead of by value. Because these two
   cards stay dark, the whole dark-on-light override cascade the charcoal
   system needed for them is gone -- sixteen rules replaced by one. */

section { position: relative; }
.sect { padding-block: 88px; }
.sect-head { max-width: 660px; margin-inline: auto; margin-block-end: 48px; text-align: center; }
.sect-head .eyebrow { display: block; margin-block-end: 14px; }
.sect-head p { color: var(--lv-muted); margin-block-start: 14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--lv-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgb(var(--lv-veil-rgb) / .72);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--lv-line-soft);
}
.nav-in {
  width: 100%;
  max-width: var(--lv-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand: one word, one colour, one weight. Never split "Lynvato" — no <em>,
   no two-tone span, no partial bolding, in markup or in CSS. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--lvf-mono);
  font-weight: 500;
  font-size: 1.18rem;
  color: var(--lv-tx-strong);
  letter-spacing: .04em;
}
.brand img { width: 32px; height: 32px; flex-shrink: 0; }
.brand-name { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 26px; list-style: none; }
/* Gold underline on the active item, in place of the reference's pill. */
.menu > li > a:not(.btn) {
  position: relative;
  font-size: .88rem;
  color: var(--lv-muted);
  padding-block: 6px;
  transition: color .2s;
}
.menu > li > a:not(.btn)::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--lv-cu);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s ease;
}
.menu > li > a:hover, .menu > li > a.on { color: var(--lv-tx-strong); }
.menu > li > a.on::after, .menu > li > a:not(.btn):hover::after { transform: scaleX(1); }
.menu .btn { padding: 9px 20px; font-size: .84rem; }
.menu a.btn-primary { color: var(--lv-on-cu); }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.burger span { width: 22px; height: 1.6px; background: var(--lv-tx); border-radius: 2px; transition: .3s; }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--lv-line-soft);
  background: rgb(var(--lv-bone-rgb) / .012);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 46px; padding-block: 11px; will-change: transform; }
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--lvf-mono);
  font-size: .74rem;
  color: var(--lv-muted);
  direction: ltr;
  unicode-bidi: isolate;
}
.tk b { color: var(--lv-tx-strong); font-weight: 500; }
.tk .px { color: var(--lv-tx); }
.tk .up { color: var(--lv-up); }
.tk .down { color: var(--lv-down); }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lv-cu);
  box-shadow: 0 0 10px var(--lv-cu);
  animation: lvPulse 1.8s ease-in-out infinite;
}
@keyframes lvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — graphite | champagne inset
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--lvr-xl);
  overflow: hidden;
  border: 1px solid var(--lv-line);
  box-shadow: var(--lvs-sh);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(120% 120% at var(--lv-bloom-x) 0%, rgb(var(--lv-cu-rgb) / .11), transparent 60%),
    linear-gradient(var(--lv-hero-angle), var(--lv-slate-2), var(--lv-slate-1) 68%, #131519);
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--lvf-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lv-cu-hi);
  padding: 7px 14px;
  border: 1px solid var(--lv-cu-line);
  border-radius: var(--lvr-pill);
  background: var(--lv-cu-wash);
  margin-block-end: 24px;
}
.hero-chip svg { width: 13px; height: 13px; }
.hero h1 { margin-block-end: 20px; }
.hero-left .lede { margin-block-end: 32px; font-size: 1.05rem; }

.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-block-start: 1px solid var(--lv-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--lv-line-soft); }
.stat-row .val {
  font-family: var(--lvf-mono);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--lv-tx-strong);
  direction: ltr;
  unicode-bidi: isolate;
}
.stat-row .lbl {
  font-family: var(--lvf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lv-dim);
  text-align: end;
}

/* hero right — the champagne form inset */
.hero-right {
  background: var(--lv-bone-surface);
  color: var(--lv-ink);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--lv-ink-rgb) / .07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at var(--lv-bloom-x) 0%, #000, transparent 70%);
}
.hero-right > * { position: relative; }

/* ---- registration form (lives on the champagne inset) ---- */
.form-card h2 { font-weight: 700; font-size: 1.28rem; color: var(--lv-ink); }
.form-card .note {
  font-family: var(--lvf-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lv-cu-deep);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: #fffcf7;
  border: 1px solid rgb(var(--lv-ink-rgb) / .22);
  border-radius: var(--lvr-sm);
  padding: 12px 14px;
  color: var(--lv-ink);
  font-family: var(--lvf-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgb(var(--lv-ink-rgb) / .48); }
.reg input:focus { border-color: var(--lv-cu-deep); box-shadow: 0 0 0 3px rgb(var(--lv-cu-rgb) / .34); }
.reg form > div { margin-block-end: 10px; }
/* ---- phone field (intl-tel-input v25) ----------------------------------
   The library is LTR internally by design: it stamps dir="ltr" on its own
   .iti wrapper even inside an RTL page, pins .iti__country-container to
   left:0, and writes telInput.style.paddingLeft from JS to clear it — there
   is no paddingRight branch anywhere in the source.

   Overriding the container's side while the JS keeps padding the other side
   is what put the digits underneath the dial code. So don't relocate an
   absolutely-positioned overlay: lay the widget out as a flex row where the
   selector is a real item. Nothing then depends on the JS-measured padding,
   which also defuses a race — the intl-tel-input stylesheet loads async, and
   a width measured before it applies is never recalculated.

   The field chrome moves off the input and onto .iti so the selector and the
   digits read as one control. */
.iti {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: #fffcf7;
  border: 1px solid rgb(var(--lv-ink-rgb) / .22);
  border-radius: var(--lvr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.iti:focus-within { border-color: var(--lv-cu-deep); box-shadow: 0 0 0 3px rgb(var(--lv-cu-rgb) / .34); }

.iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid rgb(var(--lv-ink-rgb) / .14);
}

/* !important is load-bearing: it overrides the inline padding-left the
   library writes on init and on every country change. */
.iti > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding-inline: 14px !important;
}
.iti > input[type="tel"]:focus { box-shadow: none; }

.iti__dropdown-content { color: #111; }

/* Selector at the reading start of the form: left in English, right in
   Arabic. row-reverse rather than a direction flip, so the library's own
   dir="ltr" wrapper keeps working. */
[dir="rtl"] .iti { flex-direction: row-reverse; }
[dir="rtl"] .iti__country-container { border-inline-end: none; border-inline-start: 1px solid rgb(var(--lv-ink-rgb) / .14); }

/* Mirror the button's own contents too. The library lays it out as
   [flag ▾][+971], which read right-to-left puts the dial code before the flag
   it belongs to. Both the button and its primary group are separate flex
   containers, so each needs reversing, and the asymmetric paddings/margins
   the library hangs off the physical left have to move with them. */
[dir="rtl"] .iti__selected-country { flex-direction: row-reverse; }
[dir="rtl"] .iti__selected-country-primary {
  flex-direction: row-reverse;
  padding: 0 var(--iti-spacer-horizontal, 8px) 0 var(--iti-arrow-padding, 6px);
}
[dir="rtl"] .iti__arrow { margin-left: 0; margin-right: var(--iti-arrow-padding, 6px); }
[dir="rtl"] .iti .iti__selected-dial-code { margin-left: 0; margin-right: 4px; }
/* The panel is anchored to the container, which now sits at the right edge —
   pin its right edge so it opens leftward instead of overflowing the card. */
[dir="rtl"] .iti__dropdown-content { left: auto; right: 0; margin-left: 0; margin-right: -1px; }

/* Digits are LTR in every locale; the alignment follows the side the dial
   code is on, so the caret always starts beside it. */
#phone { direction: ltr; text-align: left; }
[dir="rtl"] #phone { text-align: right; }

.phone-error {
  display: none;
  margin-block-start: 6px;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--lv-error-ink);
}
.phone-error.on { display: block; }
/* Email values are LTR ASCII: an inherited RTL direction right-aligns the
   text but makes the caret jump to the far side of the value while typing.
   LTR direction with right alignment keeps the caret on the right. */
[dir="rtl"] .reg input[type="email"] { direction: ltr; text-align: right; }
/* Name values are often typed in Latin script; the bidi algorithm renders
   such runs LTR inside the RTL field (newest char lands on the right, caret
   on the right of the run). Override to strict RTL visual order so the caret
   stays on the left and each new character appears leftmost for any script.
   Display-only: the submitted value keeps its logical order. */
[dir="rtl"] .reg input[name="first_name"],
[dir="rtl"] .reg input[name="last_name"] {
  unicode-bidi: bidi-override;
}

/* The primary action on a bone panel cannot be copper: #b6733f on #f2ebe2 is
   3.19:1 and dissolves into the panel, exactly as the gold it replaces did.
   The two-accent system's only answer was to invert to near-black. Burgundy is
   a third answer: a wine pill with a copper hairline reads at 8.11:1, is
   chromatic rather than a black slab, and keeps jet reserved for the canvas
   instead of spending it on a button. */
#submit-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid rgb(var(--lv-cu-rgb) / .55);
  border-radius: var(--lvr-sm);
  background: linear-gradient(180deg, #7c2434, #5b1926);
  color: var(--lv-bone);
  font-family: var(--lvf-disp);
  font-size: .98rem;
  font-weight: 700;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 0 10px 26px -12px rgb(var(--lv-ink-rgb) / .8);
}
#submit-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #9c3247, #6b1f2e);
  border-color: var(--lv-cu);
  box-shadow: 0 14px 32px -8px rgb(var(--lv-ink-rgb) / .55), 0 0 22px -12px rgb(var(--lv-cu-rgb) / .8);
}
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--lv-ink-soft);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--lv-cu-deep); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--lv-bone-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--lv-bone-line); }
.trust-item:last-child { border-block-end: none; }
.trust-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgb(var(--lv-cu-deep-rgb) / .1);
  border: 1px solid rgb(var(--lv-cu-deep-rgb) / .24);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--lv-cu-deep); }
.trust-item b { display: block; font-family: var(--lvf-disp); font-weight: 700; font-size: .94rem; color: var(--lv-ink); line-height: 1.4; }
.trust-item span { font-size: .76rem; color: var(--lv-ink-soft); }

/* ============================================================
   VOICES (text testimonials)
   ============================================================ */
.voices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--lvr-lg);
  border: 1px solid var(--lv-line);
  background: linear-gradient(180deg, var(--lv-glass-2), var(--lv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: var(--lv-cu-line); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--lv-grad);
  opacity: .7;
}
.voice-mark { width: 34px; height: 34px; color: var(--lv-cu); opacity: .38; margin-block-end: 14px; }
.voice-mark svg { width: 100%; height: 100%; }
.voice .stars { margin-block-end: 14px; }
.voice-qt {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--lv-tx-strong);
  font-weight: 300;
  flex: 1;
  margin-block-end: 20px;
}
.voice-who { display: flex; align-items: center; gap: 13px; padding-block-start: 18px; border-block-start: 1px solid var(--lv-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--lvf-disp); font-weight: 700; font-size: .84rem;
  color: var(--lv-bone); background: var(--lv-grad-cu);
}
.voice-name { font-family: var(--lvf-disp); font-weight: 700; font-size: .96rem; color: var(--lv-tx-strong); }
.voice-loc { font-family: var(--lvf-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lv-cu-hi); }

.stars { display: flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; color: var(--lv-cu); }
/* Both featured cards are dark now, so .stars keeps the canvas copper. */

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--lvr-xl);
  overflow: hidden;
}
/* object-fit: cover, never `fill` — a 800x339 banner and a 800x800 square
   both have to sit in this frame without either being stretched. */
.split-media { position: relative; min-height: 380px; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(var(--lv-copy-angle), var(--lv-slate-2), var(--lv-slate-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--lv-muted); margin-block-end: 14px; }
.split-copy p:last-child { margin-block-end: 0; }
.split.reverse .split-media { order: 2; }

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cap {
  border-radius: var(--lvr-lg);
  border: 1px solid var(--lv-line);
  background: linear-gradient(180deg, var(--lv-glass-2), var(--lv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: var(--lv-cu-line); }
.cap.feat,
.gcard.mid {
  background: var(--lv-lacquer);
  border-color: var(--lv-cu-line);
  box-shadow: var(--lvs-wine), var(--lvs-sh);
}
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--lv-line);
  background: var(--lv-cu-wash);
  margin-block-end: 18px;
}
.cap-ico svg { width: 22px; height: 22px; color: var(--lv-cu-hi); }
.cap h3 { font-size: 1.1rem; font-weight: 700; margin-block-end: 10px; }
.cap p { color: var(--lv-muted); font-size: .92rem; line-height: 1.8; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--lv-line);
  border-radius: var(--lvr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--lv-glass-2), var(--lv-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--lv-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--lvf-mono);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  color: var(--lv-tx-strong);
  direction: ltr;
  unicode-bidi: isolate;
}
.metric .val b { font-weight: 400; color: var(--lv-cu-hi); }
.metric .lbl { font-family: var(--lvf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lv-dim); margin-block-start: 8px; }

.agg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-end: 30px; }
.agg { border: 1px solid var(--lv-line); border-radius: var(--lvr-md); padding: 26px 24px; background: var(--lv-glass); }
.agg .v { font-family: var(--lvf-mono); font-weight: 400; font-size: 2.2rem; color: var(--lv-tx-strong); direction: ltr; unicode-bidi: isolate; }
.agg .v b { color: var(--lv-cu-hi); font-weight: 400; }
.agg .l { color: var(--lv-muted); font-size: .88rem; margin-block-start: 6px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.step {
  border: 1px solid var(--lv-line);
  border-radius: var(--lvr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--lv-glass-2), var(--lv-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lv-grad-cu); box-shadow: var(--lvs-glow);
}
.step .num { font-family: var(--lvf-mono); font-size: .72rem; letter-spacing: .1em; color: var(--lv-cu-hi); }
.step h3 { font-size: 1.06rem; font-weight: 700; margin-block: 8px; }
.step p { color: var(--lv-muted); font-size: .9rem; }

/* ============================================================
   RESULTS CAROUSEL
   ============================================================ */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
/* GAP here is mirrored by core.js (var GAP = 20) and by the two .gcard
   flex-basis calcs below; visibleCount() only returns 3/2/1 if all four agree */
.carousel-track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(.6, .05, .1, 1); }
.gcard {
  flex: 0 0 calc((100% - 40px) / 3);
  border-radius: var(--lvr-lg);
  border: 1px solid var(--lv-line);
  background: linear-gradient(180deg, var(--lv-glass-2), var(--lv-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 16px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--lvf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lv-cu-hi);
  padding: 5px 10px;
  border-radius: var(--lvr-pill);
  border: 1px solid var(--lv-line);
  background: var(--lv-cu-wash);
}
.gbadge svg { width: 11px; height: 11px; }
/* The tagline is mixed ("BTC/USDT · 3 أشهر"), so it must inherit the page
   direction — forcing direction:ltr here reorders the Arabic half. The Latin
   ticker symbol carries its own <bdi> in the markup instead. */
.gcard .tagline { font-family: var(--lvf-mono); font-size: .64rem; color: var(--lv-dim); }
.gsum { font-family: var(--lvf-mono); font-weight: 400; font-size: 2.5rem; color: var(--lv-tx-strong); direction: ltr; unicode-bidi: isolate; }
.gper { font-family: var(--lvf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-cu-hi); margin-block-end: 14px; }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--lv-cu-hi); stroke-width: 2; }
.gqt { font-size: .92rem; color: var(--lv-muted); line-height: 1.8; margin-block-end: 18px; }
.gwho { display: flex; align-items: center; gap: 12px; }
.gav {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--lvf-disp); font-weight: 700; font-size: .82rem;
  color: var(--lv-bone); background: var(--lv-grad-cu);
}
.gnm { font-family: var(--lvf-disp); font-weight: 700; font-size: .94rem; color: var(--lv-tx-strong); }
.gcity { font-family: var(--lvf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lv-dim); }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 20px;
  padding: 12px 20px;
  font-family: var(--lvf-disp); font-weight: 700; font-size: .9rem;
  border-radius: var(--lvr-pill);
  border: 1px solid transparent;
  background: var(--lv-cu);
  color: var(--lv-on-cu);
  box-shadow: var(--lvs-glow);
  transition: transform .25s, box-shadow .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); box-shadow: 0 0 40px -8px rgb(var(--lv-cu-rgb) / .75); }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block-start: 32px; }
.cbtn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lv-glass-2);
  border: 1px solid var(--lv-line);
  color: var(--lv-tx-strong);
  transition: .25s;
}
.cbtn:hover { border-color: var(--lv-cu); background: var(--lv-cu-wash); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lv-line); border: none; transition: .25s; padding: 0; }
.dot.on { width: 26px; border-radius: var(--lvr-pill); background: var(--lv-grad-cu); }

.disclaimer { font-size: .78rem; color: var(--lv-dim); text-align: center; max-width: 760px; margin-inline: auto; margin-block-start: 30px; line-height: 1.8; }

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--lvr-xl);
  padding: 64px 40px;
  text-align: center;
  background: var(--lv-bone-surface);
  border: 1px solid rgb(var(--lv-bone-rgb) / .5);
  box-shadow: var(--lvs-bone);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--lv-ink-rgb) / .07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--lv-ink); margin-block-end: 14px; }
.cta-band .display .hi { color: var(--lv-cu-deep); }
.cta-band p { color: var(--lv-ink-soft); margin-inline: auto; margin-block-end: 28px; max-width: 48ch; }
/* same reasoning as #submit-btn — wine is the primary on bone */
.cta-band .btn-primary {
  background: linear-gradient(180deg, #7c2434, #5b1926);
  color: var(--lv-bone);
  border-color: rgb(var(--lv-cu-rgb) / .55);
  box-shadow: 0 12px 30px -14px rgb(var(--lv-ink-rgb) / .8);
}
.cta-band .btn-primary:hover {
  background: linear-gradient(180deg, #9c3247, #6b1f2e);
  border-color: var(--lv-cu);
  box-shadow: 0 18px 40px -14px rgb(var(--lv-ink-rgb) / .8), 0 0 26px -12px rgb(var(--lv-cu-rgb) / .8);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-block-start: 1px solid var(--lv-line-soft); padding-block-start: 68px; margin-block-start: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand { margin-block-end: 16px; }
.footer-brand p { color: var(--lv-muted); font-size: .9rem; max-width: 38ch; }
.footer-col h2 { font-family: var(--lvf-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lv-dim); font-weight: 500; margin-block-end: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--lv-muted); font-size: .9rem; transition: color .2s; }
.footer-col a:hover { color: var(--lv-cu-hi); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-block-start: 1px solid var(--lv-line-soft);
  margin-block-start: 48px; padding-block: 22px;
  font-size: .82rem; color: var(--lv-dim);
}
.footer-bar .lnk { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--lv-cu-hi); }

.risk { background: rgb(var(--lv-wine-rgb) / .1); border-block-start: 1px solid var(--lv-line-soft); padding-block: 22px; }
.risk p { font-size: .76rem; color: var(--lv-dim); line-height: 1.8; max-width: var(--lv-mw); }

/* ============================================================
   REVEAL
   ============================================================ */
.lv-lift { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.lv-lift.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lv-lift { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   INNER PAGE COMPONENTS
   ============================================================ */
.page-head { text-align: center; max-width: 780px; margin-inline: auto; padding-block: 20px 8px; }
.page-head .eyebrow { display: block; margin-block-end: 14px; }
.page-head p { color: var(--lv-muted); margin-inline: auto; margin-block-start: 16px; max-width: 62ch; }
.page-head .updated { font-family: var(--lvf-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lv-dim); margin-block-start: 14px; }

/* Capped at the photos' intrinsic 800px width so the image fills the frame
   exactly — a wider frame would leave a bare strip at the inline end. The
   frame is height-agnostic, which is what lets the 800x625 performance banner
   and the 800x450 team photo sit beside the 800x800 squares without any of
   them being stretched. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--lvr-xl); overflow: hidden; border: 1px solid var(--lv-line); box-shadow: var(--lvs-sh); position: relative; }
.media-frame img { width: 100%; height: auto; }

.city-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city-chip { font-family: var(--lvf-mono); font-size: .74rem; letter-spacing: .06em; color: var(--lv-muted); padding: 9px 20px; border-radius: var(--lvr-pill); border: 1px solid var(--lv-line); background: var(--lv-glass); }

.cap.team { text-align: center; }
.cap.team .role { font-family: var(--lvf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lv-cu-hi); display: block; margin-block-end: 10px; }
.cap.team .av {
  width: 58px; height: 58px; border-radius: 50%;
  margin-inline: auto; margin-block-end: 16px;
  display: grid; place-items: center;
  font-family: var(--lvf-disp); font-weight: 700; color: var(--lv-on-cu);
  background: var(--lv-grad-cu); box-shadow: var(--lvs-glow);
}

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--lvr-lg); border: 1px solid var(--lv-line); background: linear-gradient(180deg, var(--lv-glass-2), var(--lv-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: var(--lv-cu-line); }
.post-tag { align-self: flex-start; font-family: var(--lvf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--lvr-pill); margin-block-end: 14px; border: 1px solid var(--lv-line); }
.post-tag.ai { color: var(--lv-bone-2); background: rgb(var(--lv-bone-rgb) / .08); border-color: rgb(var(--lv-bone-rgb) / .22); }
.post-tag.crypto { color: var(--lv-cu-hi); background: var(--lv-wine-wash); border-color: rgb(var(--lv-wine-rgb) / .55); }
.post h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.5; margin-block-end: 10px; }
.post p { color: var(--lv-muted); font-size: .92rem; line-height: 1.8; flex: 1; }
.post-meta { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--lv-line-soft); font-family: var(--lvf-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--lv-dim); }

/* FAQ accordion — WAI-ARIA APG pattern: the button lives INSIDE the heading,
   so the document outline and the disclosure semantics are both correct. */
.faq-list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--lv-line); border-radius: var(--lvr-md); background: linear-gradient(180deg, var(--lv-glass-2), var(--lv-glass)); overflow: hidden; transition: border-color .3s; }
.faq-item:hover { border-color: var(--lv-cu-line); }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  padding: 20px 24px;
  background: none; border: none;
  font-family: var(--lvf-disp); font-size: 1rem; font-weight: 500;
  color: var(--lv-tx-strong);
  text-align: start;
  line-height: 1.6;
}
.faq-q:focus-visible { outline: 2px solid var(--lv-cu-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--lv-cu-hi); flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a { max-height: 480px; }
.faq-a p { padding: 0 24px 20px; color: var(--lv-muted); font-size: .94rem; line-height: 1.9; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 20px; }
.info-media { position: relative; border-radius: var(--lvr-lg); overflow: hidden; border: 1px solid var(--lv-line); }

.info-row { display: flex; align-items: flex-start; gap: 14px; }
.info-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--lv-line); background: var(--lv-cu-wash); }
.info-ico svg { width: 20px; height: 20px; color: var(--lv-cu-hi); }
.info-row h3 { font-size: 1rem; font-weight: 700; margin-block-end: 3px; }
.info-row p { color: var(--lv-muted); font-size: .9rem; }
.reg-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.reg-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--lv-muted); font-size: .95rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--lv-cu-hi); flex-shrink: 0; margin-block-start: 4px; }

/* No overflow:hidden here — it would clip the country dropdown, which is
   absolutely positioned inside the form. The dot layer takes the corner
   radius itself instead, which is all the clip was ever for. */
.form-card.solo {
  background: var(--lv-bone-surface);
  border: 1px solid rgb(var(--lv-bone-rgb) / .5);
  border-radius: var(--lvr-lg);
  box-shadow: var(--lvs-bone);
  color: var(--lv-ink);
  padding: 36px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgb(var(--lv-ink-rgb) / .07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at var(--lv-bloom-x) 0%, #000, transparent 70%);
}
.form-card.solo > * { position: relative; }

.legal { max-width: 840px; margin-inline: auto; }
.legal h2 { font-family: var(--lvf-disp); font-size: 1.26rem; font-weight: 700; color: var(--lv-tx-strong); margin-block: 34px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--lv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; }
.legal ul { color: var(--lv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; margin-inline-start: 20px; }

/* standalone centred notice (thanks / 404) */
.notice { max-width: 620px; margin-inline: auto; text-align: center; padding-block: 60px; }
.notice .ico { width: 76px; height: 76px; margin-inline: auto; margin-block-end: 26px; display: grid; place-items: center; border-radius: 20px; background: var(--lv-cu-wash); border: 1px solid var(--lv-line); }
.notice .ico svg { width: 34px; height: 34px; color: var(--lv-cu-hi); }
.notice p { color: var(--lv-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 30px; }

/* Readex Pro's figures are PROPORTIONAL where Space Grotesk's were tabular,
   and core.js animateCount() rewrites textContent every frame. Without this
   every animated counter jitters horizontally as it counts up. */
.stat-row .val,
.metric .val,
.agg .v,
.gsum,
.calc-form__value,
.calc-results__final-amount,
.calc-results__profit-amount,
.calc-results__profit-percent {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   ARABIC TYPOGRAPHY (RTL only)

   letter-spacing severs Arabic cursive joins — it is the single most
   conspicuous "this was not designed for Arabic" tell. Every label class in
   this stylesheet carries .04–.18em tracking for its Latin look, so all of it
   must be neutralised under RTL. word-spacing restores the airy label texture
   without breaking the joins, and the weight step replaces the case step
   (text-transform: uppercase is a no-op on Arabic).
   ============================================================ */
[dir="rtl"] .eyebrow,
[dir="rtl"] .stat-row .lbl,
[dir="rtl"] .metric .lbl,
[dir="rtl"] .gper,
[dir="rtl"] .gcity,
[dir="rtl"] .footer-col h2,
[dir="rtl"] .city-chip,
[dir="rtl"] .post-tag,
[dir="rtl"] .post-meta,
[dir="rtl"] .cap.team .role,
[dir="rtl"] .page-head .updated,
[dir="rtl"] .form-card .note,
[dir="rtl"] .hero-chip,
[dir="rtl"] .step .num,
[dir="rtl"] .voice-loc,
[dir="rtl"] .gbadge,
[dir="rtl"] .trust-item span,
[dir="rtl"] .gcard .tagline,
[dir="rtl"] .brand,
[dir="rtl"] .calc-form__label,
[dir="rtl"] .calc-results__final-label,
[dir="rtl"] .calc-results__profit-subtitle {
  letter-spacing: 0;
  /* Retuned for IBM Plex Sans Arabic: a taller x-height, looser sidebearings
     and a heavier 700 than the Tajawal these values were originally fitted
     to, so both the spacing and the weight step come down a notch. */
  word-spacing: .03em;
  font-weight: 600;
}

/* Latin tokens keep their tracking — that is where the mono texture lives.
   .lv-ltr wins over the neutralisation block above by source order, so an
   isolated Latin run inside a neutralised label keeps its letter-spacing. */
[dir="rtl"] .lv-ltr,
[dir="rtl"] .brand-name,
[dir="rtl"] .tk { letter-spacing: .1em; word-spacing: normal; font-weight: inherit; }

/* Arabic needs more leading and never negative tracking. */
[dir="rtl"] body { line-height: 1.95; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .display { line-height: 1.5; letter-spacing: 0; }

/* direction:ltr on a BLOCK makes text-align:start resolve to left, which would
   left-align these figures inside an RTL card. Physical `right` is correct and
   unambiguous here because the rule is already scoped to [dir="rtl"]. */
[dir="rtl"] .calc-form__value,
[dir="rtl"] .calc-results__final-amount,
[dir="rtl"] .calc-results__profit-amount,
[dir="rtl"] .stat-row .val,
[dir="rtl"] .gsum { text-align: right; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-left { padding: 44px 34px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media { min-height: 260px; }
  .voices-row { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-inline-end: none; }
  .metric:nth-child(1), .metric:nth-child(2) { border-block-end: 1px solid var(--lv-line-soft); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .agg-row { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 calc((100% - 20px) / 2); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .blog-grid { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --lv-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--lv-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgb(var(--lv-veil-rgb) / .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--lv-line);
  }
  .nav.open .menu a { padding-block: 10px; font-size: .96rem; }
  .nav.open .menu .btn { justify-content: center; margin-block-start: 8px; }
  .sect { padding-block: 62px; }
  .hero-left { padding: 38px 26px; }
  .hero-right { padding: 30px 26px; }
  .caps-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-inline-end: none; border-block-end: 1px solid var(--lv-line-soft); }
  .metric:last-child { border-block-end: none; }
  .steps { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 100%; }
  .split-copy { padding: 38px 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bar { flex-direction: column; gap: 12px; text-align: center; }
  .cta-band { padding: 48px 26px; }
  .form-card.solo { padding: 30px 24px; }
}