/* ============================================================
   Tourly Services Deck — Design Tokens
   Warm Saudi luxury · Terracotta + cream + deep slate
   ============================================================ */

:root {
  /* ---- Brand colors ---- */
  --paper:       #FBF7EE;
  --cream:       #F4EEE2;
  --cream-deep:  #ECE3D0;
  --rule:        #D8CCB6;
  --rule-soft:   #E5DAC4;

  --terra:       #C56A41;   /* primary terracotta */
  --terra-soft:  #E1A98A;   /* lighter accent */
  --terra-dark:  #9E5232;   /* darker accent */
  --terra-tint:  #F2DCC9;   /* very soft */

  --slate:       #1B262A;   /* deep dark from logo */
  --slate-2:     #2E3D43;
  --slate-3:     #4B5C63;

  --ink:         #261F18;   /* body text */
  --ink-2:       #5C5045;
  --ink-3:       #8A7E70;

  /* ---- Overlay chrome colors (consumed by code/*-overlay.js) ----
     The commenting, editor, and shortcuts overlays read these via
     `var(--cc-X, #neutralFallback)`. By defining them here, the
     overlays inherit the deck's brand instead of looking generic. */
  --cc-accent:      var(--terra);
  --cc-accent-deep: var(--terra-dark);
  --cc-accent-soft: var(--terra-soft);
  --cc-paper:       var(--paper);
  --cc-paper-soft:  var(--cream);
  --cc-cream-deep:  var(--cream-deep);
  --cc-rule:        var(--rule);
  --cc-rule-soft:   var(--rule-soft);
  --cc-ink:         var(--slate);
  --cc-ink-deep:    var(--ink);
  --cc-bg-cool:     #E8EEF0;
  --cc-ink-mid:     var(--slate-3);

  /* ---- Type scale (1920×1080) ---- */
  --t-display:   132px;
  --t-mega:       96px;
  --t-hero:       80px;
  --t-title:      80px;
  --t-subtitle:   44px;
  --t-lead:       36px;
  --t-body:       28px;
  --t-small:      24px;
  --t-micro:      20px;

  /* ---- Spacing ---- */
  --pad-top:     96px;
  --pad-bottom:  80px;
  --pad-x:       112px;
  --gap-title:   48px;
  --gap-item:    28px;
  --gap-tight:   16px;
}

/* ============================================================
   Base
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: 'Calibri', sans-serif;
  font-feature-settings: "kern", "ss01";
  font-feature-settings: "kern";
  color: var(--ink);
  direction: rtl;
}

deck-stage:not(:defined) { visibility: hidden; }

/* All slides default to cream paper */
deck-stage > section {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  position: relative;
}

/* ============================================================
   Reusable layout primitives
   ============================================================ */

.frame {
  width: 100%;
  height: 100%;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}

.frame--split {
  flex-direction: row;
  padding: 0;
}

/* the slim brand strip that appears at the top-left of every slide */
.chrome {
  position: absolute;
  /* Brand chrome flush against the top-LEFT corner of the slide.
     Faris rejected 32/40px (still too far in) and 40/40px before that.
     16/16px hugs the corner the way the reference screenshot showed —
     editorial but unmistakably anchored to the corner. */
  top: 16px;
  inset-inline-end: 16px;        /* LEFT in RTL — flush to corner */
  inset-inline-start: var(--pad-x);  /* RIGHT in RTL — pager is hidden, this just bounds the chrome flex container */
  display: flex;
  /* In RTL, flex-direction: row-reverse swaps the visual position so the
     first child (.brand) lands on the visual LEFT (inline-end) instead
     of the visual RIGHT (inline-start). */
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  z-index: 5;
}
.chrome .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.005em;
}
.chrome .brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.chrome .pager {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  /* Hidden per user direction — the section dividers already provide
     enough context, the per-slide pager felt repetitive. */
  display: none;
}

/* eyebrow tag above titles */
/* 2026-05-17 (Faris): bumped from var(--t-micro) (20px) to 30px deck-wide.
   Eyebrow is now a real editorial label, not a tiny tag. Letter-spacing
   tightened slightly to compensate for the larger size; dash widened. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 30px;
  letter-spacing: 0.18em;
  color: var(--terra-dark);
  font-weight: 700;
  text-transform: none;
  margin-bottom: 32px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 2px;
  background: var(--terra);
}

/* Big slide title */
.title {
  font-size: var(--t-title);
  line-height: 1.08;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: -0.01em;
  margin: 0 0 var(--gap-title);
  text-wrap: balance;
}
.title--hero { font-size: var(--t-hero); }

.subtitle {
  font-size: var(--t-subtitle);
  line-height: 1.18;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.35;
  font-weight: 400;
  color: var(--ink-2);
  max-width: 1100px;
}

.body {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 900px;
}

.body strong {
  color: var(--slate);
  font-weight: 600;
}

.small {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--ink-3);
}

.micro {
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--ink-3);
  letter-spacing: 0.03em;
}

.source {
  font-size: 18px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--rule-soft);
}
/* 2026-05-17: source citations are clickable hyperlinks. Style as terra
   so it's clear they're links, but keep underline subtle so the source
   line still reads as one editorial citation strip. */
.source a {
  color: var(--terra-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(150, 73, 39, 0.4);
  transition: text-decoration-color 0.2s, color 0.2s;
}
.source a:hover {
  color: var(--terra);
  text-decoration-color: var(--terra);
}

/* Numerals */
.num {
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

/* ============================================================
   Section header slide (used for big section breaks)
   ============================================================ */

.section-cover {
  background: var(--slate);
  color: var(--paper);
}
.section-cover .frame {
  justify-content: center;
  align-items: flex-start;
}
.section-cover .index {
  font-family: 'Calibri', sans-serif;
  font-size: 280px;
  font-weight: 200;
  line-height: 0.9;
  color: var(--terra);
  letter-spacing: -0.04em;
}
.section-cover .label {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  color: var(--terra-soft);
  margin-bottom: 24px;
}
.section-cover h2 {
  font-size: var(--t-hero);
  font-weight: 500;
  margin: 24px 0 0;
  color: var(--paper);
  letter-spacing: -0.01em;
}

/* ============================================================
   Cover slide
   ============================================================ */

.cover {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  height: 100%;
  width: 100%;
}
.cover__copy {
  padding: 96px 112px 80px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.cover__mark {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cover__mark img { width: 72px; height: 72px; }
.cover__mark .name {
  font-size: 32px;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: -0.01em;
}
.cover__mark .name small {
  font-size: 20px;
  color: var(--ink-3);
  display: block;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.cover__title {
  font-size: 96px;
  line-height: 1.06;
  font-weight: 600;
  color: var(--slate);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cover__title em {
  font-style: normal;
  color: var(--terra);
  font-weight: 500;
}
.cover__sub {
  font-size: 32px;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 620px;
  margin: 32px 0 0;
  font-weight: 400;
}
.cover__meta {
  display: flex;
  gap: 48px;
  align-items: baseline;
  color: var(--ink-3);
  font-size: 20px;
  letter-spacing: 0.06em;
}
.cover__meta b { color: var(--slate); font-weight: 600; letter-spacing: 0; font-size: 22px; }
.cover__image {
  background-size: cover;
  background-position: center;
  position: relative;
}
.cover__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, transparent 70%, rgba(0,0,0,0.05));
}

/* ============================================================
   Stat tile
   ============================================================ */

.stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat__num {
  font-family: 'Calibri', sans-serif;
  font-size: 132px;
  line-height: 1;
  font-weight: 300;
  color: var(--terra);
  letter-spacing: -0.04em;
}
.stat__num--sm { font-size: 96px; font-weight: 300; }
.stat__num--xs { font-size: 72px; font-weight: 400; }
.stat__label {
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: 1.4;
  font-weight: 500;
}
.stat__sub {
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.4;
}

/* ============================================================
   Card grid
   ============================================================ */

.cards {
  display: grid;
  gap: 28px;
}
.cards--2 { grid-template-columns: 1fr 1fr; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card--cream { background: var(--cream); border-color: var(--rule); }
.card--dark  { background: var(--slate); color: var(--paper); border: none; }
.card--dark .card__title { color: var(--paper); }
.card--dark .card__body { color: rgba(251,247,238,0.7); }

.card__index {
  font-family: 'Calibri', sans-serif;
  font-size: 36px;
  color: var(--terra);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.card__title {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--slate);
  margin: 0;
}
.card__body {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   Service hero card (big)
   ============================================================ */

.service-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card__img {
  height: 320px;
  background-size: cover;
  background-position: center;
}
.service-card__body {
  padding: 36px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.service-card__title {
  font-size: 44px;
  font-weight: 600;
  color: var(--slate);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.service-card__desc {
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.service-card__for {
  margin-top: auto;
  padding-top: 16px;
  font-size: var(--t-small);
  color: var(--ink-3);
  border-top: 1px solid var(--rule-soft);
}

/* ============================================================
   Big number row (used on stats slides)
   ============================================================ */

.stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  align-items: end;
}
.stat-row .stat__num { font-size: 108px; }
.stat-row--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   Process timeline
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}

/* ============================================================
   Tables / comparison
   ============================================================ */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.tbl th, .tbl td {
  padding: 22px 20px;
  text-align: start;
  border-bottom: 1px solid var(--rule-soft);
}
.tbl th {
  font-weight: 600;
  color: var(--ink-3);
  font-size: 20px;
  letter-spacing: 0.04em;
  background: var(--cream);
}
.tbl td {
  color: var(--ink);
  font-size: 22px;
}
.tbl td.num, .tbl th.num {
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
}
.tbl tr.highlight td {
  background: var(--terra-tint);
  color: var(--slate);
  font-weight: 600;
}

/* ============================================================
   Dashboard mock
   ============================================================ */

.dash {
  background: var(--slate);
  color: var(--paper);
  border-radius: 22px;
  padding: 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: 'Calibri', sans-serif;
}
.dash__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.dash__tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash__tile .v {
  font-family: 'Calibri', sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.dash__tile .v.accent { color: var(--terra-soft); }
.dash__tile .k {
  font-size: 13px;
  color: rgba(251,247,238,0.6);
}

/* ============================================================
   Photo block
   ============================================================ */

.photo {
  background-size: cover;
  background-position: center;
  border-radius: 22px;
  height: 100%;
  width: 100%;
  box-shadow: 0 30px 80px -40px rgba(27,38,42,0.4);
}

/* ============================================================
   Hero ROI math (developer slide)
   ============================================================ */

.roi {
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.roi__row {
  display: contents;
}
.roi__cell {
  padding: 24px 28px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 22px;
  color: var(--ink);
}
.roi__row:last-child .roi__cell { border-bottom: none; }
.roi__head {
  background: var(--cream);
  font-weight: 600;
  color: var(--ink-2);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.roi__label {
  background: var(--cream-deep);
  font-weight: 600;
  color: var(--slate);
  font-size: 20px;
}
.roi__best {
  background: var(--terra-tint);
  color: var(--slate);
  font-weight: 600;
}
.roi__num {
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 400;
}
.roi__num.big { font-size: 32px; font-weight: 500; color: var(--terra-dark); }

/* ============================================================
   Bullet list
   ============================================================ */

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.checks li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink-2);
}
.checks li::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--terra);
  border-radius: 50%;
  margin-top: 16px;
}
.checks li strong { color: var(--slate); font-weight: 600; display: block; margin-bottom: 4px; font-size: 26px; }

/* ---- Service slides — consistent layout (image on the RIGHT, content on the LEFT).
   Service 1 and Service 2 now both have the image as the first child in source
   order, so RTL flexbox places it at the visual right. Content is the LAST child.
   Fonts are scaled UP so the slide fills its vertical space with no big empty
   gap at the bottom. ---- */
#service-built .frame--split > div:last-child,
#service-offplan .frame--split > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 2026-05-17 Faris (round 2): fonts bumped hard, content top-aligned,
   left-padding pushed wide so the body never overlaps the bottom-left
   QR card. Eliminates the top whitespace and fills the slide. */
#service-built .eyebrow,
#service-offplan .eyebrow {
  font-size: 36px;
  font-weight: 700;
}
.service__lead {
  font-size: 40px !important;
  line-height: 1.4 !important;
  font-weight: 500;
  color: var(--ink);
  margin: 0 !important;
  letter-spacing: -0.01em;
}
.service__checks {
  gap: 20px !important;
  margin: 0 !important;
  padding: 0;
}
.service__checks li {
  font-size: 26px !important;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  grid-template-columns: 28px 1fr;
  gap: 16px;
}
.service__checks li::before {
  width: 12px !important;
  height: 12px !important;
  margin-top: 16px !important;
}
.service__footnote {
  font-size: 20px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0 !important;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  font-style: italic;
}

/* keep the legacy override block alive for any other surface using
   #service-built .checks / .lead (none right now, but safe). */
#service-built .checks li,
#service-offplan .checks li {
  font-size: 19px;
  line-height: 1.45;
  grid-template-columns: 26px 1fr;
  gap: 14px;
}
#service-built .checks li::before,
#service-offplan .checks li::before {
  width: 11px;
  height: 11px;
  margin-top: 11px;
}
#service-built .checks li strong,
#service-offplan .checks li strong {
  font-size: 24px;
  margin-bottom: 4px;
}

/* ============================================================
   Thank you / contact
   ============================================================ */

.thankyou {
  background: var(--slate);
  color: var(--paper);
}
.thankyou .frame { justify-content: center; }
.thankyou h1 {
  font-size: 168px;
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.thankyou h1 em {
  font-style: normal;
  color: var(--terra-soft);
}
.thankyou .sub {
  font-size: 36px;
  color: rgba(251,247,238,0.7);
  margin: 28px 0 80px;
}
.thankyou .contact {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.thankyou .contact dt {
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--terra-soft);
  margin-bottom: 10px;
}
.thankyou .contact dd {
  margin: 0;
  font-family: 'Calibri', sans-serif;
  font-size: 32px;
  color: var(--paper);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.thankyou .contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(225, 169, 138, 0.35);
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}
.thankyou .contact a:hover {
  color: var(--terra-soft);
  border-bottom-color: var(--terra-soft);
}

/* ============================================================
   Misc
   ============================================================ */

.spacer { flex: 1; }
.row { display: flex; gap: 24px; }
.col { display: flex; flex-direction: column; gap: 24px; }

.kbd {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 10px 22px;
  font-size: var(--t-small);
  color: var(--ink-2);
  width: max-content;
}

.tag {
  display: inline-block;
  padding: 8px 18px;
  background: var(--terra-tint);
  color: var(--terra-dark);
  border-radius: 100px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* QR placeholder */
.qr {
  width: 360px;
  height: 360px;
  background: var(--paper);
  border-radius: 22px;
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr svg { width: 100%; height: 100%; }

/* ============================================================
   v2 — Premium rewrite patterns
   ============================================================ */

/* ---- Cover v3 — split layout, half image + slate panel with white type ---- */
.cover-slide--v3 .cover-v3 {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--slate);
}
.cover-v3__image {
  flex: 1;
  background-size: cover;
  background-position: center;
}
.cover-v3__panel {
  flex: 1;
  background: var(--slate);
  color: var(--paper);
  padding: 80px 112px;
  display: flex;
  flex-direction: column;
  /* 2026-05-17 (Faris): added eyebrow + rule + tagline inside the body
     and a contact strip at the bottom. Switched back to space-between
     so contact pins to the bottom of the panel while the body sits in
     the upper-middle. */
  justify-content: space-between;
  gap: 56px;
  position: relative;
}
.cover-v3__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cover-v3__brand img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.cover-v3__name {
  font-size: 40px;
  color: var(--paper);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cover-v3__body {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* 2026-05-17 cover additions */
.cover-v3__eyebrow {
  font-size: 22px;
  letter-spacing: 0.22em;
  color: var(--terra-soft);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 4px;
}
.cover-v3__eyebrow::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 2px;
  background: var(--terra);
}
.cover-v3__rule {
  width: 84px;
  height: 3px;
  background: var(--terra);
  margin: 8px 0 4px;
  border: 0;
}
.cover-v3__tagline {
  font-size: 28px;
  color: rgba(251, 247, 238, 0.88);
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  max-width: 620px;
  letter-spacing: -0.005em;
}
.cover-v3__contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  font-size: 19px;
  font-weight: 500;
  color: rgba(251, 247, 238, 0.78);
  padding-top: 28px;
  border-top: 1px solid rgba(251, 247, 238, 0.16);
  letter-spacing: 0.01em;
}
.cover-v3__contact a {
  color: rgba(251, 247, 238, 0.92);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.cover-v3__contact a:hover {
  color: var(--terra-soft);
}
.cover-v3__contact-sep {
  color: rgba(251, 247, 238, 0.32);
}
.cover-v3__title {
  font-size: 110px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
.cover-v3__title em {
  font-family: 'Calibri', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--paper);
  letter-spacing: 0;
}
.cover-v3__outcome {
  font-size: 30px;
  line-height: 1.45;
  color: var(--paper);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.cover-v3__sub {
  font-size: 22px;
  line-height: 1.5;
  color: rgba(251, 247, 238, 0.7);
  margin: 0;
}
.cover-v3__corner-num {
  position: absolute;
  bottom: 56px;
  inset-inline-end: 112px;
  font-family: 'Calibri', sans-serif;
  font-size: 22px;
  color: rgba(251, 247, 238, 0.4);
  letter-spacing: 0.25em;
}

/* ---- About v2 — slide 2 two-column (right text · left tiles) ---- */
.about-v2 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.about-v2__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}
.about-v2__copy .lead {
  margin: 0;
  max-width: none;
}
.about-v2__copy .body {
  margin: 0;
  max-width: none;
}

/* Top line: eyebrow on the right (RTL start) + tiny year/location stamp
   on the left. Anchors the slide in time & place before the title speaks. */
.about-v2__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}
/* 2026-05-17: slide-4-specific eyebrow override removed — the new
   global .eyebrow size (30px) already matches what we wanted here. */

/* PropTech tag — small italic English label sitting after the Arabic
   title's emphasised noun-phrase. Per Faris's slide-4 instruction
   (override of CLAUDE.md §7b Rule 1 for this specific tag only). */
.about-v2__proptech-tag {
  display: inline-block;
  margin-inline-start: 16px;
  vertical-align: middle;
  font-family: 'Calibri', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.42em;
  color: var(--terra-dark);
  letter-spacing: 0.06em;
  border-inline-start: 2px solid var(--terra);
  padding-inline-start: 14px;
  line-height: 1;
  transform: translateY(-4px);
}
.about-v2__stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 700;
  text-transform: none;
}
.about-v2__stamp > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 3px rgba(197, 106, 65, 0.18);
  display: inline-block;
  flex: 0 0 auto;
}

/* Title — let the terra accent on the closing noun-phrase carry the
   editorial weight. Em is rendered upright, not italic. */
.about-v2__title em {
  font-style: normal;
  color: var(--terra-dark);
}

/* Terra rule between the title and the lead — short, weighted, on-brand. */
.about-v2__rule {
  width: 84px;
  height: 4px;
  background: var(--terra);
  border-radius: 2px;
  margin: 2px 0 6px;
}

/* Lead — softly italicised so it reads like the company's promise vs a
   regular paragraph. Calibri italic in Arabic is subtle enough to stay
   readable while clearly setting the lead apart. */
.about-v2__lead {
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

/* Services mini-heading — small terra tag + matching sub-line. Replaces
   the previous plain 'نُقدّم خدمتَين متكاملتَين' paragraph with a tagged
   header so the reader knows the cards below are 'our services'. */
.about-v2__services-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
}
.about-v2__services-head-tag {
  font-size: 22px;
  letter-spacing: 0.18em;
  color: var(--terra-dark);
  font-weight: 800;
  flex: 0 0 auto;
}
.about-v2__services-head-sub {
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* Closing claim — pulled out of the body flow with a terra left-rule
   so it reads as the company's commitment, not a flat paragraph. */
.about-v2__claim {
  border-inline-start: 4px solid var(--terra);
  padding: 22px 26px;
  background: linear-gradient(90deg, rgba(197, 106, 65, 0.08), transparent);
  border-radius: 0 12px 12px 0;
  font-weight: 500;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.5;
  margin-top: 4px;
}

/* ---- About-slide service mini-cards ----
   Two side-by-side cards inside the copy column, each showing one of
   the two Tourly services with image + label + title + brief desc. */
.about-v2__services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 4px 0;
}
/* Service cards on the about slide — simple icon + bold text, no
   background imagery. Faris's note: 'overkill before, simple cards now.'
   2026-05-17: padding + gap bumped for breathing room. */
.about-v2__service {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 26px;
  background: var(--cream);
  border-radius: 16px;
  padding: 32px 30px !important;
  border: 1px solid var(--rule-soft);
  position: relative;
  overflow: hidden;
}
.about-v2__service:nth-child(2) {
  background: var(--paper);
}
.about-v2__service::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 100%;
  background: var(--terra);
}
.about-v2__service[hidden_legacy] {
  /* placeholder to preserve original rule below */
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-inline-start: 4px solid var(--terra);
  border-radius: 14px;
  padding: 20px 22px;
  min-height: 0;
}
.about-v2__service__icon {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  object-fit: contain;
  margin-top: 4px;
  /* The icons are black line-art on transparent — recolor to terra so
     they read on-brand without modifying the source PNG. */
  filter:
    brightness(0)
    saturate(100%)
    invert(48%)
    sepia(33%)
    saturate(1200%)
    hue-rotate(346deg)
    brightness(88%)
    contrast(86%);
}
.about-v2__service__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.about-v2__service__eyebrow {
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--terra-dark);
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}
.about-v2__service__title {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.about-v2__service__desc {
  font-size: 21px;
  color: var(--ink-2);
  line-height: 1.55;
  font-weight: 500;
  display: block;
  margin-top: 10px;
}

.about-v2__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  align-content: center;
}
.about-v2__tile {
  background-color: var(--cream);
  background-repeat: no-repeat;
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  padding: 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Each tile pulls a full Nano Banana photo as its background. We keep the
   photo visible (low-opacity overlay) and rely on a darker gradient at the
   bottom of the tile + a text-shadow on the text to keep things legible.
   The overlay is just enough to soften the contrast in the photo so the
   number reads, never enough to wash the picture out. */
/* Slide-4 image swap (2026-05-17): founding tile takes the Riyadh-skyline
   image that used to live on the 24/7 tile (Faris's idea — drops Musab's
   star-on-Riyadh problem entirely). Treated as a DARK tile now since the
   skyline photo is dark. The number ٢٠٢٥ + micro + small flip to paper
   colour via the rules further down. */
.about-v2__tile--founding {
  background-color: var(--slate);
  border-color: var(--slate);
  background-image:
    linear-gradient(180deg, rgba(27,38,42,0.30) 0%, rgba(27,38,42,0.60) 50%, rgba(27,38,42,0.85) 100%),
    url('assets/generated/about-tile-support.png');
  background-size: cover, cover;
  background-position: center, center;
}
.about-v2__tile--specialty {
  background-image:
    linear-gradient(180deg, rgba(251,247,238,0.20) 0%, rgba(251,247,238,0.55) 50%, rgba(251,247,238,0.75) 100%),
    url('assets/generated/about-tile-specialty.png');
  background-size: cover, cover;
  background-position: center, center;
}
.about-v2__tile--terra {
  background-color: var(--terra);
  border-color: var(--terra);
  background-image:
    linear-gradient(180deg, rgba(197,106,65,0.30) 0%, rgba(197,106,65,0.65) 50%, rgba(197,106,65,0.85) 100%),
    url('assets/generated/about-tile-commitment.png');
  background-size: cover, cover;
  background-position: center, center;
}
.about-v2__tile--slate {
  background-color: var(--slate);
  border-color: var(--slate);
  background-image:
    linear-gradient(180deg, rgba(27,38,42,0.10) 0%, rgba(27,38,42,0.45) 55%, rgba(27,38,42,0.85) 100%),
    url('assets/generated/about-tile-support-saudi.png');
  background-size: cover, cover;
  background-position: center, center 25%;
}
/* Text shadow so the labels read clearly against the photo at the top of
   the tile where the overlay is lightest. */
.about-v2__tile--specialty .micro {
  text-shadow: 0 1px 4px rgba(251, 247, 238, 0.8);
}
.about-v2__tile--founding .micro,
.about-v2__tile--founding .small,
.about-v2__tile--terra .micro,
.about-v2__tile--terra .small,
.about-v2__tile--slate .micro,
.about-v2__tile--slate .small {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.about-v2__num {
  font-family: 'Calibri', sans-serif;
  font-size: 88px;
  font-weight: 600;
  line-height: 1;
  color: var(--slate);
  letter-spacing: -0.03em;
  text-shadow: 0 2px 12px rgba(251, 247, 238, 0.65);
}
/* Founding/terra/slate tiles are dark photo cards; flip number + label
   colours to paper so they read on the dark gradient. */
.about-v2__tile--founding .about-v2__num,
.about-v2__tile--terra .about-v2__num,
.about-v2__tile--slate .about-v2__num {
  color: var(--paper);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  font-weight: 700;
}
.about-v2__num--label {
  font-size: 52px;
  font-weight: 700;
  color: var(--slate);
  line-height: 1.15;
}
/* Bump the eyebrow and supporting line size + contrast so they don't
   merge with the photo backgrounds.
   2026-05-17: micro bumped 14 → 22 per Faris (Musab's "way too small"). */
.about-v2__tile .micro {
  font-size: 22px !important;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--terra-dark) !important;
}
.about-v2__tile--founding .micro,
.about-v2__tile--terra .micro,
.about-v2__tile--slate .micro {
  color: var(--paper) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.about-v2__tile .small {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 500;
}
.about-v2__tile--founding .small,
.about-v2__tile--terra .small,
.about-v2__tile--slate .small {
  color: rgba(251, 247, 238, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ---- Cover v2 — full-bleed editorial ---- */
.cover-slide--v2 .cover-v2 {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.cover-v2__gradient {
  position: absolute;
  inset: 0;
  background:
    /* darker pool around the headline (bottom-start corner in RTL) */
    radial-gradient(ellipse 1100px 700px at 28% 78%, rgba(27, 38, 42, 0.92) 0%, rgba(27, 38, 42, 0.55) 45%, rgba(27, 38, 42, 0) 80%),
    /* subtle bottom-to-top wash for the contact zone */
    linear-gradient(to top, rgba(27, 38, 42, 0.65) 0%, rgba(27, 38, 42, 0.0) 55%);
}
.cover-v2__brand {
  position: absolute;
  top: 56px;
  inset-inline-end: 96px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
}
.cover-v2__brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.cover-v2__name {
  font-size: 28px;
  color: var(--paper);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cover-v2__corner-num {
  position: absolute;
  bottom: 56px;
  inset-inline-end: 96px;
  font-family: 'Calibri', sans-serif;
  font-size: 24px;
  color: rgba(251, 247, 238, 0.5);
  letter-spacing: 0.2em;
  z-index: 3;
}
.cover-v2__copy {
  position: absolute;
  inset-inline-start: 112px;
  bottom: 96px;
  max-width: 1100px;
  z-index: 2;
  color: var(--paper);
}
.cover-v2__title {
  font-size: 128px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 28px;
  text-wrap: balance;
}
.cover-v2__title em {
  font-family: 'Calibri', sans-serif;
  font-style: italic;
  font-weight: 500;
  color: var(--terra-soft);
  letter-spacing: 0;
}
.cover-v2__outcome {
  font-size: 30px;
  line-height: 1.45;
  color: var(--paper);
  font-weight: 500;
  margin: 0 0 18px;
  max-width: 1000px;
  text-wrap: balance;
}
.cover-v2__sub {
  font-size: 22px;
  line-height: 1.5;
  color: rgba(251, 247, 238, 0.7);
  margin: 0;
  max-width: 1000px;
}

/* ---- Team portraits ---- */
/* ============================================================
   Founding team — premium editorial layout (slide 5)
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  margin-top: 28px;
  flex: 1;
  align-content: center;
  padding: 0 12px;
}
.founder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.founder__photo-wrap {
  position: relative;
  width: 380px;
  height: 380px;
  margin-bottom: 32px;
}
/* Decorative accent block behind the photo — terra-orange per Faris's
   follow-up: the portraits stay on black backgrounds, the accent block
   peeking out behind goes terra so the slide pops on warm brand color
   instead of double-black. Offset 16px down-and-out for the magazine
   cover treatment. */
.founder__photo-wrap::before {
  content: "";
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: var(--terra);
  opacity: 1;
  z-index: 0;
  box-shadow: 0 12px 36px rgba(197, 106, 65, 0.25);
}
.founder:nth-child(2) .founder__photo-wrap::before {
  background: var(--terra);
  opacity: 1;
}
.founder:nth-child(3) .founder__photo-wrap::before {
  background: var(--terra);
  opacity: 1;
}
.founder__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background-size: cover;
  background-position: center top;
  /* Unified black background under every portrait — matches the
     generated black-background photos so any transparent edges still
     read as solid black, not cream. */
  background-color: #000;
  box-shadow:
    0 1px 3px rgba(27, 38, 42, 0.06),
    0 12px 32px rgba(27, 38, 42, 0.10);
  filter: saturate(0.95) contrast(1.02);
}
.founder__num {
  position: absolute;
  top: -18px;
  inset-inline-start: -18px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--terra);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 28px 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 18px rgba(197, 106, 65, 0.35);
  border: 3px solid var(--paper);
  direction: ltr;
}
.founder__rule {
  width: 56px;
  height: 3px;
  background: var(--terra);
  margin-bottom: 16px;
  border-radius: 2px;
}
.founder__role {
  font-size: 24px;
  font-weight: 700;
  color: var(--terra-dark);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.founder__name {
  font-size: 56px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  line-height: 1.05;
}
.founder__bio {
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 420px;
  margin: 0;
  font-weight: 500;
}

/* ---- Market timeline (slide 4) ---- */
.market-timeline {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.market-timeline__step {
  flex: 1;
  padding: 28px 32px;
  background: var(--cream);
  border-radius: 16px;
  border: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.market-timeline__step--featured {
  background: var(--slate);
  color: var(--paper);
  border-color: var(--slate);
}
.market-timeline__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra);
  font-size: 36px;
  font-weight: 300;
  width: 36px;
  opacity: 0.7;
  /* The timeline reads right-to-left chronologically (RTL).
     The arrow visually points LEFT to follow the flow. */
}

/* ---- Services hub: compact card variant for slide 5 ---- */
.service-card--compact {
  flex-direction: row;
  align-items: center;
  background: var(--cream);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  height: 260px;
}
.service-card--compact .service-card__img {
  width: 260px;
  height: 100%;
  flex-shrink: 0;
  border-radius: 0;
}
.service-card--compact .service-card__body {
  padding: 28px 36px;
  gap: 10px;
}
.service-card--compact .service-card__title {
  font-size: 32px;
  margin: 6px 0;
}
.service-card--compact .service-card__desc {
  font-size: 20px;
  line-height: 1.5;
}

/* ---- Floating QR card at top-left corner (slides 6, 7) ---- */
/* 2026-05-17 Faris: bottom-left, with the right size — small enough
   that it doesn't overlap the second bullet, big enough to scan
   easily. After bumping bullets up, the QR card shrank to 220px
   wide (180px QR image). */
.qr-corner {
  position: absolute;
  bottom: 48px;
  left: 48px;
  top: auto;
  z-index: 4;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  padding: 18px 16px 14px;
  box-shadow: 0 18px 44px rgba(27, 38, 42, 0.24),
              0 3px 10px rgba(27, 38, 42, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 220px;
  overflow: hidden;
}
.qr-corner::before {
  /* Thin terra accent strip at top — anchors the card to the brand. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--terra) 0%, var(--terra-soft) 100%);
}
.qr-corner__img {
  /* Final size after iteration: 180px reads cleanly to a phone camera
     from ~1.5m and still fits the redesigned card without overlapping
     the body bullets above. */
  width: 180px;
  height: 180px;
  border-radius: 8px;
  display: block;
}
.qr-corner__label {
  font-size: 14px;
  color: var(--slate);
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-top: 2px;
}
/* Click-to-open button under the QR. Styled as a proper terra-filled
   button so PDF readers (who can't scan the QR but can click the link)
   spot the action at a glance. */
.qr-corner__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding: 9px 12px;
  font-size: 13px;
  text-align: center;
  color: var(--paper);
  background: var(--terra);
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(197, 106, 65, 0.32);
  transition: background 200ms ease, transform 120ms ease;
  width: 100%;
  box-sizing: border-box;
}
.qr-corner__link::before {
  content: "↗";
  font-size: 15px;
  font-weight: 800;
  display: inline-block;
}
.qr-corner__link:hover {
  background: var(--terra-dark);
  transform: translateY(-1px);
}

/* Slide 5 audience-map removed — service cards now expand to fill the slide */
.services-hub-grid {
  flex: 1;
  align-items: stretch;
}
.service-card--tall {
  height: auto;
  min-height: 400px;
}
.service-card--tall .service-card__img {
  width: 45%;
}
.service-card--tall .service-card__body {
  padding: 40px 44px;
  gap: 14px;
  justify-content: center;
}
.service-card--tall .service-card__title {
  font-size: 38px;
  margin: 10px 0;
}
.service-card--tall .service-card__desc {
  font-size: 22px;
  line-height: 1.55;
}

/* ---- Audience map (slide 5) ---- */
.audience-map {
  background: var(--terra-tint);
  border-radius: 18px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.audience-map__row {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 1fr;
  align-items: center;
  gap: 32px;
  padding: 14px 0;
}
.audience-map__row + .audience-map__row {
  border-top: 1px solid rgba(158, 82, 50, 0.18);
}
.audience-map__who {
  display: flex;
  align-items: center;
  gap: 18px;
}
.audience-map__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra-dark);
}
.audience-map__icon svg {
  width: 28px;
  height: 28px;
}
.audience-map__label {
  font-size: 22px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 4px;
}
.audience-map__primary {
  font-size: 16px;
  color: var(--terra-dark);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.audience-map__what {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---- Dashboard enhancement (slide 8) ---- */
.dash--hero {
  padding: 32px 40px;
}
.dash__tile--accent {
  background: rgba(197, 106, 65, 0.12);
  border: 1px solid rgba(197, 106, 65, 0.35);
}
.dash__behavior {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash__behavior-row {
  display: grid;
  grid-template-columns: 1fr 60px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "label val"
    "bar bar";
  align-items: center;
  gap: 4px 12px;
}
.dash__behavior-label {
  grid-area: label;
  font-size: 13px;
  color: rgba(251, 247, 238, 0.7);
}
.dash__behavior-bar {
  grid-area: bar;
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.dash__behavior-bar::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--terra-soft), var(--terra));
  border-radius: 999px;
}
.dash__behavior-bar--hot::after {
  background: linear-gradient(90deg, var(--terra), #E1A98A);
  box-shadow: 0 0 16px rgba(197, 106, 65, 0.5);
}
.dash__behavior-val {
  grid-area: val;
  font-family: 'Calibri', sans-serif;
  font-size: 15px;
  color: var(--paper);
  font-weight: 500;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* ---- Dashboard compact feature columns (link tracking, lead scoring, behavior) ---- */
.dash__features {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dash__feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash__feature-title {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--terra-soft);
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.dash__feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash__feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
}
.dash__feature-tag {
  color: rgba(251, 247, 238, 0.75);
}
.dash__feature-val {
  color: var(--paper);
  font-weight: 500;
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
}
.dash__feature-score {
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
}
.dash__feature-score--hot {
  background: rgba(197, 106, 65, 0.22);
  color: var(--terra-soft);
  border: 1px solid rgba(197, 106, 65, 0.4);
}
.dash__feature-score--warm {
  background: rgba(225, 169, 138, 0.12);
  color: #E1A98A;
  border: 1px solid rgba(225, 169, 138, 0.3);
}
.dash__feature-score--cold {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(251, 247, 238, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---- Dashboard qualifier note (slide 8) ---- */
.dashboard-qualifier {
  margin-top: 28px;
  padding: 20px 28px;
  background: var(--cream);
  border-radius: 14px;
  border-inline-start: 4px solid var(--terra);
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink-2);
}
.dashboard-qualifier strong {
  color: var(--slate);
}

/* ---- Universal proof grid (slide 9) ---- */
.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
  flex: 1;
  align-content: center;
}
.proof-grid--4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
}
.proof-grid--4 .proof-stat__num {
  font-size: 92px;
  letter-spacing: -0.035em;
}
.proof-grid--4 .proof-stat__label {
  font-size: 18px;
  line-height: 1.4;
}
.proof-grid--4 .proof-pair {
  gap: 24px;
}
.proof-grid--iconic .proof-group {
  padding: 28px 24px;
  background: var(--cream);
  border-radius: 18px;
  border: 1px solid var(--rule-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.proof-grid--iconic .proof-group:hover {
  transform: translateY(-4px);
  border-color: var(--terra);
  box-shadow: 0 10px 26px rgba(197, 106, 65, 0.15);
}
.proof-group__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra);
  margin-bottom: 18px;
}
.proof-group__icon svg {
  width: 32px;
  height: 32px;
}
.proof-grid--iconic .proof-group__label {
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.proof-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.proof-group__label {
  font-size: 18px;
  letter-spacing: 0.2em;
  color: var(--terra-dark);
  font-weight: 700;
  text-transform: none;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--terra-tint);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.proof-group__sub {
  font-family: 'Calibri', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.proof-pair {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.proof-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proof-stat__num {
  font-family: 'Calibri', sans-serif;
  font-size: 120px;
  font-weight: 300;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.04em;
}
.proof-stat__label {
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-2);
}

.proof-local {
  margin-top: 28px;
  padding: 18px 28px;
  background: var(--terra-tint);
  border-radius: 12px;
  border-inline-start: 4px solid var(--terra);
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
}
.proof-local strong {
  color: var(--terra-dark);
  font-weight: 700;
}

/* ============================================================
   DASHBOARD SLIDE V3 — Product mockup (data) + insight panel (commentary)
   side by side. Dashboard shows raw data only. Insights live OUTSIDE
   the mockup on a cream sidebar, because they're DERIVED from the data
   (the platform doesn't generate them — we read them).
   ============================================================ */
.dashboard-slide {
  background: var(--slate);
}
.dashboard-slide .frame { display: none; }
/* Per Faris: the dashboard IS the slide. Hide the top-right brand mark
   (the logo lives inside the dashboard's web-nav instead) and let the
   slate product run edge-to-edge with zero outer padding. */
.dashboard-slide .chrome { display: none; }
.dashboard-slide .dash2 {
  padding: 0;
}
.dashboard-slide .dash2__product--fullscreen {
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================
   ASSET SLIDE (slide 15) — "What Tourly adds to your marketing"
   2-column comparison vs today's flat tools, on a slate-dark stage
   with a softly darkened Saudi-villa-with-phone hero image as bg.
   3 rows generalised across developers / agencies / owners:
   interaction type · interaction duration · reusability.
   ============================================================ */
.asset-slide {
  background: var(--slate);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

/* Background image — heavy darken so the comparison reads clearly,
   keeping just enough warmth that the slide doesn't feel flat. */
.asset__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.32;
  filter: contrast(1.05);
  pointer-events: none;
  z-index: 0;
}
.asset-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(27, 38, 42, 0.86) 0%, rgba(27, 38, 42, 0.72) 50%, rgba(27, 38, 42, 0.95) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Brand mark on the slate slide reads in cream */
.asset-slide .chrome {
  color: rgba(251, 247, 238, 0.7);
  z-index: 5;
}
.asset-slide .brand { color: var(--paper); }

.asset {
  position: relative;
  z-index: 2;
  /* Tightened top/bottom padding 2026-05-17 — too much white space at
     top/bottom; pulled in 96/60 → 64/48 so the table can occupy more
     of the slide. */
  padding: 48px 72px 40px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.asset__head { display: flex; flex-direction: column; gap: 10px; }
.asset__eyebrow {
  font-size: 20px;
  letter-spacing: 0.22em;
  color: var(--terra-soft);
  font-weight: 700;
  margin-bottom: 8px;
}
.asset__title {
  font: 700 72px 'Calibri', sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--paper);
  margin: 0;
}
.asset__title em {
  font-style: normal;
  color: var(--terra-soft);
}
.asset__lead {
  font-size: 26px;
  line-height: 1.45;
  color: rgba(251, 247, 238, 0.82);
  max-width: 1500px;
  margin: 8px 0 0;
  font-weight: 500;
}

/* Comparison table — slate-tinted card on the slate slide, with a
   subtle inner border so it reads as one panel. */
.asset-compare {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  min-height: 0;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.asset-compare__row {
  display: grid;
  /* Wider centre column gives the icon more room and matches the
     bumped font sizes. */
  grid-template-columns: 1fr 140px 1fr;
  align-items: center;
  padding: 30px 56px;
  gap: 44px;
  position: relative;
  flex: 1;
  min-height: 0;
}
.asset-compare__row + .asset-compare__row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.asset-compare__row--head {
  padding: 32px 56px 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  flex: 0 0 auto;
}

.asset-compare__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.asset-compare__col--today {
  text-align: end;
  align-items: flex-end;
}
.asset-compare__col--tourly {
  text-align: start;
  align-items: flex-start;
}

/* Header-row labels (Faris 2026-05-17: bumped sizes — table was reading
   too small with too much white space). */
.asset-compare__col-tag {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(251, 247, 238, 0.55);
}
.asset-compare__col--tourly .asset-compare__col-tag {
  color: var(--terra-soft);
}
.asset-compare__col-sub {
  font-size: 22px;
  color: rgba(251, 247, 238, 0.42);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.asset-compare__col--tourly .asset-compare__col-sub {
  color: rgba(251, 247, 238, 0.72);
}

/* Comparison-row content (labels + values) */
.asset-compare__cell-label {
  font-size: 18px;
  letter-spacing: 0.16em;
  color: rgba(251, 247, 238, 0.50);
  font-weight: 700;
  text-transform: none;
}
.asset-compare__col--tourly .asset-compare__cell-label {
  color: var(--terra-soft);
}
.asset-compare__cell-value {
  font-size: 38px;
  font-weight: 700;
  color: rgba(251, 247, 238, 0.7);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.asset-compare__col--tourly .asset-compare__cell-value {
  color: var(--paper);
}

/* Center column — icon container with a soft vertical divider line that
   runs the full height of the row, so the row visually 'pivots' on the
   icon. */
.asset-compare__center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.asset-compare__center::before {
  content: "";
  position: absolute;
  top: -26px;
  bottom: -26px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(197, 106, 65, 0.25) 20%, rgba(197, 106, 65, 0.25) 80%, transparent);
}
.asset-compare__center--head::before { display: none; }

.asset-compare__icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(225, 169, 138, 0.20), rgba(197, 106, 65, 0.10) 60%);
  border: 1px solid rgba(197, 106, 65, 0.40);
  color: var(--terra-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.20),
    0 8px 24px rgba(197, 106, 65, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.asset-compare__icon svg {
  width: 32px;
  height: 32px;
}

/* Bottom callout — terra-tinted band tying the slide to its punchline. */
.asset-callout {
  background: linear-gradient(90deg, rgba(197, 106, 65, 0.22), rgba(197, 106, 65, 0.06));
  border: 1px solid rgba(197, 106, 65, 0.36);
  border-radius: 14px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.asset-callout__tag {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.20em;
  color: var(--terra-soft);
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(197, 106, 65, 0.20);
  border: 1px solid rgba(197, 106, 65, 0.45);
  white-space: nowrap;
}
.asset-callout__body {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  color: var(--paper);
  font-weight: 500;
  flex: 1;
}
.asset-callout__body strong {
  color: var(--terra-soft);
  font-weight: 800;
}

.dash2 {
  position: absolute;
  inset: 0;
  padding: 100px 64px 32px;     /* top padding clears the Tourly brand mark */
  display: flex;
  flex-direction: column;
  gap: 18px;
  direction: rtl;
}

.dash2__head {
  text-align: start;
  padding-inline-end: 200px;    /* keep masthead from running into the brand mark */
}
.dash2__eyebrow {
  font-size: 13px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--terra-dark);
  margin-bottom: 8px;
}
.dash2__title {
  font: 700 60px 'Calibri', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--slate);
  margin: 0 0 12px;
}
.dash2__title em {
  font-style: normal;
  color: var(--terra-dark);
}
.dash2__lead {
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 1200px;
  margin: 0;
  font-weight: 500;
}

/* Two columns: dashboard mockup (RTL start, wider) + insight panel (RTL end, narrower).
   Insight panel reduced from 38% to ~27% so the dashboard breathes — comment 4 on slide 12. */
.dash2__main {
  flex: 1;
  display: grid;
  grid-template-columns: 4.5fr 1fr;
  gap: 18px;
  min-height: 0;
}

/* Fullscreen webpage variant — dashboard fills the slide, hero lives
   INSIDE the product, floating tooltips interpret metrics. */
.dash2__main--fullscreen {
  display: block;
  position: relative;
}
.dash2__product--fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

/* ---------- Dashboard mockup ---------- */
.dash2__product {
  background: var(--slate);
  border-radius: 18px;
  box-shadow:
    0 4px 12px rgba(27, 38, 42, 0.10),
    0 24px 64px rgba(27, 38, 42, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash2__appbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  direction: ltr;
  flex: 0 0 auto;
}
.dash2__appdots { display: flex; gap: 6px; }
.dash2__appdots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.dash2__appdots i:first-child { background: #E57373; }
.dash2__appdots i:nth-child(2) { background: #E1A98A; }
.dash2__appdots i:nth-child(3) { background: #7BC097; }
.dash2__appurl {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: rgba(251, 247, 238, 0.55);
  background: rgba(0, 0, 0, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  direction: rtl;
}
.dash2__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(251, 247, 238, 0.7);
  direction: rtl;
  white-space: nowrap;
}
.dash2__live span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7BC097;
  box-shadow: 0 0 12px #7BC097;
  animation: dash2-pulse 1.6s ease-in-out infinite;
}
@keyframes dash2-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.dash2__product-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 0;
  min-height: 0;
}
.dash2__kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.dash2-kpi {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.dash2-kpi .v {
  font: 700 52px 'Calibri', sans-serif;
  letter-spacing: -0.025em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dash2-kpi .k {
  font-size: 17px;
  color: rgba(251, 247, 238, 0.72);
  letter-spacing: 0.04em;
  margin-top: 10px;
  font-weight: 600;
}
.dash2-kpi--accent {
  background: linear-gradient(135deg, rgba(197, 106, 65, 0.22), rgba(158, 82, 50, 0.12));
  border-color: rgba(197, 106, 65, 0.5);
  box-shadow: inset 0 0 0 1px rgba(197, 106, 65, 0.15), 0 4px 18px rgba(158, 82, 50, 0.18);
}
.dash2-kpi--accent::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(circle at top right, rgba(225, 169, 138, 0.32), transparent 70%);
  pointer-events: none;
}
.dash2-kpi--accent .v { color: var(--terra-soft); }

/* Small tooltip-like caption below each KPI value/label, explaining
   what the metric measures. Added per Faris's "make the slide
   self-explanatory" feedback so a first-time viewer doesn't have to
   guess what each KPI tracks. */
.dash2-kpi__hint {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(251, 247, 238, 0.6);
  letter-spacing: 0.02em;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(251, 247, 238, 0.12);
  font-style: italic;
}
.dash2-kpi--accent .dash2-kpi__hint {
  color: rgba(225, 169, 138, 0.7);
  border-top-color: rgba(225, 169, 138, 0.2);
}

/* Generic widget frame inside the dashboard */
.dash2-widget {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.dash2-widget__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.dash2-widget__title {
  font-size: 19px;
  color: var(--terra-soft);
  letter-spacing: 0.02em;
  font-weight: 700;
}
.dash2-widget__hint {
  font-size: 14px;
  color: rgba(251, 247, 238, 0.55);
}
.dash2-widget__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.dash2-widget--hero { padding: 16px 18px; }

/* Highlight box inside the dashboard widgets — explains how the data
   is computed / why it matters. Faris rejected the first pass (a thin
   footer with tiny text) on 2026-05-16: he wanted a proper highlight
   box, bigger font, clearly visible as a callout. */
.dash2-widget__formula {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 14px 16px;
  background: rgba(197, 106, 65, 0.12);          /* terracotta tint */
  border: 1px solid rgba(197, 106, 65, 0.32);    /* terracotta border */
  border-radius: 8px;
}
.dash2-widget__formula-label {
  font-size: 16px;
  color: var(--terra-soft);
  letter-spacing: 0.04em;
  font-weight: 700;
}
.dash2-widget__formula-list {
  font-size: 17px;
  color: rgba(251, 247, 238, 0.92);
  line-height: 1.55;
}

.dash2-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash2-bar {
  display: grid;
  grid-template-columns: 170px 1fr 88px;
  align-items: center;
  gap: 16px;
  direction: rtl;
}
.dash2-bar__source {
  font-size: 20px;
  color: rgba(251, 247, 238, 0.9);
  text-align: start;
  font-weight: 600;
}
.dash2-bar__track {
  height: 22px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  direction: ltr;
}
.dash2-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--terra-soft), var(--terra));
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(197, 106, 65, 0.45);
}
.dash2-bar--hero .dash2-bar__source { color: var(--terra-soft); font-weight: 700; }
.dash2-bar__fill--muted {
  background: linear-gradient(90deg, #4a5258, #6b7378);
  box-shadow: none;
}
.dash2-bar__value {
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 23px;
  color: var(--paper);
  text-align: end;
  direction: ltr;
}

/* 3-widget grid below the hero chart — fills the empty space */
.dash2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.dash2-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 17px;
}
.dash2-row__tag { color: rgba(251, 247, 238, 0.85); font-weight: 500; font-size: 17px; }
.dash2-row__num {
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--paper);
  font-size: 18px;
}
.dash2-score {
  font-weight: 700;
  font-size: 17px;
  padding: 4px 14px;
  border-radius: 999px;
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Lead-scoring row variant — each row carries a stacked sub-label
   showing which campaign the lead came from. Anchors the lead-scoring
   widget to the sub-links widget on its right so the two read as one
   data story (lead score + source campaign). */
.dash2-row--lead {
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.dash2-row--lead:last-child { border-bottom: none; }
.dash2-row__lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.dash2-row__source {
  font-size: 14px;
  color: var(--terra-soft);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dash2-score--hot { background: rgba(197, 106, 65, 0.22); color: var(--terra-soft); border: 1px solid rgba(197, 106, 65, 0.4); }
.dash2-score--warm { background: rgba(225, 169, 138, 0.14); color: #E1A98A; border: 1px solid rgba(225, 169, 138, 0.32); }
.dash2-score--cold { background: rgba(255, 255, 255, 0.05); color: rgba(251, 247, 238, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); }

.dash2-geo {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 17px;
}
.dash2-geo__name { color: rgba(251, 247, 238, 0.85); text-align: start; font-weight: 600; font-size: 17px; }
.dash2-geo__bar {
  height: 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  direction: ltr;
}
.dash2-geo__bar > div {
  height: 100%;
  background: var(--terra);
  border-radius: 999px;
  opacity: 0.85;
}
.dash2-geo__pct {
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--paper);
  text-align: end;
  direction: ltr;
  font-size: 17px;
}

/* ---- Sub-links widget : 3-column rows with cost-per-view (comment 3 on slide 12).
   Adds a sub-header for column labels, three-column row layout, and best/worst
   ratio highlights so the cheapest channel pops without explanation. ---- */
.dash2-widget__cols-head {
  display: grid;
  grid-template-columns: 1fr 72px 102px;
  gap: 12px;
  padding: 6px 0 10px;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(251, 247, 238, 0.7);
  font-weight: 700;
}
.dash2-widget__cols-head > span:nth-child(2) { text-align: end; direction: ltr; }
.dash2-widget__cols-head > span:nth-child(3) { text-align: end; direction: ltr; }

.dash2-row--cost {
  display: grid;
  grid-template-columns: 1fr 72px 102px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.dash2-row--cost:last-child { border-bottom: none; }
.dash2-row__cost {
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  color: rgba(251, 247, 238, 0.88);
  text-align: end;
  direction: ltr;
}
.dash2-row--best { background: rgba(123, 192, 151, 0.06); border-radius: 6px; padding-inline: 6px; margin-inline: -6px; }
.dash2-row__cost--best {
  color: #7BC097;
  font-weight: 700;
  position: relative;
}
.dash2-row__cost--best::before {
  content: "★";
  margin-inline-end: 4px;
  font-size: 9px;
  color: #7BC097;
}
.dash2-row__cost--worst {
  color: rgba(229, 115, 115, 0.85);
}

/* ---- Engagement heatmap (comment 2 on slide 12) — 7 days × 24 hours grid
   showing when prospects actually open the tour. Replaces the static
   foot-pill strip with a real visualization. Five heat levels:
   0 = barely-visible white, 1 = terra-soft tint, 2 = terra mid, 3 = terra,
   4 = terra-dark with glow. The Thu/Fri 7–10 pm cluster reads as "weekend
   evening peak" at a glance. ---- */
.dash2-heat {
  /* Hidden per Faris (2026-05-15) — heat map ate the page and caused overlap. Markup kept in HTML; remove display:none to re-enable. */
  display: none;
  flex: 0 0 auto;
  margin: 8px -18px 0;
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 18px 14px;
}
.dash2-heat__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
}
.dash2-heat__title {
  font-size: 17px;
  color: var(--terra-soft);
  letter-spacing: 0.02em;
  font-weight: 700;
}
.dash2-heat__hint {
  font-size: 13px;
  color: rgba(251, 247, 238, 0.6);
  font-weight: 500;
}
.dash2-heat__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  direction: ltr;
}
.dash2-heat__hours {
  display: grid;
  grid-template-columns: 72px repeat(24, 1fr);
  gap: 2px;
  padding-bottom: 6px;
  font-size: 13px;
  color: rgba(251, 247, 238, 0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.dash2-heat__hours > span:first-child { grid-column: 1 / 2; }
/* Anchor hour labels at columns 1 (=hour 0), 5, 9, 13, 17, 21, 24 (=hour 23).
   Column 1 is the day-name column; hour 0 starts at column 2. */
.dash2-heat__hours > span:nth-child(2) { grid-column: 2 / 3; }
.dash2-heat__hours > span:nth-child(3) { grid-column: 6 / 7; }
.dash2-heat__hours > span:nth-child(4) { grid-column: 10 / 11; }
.dash2-heat__hours > span:nth-child(5) { grid-column: 14 / 15; }
.dash2-heat__hours > span:nth-child(6) { grid-column: 18 / 19; }
.dash2-heat__hours > span:nth-child(7) { grid-column: 22 / 23; }
.dash2-heat__hours > span:nth-child(8) { grid-column: 25 / 26; text-align: end; }

.dash2-heat__row {
  display: grid;
  grid-template-columns: 72px repeat(24, 1fr);
  gap: 3px;
  align-items: center;
}
.dash2-heat__day {
  font-size: 14px;
  color: rgba(251, 247, 238, 0.8);
  text-align: end;
  padding-inline-end: 6px;
  direction: rtl;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dash2-heat__row > i {
  display: block;
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.02);
  transition: transform 120ms ease;
}
.dash2-heat__row > i[data-heat="0"] { background: rgba(255, 255, 255, 0.035); }
.dash2-heat__row > i[data-heat="1"] { background: rgba(225, 169, 138, 0.22); border-color: rgba(225, 169, 138, 0.18); }
.dash2-heat__row > i[data-heat="2"] { background: rgba(197, 106, 65, 0.42); border-color: rgba(197, 106, 65, 0.32); }
.dash2-heat__row > i[data-heat="3"] { background: rgba(197, 106, 65, 0.72); border-color: rgba(197, 106, 65, 0.55); box-shadow: 0 0 6px rgba(197, 106, 65, 0.3); }
.dash2-heat__row > i[data-heat="4"] {
  background: linear-gradient(135deg, var(--terra), var(--terra-dark));
  border-color: var(--terra-dark);
  box-shadow: 0 0 12px rgba(197, 106, 65, 0.6), 0 0 24px rgba(158, 82, 50, 0.35);
}

.dash2-heat__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-inline-start: 76px;
  font-size: 12px;
  color: rgba(251, 247, 238, 0.55);
  letter-spacing: 0.04em;
  direction: ltr;
  font-weight: 500;
}
.dash2-heat__legend > span { font-size: 12px; }
.dash2-heat__legend > i {
  display: block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.dash2-heat__legend > i[data-heat="0"] { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.dash2-heat__legend > i[data-heat="1"] { background: rgba(225, 169, 138, 0.22); }
.dash2-heat__legend > i[data-heat="2"] { background: rgba(197, 106, 65, 0.42); }
.dash2-heat__legend > i[data-heat="3"] { background: rgba(197, 106, 65, 0.72); }
.dash2-heat__legend > i[data-heat="4"] { background: linear-gradient(135deg, var(--terra), var(--terra-dark)); }

/* ---------- Insight panel — sits OUTSIDE the dashboard, cream paper ----------
   Narrow sidebar (~18% of main area). Padding compressed further so the
   panel feels tight, not spacious, at the slim width. */
.dash2__insight {
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow:
    0 2px 6px rgba(27, 38, 42, 0.04),
    0 12px 32px rgba(27, 38, 42, 0.06);
}
/* Wrapper that holds the three insight cards and stretches to fill
   the available vertical space — no empty void between cards and the
   bottom "Decision" callout. */
.dash2__insight-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.dash2__insight-stack > .dash2__insight-card {
  flex: 1;
}
.dash2__insight-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--terra-dark);
}
.dash2__insight-title {
  font: 600 24px 'Calibri', sans-serif;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--slate);
  margin: 0;
}
.dash2__insight-title em {
  font-style: normal;
  color: var(--terra-dark);
  display: block;
}
.dash2__insight-lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 4px;
}
.dash2__insight-card {
  padding: 14px 16px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "eyebrow num"
    "line line";
  gap: 4px 14px;
  align-items: baseline;
}
.dash2__insight-card--hot {
  background: rgba(197, 106, 65, 0.10);
  border: 1px solid rgba(197, 106, 65, 0.35);
  border-inline-start: 4px solid var(--terra);
}
.dash2__insight-card--warm {
  background: rgba(225, 169, 138, 0.10);
  border: 1px solid rgba(225, 169, 138, 0.32);
  border-inline-start: 4px solid #E1A98A;
}
.dash2__insight-card--cold {
  background: rgba(27, 38, 42, 0.05);
  border: 1px solid rgba(27, 38, 42, 0.18);
  border-inline-start: 4px solid #8a929a;
}
.dash2__insight-eyebrow {
  grid-area: eyebrow;
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ink-2);
}
.dash2__insight-num {
  grid-area: num;
  font: 600 30px 'Calibri', sans-serif;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dash2__insight-card--hot .dash2__insight-num { color: var(--terra-dark); }
.dash2__insight-line {
  grid-area: line;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.dash2__insight-action {
  background: var(--slate);
  color: var(--paper);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.55;
}
.dash2__insight-action strong {
  display: block;
  color: var(--terra-soft);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ============================================================
   Dashboard slide v3 — full-screen webpage style.
   Replaces the old 'mockup + sidebar panel' layout. The slate
   dashboard now fills the slide as a real product screenshot,
   with a top web-nav, an internal hero section, and floating
   tooltip callouts that interpret specific metrics on the page.
   ============================================================ */

/* Web nav bar at the top of the dashboard (replaces the Mac
   window chrome with a real product header). */
.dash2__webnav {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  direction: rtl;
  flex: 0 0 auto;
}
.dash2__webnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.01em;
}
.dash2__webnav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 3px rgba(197, 106, 65, 0.22);
  display: inline-block;
}
.dash2__webnav-sep {
  color: rgba(251, 247, 238, 0.4);
  margin: 0 6px;
}
.dash2__webnav-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
}
.dash2__webnav-item {
  font-size: 18px;
  color: rgba(251, 247, 238, 0.55);
  letter-spacing: 0.02em;
  font-weight: 500;
  padding-bottom: 2px;
  cursor: default;
}
.dash2__webnav-item--active {
  color: var(--terra-soft);
  border-bottom: 2px solid var(--terra);
  padding-bottom: 0;
  font-weight: 700;
}

/* Hero section INSIDE the dashboard — sits above the KPIs. */
.dash2-hero {
  padding: 18px 4px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
}
.dash2-hero__eyebrow {
  font-size: 16px;
  letter-spacing: 0.22em;
  color: var(--terra-soft);
  font-weight: 700;
  margin-bottom: 14px;
}
.dash2-hero__title {
  font: 700 62px 'Calibri', sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--paper);
  margin: 0 0 12px;
}
.dash2-hero__title em {
  font-style: normal;
  color: var(--terra-soft);
}
.dash2-hero__lead {
  font-size: 22px;
  line-height: 1.45;
  color: rgba(251, 247, 238, 0.78);
  max-width: 1200px;
  margin: 0;
  font-weight: 500;
}

/* Floating tooltip callouts overlay the dashboard, pointing at
   the metric they interpret. Each tip = a small cream card on
   terra connector. Position-specific variants pin them in place. */
.dash2-tip {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
}
.dash2-tip__pointer {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--terra-dark), var(--terra));
  position: relative;
  flex: 0 0 auto;
}
.dash2-tip__pointer::before,
.dash2-tip__pointer::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.dash2-tip__pointer::before {
  /* dot on the metric side */
  inset-inline-end: -6px;
  background: var(--terra);
  box-shadow: 0 0 0 4px rgba(197, 106, 65, 0.25);
}
.dash2-tip__pointer::after {
  /* dot on the card side */
  inset-inline-start: -4px;
  background: var(--cream);
  border: 2px solid var(--terra);
  width: 8px;
  height: 8px;
}
.dash2-tip__card {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow:
    0 4px 12px rgba(27, 38, 42, 0.18),
    0 16px 38px rgba(27, 38, 42, 0.12);
  width: 280px;
  font-family: 'Calibri', sans-serif;
}
.dash2-tip__eyebrow {
  font-size: 13px;
  font-weight: 800;
  color: var(--terra-dark);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  line-height: 1.2;
}
.dash2-tip__body {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}

/* Tooltip placements — coordinates picked to point at specific
   on-dashboard metrics. RTL: 'inset-inline-end' is the right side. */
.dash2-tip--time {
  top: 520px;
  inset-inline-end: 38px;
  flex-direction: row;
}
.dash2-tip--cost {
  top: 770px;
  inset-inline-end: 60px;
  flex-direction: row;
}
.dash2-tip--heat {
  top: 960px;
  inset-inline-end: 50px;
  flex-direction: row;
}

/* Suppress the now-unused outer header on this slide variant. */
.dash2__main--fullscreen ~ * .dash2__head,
.dash2 > .dash2__main--fullscreen + .dash2__head { display: none; }

/* Inline insight strips — replace floating tooltip callouts. Each strip
   sits inside a widget (between header and content) and surfaces the
   key takeaway anchored to the data above it. */
.dash2-insight-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 10px 0 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(197, 106, 65, 0.10);
  border-inline-start: 3px solid var(--terra);
  font-size: 17px;
  line-height: 1.4;
  color: rgba(251, 247, 238, 0.92);
}
.dash2-insight-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 3px rgba(197, 106, 65, 0.22);
  flex: 0 0 auto;
  align-self: center;
}
.dash2-insight-strip strong {
  color: var(--terra-soft);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.dash2-insight-strip__body {
  color: rgba(251, 247, 238, 0.78);
  font-weight: 500;
}
.dash2-insight-strip--compact {
  font-size: 14px;
  padding: 9px 12px;
  gap: 4px 8px;
  margin: 8px 0 10px;
}
.dash2-insight-strip--compact strong { font-size: 14px; }

/* ============================================================
   PROOF SLIDE V2 — Full-bleed 4-quadrant editorial layout (slide 14)
   Each quadrant is a Saudi-context Nano Banana photo with a single
   hero stat overlaid. The four quadrants together = the "what makes
   the difference" story. Center stamp ties them as one piece.
   ============================================================ */
.proof-slide {
  /* Paper background shows through the gap between quadrants as clean
     white separators, per user direction. */
  background: var(--paper);
}
.proof-slide .frame { display: none; }
.chrome--on-dark {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  z-index: 6;
}
.chrome--on-dark .brand { color: var(--paper); }

.proof-quadrants {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;          /* white borders between the four quadrants */
  padding: 14px;       /* and a matching outer margin */
  z-index: 1;
  background: var(--paper);
}
.proof-quad {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  border-radius: 6px;  /* slight rounding so quadrants feel like cards */
}
/* The background photo lives on its own layer so we can blur it without
   blurring the overlaying text. */
.proof-quad::before {
  content: "";
  position: absolute;
  inset: -10px;        /* extra inset so blur edges don't show */
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(3px) saturate(1.05);
  z-index: 0;
}
.proof-quad[data-bg="q1"]::before { background-image: url('assets/generated/proof-q1-attention.png'); }
.proof-quad[data-bg="q2"]::before { background-image: url('assets/generated/proof-q2-interaction.png'); }
.proof-quad[data-bg="q3"]::before { background-image: url('assets/generated/proof-q3-sales.png'); }
.proof-quad[data-bg="q4"]::before { background-image: url('assets/generated/proof-q4-rental.png'); }

/* Per Faris (2026-05-16): the LEFT-side quadrants (q2 top-left, q4
   bottom-left) need their overlay text aligned to the LEFT of the
   quadrant — otherwise the text crowds the centre stamp.
   The RIGHT-side quadrants (q1, q3) keep the default RTL right-alignment. */
.proof-quad[data-bg="q2"],
.proof-quad[data-bg="q4"] {
  justify-content: flex-start;
}
.proof-quad[data-bg="q2"] .proof-quad__overlay,
.proof-quad[data-bg="q4"] .proof-quad__overlay {
  text-align: left;
  direction: ltr;
}
/* Re-apply RTL inside specific child elements that contain Arabic text so
   the digits/words still typeset correctly even though the container is LTR */
.proof-quad[data-bg="q2"] .proof-quad__overlay > *,
.proof-quad[data-bg="q4"] .proof-quad__overlay > * {
  direction: rtl;
  text-align: left;
  unicode-bidi: plaintext;
}

.proof-quad__overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 64px 80px 60px;
  background: linear-gradient(
    to top,
    rgba(15, 22, 25, 0.95) 0%,
    rgba(15, 22, 25, 0.78) 40%,
    rgba(15, 22, 25, 0.0) 85%
  );
  color: var(--paper);
  text-align: start;
  direction: rtl;
}

/* Faris 2026-05-17: pumped proof-quad text sizes a notch so the
   stats read as the editorial centrepiece they are. */
.proof-quad__eyebrow {
  display: inline-block;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--terra-dark);
  background: var(--paper);
  font-weight: 700;
  padding: 7px 20px;
  border-radius: 999px;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.proof-quad__num {
  font: 200 180px 'Calibri', sans-serif;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 22px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.proof-quad__detail {
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--paper);
  font-weight: 500;
  max-width: 640px;
}
.proof-quad__add {
  font-size: 21px;
  line-height: 1.45;
  color: rgba(251, 247, 238, 0.82);
  max-width: 640px;
  padding-top: 12px;
  border-top: 1px solid rgba(251, 247, 238, 0.20);
  margin-top: 12px;
}

/* Center stamp — editorial focal point where the four quadrants meet */
.proof-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: var(--cream);
  color: var(--slate);
  padding: 26px 56px;
  border-radius: 999px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  border: 4px solid var(--paper);
  min-width: 380px;
  direction: rtl;
}
.proof-stamp__eyebrow {
  font-size: 17px;
  letter-spacing: 0.22em;
  color: var(--terra-dark);
  font-weight: 700;
  margin-bottom: 6px;
}
.proof-stamp__title {
  font-size: 34px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.proof-stamp__sub {
  font-size: 16px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  max-width: 360px;
}

/* Source citation strip — matches slide-7 (.source) format per Faris
   2026-05-17. Plain text line at the bottom centre, no pill, named
   sources are clickable links (target=_blank). Light type on the dark
   proof background, terra-soft underline on link hover. */
.proof-sources {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(251, 247, 238, 0.72);
  background: rgba(15, 22, 25, 0.55);
  padding: 10px 26px;
  border-radius: 999px;
  white-space: nowrap;
  direction: rtl;
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.proof-sources a {
  color: rgba(232, 153, 106, 0.95);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(232, 153, 106, 0.35);
  transition: text-decoration-color .2s, color .2s;
}
.proof-sources a:hover {
  color: var(--terra);
  text-decoration-color: var(--terra);
}

/* ---- Audience slide frame padding (slides 16/17/18) ----
   These three slides need tighter chrome to fit the static comparison
   table (dev-comparison) comfortably. */
#audience-developers .frame,
#audience-agencies .frame,
#audience-rentals .frame {
  padding-top: 70px;
  padding-bottom: 50px;
}

/* ============================================================
   Agenda slide + Section dividers
   ============================================================ */

/* ---- Agenda (the master TOC) — 2×2 grid, 4 cards ---- */
.agenda-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 28px;
  flex: 1;
  align-items: stretch;
}
.agenda-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 40px;
  background-color: var(--cream);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  text-decoration: none;
  color: var(--paper);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
}
.agenda-card::before {
  /* Dark gradient overlay so the text reads on top of the visual.
     Slightly heavier at the bottom to anchor the title + sub text. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 38, 42, 0.25) 0%, rgba(27, 38, 42, 0.78) 75%, rgba(27, 38, 42, 0.88) 100%);
  z-index: -1;
  border-radius: inherit;
}
.agenda-card > * { position: relative; z-index: 1; }
/* Card #1 (من نحن) — plain slate + Tourly logo centerpiece, visually
   previewing the slide-3 divider treatment (Faris 2026-05-17). */
.agenda-card:nth-child(1) {
  background-image: none;
  background-color: var(--slate);
}
.agenda-card:nth-child(1)::before {
  background: none;
}
.agenda-card:nth-child(1)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/tourly-logo-dark.gif') center / 140px auto no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.agenda-card:nth-child(1):hover::after {
  opacity: 1;
}
.agenda-card:nth-child(2) { background-image: url('assets/generated/section-market-cover.png'); }
.agenda-card:nth-child(3) { background-image: url('assets/generated/section-services-cover.png'); }
.agenda-card:nth-child(4) { background-image: url('assets/generated/section-impact-cover.png'); }
.agenda-card:hover {
  border-color: var(--terra);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.agenda-card:hover::before {
  background: linear-gradient(180deg, rgba(197, 106, 65, 0.3) 0%, rgba(27, 38, 42, 0.78) 75%, rgba(27, 38, 42, 0.88) 100%);
}
.agenda-card__num {
  font-family: 'Calibri', sans-serif;
  font-size: 96px;
  font-weight: 300;
  color: var(--terra);
  line-height: 1;
  letter-spacing: -0.04em;
}
.agenda-card__title {
  font-size: 48px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-top: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.agenda-card__sub {
  font-size: 22px;
  color: rgba(251, 247, 238, 0.88);
  line-height: 1.45;
  letter-spacing: 0;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.agenda-card__num {
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ---- Section dividers (consistent template) ---- */
.divider-slide {
  background: var(--paper);
}
.divider__frame {
  width: 100%;
  height: 100%;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 64px;
  position: relative;
}
.divider__copy {
  display: flex;
  flex-direction: column;
}
.divider__eyebrow {
  font-family: 'Calibri', sans-serif;
  font-size: 18px;
  letter-spacing: 0.22em;
  color: var(--terra-dark);
  font-weight: 600;
  margin-bottom: 24px;
}
.divider__title {
  font-size: 132px;
  font-weight: 600;
  line-height: 1;
  color: var(--slate);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.divider__sub {
  font-family: 'Calibri', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 48px;
  color: var(--terra-dark);
  margin: 18px 0 0;
  letter-spacing: 0.005em;
}
.divider__rule {
  width: 96px;
  height: 3px;
  background: var(--terra);
  margin: 36px 0;
  border: 0;
}
.divider__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 26px;
  color: var(--ink-2);
  line-height: 1.45;
}
.divider__list li {
  position: relative;
  padding-inline-start: 28px;
}
.divider__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 14px;
  height: 1px;
  background: var(--terra);
}
.divider__num-big {
  font-family: 'Calibri', sans-serif;
  font-size: 540px;
  font-weight: 200;
  line-height: 0.85;
  color: var(--terra-tint);
  text-align: center;
  letter-spacing: -0.06em;
  user-select: none;
  justify-self: center;
  align-self: center;
}

/* ---- Closing CTAs (slide 15) ---- */
.close-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  max-width: 1100px;
}
.close-cta {
  background: rgba(251, 247, 238, 0.06);
  border: 1px solid rgba(251, 247, 238, 0.18);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: background 0.18s ease;
  text-decoration: none;
}
.close-cta:hover {
  background: rgba(251, 247, 238, 0.12);
}
.close-cta img {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  flex-shrink: 0;
}
.close-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.close-cta__label {
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--terra-soft);
}
.close-cta__title {
  font-size: 22px;
  color: var(--paper);
  font-weight: 600;
}
.close-cta__desc {
  font-size: 16px;
  color: rgba(251, 247, 238, 0.7);
  line-height: 1.4;
}

/* ---- Compact table for slide 14 ---- */
.tbl--compact th,
.tbl--compact td {
  padding: 14px 18px;
  font-size: 20px;
}
.tbl--compact th {
  font-size: 18px;
}

/* ---- Extra-compact table for the process slide (slide 14) so the
   five-step row + bottom comparison both fit within the 1080px slide
   without overflowing yet still feel substantial. */
.tbl--xc th,
.tbl--xc td {
  padding: 14px 18px;
  font-size: 18px;
  line-height: 1.45;
}
.tbl--xc th {
  font-size: 16px;
  padding: 14px 18px;
}
.tbl--xc td strong {
  font-size: 18px;
}

/* ============================================================
   Print / PDF
   ============================================================ */
@media print {
  /* Hide comment overlay UI in PDF export */
  .cc-banner, .cc-fab, .cc-tooltip, .cc-popup, .cc-badge, .cc-panel { display: none !important; }
  body[data-cc-panel="on"] { padding-right: 0 !important; }
}

/* ============================================================
   Fullscreen presentation mode (extracted from deck HTML head
   on 2026-05-14 — see CLAUDE.md folder/inline-code rules).
   Triggered by `<body data-deck-fullscreen="on">` set by
   deck-stage's fullscreenchange listener. Hides every editor
   and comment-overlay chrome, plus disables click-targeting on
   slide elements so only arrow-key navigation works.
   ============================================================ */

deck-stage:not(:defined) { visibility: hidden; }

body[data-deck-fullscreen="on"] .cc-fab,
body[data-deck-fullscreen="on"] .cc-panel,
body[data-deck-fullscreen="on"] .cc-banner,
body[data-deck-fullscreen="on"] .cc-tooltip,
body[data-deck-fullscreen="on"] .cc-popup,
body[data-deck-fullscreen="on"] .cc-thread-view,
body[data-deck-fullscreen="on"] .cc-lightbox,
body[data-deck-fullscreen="on"] .cc-badge,
body[data-deck-fullscreen="on"] .ed-fab,
body[data-deck-fullscreen="on"] .ed-banner,
body[data-deck-fullscreen="on"] .ed-overlay-root,
body[data-deck-fullscreen="on"] .ed-inspector,
body[data-deck-fullscreen="on"] .ed-breadcrumb,
body[data-deck-fullscreen="on"] .ed-toast {
  display: none !important;
}

/* Hide the slide rail too: deck-stage's shadow CSS has
   `:host([data-rail-hidden]) .rail { display: none }` but our flag
   lives on the body element, so we tell deck-stage to drop the rail
   via its existing public attribute. */
body[data-deck-fullscreen="on"] deck-stage { --deck-rail-w: 0px; }
body[data-deck-fullscreen="on"] deck-stage::part(rail) { display: none; }

/* Disable clicks on slide elements so view-only is enforced even if
   the comment overlay misses the data-attr check. Arrow keys still
   work because keydown listeners run regardless. */
body[data-deck-fullscreen="on"] deck-stage > section * {
  pointer-events: none !important;
}

/* ============================================================
   MARKET SLIDE — chart + side stats redesign (per Faris's reference)
   2-col layout: copy/highlights on RTL-start (right), SVG line chart
   on RTL-end (left). Compact padding so the source strip doesn't
   overflow.
   ============================================================ */

.frame--market {
  padding-top: 80px;
  padding-bottom: 60px;
}
.market__head {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.market__split {
  display: grid;
  /* Chart column wider (1.5fr) so the chart can breathe — was 1.15fr
     and the chart felt cramped against the big stats. Faris 2026-05-17. */
  grid-template-columns: 1fr 1.5fr;
  gap: 44px;
  flex: 1;
  align-items: stretch;
  min-height: 0;
}
.market__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: space-between;
  min-height: 0;
}
.market__hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.market__hero-num {
  font-family: 'Calibri', sans-serif;
  font-size: 78px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.025em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.market__hero-num span {
  font-size: 32px;
  color: var(--ink-2);
  margin-inline-start: 4px;
  font-weight: 400;
}
.market__hero-cap {
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.45;
  max-width: 560px;
}
.market__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  /* Centred as a tight block (was justify-content: space-between which
     stretched the three stats top/middle/bottom with huge gaps —
     Faris flagged it 2026-05-16: "too much space between the 3 cards"). */
  justify-content: center;
}
.market__stats--unified .market__stat + .market__stat {
  /* Divider spacing scales with the bigger numbers so the stack still
     feels tight, not crowded. Faris asked 2026-05-16 to bump font size
     so the three stats sit proportional to the chart on the left. */
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--rule-soft);
}
.market__stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.market__stats--unified .market__stat-num {
  /* Bumped 56 → 96px so the right column carries the same visual mass
     as the chart card on the left (Faris's direction 2026-05-16). */
  font-family: 'Calibri', sans-serif;
  font-size: 96px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.02em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.market__stats--unified .market__stat-unit {
  font-size: 36px;
  color: var(--ink-2);
  margin-inline-start: 10px;
  font-weight: 400;
}
.market__stats--unified .market__stat-cap {
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.45;
  max-width: 560px;
}
.market__stat-num {
  font-family: 'Calibri', sans-serif;
  font-size: 44px;
  font-weight: 600;
  color: var(--terra-dark);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.market__stat-cap {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}
.market__intl {
  background: var(--cream);
  border-inline-start: 4px solid var(--terra-soft);
  border-radius: 12px;
  padding: 18px 24px;
}
.market__intl-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--terra-dark);
  font-weight: 700;
  margin-bottom: 6px;
}
.market__intl-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.market__intl-body strong {
  color: var(--terra-dark);
  font-weight: 700;
}

/* Chart card */
.market__chart-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  /* Tighter padding so the SVG fills more of the card (Faris 2026-05-17). */
  padding: 20px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.market__chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.market__chart-title {
  font-size: 22px;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.market__chart-legend {
  display: flex;
  gap: 22px;
  font-size: 17px;
  color: var(--ink-3);
}
.market__chart-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.market-chart__dot {
  display: inline-block;
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: var(--slate);
}
.market-chart__dot--forecast {
  background: transparent;
  border-top: 3px dashed var(--terra);
  height: 0;
}
.market-chart {
  width: 100%;
  height: auto;
  flex: 1;
  min-height: 0;
}
.market-chart__grid line {
  stroke: var(--rule-soft);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
/* All chart-internal sizes bumped 2026-05-17 — Faris: the chart felt
   plain and small. SVG text scales with viewBox so 12px on a 600-unit
   width renders microscopic at display scale; bumped to read clearly. */
.market-chart__area {
  fill: var(--terra-tint);
  opacity: 0.55;
}
.market-chart__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.market-chart__line--actual {
  stroke: var(--slate);
  stroke-width: 5;
}
.market-chart__line--forecast {
  stroke: var(--terra);
  stroke-width: 5;
  /* Faris 2026-05-17: bumped dash size so the forecast line clearly
     reads as dashed (matches the legend swatch). 10 7 was rendering
     near-solid at the chart's display scale. */
  stroke-dasharray: 22 14;
}
.market-chart__point {
  fill: #fff;
  stroke-width: 4;
}
.market-chart__point--actual { stroke: var(--slate); }
.market-chart__point--anchor { stroke: var(--terra); }
.market-chart__callout rect {
  fill: var(--slate);
}
.market-chart__callout text {
  fill: var(--paper);
  font-family: 'Calibri', sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  dominant-baseline: middle;
}
.market-chart__annot text {
  fill: var(--terra-dark);
  font-size: 22px;
  font-style: italic;
  font-weight: 700;
  font-family: 'Calibri', sans-serif;
}
.market-chart__x-labels text {
  fill: var(--ink-3);
  font-size: 20px;
  font-weight: 600;
  font-family: 'Calibri', sans-serif;
  font-variant-numeric: tabular-nums;
}
.market-chart__grid line {
  stroke-dasharray: 3 5;
}

/* ============================================================
   Thanks slide v2 — split layout (image + slate panel)
   per Faris's "amazing-looking" redesign brief.
   ============================================================ */

.thankyou--split { padding: 0; }
.thankyou-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  width: 100%;
  height: 100%;
}
.thankyou-split__image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.thankyou-split__image::after {
  /* Subtle gradient overlay so the image edges into the slate panel cleanly */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 70%, rgba(27, 38, 42, 0.15) 100%);
  pointer-events: none;
}
.thankyou-split__panel {
  background: var(--slate);
  color: var(--paper);
  padding: 96px 96px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.thankyou-split__brand {
  display: flex;
  align-items: center;
  gap: 22px;
}
.thankyou-split__brand img {
  width: 124px;
  height: 124px;
  object-fit: contain;
}
.thankyou-split__name {
  font-size: 56px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.015em;
}
.thankyou-split__body {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-block: auto 0;
}
.thankyou-split__body h1 {
  font-size: 156px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: var(--paper);
  letter-spacing: -0.025em;
}
.thankyou-split__body h1 em {
  font-style: normal;
  color: var(--terra-soft);
}
.thankyou-split__contact {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 0;
}
.thankyou-split__contact dt {
  font-size: 16px;
  letter-spacing: 0.16em;
  color: var(--terra-soft);
  margin-bottom: 10px;
}
.thankyou-split__contact dd {
  margin: 0;
  font-family: 'Calibri', sans-serif;
  font-size: 28px;
  color: var(--paper);
  letter-spacing: -0.005em;
  font-weight: 400;
}
.thankyou-split__contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(225, 169, 138, 0.4);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.thankyou-split__contact a:hover {
  color: var(--terra-soft);
  border-bottom-color: var(--terra-soft);
}


/* International ownership banner — full-width slate strip below the chart+stats split */
.market__intl-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  background: var(--slate);
  color: var(--paper);
  border-radius: 16px;
  padding: 22px 32px;
  margin-top: 12px;
}
/* 2026-05-17: when the right stat block is removed (unverified +400K
   projection dropped), the grid becomes 2-column. */
.market__intl-banner--no-stat {
  grid-template-columns: auto 1fr;
}
.market__intl-banner__badge {
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--terra-soft);
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(225, 169, 138, 0.12);
  border: 1px solid rgba(225, 169, 138, 0.35);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.market__intl-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.market__intl-banner__head {
  font-size: 22px;
  font-weight: 700;
  color: var(--paper);
  line-height: 1.25;
}
.market__intl-banner__body {
  font-size: 15px;
  color: rgba(251, 247, 238, 0.72);
  line-height: 1.5;
}
.market__intl-banner__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-inline-start: 1px solid rgba(225, 169, 138, 0.3);
  padding-inline-start: 28px;
}
.market__intl-banner__num {
  font-family: 'Calibri', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--terra-soft);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.market__intl-banner__lbl {
  font-size: 13px;
  color: rgba(251, 247, 238, 0.6);
  line-height: 1.4;
  max-width: 220px;
}


/* Section divider covers — reuse the agenda card visuals as full-bleed
   backgrounds so the section openers feel cinematic and tie back
   visually to the agenda's promise. */
.divider-slide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--paper);
}
.divider-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.divider-slide::after {
  /* Soft gradient so the title + section number stay readable */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27, 38, 42, 0.86) 0%, rgba(27, 38, 42, 0.62) 45%, rgba(27, 38, 42, 0.25) 100%);
  z-index: -1;
}
#section-about.divider-slide::before    { background-image: url('assets/generated/divider-about-logo-bg.png'); }
#section-market.divider-slide::before   { background-image: url('assets/generated/section-market-cover.png'); }
#section-services.divider-slide::before { background-image: url('assets/generated/section-services-cover.png'); }
#section-platform.divider-slide::before { background-image: url('assets/generated/section-impact-cover.png'); }

/* Switch divider title + number colours to paper since the slide is now dark */
.divider-slide .divider__title {
  color: var(--paper);
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.divider-slide .divider__num-big {
  color: rgba(225, 169, 138, 0.78);
  text-shadow: 0 4px 22px rgba(0,0,0,0.45);
}
.divider-slide .divider__rule {
  background: var(--terra);
  box-shadow: 0 0 12px rgba(225, 169, 138, 0.4);
}
.divider-slide .chrome,
.divider-slide .chrome .brand {
  color: rgba(251, 247, 238, 0.85);
}

/* -----------------------------------------------------------------
   Slide 3 ONLY — divider with standard layout (number left, name
   right), plain slate background, Tourly logo centered between them
   as the only decoration. Faris brief 2026-05-17 (round 2):
   "follow the same approach as the other dividers; just use a plain
   background and add the logo in the middle."
   ----------------------------------------------------------------- */
#section-about.divider-slide {
  background-color: var(--slate);
}
#section-about.divider-slide::before,
#section-about.divider-slide::after {
  display: none;
}
#section-about .divider__frame {
  position: relative;
}
/* 2026-05-17 Faris (round 3): giant blurred Tourly logo bleeding off
   the top-right corner as a watermark. Sized large enough that the
   outer rings form a soft arc across the upper-right of the slide.
   Heavy blur + very low opacity = brand presence without competing
   with the title or the big "1". */
#section-about .divider__logo-mark {
  position: absolute;
  top: -340px;
  right: -340px;
  left: auto;
  transform: none;
  width: 1400px;
  height: 1400px;
  background: url('assets/tourly-logo-dark.gif') center / contain no-repeat;
  opacity: 0.10;
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}
/* Bring back the title/rule/num that the previous (logo-as-bg) version hid.
   They sit ABOVE the centered logo so the slide reads as a normal divider. */
#section-about .divider__copy,
#section-about .divider__num-big {
  position: relative;
  z-index: 2;
}
#section-about .chrome,
#section-about .chrome .brand {
  color: rgba(251, 247, 238, 0.85);
}

/* ============================================================
   SLIDE TRANSITIONS + ELEMENT ENTRANCE ANIMATIONS
   Scope: slides 1–9 ONLY (cover, agenda, section-about, about,
   team, section-market, market, section-services, services).
   Slides 10+ are owned by another agent — DO NOT animate them here.

   How it works:
   1. Every slide section gets a smooth cross-fade + tiny scale-up
      when it becomes active. Overrides the deck-stage shadow-DOM
      default which is an instant toggle.
   2. Within each of slides 1–9, child elements have an animation
      that runs ONLY when the parent section has `data-deck-active`.
      Outside that state the animation property is `none`, which
      RESETS the animation so it re-fires when the user navigates
      back to the slide.
   3. Each slide's children stagger via animation-delay so the
      content cascades in — eyebrow → title → lead → media → cards.

   Easing: cubic-bezier(.22, .61, .36, 1) — Apple-style "ease-out
   expo-ish" curve. Smooth, slightly weighty, never feels rubbery.

   Respects prefers-reduced-motion at the very bottom of the block.
   ============================================================ */

/* --- Keyframes shared by all entrance animations --- */
@keyframes deck-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes deck-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes deck-zoom-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes deck-zoom-out {
  /* Slow KenBurns-style breathe used on hero photographs */
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes deck-slide-from-start {
  /* In RTL "start" = right, so this animates from the right */
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes deck-slide-from-end {
  /* In RTL "end" = left */
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes deck-rule-grow {
  /* For the terra rule under divider titles */
  from { opacity: 0; transform: scaleX(0); transform-origin: right center; }
  to   { opacity: 1; transform: scaleX(1); transform-origin: right center; }
}

/* --- Slide-level cross-fade + tiny scale --- */
/* The deck-stage shadow DOM toggles opacity + visibility instantly.
   Override with a smooth transition. Visibility is transitioned with
   a delay equal to the opacity duration so the leaving slide stays
   visible through the fade-out, then flips hidden once opacity hits 0.
   The entering slide gets visibility:visible immediately (0s delay)
   so its fade-in is observed from the start.
   Light-DOM rule beats `::slotted(*)` at the same specificity. */
deck-stage > section {
  transition:
    opacity 720ms cubic-bezier(.22, .61, .36, 1),
    transform 720ms cubic-bezier(.22, .61, .36, 1),
    visibility 0s linear 720ms !important;
}
deck-stage > section:not([data-deck-active]) {
  transform: scale(1.012);
  opacity: 0;
  pointer-events: none;
}
deck-stage > section[data-deck-active] {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 720ms cubic-bezier(.22, .61, .36, 1),
    transform 720ms cubic-bezier(.22, .61, .36, 1),
    visibility 0s linear 0s !important;
}

/* --- Default state for children of slides 1–9: animation is OFF --- */
/* When the parent section gains data-deck-active, the animation
   property switches from `none` to a keyframe + delay, which fires the
   animation. When the slide deactivates, animation goes back to `none`
   and the animation resets so it re-fires next visit. */

/* The single rule pattern: target slide#id and the element with the
   animation specified twice — once as `none` (default) and once when
   the slide is active (with the keyframe). */

/* ---------------------------------------------------------------
   Slide 1 — COVER
   --------------------------------------------------------------- */
#cover .cover-v3__image,
#cover .cover-v3__panel,
#cover .cover-v3__brand,
#cover .cover-v3__title,
#cover .cover-v3__outcome,
#cover .cover-v3__corner-num {
  animation: none;
}
#cover[data-deck-active] .cover-v3__image {
  animation: deck-fade-in 1200ms cubic-bezier(.22, .61, .36, 1) 0ms both,
             deck-zoom-out 9000ms ease-out 0ms both;
}
#cover[data-deck-active] .cover-v3__panel {
  animation: deck-slide-from-end 900ms cubic-bezier(.22, .61, .36, 1) 150ms both;
}
#cover[data-deck-active] .cover-v3__brand {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 500ms both;
}
#cover[data-deck-active] .cover-v3__title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 650ms both;
}
#cover[data-deck-active] .cover-v3__outcome {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 900ms both;
}
#cover[data-deck-active] .cover-v3__corner-num {
  animation: deck-zoom-in 800ms cubic-bezier(.22, .61, .36, 1) 1100ms both;
}

/* ---------------------------------------------------------------
   Slide 2 — AGENDA
   --------------------------------------------------------------- */
#agenda .eyebrow,
#agenda .title,
#agenda .lead,
#agenda .agenda-card {
  animation: none;
}
#agenda[data-deck-active] .eyebrow {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 80ms both;
}
#agenda[data-deck-active] .title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 220ms both;
}
#agenda[data-deck-active] .lead {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 400ms both;
}
#agenda[data-deck-active] .agenda-card {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 550ms both;
}
/* Stagger agenda cards: 4 cards, 100ms apart starting at 550ms */
#agenda[data-deck-active] .agenda-card:nth-child(1) { animation-delay: 550ms; }
#agenda[data-deck-active] .agenda-card:nth-child(2) { animation-delay: 670ms; }
#agenda[data-deck-active] .agenda-card:nth-child(3) { animation-delay: 790ms; }
#agenda[data-deck-active] .agenda-card:nth-child(4) { animation-delay: 910ms; }

/* ---------------------------------------------------------------
   Slide 3 — SECTION-ABOUT DIVIDER
   --------------------------------------------------------------- */
#section-about .divider__title,
#section-about .divider__rule,
#section-about .divider__num-big {
  animation: none;
}
#section-about[data-deck-active] .divider__num-big {
  animation: deck-zoom-in 1100ms cubic-bezier(.22, .61, .36, 1) 200ms both;
}
#section-about[data-deck-active] .divider__title {
  animation: deck-slide-from-start 800ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#section-about[data-deck-active] .divider__rule {
  animation: deck-rule-grow 700ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}

/* ---------------------------------------------------------------
   Slide 4 — ABOUT
   --------------------------------------------------------------- */
#about .about-v2__topline,
#about .about-v2__title,
#about .about-v2__rule,
#about .about-v2__lead,
#about .about-v2__services-head,
#about .about-v2__service,
#about .about-v2__claim,
#about .about-v2__tile {
  animation: none;
}
#about[data-deck-active] .about-v2__topline {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 80ms both;
}
#about[data-deck-active] .about-v2__title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 220ms both;
}
#about[data-deck-active] .about-v2__rule {
  animation: deck-rule-grow 600ms cubic-bezier(.22, .61, .36, 1) 450ms both;
}
#about[data-deck-active] .about-v2__lead {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 550ms both;
}
#about[data-deck-active] .about-v2__services-head {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}
#about[data-deck-active] .about-v2__service {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 800ms both;
}
#about[data-deck-active] .about-v2__service:nth-child(2) { animation-delay: 900ms; }
#about[data-deck-active] .about-v2__claim {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 1050ms both;
}
#about[data-deck-active] .about-v2__tile {
  animation: deck-zoom-in 800ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}
#about[data-deck-active] .about-v2__tile:nth-child(1) { animation-delay: 700ms; }
#about[data-deck-active] .about-v2__tile:nth-child(2) { animation-delay: 820ms; }
#about[data-deck-active] .about-v2__tile:nth-child(3) { animation-delay: 940ms; }
#about[data-deck-active] .about-v2__tile:nth-child(4) { animation-delay: 1060ms; }

/* ---------------------------------------------------------------
   Slide 5 — TEAM
   --------------------------------------------------------------- */
#team .eyebrow,
#team .title,
#team .founder {
  animation: none;
}
#team[data-deck-active] .eyebrow {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 80ms both;
}
#team[data-deck-active] .title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 220ms both;
}
#team[data-deck-active] .founder {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 450ms both;
}
#team[data-deck-active] .founder:nth-child(1) { animation-delay: 450ms; }
#team[data-deck-active] .founder:nth-child(2) { animation-delay: 600ms; }
#team[data-deck-active] .founder:nth-child(3) { animation-delay: 750ms; }
/* Inside each founder, the portrait zooms in slightly on top of the
   parent fade-up — gives a "card builds up" feel without being busy. */
#team .founder__photo-wrap { animation: none; }
#team[data-deck-active] .founder__photo-wrap {
  animation: deck-zoom-in 1000ms cubic-bezier(.22, .61, .36, 1) 550ms both;
}
#team[data-deck-active] .founder:nth-child(2) .founder__photo-wrap { animation-delay: 700ms; }
#team[data-deck-active] .founder:nth-child(3) .founder__photo-wrap { animation-delay: 850ms; }

/* ---------------------------------------------------------------
   Slide 6 — SECTION-MARKET DIVIDER
   --------------------------------------------------------------- */
#section-market .divider__title,
#section-market .divider__rule,
#section-market .divider__num-big {
  animation: none;
}
#section-market[data-deck-active] .divider__num-big {
  animation: deck-zoom-in 1100ms cubic-bezier(.22, .61, .36, 1) 200ms both;
}
#section-market[data-deck-active] .divider__title {
  animation: deck-slide-from-start 800ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#section-market[data-deck-active] .divider__rule {
  animation: deck-rule-grow 700ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}

/* ---------------------------------------------------------------
   Slide 7 — MARKET
   --------------------------------------------------------------- */
#market .market__head,
#market .market__stat,
#market .market__chart-card,
#market .market__intl-banner,
#market .market__source {
  animation: none;
}
#market[data-deck-active] .market__head {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 100ms both;
}
#market[data-deck-active] .market__stat {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 400ms both;
}
#market[data-deck-active] .market__stat:nth-child(1) { animation-delay: 400ms; }
#market[data-deck-active] .market__stat:nth-child(2) { animation-delay: 560ms; }
#market[data-deck-active] .market__stat:nth-child(3) { animation-delay: 720ms; }
#market[data-deck-active] .market__chart-card {
  animation: deck-fade-up 900ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#market[data-deck-active] .market__intl-banner {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 950ms both;
}
#market[data-deck-active] .market__source {
  animation: deck-fade-in 600ms cubic-bezier(.22, .61, .36, 1) 1150ms both;
}

/* The chart line itself draws in as if being plotted live. We use
   stroke-dasharray to "draw" the line from one end to the other. */
@keyframes deck-draw-line {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}
#market .market-chart__line { animation: none; }
#market[data-deck-active] .market-chart__line {
  stroke-dasharray: 800;
  animation: deck-draw-line 1600ms cubic-bezier(.22, .61, .36, 1) 600ms both;
}

/* ---------------------------------------------------------------
   Slide 8 — SECTION-SERVICES DIVIDER
   --------------------------------------------------------------- */
#section-services .divider__title,
#section-services .divider__rule,
#section-services .divider__num-big {
  animation: none;
}
#section-services[data-deck-active] .divider__num-big {
  animation: deck-zoom-in 1100ms cubic-bezier(.22, .61, .36, 1) 200ms both;
}
#section-services[data-deck-active] .divider__title {
  animation: deck-slide-from-start 800ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#section-services[data-deck-active] .divider__rule {
  animation: deck-rule-grow 700ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}

/* ---------------------------------------------------------------
   Slide 9 — SERVICES
   --------------------------------------------------------------- */
#services .eyebrow,
#services .title,
#services .lead,
#services .services-hub-grid > *,
#services .services-hub-card {
  animation: none;
}
#services[data-deck-active] .eyebrow {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 80ms both;
}
#services[data-deck-active] .title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 220ms both;
}
#services[data-deck-active] .lead {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 400ms both;
}
#services[data-deck-active] .services-hub-card,
#services[data-deck-active] .services-hub-grid > * {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 550ms both;
}
#services[data-deck-active] .services-hub-grid > *:nth-child(1) { animation-delay: 550ms; }
#services[data-deck-active] .services-hub-grid > *:nth-child(2) { animation-delay: 700ms; }
#services[data-deck-active] .services-hub-grid > *:nth-child(3) { animation-delay: 850ms; }
#services[data-deck-active] .services-hub-grid > *:nth-child(4) { animation-delay: 1000ms; }

/* ============================================================
   SLIDE TRANSITIONS — Slides 10-16
   --------------------------------------------------------------
   Scope: service-built, service-offplan, dashboard,
   section-platform, proof, asset, thanks.
   (Slides 1-9 are handled in the block above by the parallel
   agent. The slide-level cross-fade rule on `deck-stage > section`
   is global so all slides get the smooth opacity transition.)

   Reuses the same keyframes (deck-fade-up, deck-fade-in,
   deck-zoom-in, deck-zoom-out, deck-slide-from-start,
   deck-rule-grow) and the same easing
   cubic-bezier(.22, .61, .36, 1) for visual consistency
   with slides 1-9. Adds two new keyframes for cases unique
   to this half of the deck:
   - deck-slide-from-top: dashboard's browser-chrome top bar
   - deck-stamp-in: proof slide's centred brand stamp
     (must preserve translate(-50%, -50%) anchor)

   Faris's direction 2026-05-16: smooth transitions, fading in,
   morph-like feel, never annoying — out of this world. The
   brand chrome (.chrome) is intentionally not animated so it
   stays as a stable anchor across slide changes.
   ============================================================ */

/* --- Custom keyframes for slides 10-16 --- */
@keyframes deck-slide-from-top {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes deck-stamp-in {
  /* Centred element — preserve the translate(-50%, -50%) anchor */
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------------------------------------------------------------
   Slide 10 — SERVICE-BUILT (الخدمة الأولى)
   Headline cascades in, hero frame zooms gently, body & checks
   rise, QR card pops in last as the call to action.
   --------------------------------------------------------------- */
#service-built .eyebrow,
#service-built .title,
#service-built .lead,
#service-built .checks,
#service-built .frame,
#service-built .qr-corner {
  animation: none;
}
#service-built[data-deck-active] .eyebrow {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 100ms both;
}
#service-built[data-deck-active] .title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 250ms both;
}
#service-built[data-deck-active] .frame {
  animation: deck-zoom-in 1000ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#service-built[data-deck-active] .lead {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 500ms both;
}
#service-built[data-deck-active] .checks {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}
#service-built[data-deck-active] .qr-corner {
  animation: deck-zoom-in 800ms cubic-bezier(.22, .61, .36, 1) 900ms both;
}

/* ---------------------------------------------------------------
   Slide 11 — SERVICE-OFFPLAN (الخدمة الثانية)
   Mirror of slide 10 — same structure, same animation rhythm.
   --------------------------------------------------------------- */
#service-offplan .eyebrow,
#service-offplan .title,
#service-offplan .lead,
#service-offplan .checks,
#service-offplan .frame,
#service-offplan .qr-corner {
  animation: none;
}
#service-offplan[data-deck-active] .eyebrow {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 100ms both;
}
#service-offplan[data-deck-active] .title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 250ms both;
}
#service-offplan[data-deck-active] .frame {
  animation: deck-zoom-in 1000ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#service-offplan[data-deck-active] .lead {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 500ms both;
}
#service-offplan[data-deck-active] .checks {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}
#service-offplan[data-deck-active] .qr-corner {
  animation: deck-zoom-in 800ms cubic-bezier(.22, .61, .36, 1) 900ms both;
}

/* ---------------------------------------------------------------
   Slide 12 — DASHBOARD (لوحة تورلي)
   The dashboard mock has a browser-chrome wrapper. Webnav drops
   in from the top like a real browser loading a page, then the
   hero copy reveals, then KPI cards cascade across, then the
   widget panels rise in.
   --------------------------------------------------------------- */
#dashboard .dash2__webnav,
#dashboard .dash2-hero__eyebrow,
#dashboard .dash2-hero__title,
#dashboard .dash2-hero__lead,
#dashboard .dash2-kpi,
#dashboard .dash2-widget {
  animation: none;
}
#dashboard[data-deck-active] .dash2__webnav {
  animation: deck-slide-from-top 700ms cubic-bezier(.22, .61, .36, 1) 100ms both;
}
#dashboard[data-deck-active] .dash2-hero__eyebrow {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#dashboard[data-deck-active] .dash2-hero__title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 470ms both;
}
#dashboard[data-deck-active] .dash2-hero__lead {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 650ms both;
}
#dashboard[data-deck-active] .dash2-kpi {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 800ms both;
}
#dashboard[data-deck-active] .dash2-kpi:nth-child(1) { animation-delay: 800ms; }
#dashboard[data-deck-active] .dash2-kpi:nth-child(2) { animation-delay: 920ms; }
#dashboard[data-deck-active] .dash2-kpi:nth-child(3) { animation-delay: 1040ms; }
#dashboard[data-deck-active] .dash2-kpi:nth-child(4) { animation-delay: 1160ms; }
#dashboard[data-deck-active] .dash2-widget {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 1100ms both;
}
#dashboard[data-deck-active] .dash2-widget:nth-child(2) { animation-delay: 1250ms; }
#dashboard[data-deck-active] .dash2-widget:nth-child(3) { animation-delay: 1400ms; }

/* ---------------------------------------------------------------
   Slide 13 — SECTION-PLATFORM DIVIDER (الجزء ٤ · الأثر)
   Same recipe as the other section dividers — number zooms,
   title slides in from the start (right in RTL), accent rule
   grows from start to end.
   --------------------------------------------------------------- */
#section-platform .divider__title,
#section-platform .divider__rule,
#section-platform .divider__num-big {
  animation: none;
}
#section-platform[data-deck-active] .divider__num-big {
  animation: deck-zoom-in 1100ms cubic-bezier(.22, .61, .36, 1) 200ms both;
}
#section-platform[data-deck-active] .divider__title {
  animation: deck-slide-from-start 800ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#section-platform[data-deck-active] .divider__rule {
  animation: deck-rule-grow 700ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}

/* ---------------------------------------------------------------
   Slide 14 — PROOF (الأثر — the four quadrants + centre stamp)
   The four quadrants build up one by one (~120ms apart), then
   the brand stamp pops into the middle as the final reveal —
   like four pillars rising and the keystone dropping in.
   --------------------------------------------------------------- */
#proof .proof-quad,
#proof .proof-stamp {
  animation: none;
}
#proof[data-deck-active] .proof-quad {
  animation: deck-zoom-in 800ms cubic-bezier(.22, .61, .36, 1) 200ms both;
}
#proof[data-deck-active] .proof-quad[data-bg="q1"] { animation-delay: 200ms; }
#proof[data-deck-active] .proof-quad[data-bg="q2"] { animation-delay: 320ms; }
#proof[data-deck-active] .proof-quad[data-bg="q3"] { animation-delay: 440ms; }
#proof[data-deck-active] .proof-quad[data-bg="q4"] { animation-delay: 560ms; }
#proof[data-deck-active] .proof-stamp {
  animation: deck-stamp-in 700ms cubic-bezier(.22, .61, .36, 1) 850ms both;
}

/* ---------------------------------------------------------------
   Slide 15 — ASSET (أصلٌ تسويقيّ)
   Background fades in with a slow KenBurns-style zoom-out (the
   same hero-photo treatment used on the cover), then the
   editorial copy and the comparison table cascade in.
   --------------------------------------------------------------- */
#asset .asset__bg,
#asset .asset__eyebrow,
#asset .asset__title,
#asset .asset__lead,
#asset .asset-compare,
#asset .asset-compare__row {
  animation: none;
}
#asset[data-deck-active] .asset__bg {
  animation: deck-fade-in 1200ms cubic-bezier(.22, .61, .36, 1) 0ms both,
             deck-zoom-out 9000ms ease-out 0ms both;
}
#asset[data-deck-active] .asset__eyebrow {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 250ms both;
}
#asset[data-deck-active] .asset__title {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 400ms both;
}
#asset[data-deck-active] .asset__lead {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 600ms both;
}
#asset[data-deck-active] .asset-compare {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 750ms both;
}
#asset[data-deck-active] .asset-compare__row {
  animation: deck-fade-up 600ms cubic-bezier(.22, .61, .36, 1) 950ms both;
}
#asset[data-deck-active] .asset-compare__row:nth-child(1) { animation-delay: 950ms; }
#asset[data-deck-active] .asset-compare__row:nth-child(2) { animation-delay: 1050ms; }
#asset[data-deck-active] .asset-compare__row:nth-child(3) { animation-delay: 1150ms; }
#asset[data-deck-active] .asset-compare__row:nth-child(4) { animation-delay: 1250ms; }

/* ---------------------------------------------------------------
   Slide 16 — THANKS (شكراً)
   The closing slide. Founder/portrait image fades in with a
   slow KenBurns breathe (12 seconds — they'll be sitting on
   this slide for a while during Q&A), then the panel content
   cascades in.
   --------------------------------------------------------------- */
#thanks .thankyou-split__image,
#thanks .thankyou-split__brand,
#thanks .thankyou-split__name,
#thanks .thankyou-split__body,
#thanks .thankyou-split__contact {
  animation: none;
}
#thanks[data-deck-active] .thankyou-split__image {
  animation: deck-fade-in 1200ms cubic-bezier(.22, .61, .36, 1) 100ms both,
             deck-zoom-out 12000ms ease-out 100ms both;
}
#thanks[data-deck-active] .thankyou-split__brand {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 350ms both;
}
#thanks[data-deck-active] .thankyou-split__name {
  animation: deck-fade-up 800ms cubic-bezier(.22, .61, .36, 1) 500ms both;
}
#thanks[data-deck-active] .thankyou-split__body {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 700ms both;
}
#thanks[data-deck-active] .thankyou-split__contact {
  animation: deck-fade-up 700ms cubic-bezier(.22, .61, .36, 1) 900ms both;
}

/* --- Reduced motion: respect the user's setting --- */
@media (prefers-reduced-motion: reduce) {
  deck-stage > section {
    transition: opacity 200ms linear !important;
    transform: none !important;
  }
  deck-stage > section:not([data-deck-active]) {
    transform: none !important;
  }
  /* Disable all keyframe animations on every animated slide (1-16) */
  #cover *, #agenda *, #section-about *, #about *, #team *,
  #section-market *, #market *, #section-services *, #services *,
  #service-built *, #service-offplan *, #dashboard *, #section-platform *,
  #proof *, #asset *, #thanks * {
    animation: none !important;
  }
}