:root {
  --jadawel-ink: #0b0f19;
  --jadawel-blue: #0059fc;
  --jadawel-blue-dark: #0046c7;
  --jadawel-blue-light: #e6eeff;
  --jadawel-cloud: #f6f7fb;
  --jadawel-white: #ffffff;
  --jadawel-slate: #566072;
  --jadawel-mint: #83d7c2;
  --jadawel-amber: #f6c85f;
  --jadawel-coral: #e35d6a;
  --jadawel-font: "Thmanyah Sans", "Noto Sans Arabic", Arial, sans-serif;
}

html[lang="ar"],
[dir="rtl"] {
  direction: rtl;
  font-family: var(--jadawel-font);
}

html[lang="en"],
[dir="ltr"] {
  direction: ltr;
  font-family: var(--jadawel-font);
}

/* ==========================================================================
   Jadawel — website stylesheet
   Built on Jadawel Visual Identity v1.1 (src/css/jadawel-brand.css, copied from
   the packaged assets/tokens/jadawel-brand.css).
   Arabic is the default direction. Latin technical tokens stay LTR.
   ========================================================================== */

/* --- Font -----------------------------------------------------------------
   Thmanyah Sans is the approved brand face. It is not licensed on this host,
   so the page self-hosts Noto Sans Arabic (SIL OFL 1.1) as the disclosed
   fallback. Thmanyah Sans still leads the stack, so a licensed install wins.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSansArabic-arabic.ae0748e9da.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4,
    U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24,
    U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47,
    U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-U+1EE52, U+1EE54, U+1EE57,
    U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-U+1EE62, U+1EE64, U+1EE67-U+1EE6A,
    U+1EE6C-U+1EE72, U+1EE74-U+1EE77, U+1EE79-U+1EE7C, U+1EE7E, U+1EE80-U+1EE89,
    U+1EE8B-U+1EE9B, U+1EEA1-U+1EEA3, U+1EEA5-U+1EEA9, U+1EEAB-U+1EEBB,
    U+1EEF0-U+1EEF1;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSansArabic-latin.19d897d31c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --jadawel-font-display: "Thmanyah Sans", "Noto Sans Arabic", Arial, sans-serif;
  --jadawel-font: var(--jadawel-font-display);
  --ink: var(--jadawel-ink);
  --blue: var(--jadawel-blue);
  --blue-dark: var(--jadawel-blue-dark);
  --blue-light: var(--jadawel-blue-light);
  --cloud: var(--jadawel-cloud);
  --white: var(--jadawel-white);
  --slate: var(--jadawel-slate);
  --mint: var(--jadawel-mint);
  --amber: var(--jadawel-amber);
  --coral: var(--jadawel-coral);
  --hairline: #e4e7ef;
  --hairline-ink: rgba(255, 255, 255, 0.14);
  --radius: 14px;
  --radius-sm: 9px;
  --step: 8px;
  --shadow-card: 0 1px 2px rgba(11, 15, 25, 0.04), 0 12px 28px rgba(11, 15, 25, 0.06);
  --shadow-float: 0 2px 4px rgba(11, 15, 25, 0.05), 0 28px 70px rgba(11, 15, 25, 0.13);
  --shell: 1180px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--jadawel-font);
  font-size: 16.5px;
  line-height: 1.75;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body { line-height: 1.85; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Isolated left-to-right technical tokens inside RTL prose. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-feature-settings: "tnum" 1;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-onink {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.34);
}
.btn-onink:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.btn-lg { padding: 15px 28px; font-size: 16.5px; }
.btn-sm { padding: 9px 16px; font-size: 14.5px; }
.header-actions .btn-sm { padding: 9px 13px; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid var(--hairline);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 86px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { width: 81px; height: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
}
.site-nav a {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--slate);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--cloud); }
.site-nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.lang-toggle button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate);
  padding: 7px 12px;
  cursor: pointer;
  line-height: 1.1;
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.nav-toggle {
  display: none;
  border: 1px solid var(--hairline);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-toggle span + span { margin-block-start: 4px; }

.site-nav .nav-lang { display: none; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 480px at var(--accent-x, 92%) -10%, rgba(0, 89, 252, 0.09), transparent 68%),
    var(--cloud);
  border-block-end: 1px solid var(--hairline);
  padding-block: 72px 84px;
  overflow: hidden;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-dark);
  background: var(--white);
  border: 1px solid var(--blue-light);
  border-radius: 999px;
  padding: 6px 15px;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--blue);
  transform: rotate(45deg);
  flex-shrink: 0;
}
/* --- Hero video ----------------------------------------------------------
   The hero is the product tour alone, at the full width of the page. Poster
   first: no video bytes load until the visitor presses play, and the 16:9
   box is reserved up front so nothing shifts. The page's one sentence sits
   above it. */
.hero-title {
  text-align: center;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  max-width: 22ch;
  margin: 0 auto 32px;
  text-wrap: balance;
}
.hero-video {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--white);
}
.hero-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hero-video-play[hidden] { display: none; }
.hero-video-play svg {
  width: clamp(64px, 9vw, 92px);
  height: auto;
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: 50%;
  background: var(--blue);
  fill: var(--white);
  box-shadow: 0 0 0 10px rgba(0, 89, 252, 0.16), 0 16px 36px rgba(0, 89, 252, 0.32);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.hero-video-play:hover { background: rgba(11, 15, 25, 0.04); }
.hero-video-play:hover svg { transform: scale(1.06); background: var(--blue-dark); }
/* The frame clips overflow, so the focus ring is drawn inside it. */
.hero-video-play:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
  border-radius: var(--radius);
}

/* --- Chips (labelled states) -------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--slate);
  background: var(--white);
  white-space: nowrap;
}
.chip-blue { background: var(--blue); border-color: var(--blue); color: var(--white); }
.chip-mint { background: rgba(131, 215, 194, 0.24); border-color: rgba(19, 122, 96, 0.24); color: #0f6b53; }
.chip-amber { background: rgba(246, 200, 95, 0.26); border-color: rgba(146, 104, 12, 0.24); color: #8a5d05; }
.chip-coral { background: rgba(227, 93, 106, 0.16); border-color: rgba(178, 52, 66, 0.28); color: #97303c; }
.chip-plain { background: var(--cloud); }

.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;
}

/* --- Section scaffolding ------------------------------------------------- */
.section { padding-block: 84px; }

/* Keep anchored sections clear of the sticky header. */
section[id] { scroll-margin-top: 104px; }
.section-cloud { background: var(--cloud); border-block: 1px solid var(--hairline); }
.section-ink { background: var(--ink); color: var(--white); }
.section-ink .section-lede { color: rgba(255, 255, 255, 0.72); }
.section-ink h2 { color: var(--white); }

.section-head { max-width: 74ch; margin-block-end: 44px; }
.section-num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--slate);
  margin-block-end: 16px;
}
.section-num::before {
  content: "";
  width: 4px;
  height: 20px;
  background: var(--blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.section h2 { font-size: clamp(1.6rem, 1.2rem + 1.35vw, 2.3rem); }
.section-lede {
  margin-block-start: 16px;
  font-size: 17.5px;
  color: var(--slate);
  max-width: 68ch;
}

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card h2,
.card h3 { font-size: 18.5px; font-weight: 700; }
.card p { color: var(--slate); font-size: 15.5px; }
.card-mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--blue-light);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.card-mark::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--blue);
  transform: rotate(45deg);
}
.card-onink {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--hairline-ink);
}
.card-onink h3 { color: var(--white); }
.card-onink p { color: rgba(255, 255, 255, 0.72); }
.card-onink .card-mark { background: rgba(0, 89, 252, 0.28); }
.card-onink .card-mark::after { background: #6f9bff; }

/* --- Deployment options: the two designed cards ---------------------------
   Each card is a tag pill, an illustration beside the copy, a rule, a row of
   circled feature icons, and a full-width call to action. The blue outline is
   the design's, drawn with the brand blue.
   -------------------------------------------------------------------------- */
/* One option stands, so the supporting pillars sit beside it on the left rather
   than as a band underneath. In Arabic the card is the first column (right) and
   the pillars the second (left); the row stacks on narrow screens. */
.offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 22px;
  align-items: stretch;
}
.offer-row .pillars {
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: 0;
}

.offer-card {
  padding: 28px 26px 22px;
  gap: 20px;
  border: 2px solid var(--blue);
}

.offer-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  padding: 8px 16px 9px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}
.offer-card__tag svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.offer-card__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.66fr);
  gap: 18px;
  align-items: center;
}
.offer-card__copy { min-width: 0; }
.offer-card__copy h3 { font-size: 21px; }
.offer-card__copy p { margin-block-start: 8px; }
.offer-card__art { display: block; min-width: 0; }
.offer-card__art svg { width: 100%; max-width: 198px; height: auto; margin-inline-start: auto; }

.offer-card__rule {
  height: 1px;
  margin: 2px 0;
  border: 0;
  background: var(--hairline);
}

.offer-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.offer-features--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-features--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offer-features--six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
.offer-features li {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  text-align: center;
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.5;
  text-wrap: balance;
}
.offer-feature__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue-dark);
}
.offer-feature__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.offer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 68px;
  margin-block-start: auto;
  padding: 16px 22px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.offer-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
.offer-cta__text {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
.offer-cta__text span { font-weight: 500; }
.offer-cta__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
/* The arrow is drawn pointing left, which is forward in Arabic. */
[dir="ltr"] .offer-cta__arrow { transform: scaleX(-1); }

/* --- Data uses ------------------------------------------------------------
   Six numbered cards: a number, an icon tile, a title, a line of copy, and the
   formats or objects each use touches, carried by the site's token chips.
   -------------------------------------------------------------------------- */
.uses-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.use-card { padding: 26px 24px; gap: 12px; }
/* The number sits above the icon tile, both at the start of the card, as in
   the design. */
.use-card__top { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* The same number treatment the lifecycle cards use, so the two card rows read
   as one system. */
.use-num { color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; }
.use-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blue-light);
  color: var(--blue-dark);
}
.use-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.use-card h3 { font-size: 17.5px; }
.use-card p { color: var(--slate); font-size: 15px; }
.use-card .tokens { margin-block-start: auto; }

/* Pillars strip */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block-start: 26px;
}
.pillars > div {
  background: var(--white);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillars b { font-size: 15.5px; font-weight: 700; }
.pillars span { font-size: 14.5px; color: var(--slate); line-height: 1.65; }

/* --- Platform stage (segment overview) -----------------------------------
   One composed diagram instead of five photographs: the map, the connectors,
   the five segment cards and the product window are all HTML, CSS and inline
   SVG. Nothing here is a raster image, so the section costs a few kilobytes
   and the Arabic stays crisp at any density.
   ------------------------------------------------------------------------ */
.stage-section { position: relative; overflow: hidden; padding-block-start: 40px; }
/* The top padding is the room the section title used to fill before the
   sentence moved into the hero: it keeps the map's upper part visible above
   the product window, so it reads as the country rather than a fragment. */
.stage-shell { position: relative; padding-block-start: 120px; }


/* Decorative field behind the whole composition. */
/* Sized and placed so the country reads as a country. The product window
   overlaps its lower edge, as in the reference, but the outline stays
   recognisable rather than showing a fragment. */
.stage-map {
  position: absolute;
  z-index: 0;
  inset-block-start: -36px;
  inset-inline: 0;
  margin-inline: auto;
  width: min(430px, 38%);
  height: auto;
  fill: #c2d6fd;
  pointer-events: none;
}
.stage-bloom {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 320px at 50% 4%, rgba(0, 89, 252, 0.12), transparent 70%),
    radial-gradient(420px 260px at 6% 92%, rgba(0, 89, 252, 0.09), transparent 72%),
    radial-gradient(420px 260px at 96% 86%, rgba(0, 89, 252, 0.09), transparent 72%);
}

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) 212px;
  gap: 22px;
  align-items: center;
  margin-block-start: 26px;
}
.stage-side { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.stage-side--end { justify-content: center; gap: 46px; }


/* --- Segment cards ------------------------------------------------------- */
.seg-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(11, 15, 25, 0.04), 0 10px 24px rgba(11, 15, 25, 0.05);
}
.seg-copy { min-width: 0; }
.seg-copy b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}
.seg-copy span {
  display: block;
  margin-block-start: 3px;
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.5;
}
.seg-art {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(160deg, #f4f7ff, #e9f0ff);
  display: grid;
  place-items: center;
}
.seg-art svg { width: 42px; height: 42px; display: block; }


/* Each card draws its own connector into the gap. Anchoring the line to the
   card is what keeps it centred on the card at every width, which a single
   fixed-coordinate overlay could not do. */
.seg-card::after {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 1px);
  width: 30px;
  height: 2px;
  border-radius: 1px;
  background: var(--blue);
  opacity: 0.5;
}
.seg-card::before {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: var(--white);
  opacity: 0.85;
}
/* The card column ahead of the window points into it... */
.stage-side > .seg-card::after,
.stage-side > .seg-card::before { inset-inline-end: -26px; }
/* ...and the column after it points back the other way. */
.stage-side--end > .seg-card::after,
.stage-side--end > .seg-card::before { inset-inline-start: -26px; }

/* --- Product window ------------------------------------------------------ */
.appwin {
  position: relative;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(11, 15, 25, 0.05), 0 26px 60px rgba(11, 15, 25, 0.13);
  overflow: hidden;
}
.appwin-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-block-end: 1px solid var(--hairline);
}
.appwin-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: var(--white);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.appwin-new i { font-style: normal; font-size: 15px; line-height: 1; }
.appwin-ic {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--slate);
  flex-shrink: 0;
}
.appwin-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.appwin-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12px;
  color: var(--slate);
  background: var(--white);
}
.appwin-search svg { width: 14px; height: 14px; fill: none; stroke: var(--slate); stroke-width: 1.8; flex-shrink: 0; }
.appwin-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.appwin-body { display: grid; grid-template-columns: 138px minmax(0, 1fr); }
.appwin-side {
  border-inline-end: 1px solid var(--hairline);
  background: var(--ink);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.appwin-side > span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
}
.appwin-side > span.is-active { background: var(--blue); color: var(--white); }
.appwin-side svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }

.appwin-table { min-width: 0; }
.appwin-scroll { overflow-x: auto; }
.apptbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.apptbl th,
.apptbl td {
  text-align: start;
  padding: 11px 10px;
  line-height: 1.5;
  border-block-end: 1px solid var(--hairline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apptbl th {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  background: var(--cloud);
}
.apptbl td { font-size: 12px; font-weight: 500; }
.apptbl tr:last-child td { border-block-end: 0; }
.apptbl .c-check { width: 34px; }
.apptbl .c-type { width: 46px; }
.apptbl .c-org { width: 46px; }
.apptbl .c-state { width: 112px; }
.apptbl .c-date { width: 90px; }
.apptbl .box {
  display: block;
  width: 13px;
  height: 13px;
  border: 1.5px solid #cdd4e2;
  border-radius: 3.5px;
}
.apptbl .tick { border-color: var(--blue); background: var(--blue); }
.apptbl .ty,
.apptbl .og {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--cloud);
  color: var(--ink);
}
.apptbl .ty svg,
.apptbl .og svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.apptbl td.date { color: var(--slate); font-variant-numeric: tabular-nums; }

/* --- Trust strip + promise wedge ---------------------------------------- */
.trust-strip {
  position: relative;
  z-index: 2;
  margin-block-start: 34px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 22px;
  box-shadow: var(--shadow-card);
}
.trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding-inline: 18px;
}
.trust-item + .trust-item { border-inline-start: 1px solid var(--hairline); }
.trust-item svg { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--blue-dark); stroke-width: 1.7; }
.trust-item b { display: block; font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--ink); }
.trust-item span { display: block; font-size: 12.5px; color: var(--slate); }
.trust-item code {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
}


/* --- Stage responsiveness ----------------------------------------------- */
@media (max-width: 1120px) {
  .stage { grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 16px; }
  }
@media (max-width: 900px) {
  .stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 26px;
  }
    .appwin { grid-column: 1 / -1; order: -1; }
  .stage-side { display: contents; }
  .stage-shell { padding-block-start: 80px; }
  .stage-map { width: 92%; inset-block-start: -36px; }
  .trust-strip { flex-direction: column; gap: 0; padding: 8px 20px; }
  .trust-item { justify-content: flex-start; padding: 14px 0; }
  .trust-item + .trust-item { border-inline-start: 0; border-block-start: 1px solid var(--hairline); }
  }
@media (max-width: 560px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  /* The panel would eat two thirds of a phone's width and leave the table
     unreadable, so it steps aside; the table then scrolls horizontally. */
  .appwin-body { grid-template-columns: minmax(0, 1fr); }
  .appwin-side { display: none; }
  .appwin-table { border-inline-start: 0; }
  .apptbl th, .apptbl td { padding: 10px 9px; }
  .apptbl .c-check, .apptbl .c-type { display: none; }
  .apptbl .c-state { width: 104px; }
  .apptbl .c-org { width: 42px; }
  .apptbl .c-date { width: 86px; }
  .seg-card { padding: 12px 14px; }
  .seg-art { width: 46px; height: 46px; }
  .seg-art svg { width: 34px; height: 34px; }

  /* Below this width the illustration would squeeze the copy, so it moves
     above it and the feature icons step down a size. */
  .offer-card { padding: 20px 18px 18px; }
  .offer-card__main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .offer-card__art svg { max-width: 132px; margin-inline: auto; }
  .offer-card__copy h3 { font-size: 19px; }
  .offer-features { gap: 8px; }
  .offer-features li { font-size: 13.5px; }
  .offer-feature__icon { width: 46px; height: 46px; }
  .offer-feature__icon svg { width: 21px; height: 21px; }
  .offer-cta { min-height: 52px; padding: 12px 14px; font-size: 15px; }
}

/* --- Token chips (the formats each data use touches) ----------------------- */
.tokens { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 2px; }
.token {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--cloud);
  border: 1px solid var(--hairline);
  color: var(--slate);
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Sovereignty band ---------------------------------------------------- */
.band {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline-ink);
  background: var(--ink);
  color: var(--white);
  padding: 40px 38px;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}
.band img.band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}

/* The artwork's bright focal point sits on the right of the frame, which is
   exactly where the Arabic text sits. Mirroring it under RTL moves the bright
   area to the far side of the text in both directions, so the headline never
   competes with it. */
[dir="rtl"] .band img.band-bg { transform: scaleX(-1); }
/* The scrim is bottom-weighted because the band text is bottom-aligned in both
   directions, which keeps the headline legible over the artwork's bright focal
   point without hiding the artwork itself. */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 15, 25, 0.9) 4%,
    rgba(11, 15, 25, 0.42) 48%,
    rgba(11, 15, 25, 0.18) 78%,
    rgba(11, 15, 25, 0.38) 100%
  );
}
.band-content { position: relative; z-index: 1; max-width: 62ch; }
.band-content h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); color: var(--white); }
.band-content p { margin-block-start: 14px; color: rgba(255, 255, 255, 0.82); font-size: 16.5px; }
.band-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #99b8ff;
  border: 1px solid rgba(111, 155, 255, 0.4);
  border-radius: 999px;
  padding: 5px 13px;
  margin-block-end: 18px;
  background: rgba(0, 89, 252, 0.16);
}

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 88ch; }
.faq details {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 19px 22px;
  font-weight: 700;
  font-size: 16.5px;
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--slate);
  border-block-end: 2px solid var(--slate);
  transform: rotate(45deg);
  margin-inline-start: auto;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { color: var(--blue-dark); }
.faq .faq-a {
  padding: 0 22px 22px;
  color: var(--slate);
  font-size: 15.8px;
  max-width: 78ch;
}

/* --- CTA ----------------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 52px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.cta-band h2 { color: var(--white); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); }
.cta-band p { margin-block-start: 14px; color: rgba(255, 255, 255, 0.76); font-size: 16.5px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cta-actions .btn { width: 100%; }
.cta-mail {
  text-align: center;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.62);
  margin-block-start: 6px;
}
.cta-mail a { color: #99b8ff; text-decoration: underline; text-underline-offset: 3px; }

/* --- Page header (inner pages) ------------------------------------------ */
.page-head {
  background: var(--cloud);
  border-block-end: 1px solid var(--hairline);
  padding-block: 58px 62px;
}
.page-head h1 { font-size: clamp(1.95rem, 1.4rem + 2vw, 2.85rem); }
.page-head .section-lede { max-width: 70ch; }

/* --- Template library ---------------------------------------------------- */
.tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tpl {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tpl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-block-end: 1px solid var(--hairline);
  background: var(--cloud);
}
.tpl-head b { font-size: 15.5px; font-weight: 700; }
.tpl-head .chip { margin-inline-start: auto; }
.tpl-preview { padding: 14px 18px; }
.tpl-preview table { width: 100%; border-collapse: collapse; }
.tpl-preview th,
.tpl-preview td {
  text-align: start;
  font-size: 12.5px;
  padding: 7px 8px;
  border-block-end: 1px solid var(--hairline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.tpl-preview th { color: var(--slate); font-weight: 700; background: var(--cloud); }
.tpl-foot {
  margin-block-start: auto;
  padding: 14px 18px;
  border-block-start: 1px solid var(--hairline);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Releases ------------------------------------------------------------ */
.release {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  padding-block: 30px;
  border-block-start: 1px solid var(--hairline);
}
.release:last-of-type { border-block-end: 1px solid var(--hairline); }
.release-meta b { display: block; font-size: 16px; font-weight: 800; }
.release-meta span { font-size: 14px; color: var(--slate); }
.release-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.release-body li {
  display: flex;
  gap: 12px;
  font-size: 15.5px;
  color: var(--slate);
}
.release-body li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-block-start: 9px;
  background: var(--blue);
  transform: rotate(45deg);
  flex-shrink: 0;
}
/* The documents a release ships, linked where the release is read. */
.release-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 18px 0 0;
  font-size: 14.5px;
}
.release-links span { color: var(--slate); }
.release-links a {
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: none;
  border-block-end: 1px solid rgba(0, 70, 199, 0.28);
  padding-block-end: 1px;
}
.release-links a:hover { border-block-end-color: var(--blue-dark); }

/* --- Forms --------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 14.5px; font-weight: 700; }
.field .hint { font-size: 13.5px; color: var(--slate); font-weight: 400; }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 15.5px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--blue); outline: 3px solid rgba(0, 89, 252, 0.18); outline-offset: 0; }
.form-note {
  font-size: 13.8px;
  color: var(--slate);
  border-inline-start: 2px solid var(--blue-light);
  padding-inline-start: 14px;
}
.form-status {
  margin-block-start: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }

.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--hairline);
}
.contact-line b { font-size: 14.5px; }
.contact-line a { color: var(--blue-dark); font-weight: 700; }
.contact-line span { font-size: 14.5px; color: var(--slate); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 56px 34px;
  font-size: 15px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-block-end: 34px;
  border-block-end: 1px solid var(--hairline-ink);
}
.footer-brand img { width: 81px; height: auto; }
.footer-brand p { margin-block-start: 16px; max-width: 38ch; }
.footer-col b {
  display: block;
  color: var(--white);
  font-size: 14.5px;
  font-weight: 700;
  margin-block-end: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  padding-block-start: 24px;
  font-size: 14px;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Reveal on scroll ---------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero { padding-block: 56px 68px; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The v1.1 lockup is wider than the old wordmark, so the full horizontal
   navigation needs about 1080 px of content width. It collapses into the menu
   button below that point and the language switch moves inside the panel. */
@media (max-width: 1140px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .header-actions .lang-toggle { display: none; }
  .site-nav.is-open .nav-lang {
    display: inline-flex;
    align-self: flex-start;
    margin-block-start: 10px;
  }
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 1px);
    background: var(--white);
    border-block-end: 1px solid var(--hairline);
    padding: 12px 24px 18px;
    gap: 2px;
    box-shadow: var(--shadow-card);
  }
  .site-nav.is-open a { padding: 12px 12px; font-size: 16.5px; }
  .site-nav.is-open a[aria-current] {
    box-shadow: none;
    background: var(--cloud);
    color: var(--ink);
  }
}

@media (max-width: 900px) {
  .seg-card::before, .seg-card::after { display: none; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .uses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { grid-template-columns: minmax(0, 1fr); padding: 38px 28px; }
  .band { padding: 30px 26px; }
  .section { padding-block: 64px; }
  /* The cards stack here, so their illustrations can stay beside the copy. */
  .offer-card__art svg { max-width: 168px; }
  /* The section's row stacks: the card first, then the pillars two-up. */
  .offer-row { grid-template-columns: minmax(0, 1fr); }
  .offer-row .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .shell { padding-inline: 16px; }
  .header-inner { gap: 12px; min-height: 78px; }
  .header-actions .btn-login { display: none; }
  .uses-grid { grid-template-columns: minmax(0, 1fr); }
  .tpl-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .field { grid-column: 1 / -1; }
  .release { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .offer-features--four,
  .offer-features--six { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .offer-features li { font-size: 14px; }
  .offer-cta { font-size: 15.5px; }
}

/* --- Legal documents ------------------------------------------------------
   The three documents share one layout: a contents column that stays in view
   while the reader moves down the page, and a body set at a comfortable
   measure. Everything is written in logical properties, so the Arabic (rtl)
   and the English (ltr) version are the same markup. */

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-block-start: 20px;
  font-size: 14.5px;
  color: var(--slate);
}
.doc-meta b { color: var(--ink); font-weight: 700; margin-inline-end: 4px; }
.doc-meta a { color: var(--blue-dark); font-weight: 600; }

.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
@media (min-width: 1000px) {
  .doc { grid-template-columns: 272px minmax(0, 1fr); gap: 56px; }
}

.doc-toc {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 1000px) {
  .doc-toc { position: sticky; top: 96px; max-height: calc(100vh - 132px); overflow: auto; }
}
.doc-toc b { display: block; font-size: 15px; margin-block-end: 10px; }
.doc-toc ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 7px; font-size: 14.5px; }
.doc-toc a { color: var(--slate); text-decoration: none; }
.doc-toc a:hover { color: var(--blue-dark); text-decoration: underline; }
.doc-top { margin: 14px 0 0; font-size: 13.5px; }
.doc-top a { color: var(--slate); }

.doc-body { min-width: 0; }
.doc-section {
  scroll-margin-top: 96px;
  padding-block-end: 26px;
  margin-block-end: 26px;
  border-block-end: 1px solid var(--hairline);
}
.doc-section:last-of-type { border-block-end: 0; margin-block-end: 18px; }
.doc-body h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 800; margin: 0 0 12px; }
.doc-body h3 { font-size: 1.03rem; font-weight: 700; margin: 22px 0 8px; color: var(--ink); }
.doc-body p,
.doc-body li,
.doc-body dt,
.doc-body dd { font-size: 15.5px; line-height: 1.85; color: var(--slate); }
.doc-body p { margin: 0 0 12px; max-width: 78ch; }
.doc-list { margin: 0 0 12px; padding-inline-start: 22px; display: grid; gap: 8px; max-width: 78ch; }
.doc-list li::marker { color: var(--blue); }
.doc-dl { margin: 0 0 12px; display: grid; gap: 14px; max-width: 78ch; }
.doc-dl dt { font-weight: 700; color: var(--ink); }
.doc-dl dd { margin: 4px 0 0; }
.doc-note {
  background: var(--blue-light);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 0 0 14px;
  max-width: 78ch;
}
.doc-note p { margin: 0; color: var(--ink); }
.doc-more { margin: 0 0 12px; }

.doc-table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table caption {
  text-align: start;
  padding: 12px 14px 4px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
.doc-table th,
.doc-table td {
  padding: 11px 14px;
  border-block-start: 1px solid var(--hairline);
  border-inline-end: 1px solid var(--hairline);
  text-align: start;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.75;
}
.doc-table th { background: var(--cloud); color: var(--ink); font-weight: 700; font-size: 14.5px; }
.doc-table th:last-child,
.doc-table td:last-child { border-inline-end: 0; }
.doc-table td { color: var(--slate); }

.doc-related {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--cloud);
  padding: 18px 20px;
}
.doc-related b { font-size: 15px; }
.doc-related p { margin: 6px 0 10px; font-size: 14.5px; color: var(--slate); }
.doc-related ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.doc-related a { color: var(--blue-dark); font-weight: 600; }

@media (max-width: 720px) {
  .doc-table th,
  .doc-table td { padding: 9px 10px; font-size: 14.5px; }
}