/* ==========================================================================
   Atawah — design system
   Colour tokens live in tokens.css, which build.py generates from
   data/atawah_data.py:BRAND. Never hard-code a brand colour here.

   Arabic is the base language and RTL the base direction, so every box uses
   logical properties (margin-inline, inset-inline-start, border-inline) and
   nothing here says "left" or "right". Switching to /en flips `dir` and the
   layout follows without a second stylesheet.
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(button) { cursor: pointer; }

/* ---------- scale ----------
   One type ramp for both languages. Arabic runs a touch larger and much
   looser: Cairo's x-height is smaller than Plus Jakarta's and Arabic needs the
   leading for its ascenders and descenders to breathe. */
:root {
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.85rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.40rem);
  --step-4:  clamp(2.07rem, 1.72rem + 1.78vw, 3.12rem);
  --step-5:  clamp(2.49rem, 1.95rem + 2.70vw, 4.05rem);

  --space-2xs: 0.375rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 4.5rem;   /* section rhythm: 96px was a quarter of the page */

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --shadow-s: 0 2px 8px rgb(13 23 76 / 6%);
  --shadow-m: 0 10px 30px rgb(13 23 76 / 8%);
  --shadow-l: 0 24px 60px rgb(13 23 76 / 16%);

  --measure: 68ch;
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 3rem);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- gradients ----------
     The logo is a navy ground with an arc running blue → green → gold. That
     arc is the brand, so every gradient here is taken from it rather than
     invented: wherever the page needs emphasis it borrows the mark's own
     sweep. One source for all of them is what stops a four-hue palette from
     looking like four palettes. */
  --g-arc: linear-gradient(115deg, var(--c-blue-500), var(--c-green-500));
  --g-arc-full: linear-gradient(115deg, var(--c-blue-600), var(--c-green-500) 62%, var(--c-gold-500));
  --g-ink: linear-gradient(140deg, var(--c-navy-900), var(--c-navy-700));
  --g-surface: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);
  /* A hairline that fades out — under section headings and on card edges,
     where a solid rule weighs more than the content needs. */
  --g-rule: linear-gradient(90deg, var(--c-blue-500), var(--c-green-500) 45%, transparent);

  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.7s;
}

/* ---------- document ---------- */
html[lang="ar"] { --font: "Cairo", var(--font-fallback); --leading: 1.85; }
html[lang="en"] { --font: "Plus Jakarta Sans", var(--font-fallback); --leading: 1.65; }

body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: var(--leading);
  color: var(--c-text);
  background: var(--c-white);
  /* Financial figures must stack in a column. Both faces ship tabular
     numerals; without this they default to proportional and a price table
     jitters down the page. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.2; font-weight: 800; text-wrap: balance; }
html[lang="ar"] :is(h1, h2, h3, h4) { line-height: 1.35; }
p { max-width: var(--measure); text-wrap: pretty; }

/* Latin brand names, version numbers and currency codes inside Arabic prose.
   Without isolation the bidi algorithm drags trailing punctuation to the wrong
   end — "Odoo 18." renders as ".Odoo 18". */
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* A figure followed by Arabic text — "١٥٬٢١٦ ر.ع." or "١٥ شهرًا" — must NOT be
   forced to LTR the way a bare date or count is: that drags the final period
   of the currency abbreviation to the wrong end of the string. Isolate it from
   the surrounding text, but let it keep the paragraph's own direction. */
.money { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* ---------- focus ---------- */
:focus-visible {
  outline: 3px solid var(--c-blue-500);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
.skip-link {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  z-index: 200;
  padding: var(--space-xs) var(--space-m);
  background: var(--c-navy-900);
  color: var(--c-white);
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- layout ---------- */
.container { width: min(var(--container), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.narrow { max-width: 72ch; margin-inline: auto; }
.section { padding-block: var(--space-2xl); }
/* A phone has less vertical budget and separates by width anyway. */
@media (max-width: 48rem) { .section { padding-block: var(--space-xl); } }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-navy-900); color: rgb(255 255 255 / 80%); }
.section--dark :is(h1, h2, h3, h4) { color: var(--c-white); }

.stack > * + * { margin-block-start: var(--space-m); }
.stack-s > * + * { margin-block-start: var(--space-xs); }
.stack-l > * + * { margin-block-start: var(--space-l); }

.grid { display: grid; gap: var(--space-m); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* 17rem meant three cards needed ~860px of container. With the dock's lane
   taking 96px, a 1024px laptop fell to two columns and six cards became three
   rows. 15.5rem fits three at that width and still wraps on a phone. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* The five things templates used to set with style="". Naming them here is
   what lets the Content-Security-Policy drop 'unsafe-inline' for styles:
   with no style attribute anywhere, an injected one cannot take effect
   either. */
.mt-l { margin-block-start: var(--space-l); }
.mt-xl { margin-block-start: var(--space-xl); }
.justify-center { justify-content: center; }
.gap-l { gap: var(--space-l); }

/* ---------- section heading ---------- */
.eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--c-blue-500);
  margin-block-end: var(--space-2xs);
}
html[lang="en"] .eyebrow { text-transform: uppercase; }
.section-title { font-size: var(--step-3); }
.section-lead { font-size: var(--step-1); color: var(--c-muted); margin-block-start: var(--space-xs); }

/* ---------- buttons ----------
   Oracle's partner guidance: one clear action per view, strong contrast, no
   grey. Primary is the green; it is the only full-saturation fill on a page. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--primary { background: var(--c-green-700); color: var(--c-white); }
.btn--primary:hover { background: var(--c-navy-900); }

.btn--secondary { background: transparent; color: var(--c-navy-900); border-color: var(--c-line); }
.btn--secondary:hover { border-color: var(--c-navy-900); background: var(--c-bg-alt); }

.btn--ghost { background: var(--c-white); color: var(--c-navy-900); }
.btn--ghost:hover { background: var(--c-bg-alt); }

/* The arrow points "forward", which is leftwards in Arabic. One rule, both
   directions — the glyph is never duplicated in markup. */
.btn__arrow { transition: transform 0.2s var(--ease); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(0.2em); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(0.2em); }

/* ---------- badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 700;
  background: var(--c-bg-alt);
  color: var(--c-navy-900);
  border: 1px solid var(--c-line);
}
.badge--gold { background: var(--c-gold-500); color: var(--c-navy-950); border-color: transparent; }
.badge--green { background: var(--c-green-500); color: var(--c-navy-950); border-color: transparent; }
.badge--outline { background: transparent; color: var(--c-white); border-color: rgb(255 255 255 / 30%); }

/* ---------- card ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.card--link:hover { box-shadow: var(--shadow-m); transform: translateY(-3px); border-color: var(--c-blue-500); }
.card__icon { inline-size: 3rem; block-size: 3rem; }
.card__title { font-size: var(--step-1); }
.card__text { color: var(--c-muted); font-size: var(--step-0); }
/* Pushes the card's action to the bottom so a row of cards aligns regardless
   of how much text each one carries. */
.card__foot { margin-block-start: auto; padding-block-start: var(--space-xs); }

/* ---------- stat ---------- */
.stat { text-align: center; }
.stat__value { font-size: var(--step-4); font-weight: 800; color: var(--c-navy-900); line-height: 1; }
.stat__label { font-size: var(--step--1); color: var(--c-muted); margin-block-start: var(--space-2xs); }

/* ---------- proof bar ----------
   The verifiable claims: FSA licence, Odoo Silver, NetSuite, Omani-owned.
   Sits directly under the hero because in a market that struck two audit firms
   off the register this year, provenance is the first question. */
.proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-m);
  border-block: 1px solid var(--c-line);
  background: var(--c-white);
}
.proof__item { display: flex; align-items: center; gap: var(--space-2xs); font-weight: 600; font-size: var(--step--1); }
.proof__item svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--c-green-700); flex: none; }

/* ---------- logo wall ---------- */
/* Six marks, not fifteen — the consent gate cut the wall down. `auto-fill` at
   9rem gave five across and left a single logo stranded on a second row, which
   reads as something missing rather than as a deliberate set. Capping the
   track count at three makes it two full rows at every width above a phone. */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-m);
  align-items: center;
  max-inline-size: 42rem;
  margin-inline: auto;
}
@media (min-width: 40rem) { .logos { grid-template-columns: repeat(3, 1fr); } }
.logos img {
  margin-inline: auto;
  max-block-size: 3.5rem;
  inline-size: auto;
  /* Client marks come in a dozen palettes. Neutralising them keeps the wall
     from reading as a ransom note; colour returns on hover. */
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.logos img:hover { filter: none; opacity: 1; }

/* ---------- header ---------- */
.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--c-line);
}
.header__inner { display: flex; align-items: center; gap: var(--space-m); padding-block: var(--space-xs); }
.header__logo img { block-size: 2.5rem; inline-size: auto; }
.header__nav { display: flex; gap: var(--space-s); margin-inline-start: auto; }
.header__link { font-weight: 600; font-size: var(--step--1); padding-block: var(--space-2xs); border-block-end: 2px solid transparent; }
.header__link:hover, .header__link[aria-current="page"] { color: var(--c-blue-500); border-block-end-color: var(--c-blue-500); }
.header__actions { display: flex; align-items: center; gap: var(--space-xs); }

.lang-switch { font-weight: 700; font-size: var(--step--1); padding: 0.4em 0.8em; border: 1px solid var(--c-line); border-radius: var(--radius-s); }
.lang-switch:hover { border-color: var(--c-navy-900); }

.nav-toggle { display: none; padding: 0.5em; background: none; border: 1px solid var(--c-line); border-radius: var(--radius-s); }

@media (max-width: 60rem) {
  .nav-toggle { display: block; margin-inline-start: auto; }
  .header__nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--space-s);
    background: var(--c-white);
    border-block-end: 1px solid var(--c-line);
    box-shadow: var(--shadow-m);
  }
  .header__nav[data-open="true"] { display: flex; }
  .header__link { padding-block: var(--space-xs); border-block-end: 1px solid var(--c-line); }
}

/* ---------- hero ----------
   Oracle's landing-page rule: the value proposition and the call to action are
   both visible without scrolling. The 100svh floor (not vh) keeps that true on
   iOS, where the dynamic toolbar makes vh overshoot the visible viewport. */
.hero {
  position: relative;
  min-block-size: min(100svh, 48rem);
  display: grid;
  align-items: center;
  padding-block: var(--space-2xl);
  background: var(--c-navy-900);
  color: rgb(255 255 255 / 85%);
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hero__inner { position: relative; z-index: 1; }
.hero__title { font-size: var(--step-5); color: var(--c-white); }
.hero__lead { font-size: var(--step-1); margin-block-start: var(--space-m); color: rgb(255 255 255 / 75%); }
.hero__actions { margin-block-start: var(--space-l); }

/* ---------- deadline strip ----------
   The Fatoora countdown. Gold, because it is the one piece of urgency on the
   page and it earns a colour nothing else uses. */
.deadline { background: var(--c-gold-500); color: var(--c-navy-950); padding-block: var(--space-m); }
.deadline__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); justify-content: space-between; }
.deadline__count { font-size: var(--step-2); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */
.footer { background: var(--c-navy-950); color: rgb(255 255 255 / 70%); padding-block: var(--space-xl) var(--space-m); }
.footer :is(h3, h4) { color: var(--c-white); font-size: var(--step-0); margin-block-end: var(--space-xs); }
.footer a:hover { color: var(--c-white); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-l); }
.footer__legal {
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid rgb(255 255 255 / 12%);
  font-size: var(--step--1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
}
/* The regulator line. Small, permanent, on every page. */
.footer__licence { color: rgb(255 255 255 / 55%); }

/* ---------- inner hero ----------
   Shorter than the home hero: an inner page has a job to do below the fold,
   and the same two-elements-above-the-fold rule still has to hold on a phone. */
.hero--inner { min-block-size: auto; padding-block: var(--space-xl); }
.hero--inner .hero__title { font-size: var(--step-4); }
.hero--inner .hero__lead { font-size: var(--step-0); margin-block-start: var(--space-s); }

/* ---------- breadcrumbs ---------- */
.crumbs { margin-block-end: var(--space-s); font-size: var(--step--1); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; color: rgb(255 255 255 / 55%); }
/* The separator is content, so it has to flip with the writing direction —
   a hard-coded "›" points the wrong way in Arabic. */
.crumbs li + li::before { content: "›"; margin-inline-end: var(--space-2xs); }
[dir="rtl"] .crumbs li + li::before { content: "‹"; }
.crumbs a:hover { color: var(--c-white); text-decoration: underline; }

/* ---------- tick list ---------- */
.ticklist { display: grid; gap: var(--space-xs) var(--space-m); margin-block-start: var(--space-l); }
.ticklist[data-cols="2"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ticklist[data-cols="3"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.ticklist__item { display: flex; align-items: flex-start; gap: var(--space-xs); }
.ticklist__item svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--c-green-700); flex: none; margin-block-start: 0.3em; }
.section--dark .ticklist__item svg { color: var(--c-green-500); }

/* ---------- pills ---------- */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-l); list-style: none; padding: 0; }
.pill, .pills li {
  padding: 0.45em 1em;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--c-ink);
}
.pills a:hover { color: var(--c-blue-500); }
.center .pills { justify-content: center; }

/* ---------- split ---------- */
.split { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.split__bt { font-size: var(--step-1); margin-block-end: var(--space-xs); }
.split .ticklist { margin-block-start: 0; }

/* ---------- steps ---------- */
.steps { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); list-style: none; padding: 0; }
.step { display: flex; gap: var(--space-s); align-items: flex-start; }
.step__num {
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-s);
  background: var(--c-navy-900);
  color: var(--c-white);
  font-weight: 800;
}
.step__title { font-size: var(--step-1); }
.step__text { color: var(--c-muted); }

/* ---------- FAQ ----------
   <details> rather than a scripted accordion: it opens with JavaScript
   blocked, it prints expanded, and the browser can find text inside a closed
   one. */
.faq-list { margin-block-start: var(--space-l); max-width: 72ch; margin-inline: auto; }
.faq { border-block-end: 1px solid var(--c-line); }
.faq__q {
  padding-block: var(--space-s);
  font-weight: 700;
  color: var(--c-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  margin-inline-start: auto;
  font-size: 1.4em;
  line-height: 1;
  color: var(--c-blue-500);
}
.faq[open] .faq__q::after { content: "−"; }
.faq__a { padding-block-end: var(--space-s); color: var(--c-muted); }
@media print { .faq__a { display: block !important; } }

/* ---------- partner statement ---------- */
.partner { padding-block: var(--space-s); }
.partner__text { font-size: var(--step-1); color: var(--c-ink); }
.partner__proof { color: var(--c-muted); font-size: var(--step--1); }

/* ---------- table ----------
   The Fatoora timeline. Wrapped so a narrow screen scrolls the table rather
   than the whole page. */
.table-wrap { overflow-x: auto; margin-block-start: var(--space-l); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--step-0); }
.table th {
  background: var(--c-navy-900);
  color: var(--c-white);
  text-align: start;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.table td { padding: var(--space-xs) var(--space-s); border-block-start: 1px solid var(--c-line); }
.table tbody tr:nth-child(even) { background: var(--c-bg-alt); }
.note { margin-block-start: var(--space-s); color: var(--c-muted); font-size: var(--step--1); }

/* The competitive comparison. The firm's own column is marked so the eye
   lands on it, and each cell carries a label for screen readers rather than
   relying on a tick glyph alone. */
.table--compare td:not(:first-child),
.table--compare th:not(:first-child) { text-align: center; }
.table--compare th.is-us { background: var(--c-green-700); }
.table--compare td:last-child { background: rgb(94 209 43 / 8%); font-weight: 700; }
.table--compare .tick svg { inline-size: 1.2rem; block-size: 1.2rem; color: var(--c-green-700); }
.table--compare .cross { color: var(--c-muted); }

/* ---------- form ---------- */
.form { display: grid; gap: var(--space-s); }
.form__row { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.field { display: grid; gap: var(--space-2xs); }
.field > span { font-size: var(--step--1); font-weight: 600; color: var(--c-ink); }
.field :is(input, select, textarea) {
  inline-size: 100%;
  padding: 0.7em 0.9em;
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-s);
  background: var(--c-white);
  color: var(--c-ink);
}
.field :is(input, select, textarea):focus { border-color: var(--c-blue-500); }
.field textarea { resize: vertical; }
.form__note { font-size: var(--step--1); color: var(--c-muted); }
/* Honeypot: off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. Hidden from assistive tech via aria-hidden
   on the wrapper, and taken out of the tab order on the input itself. */
.hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
/* A disabled control must still read clearly — this one carries a message. */
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; background: var(--c-green-700); }

/* The UA rule for [hidden] is `display: none`, which any class setting a
   display wins against on specificity — so `.grid[hidden]` stayed visible.
   One !important here is cheaper than auditing every utility class. */
[hidden] { display: none !important; }

/* ---------- trust panel ---------- */
.trust {
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-bg-alt);
}
.trust__t { font-size: var(--step-0); margin-block-end: var(--space-s); }
.trust__list { display: grid; gap: var(--space-xs); }
.trust__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem var(--space-xs);
  align-items: baseline;
  padding-block-end: var(--space-xs);
  border-block-end: 1px solid var(--c-line);
}
.trust__row:last-child { border-block-end: none; padding-block-end: 0; }
.trust__row strong { color: var(--c-ink); font-size: var(--step-0); }
.trust__row span { grid-column: 1; font-size: var(--step--1); color: var(--c-muted); }
.trust__row a {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--c-blue-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* The rating. The count sits beside the number on purpose: five reviews is a
   small sample, and stating it is the difference between a fact and a boast. */
.rating { display: flex; align-items: center; gap: var(--space-2xs); margin-block-start: var(--space-m); flex-wrap: wrap; }
.rating__stars { display: inline-flex; color: var(--c-gold-500); }
.rating__stars svg { inline-size: 1rem; block-size: 1rem; }
.rating__value { font-weight: 800; color: var(--c-ink); }
.rating__sep { color: var(--c-line); }
.rating__count { font-size: var(--step--1); color: var(--c-muted); }

/* ---------- quick form ---------- */
.quick {
  padding: var(--space-m);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-white);
  box-shadow: var(--shadow-s);
  align-content: start;
}

/* ---------- hero media ---------- */
.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Decorative, and the headline sits on top of it. */
  pointer-events: none;
}
/* A wash over the footage. Without it the headline is unreadable the moment a
   bright frame comes round, and "no text over imagery" becomes unavoidable. */
.hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(13 23 76 / 55%),
    rgb(13 23 76 / 78%)
  );
}
/* Someone who asks for less motion gets the poster frame, not a loop. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ---------- service dock ----------
   Fixed to the inline end: the right in Arabic, the right in English too,
   because inset-inline-end follows the writing direction and this is a
   thumb-reach affordance, not a reading one. */
.dock {
  position: fixed;
  /* Physical `right`, not inset-inline-end. In Arabic the inline end is the
     left, and this rail belongs on the right in both languages: it is a
     thumb-reach affordance, not part of the reading flow. */
  right: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  inline-size: 4.25rem;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--c-line);
  border-right: none;
  border-radius: var(--radius-m) 0 0 var(--radius-m);
  box-shadow: var(--shadow-m);
  overflow: hidden;
}

.dock__b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.85rem 0.25rem;
  color: var(--c-navy-900);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.dock__b + .dock__b { border-block-start: 1px solid var(--c-line); }
.dock__b svg { inline-size: 1.4rem; block-size: 1.4rem; flex: none; }
.dock__b:hover { background: var(--c-bg-alt); color: var(--c-blue-500); }
.dock__b--whatsapp:hover { background: #25d366; color: #fff; }
.dock__b--book { background: var(--c-green-700); color: #fff; }
.dock__b--book:hover { background: var(--c-navy-900); color: #fff; }

/* The open/closed light. A dot plus a label, so it does not rely on colour
   alone — and the label is what a screen reader reads out. */
.dock__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.6rem 0.25rem;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--c-muted);
  background: var(--c-bg-alt);
  border-block-end: 1px solid var(--c-line);
}
/* The label is deliberately two lines: see site.js. `nowrap` on each half is
   what keeps that promise — without it the browser re-wraps the second line
   and orphans the hour again, which is the bug this replaced. */
.dock__state { white-space: nowrap; }
.dock__when { white-space: nowrap; font-size: 0.92em; font-weight: 600; opacity: 0.85; }

.dock__status i {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--c-muted);
  flex: none;
}
.dock__status.is-open { color: var(--c-green-700); }
.dock__status.is-open i { background: var(--c-green-500); box-shadow: 0 0 0 3px rgb(94 209 43 / 22%); }

/* On a phone the rail becomes a bottom bar: a vertical strip would eat the
   reading width, and the thumb is at the bottom anyway. */
@media (max-width: 48rem) {
  .dock {
    inset: auto 0 0 0;
    right: 0;
    transform: none;
    flex-direction: row;
    inline-size: 100%;
    border: none;
    border-block-start: 1px solid var(--c-line);
    border-radius: 0;
    padding-block-end: env(safe-area-inset-bottom);
  }
  .dock__b { flex: 1; padding-block: 0.6rem; }
  .dock__b + .dock__b { border-block-start: none; border-inline-start: 1px solid var(--c-line); }
  .dock__status { flex-direction: row; flex: 1; border-block-end: none; border-inline-end: 1px solid var(--c-line); }
  /* Room is horizontal down here, so the two halves read as one line. */
  .dock__when { font-size: 1em; opacity: 1; }
  /* Keep the bottom bar clear of the footer's last line. */
  body { padding-block-end: 4.5rem; }
  .to-top { inset-block-end: 5.5rem; }
}

/* The rail floats over the page, so the page has to keep a lane clear for it.
   Physical `right`, matching the rail's own pin, and only from tablet up —
   on a phone the rail is a bottom bar and the lane would waste reading width. */
@media (min-width: 48.0625rem) {
  .container { padding-right: 4.75rem; }
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  inset-block-end: var(--space-m);
  left: var(--space-m);          /* opposite the rail, which is pinned right */
  z-index: 90;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(8px);
  color: var(--c-navy-900);
  box-shadow: var(--shadow-s);
}
.to-top:hover { background: var(--c-navy-900); color: #fff; border-color: var(--c-navy-900); }
.to-top svg { inline-size: 1.25rem; block-size: 1.25rem; }

@media print { .dock, .to-top { display: none !important; } }

/* ---------- article ---------- */
.article { font-size: var(--step-1); }
.article h2 { font-size: var(--step-2); margin-block-start: var(--space-l); }
.article p { max-width: none; }
.article .ticklist { font-size: var(--step-0); }
.article__meta { margin-block-end: var(--space-m); }
.article__sources {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--c-line);
  font-size: var(--step-0);
}
.article__sources h2 { font-size: var(--step-1); margin-block-start: 0; }
.article__sources a { color: var(--c-blue-500); text-decoration: underline; text-underline-offset: 2px; }

.callout {
  margin-block: var(--space-l);
  padding: var(--space-m);
  border-inline-start: 4px solid var(--c-gold-500);
  border-radius: var(--radius-s);
  background: var(--c-bg-alt);
}
.callout p { font-size: var(--step-0); color: var(--c-ink); }

/* ---------- sector group ---------- */
.sector__name {
  font-size: var(--step-0);
  color: var(--c-muted);
  padding-block-end: var(--space-2xs);
  margin-block-end: var(--space-s);
  border-block-end: 1px solid var(--c-line);
}

/* ---------- interactive tools ---------- */
.tool__panel, .tool__calc { max-width: 56rem; margin-inline: auto; }

.progress { display: flex; align-items: center; gap: var(--space-s); margin-block-end: var(--space-l); }
.progress__label { font-size: var(--step--1); color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A native <progress>, so its position comes from the `value` property rather
   than from a style the CSP forbids. Styling it needs the vendor pseudo
   elements: appearance:none strips the platform look, then the track and the
   filled portion are coloured separately per engine. */
.progress__bar {
  flex: 1;
  inline-size: 100%;
  block-size: 6px;
  appearance: none;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--c-line);          /* Firefox track, and the fallback */
  overflow: hidden;
}
.progress__bar::-webkit-progress-bar { background: var(--c-line); border-radius: var(--radius-pill); }
.progress__bar::-webkit-progress-value {
  background: var(--c-green-700);
  border-radius: var(--radius-pill);
  transition: inline-size 0.35s var(--ease);
}
.progress__bar::-moz-progress-bar { background: var(--c-green-700); border-radius: var(--radius-pill); }

.tool__q { font-size: var(--step-2); margin-block-end: var(--space-xs); }

.options { display: grid; gap: var(--space-xs); margin-block: var(--space-m); }
.option {
  text-align: start;
  padding: var(--space-s) var(--space-m);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-white);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--c-ink);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.option:hover { border-color: var(--c-blue-500); background: var(--c-bg-alt); }
.option.is-selected { border-color: var(--c-blue-500); background: var(--c-bg-alt); }

.tool__result { text-align: center; padding-block: var(--space-l); }
.tool__big { font-size: var(--step-5); font-weight: 800; color: var(--c-navy-900); line-height: 1; }
.tool__result h2 { margin-block: var(--space-xs); }
.tool__result p { margin-inline: auto; }

/* The score ring. rotate(-90deg) starts the arc at twelve o'clock; it is not
   mirrored for RTL because a clock face does not flip. */
.ring { inline-size: 7.5rem; block-size: 7.5rem; margin-inline: auto; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--c-line); stroke-width: 10; }
.ring__fill {
  fill: none;
  stroke: var(--c-green-700);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease);
}

.tool__lead { margin-block-start: var(--space-xl); padding: var(--space-m); border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-bg-alt); }
.tool__lead h3 { margin-block-end: var(--space-xs); }

/* calculator */
.calc__inputs { display: grid; gap: var(--space-m); }
.calc__row { display: grid; gap: var(--space-2xs); }
.calc__label { font-weight: 600; color: var(--c-ink); font-size: var(--step--1); }
.calc__row input[type="range"] { inline-size: 100%; accent-color: var(--c-blue-500); }
.calc__val { font-size: var(--step-0); color: var(--c-navy-900); font-weight: 700; }

.calc__out { margin-block-start: var(--space-xl); display: grid; gap: var(--space-m); }
.calc__headline { text-align: center; display: grid; gap: var(--space-2xs); }
.calc__cap { font-size: var(--step--1); color: var(--c-muted); font-weight: 700; letter-spacing: 0.06em; }
.calc__headline strong { font-size: var(--step-4); color: var(--c-navy-900); line-height: 1; }
.calc__assume { padding: var(--space-m); border: 1px dashed var(--c-line); border-radius: var(--radius-m); }
.calc__assume h3 { font-size: var(--step-0); margin-block-end: var(--space-xs); }
.calc__assume ul { display: grid; gap: var(--space-2xs); color: var(--c-muted); font-size: var(--step--1); }
.calc__assume strong { color: var(--c-ink); }

/* ---------- build guard ----------
   Any unresolved placeholder that slips into a template renders as a loud red
   chip. build.py refuses to ship a page containing one — this is the visible
   half of that contract, for local preview. */
.pending {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-s);
  background: var(--c-danger);
  color: #fff;
  font-weight: 700;
  font-size: 0.85em;
}

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

/* ---------- print ---------- */
@media print {
  .header, .footer, .hero__canvas, .btn, .deadline, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   Refinement pass — gradients drawn from the logo's arc, and motion.

   Everything below is additive and overrides earlier rules by source order.
   Two constraints shape all of it:

   1. The Content-Security-Policy forbids inline styles, so nothing here can
      be driven by a value JavaScript writes to an element. Stagger is done
      with :nth-child, not with a per-element delay.
   2. Motion is an enhancement, never a reveal mechanism that content depends
      on. With prefers-reduced-motion, or with JavaScript blocked, every
      animated element is already in its final state.
   ========================================================================== */

/* ---------- gradient accents ---------- */

/* A section heading earns a short gradient rule rather than a solid border:
   it marks the start of a block without drawing a line across the page. */
.section-title { position: relative; }
.section-title::after {
  content: "";
  display: block;
  inline-size: 3.5rem;
  block-size: 3px;
  margin-block-start: var(--space-xs);
  border-radius: 2px;
  background: var(--g-rule);
}
.center .section-title::after { margin-inline: auto; }
/* The rule is a left-to-right fade, so in Arabic it has to be mirrored or it
   fades away from the text it belongs to. */
[dir="rtl"] .section-title::after { transform: scaleX(-1); }
.section--dark .section-title::after { background: var(--g-arc); }

.eyebrow {
  /* The eyebrow takes the arc itself. Small, uppercase in English, and the
     one place a gradient on type reads as precision rather than decoration. */
  background: var(--g-arc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  inline-size: fit-content;
}
.center .eyebrow { margin-inline: auto; }
.section--dark .eyebrow, .hero .eyebrow {
  background: linear-gradient(115deg, var(--c-blue-400), var(--c-green-300));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- hero ---------- */
.hero { background: var(--c-navy-950); }

/* A slow mesh of coloured light over the navy. Three radial pools drifting at
   different rates: it never repeats visibly, costs one compositor layer, and
   reads as depth rather than as an animation playing. */
.hero__mesh {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 46% at 22% 32%, rgb(27 120 251 / 42%), transparent 70%),
    radial-gradient(34% 40% at 78% 28%, rgb(94 209 43 / 26%), transparent 70%),
    radial-gradient(44% 50% at 60% 82%, rgb(33 57 155 / 55%), transparent 72%);
  filter: blur(14px);
  animation: mesh-drift 26s var(--ease) infinite alternate;
  will-change: transform;
}
@keyframes mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

/* A fine grid over the mesh — the "technical" note. Static, very low
   contrast; it gives the gradient something to sit behind. */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 40%, transparent 100%);
}

.hero__title {
  /* The headline gets the arc on its last line only — the whole headline in
     gradient would be hard to read at this size and would compete with the
     call to action underneath it. */
  color: var(--c-white);
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(115deg, var(--c-blue-400), var(--c-green-300) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- buttons ---------- */
.btn--primary {
  background: var(--c-green-700);
  background-image: var(--g-arc);
  /* The arc runs blue→green; sliding it on hover moves the green under the
     label rather than swapping to a different colour. */
  background-size: 200% 100%;
  background-position: 100% 0;
  border: none;
  transition: background-position var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn--primary:hover {
  background-position: 0 0;
  box-shadow: 0 10px 24px -12px rgb(27 120 251 / 70%);
}
.btn--ghost { backdrop-filter: blur(6px); background: rgb(255 255 255 / 92%); }

/* ---------- cards ---------- */
.card {
  position: relative;
  background: var(--g-surface);
  overflow: hidden;
}
/* A gradient edge that wipes in on hover. Drawn as a pseudo-element so the
   card's own border stays put and nothing reflows. */
.card--link::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--g-arc);
  transform: scaleX(0);
  transform-origin: var(--origin, left);
  transition: transform var(--dur) var(--ease-out);
}
[dir="rtl"] .card--link::before { transform-origin: right; }
.card--link:hover::before { transform: scaleX(1); }
.card--link:hover { border-color: transparent; box-shadow: var(--shadow-m); }

/* ---------- stats ---------- */
.stat__value {
  background: var(--g-arc-full);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- deadline strip ---------- */
.deadline {
  background: var(--c-gold-500);
  background-image: linear-gradient(100deg, var(--c-gold-500), var(--c-gold-300) 50%, var(--c-gold-500));
  background-size: 220% 100%;
  animation: sheen 9s linear infinite;
}
@keyframes sheen {
  from { background-position: 0 0; }
  to   { background-position: -220% 0; }
}

/* ---------- proof bar ---------- */
.proof { background: var(--c-bg); border-block-end-color: transparent; position: relative; }
.proof::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--g-arc-full);
  opacity: 0.5;
}

/* ---------- dark sections ---------- */
.section--dark { background: var(--c-navy-900); background-image: var(--g-ink); position: relative; overflow: hidden; }
.section--dark::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  inline-size: 50%;
  block-size: 160%;
  background: radial-gradient(closest-side, rgb(27 120 251 / 30%), transparent);
  pointer-events: none;
}

/* ---------- scroll reveal ----------
   Opt-in: an element only animates if the markup asked for it with .reveal,
   and site.js adds .is-in when it enters the viewport. If the script never
   runs, the `no-js` guard below leaves everything visible — content must not
   depend on an observer firing. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Stagger comes from position in the grid, because the CSP will not let
   JavaScript write a per-element delay. */
.js .reveal .card:nth-child(1),
.js .reveal .stat:nth-child(1) { transition-delay: 0ms; }
.js .reveal.is-in > *:nth-child(2) { transition-delay: 70ms; }
.js .reveal.is-in > *:nth-child(3) { transition-delay: 140ms; }
.js .reveal.is-in > *:nth-child(4) { transition-delay: 210ms; }

/* ---------- link underline ---------- */
.header__link {
  background-image: var(--g-arc);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  border-block-end: none;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast) var(--ease);
}
[dir="rtl"] .header__link { background-position: 100% 100%; }
.header__link:hover, .header__link[aria-current="page"] { background-size: 100% 2px; }

/* ---------- reduced motion ----------
   Repeated after the animations so it wins on source order. Everything stops;
   nothing disappears. */
@media (prefers-reduced-motion: reduce) {
  .hero__mesh { animation: none; }
  .deadline { animation: none; background-image: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- dock at desktop widths ----------
   68px reads as an afterthought once the window is wide: the rail is one of
   two ways to reach the firm from any page, and at 1400px it was smaller than
   a nav item. It scales with the viewport rather than jumping, so there is no
   step where it looks wrong.

   The reserved lane in .container grows with it — the two values are tied,
   and changing one without the other puts the rail back over the text. */
@media (min-width: 64rem) {
  .dock { inline-size: 5.75rem; }
  .dock__b { padding: 1.05rem 0.3rem; font-size: 0.72rem; gap: 0.35rem; }
  .dock__b svg { inline-size: 1.65rem; block-size: 1.65rem; }
  .dock__status { padding: 0.75rem 0.3rem; font-size: 0.64rem; }
  .dock__status i { inline-size: 0.6rem; block-size: 0.6rem; }
  .container { padding-right: 6.5rem; }
}

@media (min-width: 90rem) {
  .dock { inline-size: 6.5rem; }
  .dock__b { padding: 1.2rem 0.35rem; font-size: 0.78rem; }
  .dock__b svg { inline-size: 1.9rem; block-size: 1.9rem; }
  .dock__status { font-size: 0.68rem; }
  .container { padding-right: 7.5rem; }
}

/* A soft edge where the rail meets the page, so it reads as attached to the
   viewport rather than pasted on top of the content. */
@media (min-width: 64rem) {
  .dock { box-shadow: -14px 0 34px -22px rgb(11 20 75 / 45%), var(--shadow-m); }
  .dock__b--book { position: relative; }
  /* The booking button is the rail's purpose; give it the arc rather than a
     flat green, matching the primary button elsewhere. */
  .dock__b--book { background-image: var(--g-arc); background-size: 200% 100%; background-position: 100% 0; transition: background-position var(--dur) var(--ease); }
  .dock__b--book:hover { background-position: 0 0; }
}

/* ---------- packages ----------
   Three cards that must be comparable at a glance, so every card keeps the
   same vertical rhythm whatever its content length: name, the bounded number,
   price, meta, who it is for, then the list. The action is pushed to the
   bottom with margin-block-start:auto so the buttons line up across the row
   even when one card carries two more bullets than its neighbours. */
.packs {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: stretch;
}

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  background: var(--g-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}
.pack--featured {
  border-color: transparent;
  box-shadow: var(--shadow-m);
  /* The chosen tier gets the brand arc as a top edge rather than a different
     background: it reads as selected without making the others look inferior. */
  background-image: var(--g-arc), var(--g-surface);
  background-repeat: no-repeat;
  background-size: 100% 4px, auto;
  background-position: 0 0, 0 0;
}

.pack__badge {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-end: var(--space-s);
  padding: 0.25em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--c-navy-900);
  color: var(--c-white);
  font-size: 0.68rem;
  font-weight: 700;
}
.pack__name { font-size: var(--step-2); margin-block-end: var(--space-xs); }

/* The hour cap — the whole reason this page exists, so it is the largest
   thing in the card after the name. */
.pack__hours { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin-block-end: var(--space-2xs); }
.pack__cap { font-size: var(--step--1); color: var(--c-muted); inline-size: 100%; }
.pack__hours strong {
  font-size: var(--step-3);
  line-height: 1;
  background: var(--g-arc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pack__hours > span:not(.pack__cap) { color: var(--c-muted); font-size: var(--step-0); }

.pack__price { font-size: var(--step-1); font-weight: 800; color: var(--c-ink); margin-block-end: var(--space-s); }
.pack__price--quote { font-size: var(--step-0); font-weight: 600; color: var(--c-muted); }

.pack__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem var(--space-xs);
  padding-block: var(--space-xs);
  border-block: 1px solid var(--c-line);
  font-size: var(--step--1);
  margin-block-end: var(--space-s);
}
.pack__meta dt { color: var(--c-muted); }
.pack__meta dd { margin: 0; color: var(--c-ink); font-weight: 600; }

.pack__for { color: var(--c-muted); font-size: var(--step-0); margin-block-end: var(--space-s); }
.pack .ticklist { margin-block-start: 0; font-size: var(--step--1); }

/* What is NOT in the pack, stated plainly. Saying it is what makes the
   included list believable. */
.pack__excl { margin-block-start: var(--space-s); padding-block-start: var(--space-s); border-block-start: 1px dashed var(--c-line); }
.pack__excl h4 { font-size: var(--step--1); color: var(--c-muted); margin-block-end: var(--space-2xs); }
.pack__excl ul { display: grid; gap: 0.2rem; font-size: var(--step--1); color: var(--c-muted); }
.pack__excl li { padding-inline-start: 1em; position: relative; }
.pack__excl li::before { content: "—"; position: absolute; inset-inline-start: 0; }

.pack__foot { margin-block-start: auto; padding-block-start: var(--space-m); }
.pack__foot .btn { inline-size: 100%; justify-content: center; }

/* ---------- alert strip ----------
   The beat that replaced the Fatoora countdown: a real, dated event with a
   link to the piece that explains it. Gold because it is the page's one note
   of urgency — the same reason the countdown used gold — but set as a card
   rather than a full-bleed band, so it reads as a notice and not as a sale. */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  padding: var(--space-m);
  border: 1px solid var(--c-gold-500);
  border-inline-start: 4px solid var(--c-gold-500);
  border-radius: var(--radius-m);
  background: linear-gradient(100deg, var(--c-gold-100), var(--c-bg) 70%);
}
.alert__mark { flex: none; color: var(--c-gold-600); }
.alert__mark svg { inline-size: 2rem; block-size: 2rem; }
.alert__body { flex: 1 1 22rem; }
.alert__body strong { display: block; color: var(--c-ink); font-size: var(--step-1); line-height: 1.3; }
.alert__body p { color: var(--c-text); margin-block-start: var(--space-2xs); max-width: 60ch; }
.alert .btn { flex: none; }

/* The industries row is links, so it needs the affordance a pill list does
   not carry by default. */
.pills li:has(> a) { padding: 0; }
.pills li > a {
  display: block;
  padding: 0.45em 1em;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pills li > a:hover { background: var(--c-navy-900); color: var(--c-white); }

/* The merged proof band: figures above, then who we are. The row sits tighter
   than a standalone section would and the source line stays attached to the
   numbers it qualifies. */
.statrow { margin-block-end: var(--space-xs); }
.statrow__src { margin-block-end: var(--space-xl); }


/* A linked card is one anchor, so it needs the affordance the button used to
   carry — and the arrow has to travel the right way in each direction. */
.card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  color: var(--c-blue-600);
  font-weight: 700;
  font-size: var(--step--1);
}
.card--link:hover .card__go { color: var(--c-navy-900); }
.card--link:hover .card__go .btn__arrow { transform: translateX(0.2em); }
[dir="rtl"] .card--link:hover .card__go .btn__arrow { transform: scaleX(-1) translateX(0.2em); }
/* The card is the link, so its heading must not look like a second one. */
.card--link .card__title { color: var(--c-ink); }

/* ---------- link list ----------
   Article titles as a list rather than cards. Three cards cost 859px to say
   what a list says in a third of it, and at this depth the reader wants to
   see what exists, not a paragraph about each. */
.linklist { display: grid; gap: 0; }
.linklist li { border-block-end: 1px solid var(--c-line); }
.linklist li:last-child { border-block-end: none; }
.linklist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-s);
  transition: color var(--dur-fast) var(--ease);
}
.linklist a strong { color: var(--c-ink); font-size: var(--step-0); font-weight: 700; }
.linklist a span { color: var(--c-muted); font-size: var(--step--1); white-space: nowrap; }
.linklist a:hover strong { color: var(--c-blue-600); }
.linklist__h { font-size: var(--step-0); margin-block-end: var(--space-s); }