/* ==========================================================================
   Qanoniah Quotation Deck — page styles
   Built on the Qanoniah design kit (tokens.css, Ping AR + LT, iconsax).
   Visual language ported from qanoniah-landing: aurora backdrop, glass cards,
   brand-navy soft shadows.
   Page format: A4 landscape (297 x 210 mm = 1122.52 x 793.70 px @96dpi)
   ========================================================================== */

@import url("../assets/tokens.css");

@font-face {
  font-family: "Ping AR + LT";
  src: url("../assets/fonts/PingAR+LT-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Ping AR + LT";
  src: url("../assets/fonts/PingAR+LT-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Ping AR + LT";
  src: url("../assets/fonts/PingAR+LT-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Ping AR + LT";
  src: url("../assets/fonts/PingAR+LT-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Ping AR + LT";
  src: url("../assets/fonts/PingAR+LT-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

:root {
  /* Aurora wash — Ahmed's call (2026-07-27): brand blues only, no purple/
     amber AI-hint accent. Every radial stop below is logo-blue or brand-navy. */
  --aurora-base: #f4f6fc;

  /* Page geometry */
  --page-w: 1122.52px;
  --page-h: 793.7px;
  --page-pad-x: 64px;
  --page-pad-y: 44px;

  /* Elevation — brand navy, never neutral black */
  --shadow-card: 0 10px 34px rgba(10, 28, 109, 0.08);
  --shadow-card-lift: 0 16px 44px rgba(10, 28, 109, 0.12);
  --shadow-glass: 0 10px 34px rgba(10, 28, 109, 0.1);

  --radius-card: 18px;
  --radius-glass: 22px;
  --radius-pill: 999px;
}

/* ---------------------------------------------------------------- page shell */

.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  overflow: hidden;
  background: #fff;
  color: var(--color-text-primary);
  font-family: "Ping AR + LT", system-ui, sans-serif;
  font-weight: 400;
  direction: rtl;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.page * {
  box-sizing: border-box;
}

/* Aurora wash — the CSS echo of the landing page's WebGL grain gradient.
   Radial layers instead of a shader so it survives print rasterisation. */
.page-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px circle at 82% -8%, rgba(74, 114, 187, 0.12), transparent 62%),
    radial-gradient(720px circle at 20% 0%, rgba(207, 224, 251, 0.28), transparent 62%);
}

.page-aurora::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 260px;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 62%);
}

/* --------------------------------------------------------- header / footer */

.page-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--page-pad-y) var(--page-pad-x) 0;
  flex: none;
}

.page-head .logo {
  height: 34px;
  width: auto;
  aspect-ratio: 95.9184 / 36.348;
  object-fit: contain;
  flex: none;
}

/* White chip a header logo sits in when the active product's lockup has no
   dedicated cover (white-on-navy) variant — the qanoniah-ai kit option, or a
   custom upload that only supplied an interior file. Same treatment either
   way so the cover never shows a mismatched or recolored logo. */
.logo-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  flex: none;
}

.logo-chip .logo {
  height: 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(10, 28, 109, 0.1);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-brand-500);
  letter-spacing: -0.01em;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-500);
}

.eyebrow .num {
  font-size: 12px;
  color: var(--color-gray-400);
  font-weight: 500;
}

.page-body {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  padding: 0 var(--page-pad-x);
  display: flex;
  flex-direction: column;
}

.page-foot {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad-x) 30px;
  font-size: 10.5px;
  color: var(--color-gray-400);
  letter-spacing: -0.01em;
}

.page-foot a,
.page-foot .site {
  color: var(--color-logo-blue-500);
  font-weight: 500;
  text-decoration: none;
  direction: ltr;
}


/* ------------------------------------------------------------- typography */

.h-display {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--color-brand-500);
  margin: 0;
}

.h-page {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.025em;
  color: var(--color-brand-500);
  margin: 0;
}

.h-card {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin: 0;
}

.lede {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--color-slate-600);
  margin: 0;
  max-width: 74ch;
}

.body-sm {
  font-size: 13px;
  line-height: 1.72;
  color: var(--color-slate-500);
  margin: 0;
}

.num-lat {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ------------------------------------------------------------------ cards */

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Hairline accent along the card's leading (right, in RTL) edge */
.card--accent::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-brand-500), var(--color-logo-blue-500));
  opacity: 0.85;
}

/* Ahmed: 24px between the icon and the text on every card. The card's own
   10px gap covers part of it, so the tile adds the remaining 14px. */
.card > .icon-tile {
  margin-bottom: 14px;
}

.card .icon-tile {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.07);
  display: grid;
  place-items: center;
  flex: none;
}

.card .icon-tile svg {
  width: 21px;
  height: 21px;
}

.icon-tile svg [stroke] {
  stroke: var(--color-brand-500);
}
.icon-tile svg [fill]:not([fill="none"]) {
  fill: var(--color-brand-500);
}

/* The AI mark is an <img>, so it is untouched by the recolour rules above
   and keeps the brand gradient. An <img> has no intrinsic box the way an
   inline <svg> does, so EVERY tile context must size it: this base rule is
   the safety net (a tile added later can never render the mark unbounded,
   which is exactly how it blew out of an audience row once), and each
   context below matches its own glyph size. Slightly larger than the
   equivalent iconsax glyph because the artwork carries internal padding. */
.icon-tile img.ai-mark {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.card .icon-tile img.ai-mark {
  width: 24px;
  height: 24px;
}

.aud-row .icon-tile img.ai-mark {
  width: 26px;
  height: 26px;
}

.contact-item .icon-tile img.ai-mark {
  width: 21px;
  height: 21px;
}

/* Last-resort clamp: nothing inside a tile may exceed it, whatever it is. */
.icon-tile > * {
  max-width: 100%;
  max-height: 100%;
}

.icon-tile--ai {
  background: #f4f2ff;
  border-color: rgba(122, 92, 255, 0.16);
}

/* Glass card — patterns/glass-card.md. Used over the navy aurora only. */
.glass {
  border-radius: var(--radius-glass);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(18px);
}

/* --------------------------------------------------------------- 1. cover */

.page--cover {
  background: var(--color-brand-600);
  color: #fff;
}

.page--cover .page-aurora::before {
  background:
    radial-gradient(820px circle at 80% 4%, rgba(74, 114, 187, 0.22), transparent 62%),
    radial-gradient(720px circle at 20% 92%, rgba(31, 80, 171, 0.32), transparent 62%);
}

.page--cover .page-aurora::after {
  content: "";
  inset: 0;
  top: 0;
  background:
    linear-gradient(to top, rgba(0, 3, 84, 0.72) 0%, rgba(0, 3, 84, 0) 46%);
}

/* Fine grid, echoing grid-pattern.tsx on the landing page */
.cover-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(760px circle at 70% 26%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(760px circle at 70% 26%, #000, transparent 74%);
}

.page--cover .page-foot {
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0 var(--page-pad-x);
  padding-inline: 0;
  padding-top: 16px;
}

.page--cover .page-foot .site {
  color: rgba(255, 255, 255, 0.85);
}

.cover-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.01em;
}

.cover-rule {
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0.25));
  margin-bottom: 22px;
}

.cover-to {
  font-size: 17px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.cover-client {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 14px;
  max-width: 20ch;
}

.cover-product {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Column count is set inline by pageCover from the stat count (1-5), so the
   band stays balanced whatever the admin adds or removes. */
.cover-stats {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

/* Four or five cells need tighter type to keep the figures on one line. */
.cover-stats[data-n="4"] .stat .v,
.cover-stats[data-n="5"] .stat .v {
  font-size: 25px;
}

.cover-stats[data-n="4"] .stat,
.cover-stats[data-n="5"] .stat {
  padding: 17px 16px;
}

.cover-stats[data-n="5"] .stat .l {
  font-size: 11.5px;
}

.cover-stats .stat {
  padding: 20px 22px;
}

.cover-stats .stat .v {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
  display: block;
}

.cover-stats .stat .l {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin-top: 6px;
  display: block;
}

.cover-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cover-meta .k {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.52);
  display: block;
  margin-bottom: 6px;
}

.cover-meta .v {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  display: block;
}

/* -------------------------------------------------------------- 2. logos */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.logo-cell {
  height: 74px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(10, 28, 109, 0.035);
}

.logo-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: saturate(0.96);
}

/* ------------------------------------------------------- shared: stat band */

.stat-band {
  position: relative;
  border-radius: var(--radius-glass);
  background: var(--color-brand-500);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 22px 8px;
}

.stat-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px circle at 85% -35%, rgba(74, 114, 187, 0.18), transparent 64%);
}

.stat-band .stat {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2px 18px;
}

.stat-band .stat + .stat {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.14);
}

.stat-band .v {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  display: block;
  line-height: 1.15;
}

.stat-band .l {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  margin-top: 5px;
  display: block;
}

/* ------------------------------------------------------- 3b. lifecycle
   RTL process flow: a "beads on a hairline" numeral track (01 rightmost)
   over a matching grid of step copy, then a navy pillar band reusing the
   stat-band look with 3 (or however many) columns instead of 4. Numerals
   sit in a quiet tinted circle, not a heavy filled one, per Ahmed's call
   against bold-heavy numbers. */

.lifecycle-track {
  position: relative;
  display: grid;
  align-items: center;
  margin-top: 28px;
}

.lifecycle-track::before {
  content: "";
  position: absolute;
  inset-inline: 17px;
  top: 50%;
  height: 1px;
  background: var(--color-gray-200);
  transform: translateY(-50%);
  z-index: 0;
}

.lifecycle-num {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.12);
  color: var(--color-brand-500);
  font-size: 12.5px;
  font-weight: 500;
  display: grid;
  place-items: center;
}

.lifecycle-steps {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  flex: 1;
  align-content: start;
}

.step-col {
  background: #fff;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 16px 18px;
}

.step-col .h-card {
  font-size: 14.5px;
}

.step-col .body-sm {
  font-size: 12.5px;
}

.pillar-band .pillar {
  position: relative;
  z-index: 1;
  padding: 2px 20px;
}

.pillar-band .pillar + .pillar {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.14);
}

.pillar-band .pillar-t {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.pillar-band .pillar-s {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}

/* --------------------------------------------------- 5. audience (rows) */

.aud-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}

.aud-row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-brand-500), var(--color-logo-blue-500));
}

.aud-row .icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.07);
  display: grid;
  place-items: center;
  flex: none;
}

.aud-row .icon-tile svg {
  width: 23px;
  height: 23px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.08);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-brand-500);
}

.chip .tick {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-brand-500);
  display: grid;
  place-items: center;
  flex: none;
}

.chip .tick svg {
  width: 9px;
  height: 9px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
}

/* ---------------------------------------------------------- 7. financial */

.fin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-secondary);
  box-shadow: var(--shadow-card);
  background: #fff;
}

.fin-table thead th {
  background: var(--color-gray-50);
  color: var(--color-slate-500);
  font-size: 12.5px;
  font-weight: 500;
  padding: 13px 20px;
  text-align: start;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--color-gray-200);
}

.fin-table tbody td {
  padding: 12px 20px;
  font-size: 14px;
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-gray-100);
  vertical-align: middle;
}

.fin-table tbody tr:first-child td {
  border-top: 0;
}

.fin-table .pkg {
  font-weight: 500;
  font-size: 15px;
}

.fin-table .pkg small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--color-slate-500);
  margin-top: 4px;
}

/* Totals live inside the table (invoice style). Amount cells share one
   column and one alignment so the figures line up vertically. */
.fin-table .amt {
  text-align: start;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fin-table tfoot td {
  padding: 10px 20px;
  font-size: 13.5px;
  color: var(--color-slate-600);
  border-top: 1px solid var(--color-gray-100);
  vertical-align: middle;
}

.fin-table tfoot .amt {
  font-weight: 500;
  color: var(--color-text-primary);
}

.fin-table tfoot .lbl small {
  display: block;
  font-size: 11.5px;
  color: var(--color-slate-500);
  margin-top: 4px;
  font-weight: 400;
}

/* Grand total: no fill, just a firmer rule above; the navy lives only in the
   figure itself (Ahmed 2026-07-28: last line's number in brand navy, subtle). */
.fin-table tfoot .grand td {
  border-top: 1.5px solid rgba(10, 28, 109, 0.16);
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 15px;
  padding-block: 12px;
}

.fin-table tfoot .grand .amt {
  color: var(--color-brand-500);
  font-size: 19px;
}

.sar {
  height: 0.86em;
  width: 0.77em;
  fill: currentColor;
  flex: none;
  transform: translateY(0.02em);
}

.validity {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 14px;
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.08);
  font-size: 13.5px;
  color: var(--color-brand-500);
}

.validity svg {
  width: 17px;
  height: 17px;
}

.validity svg [stroke] {
  stroke: var(--color-brand-500);
}

/* ---------------------------------------------------------------- 8. terms */

.term-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 20px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(10, 28, 109, 0.04);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-slate-600);
}

.term-item .n {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--color-brand-25);
  border: 1px solid rgba(10, 28, 109, 0.08);
  color: var(--color-brand-500);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 1px;
  direction: ltr;
}

.term-item a {
  color: var(--color-logo-blue-500);
  text-decoration: none;
  font-weight: 500;
  direction: ltr;
  unicode-bidi: isolate;
}

/* CTA band — navy, used on terms + contact pages */
.cta-band {
  position: relative;
  border-radius: var(--radius-glass);
  background: var(--color-brand-500);
  overflow: hidden;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px circle at 86% -45%, rgba(74, 114, 187, 0.18), transparent 64%);
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

.cta-band .t {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.cta-band .s {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
  max-width: 72ch;
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-brand-500);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  flex: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.btn-white svg {
  width: 16px;
  height: 16px;
}

.btn-white svg [stroke] {
  stroke: var(--color-brand-500);
}

/* -------------------------------------------------------------- 9. contact */

.rep-card {
  position: relative;
  border-radius: var(--radius-glass);
  border: 1px solid var(--color-border-secondary);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  overflow: hidden;
}

.rep-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-gray-100);
}

.rep-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-brand-500);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  flex: none;
  direction: ltr;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(10, 28, 109, 0.24);
}

.rep-role {
  font-size: 13px;
  color: var(--color-logo-blue-500);
  font-weight: 500;
  margin: 0 0 4px;
}

.rep-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-brand-500);
  margin: 0;
  letter-spacing: -0.02em;
  direction: ltr;
  text-align: start;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
}

.contact-item .icon-tile {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  display: grid;
  place-items: center;
  flex: none;
}

.contact-item .icon-tile svg {
  width: 19px;
  height: 19px;
}

.contact-item .k {
  font-size: 12px;
  color: var(--color-slate-500);
  display: block;
  margin-bottom: 3px;
}

.contact-item .v {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  display: block;
}

.contact-item .v.ltr {
  direction: ltr;
  text-align: start;
}

/* ------------------------------------------------------------------ print */

@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html,
  body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .page {
    break-after: page;
    page-break-after: always;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .page:last-of-type {
    break-after: auto;
    page-break-after: auto;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    /* Chrome's print-preview compositor (the window.print() path) paints
       large blurred box-shadows as solid slabs and backdrop-filter as gray
       blocks. Headless export doesn't, which is why this only breaks when a
       human exports. Strip both everywhere: cards keep their hairline
       borders for definition, so nothing is left to mis-paint. */
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Effects that leaned on backdrop-blur get a solid-enough fallback. */
  .eyebrow {
    background: #fff;
  }

  .glass {
    background: rgba(255, 255, 255, 0.14);
  }

  /* The cover grid's soft radial fade is a mask-image, which the print
     compositor drops, leaving hard grid lines edge to edge. Print gets a
     mask-free uniform grid at lower line alpha instead. */
  .cover-grid {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  }

  /* Near-no-op saturate on client logos; not worth a compositor surprise. */
  .logo-cell img {
    filter: none !important;
  }
}

/* ------------------------------------------------- certificates page */

/* Column count is set inline by pageCertificates from the visible count, so
   hiding one widens the rest instead of leaving a hole. */
.cert-grid {
  display: grid;
  gap: 16px;
  margin-top: 26px;
  flex: 1;
  min-height: 0;
  align-content: center;
}

.cert-card > .cert-badge {
  margin-bottom: 12px;
}

.cert-card {
  background: #fff;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Fixed-height stage (no box: Ahmed 2026-07-28, drop the gray wells) so four
   logos of very different aspect ratios share one optical baseline instead of
   each setting its own card height. */
.cert-badge {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
}

.cert-badge img {
  max-height: 92px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cert-notes {
  list-style: none;
  margin: 0 0 26px;
  padding: 14px 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-slate-500);
}

/* Compact mode for a fully loaded financial table (4+ rows). Reclaims the
   vertical space that lets 1 package + 5 add-ons + all totals lines coexist
   with the fixed A4 page. Add-on descriptions hide; the package keeps its. */
.fin-table--dense tbody td {
  padding: 8px 20px;
  font-size: 13.5px;
}

.fin-table--dense tbody .pkg {
  font-size: 14px;
}

.fin-table--dense tbody tr:not(:first-child) .pkg small {
  display: none;
}

.fin-table--dense tbody .pkg small {
  margin-top: 2px;
}

.fin-table--dense tfoot td {
  padding: 7px 20px;
  font-size: 13px;
}

.fin-table--dense tfoot .grand td {
  padding-block: 11px;
  font-size: 14px;
}

.fin-table--dense tfoot .grand .amt {
  font-size: 17px;
}

/* ===================================================== English (LTR) deck
   Quote-level language switch (state.quote.lang, js/data.js + js/app.js
   langSwitchGroup()). js/render.js stamps dir="ltr" lang="en" directly on
   the <section class="page"> for an English quote; almost everything above
   already flips for free because it's written with logical properties
   (inset-inline-*, border-inline-*, text-align: start) that respond to the
   computed `direction`. This section covers the handful of rules that
   don't: hand-positioned decorative gradients (physical %, not a logical
   concept in CSS) and the one glyph that visually means "forward" and so
   has to point the other way once reading direction flips.
   ========================================================================== */

.page[dir="ltr"] {
  direction: ltr;
}

/* Interior-page header glow: mirror the two radial anchors so the highlight
   still sits under the logo/eyebrow now that they've swapped sides. */
.page[dir="ltr"] .page-aurora::before {
  background:
    radial-gradient(680px circle at 18% -8%, rgba(74, 114, 187, 0.12), transparent 62%),
    radial-gradient(720px circle at 80% 0%, rgba(207, 224, 251, 0.28), transparent 62%);
}

.page--cover[dir="ltr"] .page-aurora::before {
  background:
    radial-gradient(820px circle at 20% 4%, rgba(74, 114, 187, 0.22), transparent 62%),
    radial-gradient(720px circle at 80% 92%, rgba(31, 80, 171, 0.32), transparent 62%);
}

.page--cover[dir="ltr"] .cover-grid {
  mask-image: radial-gradient(760px circle at 30% 26%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(760px circle at 30% 26%, #000, transparent 74%);
}

/* The rule under "Prepared for" fades away from the text's start edge —
   right in Arabic, left in English — so `to left`/`to right` (a physical
   value; linear-gradient has no logical direction keyword) has to flip. */
.page[dir="ltr"] .cover-rule {
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.25));
}

.page[dir="ltr"] .stat-band::before {
  background: radial-gradient(520px circle at 15% -35%, rgba(74, 114, 187, 0.18), transparent 64%);
}

.page[dir="ltr"] .cta-band::before {
  background: radial-gradient(520px circle at 14% -45%, rgba(74, 114, 187, 0.18), transparent 64%);
}

/* The terms/contact CTA button's trailing glyph is iconsax:arrow-left,
   chosen so it points toward the RTL reading-forward direction (left).
   English reads the other way, so the affordance has to point right
   instead — flip the geometry rather than swap icons. */
.page[dir="ltr"] .btn-white svg {
  transform: scaleX(-1);
}


/* Fewer, wider certificate cards can afford a larger badge and type. */
.cert-grid[data-n="1"] .cert-badge,
.cert-grid[data-n="2"] .cert-badge,
.cert-grid[data-n="3"] .cert-badge {
  height: 118px;
}

.cert-grid[data-n="1"] .cert-badge img,
.cert-grid[data-n="2"] .cert-badge img,
.cert-grid[data-n="3"] .cert-badge img {
  max-height: 78px;
}

.cert-grid[data-n="1"] .cert-card,
.cert-grid[data-n="2"] .cert-card {
  padding: 26px 24px;
}