/* Daya website RC2 — one stylesheet for every page, English (LTR) and Arabic (RTL).
   Identity: Brand Guidelines v1 and the RC1 site (Night plum ground, Dawn cream reading
   surfaces, amber accent; Fraunces + Instrument Sans; IBM Plex Sans Arabic).
   Logical properties throughout, so dir="rtl" mirrors layout without extra rules.
   No inline styles or scripts are needed by any page (strict CSP in public/_headers). */

/* ---------- Fonts (self-hosted, subset; unicode-range means each page downloads only what it uses) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 200 400;
  font-display: swap;
  src: url('../fonts/fraunces-daya-normal.4b0ca2ffc0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/fraunces-daya-italic.bb8cef92f1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin-wght-normal.2ee17598a9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic (SIL OFL 1.1, assets/fonts/IBM-Plex-Sans-Arabic-OFL.txt), Arabic subset only */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-300-normal.441410df80.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.6010e7fd0d.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.90aef64fea.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.16734a5adb.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Metric-matched fallbacks so the first paint does not jump when the webfonts arrive */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial');
  size-adjust: 99%;
  ascent-override: 94%;
  descent-override: 22%;
}

/* ---------- Tokens ---------- */
:root {
  --night: #16111c;
  --dusk: #241a2e;
  --dusk-2: #2d2238;
  --ivory: #f4ece2;
  --gold: #efb45f;
  --gold-bright: #ffd9a0;
  --rose: #e5b5a6;
  --dawn: #f3ebe3;
  --dawn-deep: #eae0d6;
  --paper: #fbf7f2;
  --ink: #1e1724;
  --wine: #7a2f4f;
  --signal: #b8392a;

  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --font-text: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Instrument Sans', system-ui, 'Segoe UI', Tahoma, sans-serif;

  --size-h1: clamp(2.6rem, 1.55rem + 4.3vw, 5.4rem);
  --size-h2: clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
  --size-h3: clamp(1.25rem, 1.12rem + 0.5vw, 1.6rem);
  --size-lead: clamp(1.0625rem, 0.99rem + 0.36vw, 1.3rem);
  --size-body: clamp(1rem, 0.97rem + 0.15vw, 1.0938rem);
  --size-small: 0.875rem;
  --size-eyebrow: 0.75rem;

  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
  --page-max: 76rem;
  --measure: 62ch;
  --section: clamp(4rem, 2.4rem + 6.5vw, 8.5rem);
  --header-h: 4.5rem;
  --radius: 1.25rem;
  --radius-lg: 1.75rem;
  --d-curve: clamp(5rem, 18vw, 14rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Night scene (default) */
  --bg: var(--night);
  --fg: var(--ivory);
  --fg-muted: rgba(244, 236, 226, 0.7);
  --fg-faint: rgba(244, 236, 226, 0.45);
  --surface: var(--dusk);
  --surface-2: var(--dusk-2);
  --line: rgba(244, 236, 226, 0.14);
  --line-strong: rgba(244, 236, 226, 0.32);
  --accent: var(--gold);
  --em: var(--gold);
  --link: var(--gold);
  --button-bg: var(--gold);
  --button-fg: var(--night);
  --button-hover: var(--gold-bright);
  --focus: var(--gold);
  --logo-accent: var(--gold);
  --logo-rule: #5a5066;
  color-scheme: dark;
}

/* Dawn scene: cream reading surfaces */
.dawn {
  --bg: var(--dawn);
  --fg: var(--ink);
  --fg-muted: rgba(30, 23, 36, 0.72);
  --fg-faint: rgba(30, 23, 36, 0.5);
  --surface: var(--paper);
  --surface-2: var(--dawn-deep);
  --line: rgba(30, 23, 36, 0.13);
  --line-strong: rgba(30, 23, 36, 0.3);
  --accent: var(--wine);
  --em: var(--wine);
  --link: var(--wine);
  --button-bg: var(--ink);
  --button-fg: var(--ivory);
  --button-hover: #3a2a4a;
  --focus: var(--wine);
  --logo-accent: var(--ink);
  --logo-rule: #a89fa6;
  color-scheme: light;
}
.night {
  --bg: var(--night);
  --fg: var(--ivory);
  --fg-muted: rgba(244, 236, 226, 0.7);
  --fg-faint: rgba(244, 236, 226, 0.45);
  --surface: var(--dusk);
  --surface-2: var(--dusk-2);
  --line: rgba(244, 236, 226, 0.14);
  --line-strong: rgba(244, 236, 226, 0.32);
  --accent: var(--gold);
  --em: var(--gold);
  --link: var(--gold);
  --button-bg: var(--gold);
  --button-fg: var(--night);
  --button-hover: var(--gold-bright);
  --focus: var(--gold);
  --logo-accent: var(--gold);
  --logo-rule: #5a5066;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Smooth in-page scrolling is switched on by site.js after load, so arriving at page.html#section
   jumps straight to the section instead of scrolling down from the top. */
@media (prefers-reduced-motion: no-preference) {
  html.smooth {
    scroll-behavior: smooth;
  }
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--night);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html[lang='ar'] body {
  font-family: var(--font-ar);
  line-height: 1.8;
}
img,
svg,
picture {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--gold);
  color: var(--night);
}
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}
bdi {
  unicode-bidi: isolate;
}
html[lang='ar'] bdi[lang='en'] {
  font-family: var(--font-text);
  white-space: nowrap;
}
.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--night);
  font-weight: 600;
  transform: translateY(-220%);
  transition: transform 160ms var(--ease);
}
.skip-link:focus-visible {
  transform: none;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  position: relative;
  padding-block: var(--section);
  background: var(--bg);
  color: var(--fg);
}
.section--tight {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.section + .section.dawn,
.dawn + .dawn {
  border-top: 1px solid var(--line);
}
.section-head {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
  margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .split--reverse > :first-child {
    order: 2;
  }
  .split--top {
    align-items: start;
  }
}

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1.3;
}
.eyebrow::before {
  content: '';
  inline-size: 1.75rem;
  block-size: 1px;
  background: var(--accent);
}
html[lang='ar'] .eyebrow {
  letter-spacing: 0;
  font-size: 0.875rem;
  text-transform: none;
}
.h1,
.h2,
.h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  text-wrap: balance;
}
.h1 {
  font-size: var(--size-h1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.022em;
}
.h2 {
  font-size: var(--size-h2);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.016em;
}
.h3 {
  font-size: var(--size-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.006em;
}
.em {
  font-style: italic;
  color: var(--em);
}
html[lang='ar'] .h1,
html[lang='ar'] .h2,
html[lang='ar'] .h3 {
  font-family: var(--font-ar);
  letter-spacing: 0;
  font-variation-settings: normal;
}
html[lang='ar'] .h1 {
  font-weight: 500;
  line-height: 1.3;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
}
html[lang='ar'] .h2 {
  font-weight: 500;
  line-height: 1.35;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
html[lang='ar'] .h3 {
  font-weight: 600;
  line-height: 1.5;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
}
html[lang='ar'] .em {
  font-style: normal;
}
.lead {
  font-size: var(--size-lead);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 58ch;
  text-wrap: pretty;
}
.body {
  color: var(--fg-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}
.body + .body {
  margin-top: 1rem;
}
.small {
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--fg-muted);
}
html[lang='ar'] .small {
  font-size: 0.9375rem;
  line-height: 1.75;
}
.prose {
  display: grid;
  gap: 1rem;
  max-width: var(--measure);
  color: var(--fg-muted);
}
.prose strong {
  color: var(--fg);
  font-weight: 600;
}
.prose ul {
  display: grid;
  gap: 0.5rem;
}
.prose ul > li {
  position: relative;
  padding-inline-start: 1.25rem;
}
.prose ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}
.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 160ms var(--ease);
}
.link:hover {
  text-decoration-thickness: 2px;
}
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--link);
}
.arrow-link::after {
  content: '→';
  transition: transform 200ms var(--ease);
}
html[dir='rtl'] .arrow-link::after {
  content: '←';
}
.arrow-link:hover::after {
  transform: translateX(4px);
}
html[dir='rtl'] .arrow-link:hover::after {
  transform: translateX(-4px);
}
.arrow-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-fg);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.button:hover {
  background: var(--button-hover);
  transform: translateY(-1px);
}
.button:active {
  transform: translateY(0) scale(0.98);
}
.button--ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.button--ghost:hover {
  background: var(--surface);
  color: var(--fg);
}
.button--small {
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

/* Official store badges: Apple and Google artwork, unaltered, same height, at least 40 px */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.badge:hover {
  transform: translateY(-2px);
}
.badge img {
  height: 48px;
  width: auto;
}
.badges--small .badge img {
  height: 44px;
}
.dawn .badge:focus-visible {
  outline-color: var(--wine);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(22, 17, 28, 0.94);
  color: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
  view-transition-name: site-header;
}
@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(22, 17, 28, 0.82);
    backdrop-filter: saturate(140%) blur(14px);
  }
}
.site-header.is-scrolled {
  border-bottom-color: rgba(244, 236, 226, 0.12);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}
.brand {
  --logo-cap: 21px;
  display: inline-flex;
  align-items: center;
  margin-inline-end: auto;
  padding-block: 0.5rem;
  border-radius: 6px;
}
.logo {
  --logo-h: 1.4827;
  --logo-shift: 0.2276;
  display: block;
  height: calc(var(--logo-cap, 24px) * var(--logo-h));
  width: auto;
  overflow: visible;
  transform: translateY(calc(var(--logo-cap, 24px) * var(--logo-shift)));
}
.logo__i {
  fill: currentColor;
}
.logo__a {
  fill: var(--logo-accent);
}
.logo__r {
  fill: var(--logo-rule);
}
.nav {
  display: none;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.4vw, 2rem);
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: rgba(244, 236, 226, 0.76);
  transition: color 160ms var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.45rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--origin, left);
  transition: transform 220ms var(--ease);
}
html[dir='rtl'] .nav a::after {
  --origin: right;
}
.nav a:hover,
.nav a:focus-visible {
  color: var(--ivory);
}
.nav a:hover::after {
  transform: scaleX(1);
  opacity: 0.6;
}
.nav a[aria-current='page'] {
  color: var(--ivory);
}
.nav a[aria-current='page']::after {
  transform: scaleX(1);
  opacity: 1;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, 0.32);
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.lang-switch:hover {
  background: rgba(244, 236, 226, 0.08);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, 0.55);
}
.lang-switch svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
}
.lang-switch[lang='ar'] {
  font-family: var(--font-ar);
}
.lang-switch[lang='en'] {
  font-family: var(--font-text);
}
.site-header .button {
  display: none;
}
.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ivory);
  background: rgba(244, 236, 226, 0.08);
}
html[dir='rtl'] .menu-button {
  padding: 0.4rem 0.75rem 0.4rem 0.9rem;
}
.menu-button:hover {
  background: rgba(244, 236, 226, 0.14);
}
.menu-button__icon {
  position: relative;
  inline-size: 1.125rem;
  block-size: 0.75rem;
}
.menu-button__icon::before,
.menu-button__icon::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
}
.menu-button__icon::before {
  inset-block-start: 0;
}
.menu-button__icon::after {
  inset-block-end: 0;
}
/* The page names stay in the header from 600 px (the founder, 23 Oct 2026: "put the pages name in
   the header as before"). From 600 to 959 px the logo, the language switch and Download sit on the
   first row and the page names take a row of their own; from 960 px everything fits on one row.
   Below 600 px the Menu button holds them. Home is the logo; Download is the button. */
@media (min-width: 600px) {
  .nav {
    display: inline-flex;
  }
  .site-header .button {
    display: inline-flex;
  }
  .menu-button {
    display: none;
  }
}
@media (min-width: 600px) and (max-width: 959px) {
  :root {
    --header-h: 7.4rem;
  }
  .site-header__inner {
    flex-wrap: wrap;
    align-content: center;
    column-gap: 0.75rem;
    row-gap: 0;
    padding-block: 0.45rem 0.2rem;
  }
  .nav {
    order: 9;
    flex: 1 0 100%;
    gap: clamp(1.25rem, 3.2vw, 2.25rem);
    border-top: 1px solid rgba(244, 236, 226, 0.08);
  }
}

/* ---------- Mobile menu (a modal sheet; the rest of the page is inert while it is open) ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--night);
  color: var(--ivory);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu:not(.is-open) {
  display: none;
}
.menu__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
  border-bottom: 1px solid rgba(244, 236, 226, 0.12);
}
.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  background: rgba(244, 236, 226, 0.08);
}
.menu__close:hover {
  background: rgba(244, 236, 226, 0.14);
}
.menu__close-icon {
  position: relative;
  inline-size: 0.875rem;
  block-size: 0.875rem;
}
.menu__close-icon::before,
.menu__close-icon::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(50% - 1px);
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.menu__close-icon::after {
  transform: rotate(-45deg);
}
.menu__links {
  display: grid;
  align-content: start;
  padding-block: 1.5rem;
}
.menu__links a {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid rgba(244, 236, 226, 0.1);
}
.menu__links a span:first-child {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.4rem);
  line-height: 1.1;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
}
html[lang='ar'] .menu__links a span:first-child {
  font-family: var(--font-ar);
  font-weight: 500;
  line-height: 1.4;
}
.menu__links a span:last-child {
  font-size: 0.9375rem;
  color: rgba(244, 236, 226, 0.66);
}
.menu__links a[aria-current='page'] span:first-child {
  color: var(--gold);
}
.menu__links a[aria-current='page'] span:first-child::before {
  content: '';
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-end: 0.65rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}
.menu__foot {
  display: grid;
  gap: 1rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid rgba(244, 236, 226, 0.12);
}
.menu__foot .actions {
  gap: 0.75rem;
}
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open {
    animation: menu-in 260ms var(--ease-out) both;
  }
  .menu.is-open .menu__links a {
    animation: rise 420ms var(--ease-out) both;
    animation-delay: 60ms;
  }
  .menu.is-open .menu__links a:nth-child(2) { animation-delay: 95ms; }
  .menu.is-open .menu__links a:nth-child(3) { animation-delay: 130ms; }
  .menu.is-open .menu__links a:nth-child(4) { animation-delay: 165ms; }
  .menu.is-open .menu__links a:nth-child(5) { animation-delay: 200ms; }
  .menu.is-open .menu__links a:nth-child(6) { animation-delay: 235ms; }
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
html.menu-open {
  overflow: hidden;
}

/* ---------- Heroes ---------- */
.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3.5rem, 2rem + 5vw, 7rem);
  background: var(--night);
}
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  inline-size: min(70rem, 120vw);
  block-size: min(60rem, 110vw);
  background: radial-gradient(closest-side, rgba(255, 217, 160, 0.16), rgba(239, 180, 95, 0.07) 45%, transparent 72%);
  pointer-events: none;
}
html[dir='rtl'] .hero::before {
  inset: -30% auto auto -10%;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}
.hero__copy {
  display: grid;
  gap: 1.35rem;
  justify-items: start;
}
.hero__copy .lead {
  color: rgba(244, 236, 226, 0.8);
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: var(--size-small);
  color: rgba(244, 236, 226, 0.66);
}
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__facts li::before {
  content: '';
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 50%;
  background: var(--gold);
}
.hero--page {
  padding-block: clamp(2.25rem, 1.4rem + 3vw, 4.5rem) clamp(2.75rem, 1.6rem + 4vw, 5.5rem);
}
.hero--page .hero__grid {
  align-items: center;
}
.hero--compact {
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.75rem) clamp(2.25rem, 1.4rem + 3vw, 4rem);
}
.hero__aside {
  display: grid;
  gap: 1rem;
  align-content: end;
}
.page-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.page-index a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.page-index a:hover {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---------- Photographs ----------
   Natural colour, never recoloured: a soft plum shade at the foot of each frame and a hairline
   keep photos in the palette without touching skin tones. The "open D" frame takes the curve of
   the Daya wordmark's D on the inline-end side (it mirrors in Arabic; the photo itself never flips). */
.photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: var(--ph, var(--dusk));
  box-shadow: 0 30px 60px -30px rgba(10, 6, 14, 0.55);
}
.photo picture,
.photo img {
  inline-size: 100%;
  block-size: 100%;
}
.photo img {
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 40%);
}
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(36, 26, 46, 0) 58%, rgba(22, 17, 28, 0.32) 100%);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, 0.08);
}
.photo--d {
  border-start-end-radius: var(--d-curve);
  border-end-end-radius: var(--d-curve);
}
.photo--tall {
  aspect-ratio: 4 / 5;
}
.photo--wide {
  aspect-ratio: 16 / 10;
}
.photo--square {
  aspect-ratio: 1;
}
@media (max-width: 959px) {
  .hero .photo--tall {
    aspect-ratio: 5 / 5.4;
    max-block-size: 34rem;
  }
}
/* Focal points per photograph (placeholder colour is the photo's average) */
.photo--woman-evening {
  --ph: #4e4d49;
  --focus-x: 46%;
  --focus-y: 30%;
}
.photo--family-park {
  --ph: #c3b187;
  --focus-x: 52%;
  --focus-y: 45%;
}
.photo--woman-library {
  --ph: #6d755a;
  --focus-x: 52%;
  --focus-y: 32%;
}
.photo--pregnancy-scan {
  --ph: #826867;
  --focus-x: 50%;
  --focus-y: 50%;
}
.photo--mother-newborn {
  --ph: #7d6651;
  --focus-x: 50%;
  --focus-y: 40%;
}
.photo--clinician-listening {
  --ph: #7f837b;
  --focus-x: 60%;
  --focus-y: 45%;
}
.photo-note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--fg-faint);
}
html[lang='ar'] .photo-note {
  font-size: 0.875rem;
}

/* ---------- Cards and grids ---------- */
.cards {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}
@media (min-width: 720px) {
  .cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards--3,
  .cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.card p {
  color: var(--fg-muted);
}
.card__n {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
html[lang='ar'] .card__n {
  font-family: var(--font-text);
}
a.card {
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease);
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--accent), 0 18px 40px -26px rgba(22, 17, 28, 0.6);
}
a.card .arrow-link {
  margin-top: auto;
  min-height: 0;
  padding-top: 0.5rem;
}
.card--quiet {
  background: transparent;
}
.card--accent {
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Pillars ("what Daya is") */
.pillars {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) {
  .pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
  }
}
.pillar {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) {
  .pillar {
    padding: 0 clamp(1.25rem, 2.5vw, 2.5rem) 0;
    border-bottom: 0;
    border-inline-start: 1px solid var(--line);
  }
  .pillar:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}
.pillar p {
  color: var(--fg-muted);
}

/* Steps: numbered sequence */
.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}
@media (min-width: 900px) {
  .steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
  }
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}
.step__n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-variant-numeric: tabular-nums;
}
html[lang='ar'] .step__n {
  font-family: var(--font-text);
}
.step__t {
  font-weight: 600;
  color: var(--fg);
  align-self: center;
}
.step__d {
  color: var(--fg-muted);
}
@media (min-width: 900px) {
  .steps--4 .step {
    grid-template-columns: 1fr;
    padding-block: 1.5rem 0;
    border-top: 0;
  }
  .steps--4 .step__n {
    grid-row: auto;
    margin-bottom: 0.75rem;
  }
  .steps--4 .step::before {
    content: '';
    position: absolute;
    inset-block-start: calc(1.5rem + 1.25rem);
    inset-inline-start: 3.25rem;
    inset-inline-end: -1rem;
    block-size: 1px;
    background: var(--line-strong);
  }
  .steps--4 .step:last-child::before {
    display: none;
  }
}

/* Lists with ticks and crosses */
.checks {
  display: grid;
  gap: 0.75rem;
}
.checks li {
  position: relative;
  padding-inline-start: 1.9rem;
  color: var(--fg-muted);
}
.checks li strong {
  color: var(--fg);
  font-weight: 600;
}
.checks li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.3em;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.checks li::after {
  content: '';
  position: absolute;
  inset-inline-start: 0.4rem;
  inset-block-start: calc(0.3em + 0.28rem);
  inline-size: 0.32rem;
  block-size: 0.55rem;
  border-inline-end: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  transform: rotate(40deg);
}
html[dir='rtl'] .checks li::after {
  transform: rotate(-40deg);
}
.checks--no li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.checks--no li::after {
  inset-inline-start: 0.3rem;
  inset-block-start: calc(0.3em + 0.3rem);
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border: 0;
  transform: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--fg-muted) calc(50% - 1px), var(--fg-muted) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--fg-muted) calc(50% - 1px), var(--fg-muted) calc(50% + 1px), transparent calc(50% + 1px));
}
html[dir='rtl'] .checks--no li::after {
  transform: none;
}

/* Callouts */
.callout {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border-inline-start: 3px solid var(--accent);
}
.callout p {
  color: var(--fg-muted);
}
.callout strong {
  color: var(--fg);
}
.callout--urgent {
  border-inline-start-color: var(--signal);
}
.dawn .callout--urgent {
  background: #fbf1ee;
}

/* Data table: what is used, kept and shared */
.facts {
  display: grid;
  border-top: 1px solid var(--line);
}
.facts > div {
  display: grid;
  gap: 0.4rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .facts > div {
    grid-template-columns: minmax(10rem, 0.32fr) 1fr;
  }
}
.facts dt {
  font-weight: 600;
  color: var(--fg);
}
.facts dd {
  color: var(--fg-muted);
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  border-top: 1px solid var(--line);
  max-width: 54rem;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary > span {
  flex: 1 1 auto;
}
/* A down-pointing chevron in both directions: physical borders, so Arabic doesn't turn it sideways */
.faq summary::after {
  content: '';
  flex: none;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.faq summary:hover {
  color: var(--accent);
}
.faq details > div {
  padding-block: 0 1.35rem;
  color: var(--fg-muted);
  max-width: 62ch;
}
.faq details > div p + p {
  margin-top: 0.75rem;
}

/* ---------- Agent intro band (home) ---------- */
.agent-band {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .agent-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  }
}
.mini-chat {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--dusk) 0%, #1c1524 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mini-chat__label {
  font-size: 0.8125rem;
  color: var(--fg-faint);
}

/* ---------- Chat demonstration ---------- */
.chat-demo {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
}
.chat-demo__examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.chat-demo__examples button {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.chat-demo__examples button:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.chat-demo__examples button[aria-pressed='true'] {
  background: var(--gold);
  color: var(--night);
  box-shadow: none;
}
.phone {
  position: relative;
  inline-size: min(100%, 23.5rem);
  padding: 0.7rem;
  border-radius: 3.1rem;
  background: linear-gradient(145deg, #2a2131, #0e0a12 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 50px 90px -40px rgba(0, 0, 0, 0.8),
    0 0 120px -30px rgba(239, 180, 95, 0.25);
}
.phone__screen {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  block-size: clamp(32rem, 62vh, 39rem);
  border-radius: 2.45rem;
  overflow: hidden;
  background: #f6f0e8;
  color: var(--ink);
  font-family: var(--font-text);
  --fg: var(--ink);
  --fg-muted: rgba(30, 23, 36, 0.7);
  color-scheme: light;
}
html[lang='ar'] .phone__screen {
  font-family: var(--font-ar);
}
.phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.6rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}
.phone__status .ltr {
  font-family: var(--font-text);
}
.phone__notch {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 6.2rem;
  block-size: 1.55rem;
  border-radius: 999px;
  background: #0e0a12;
}
html[dir='rtl'] .phone__notch {
  translate: 50% 0;
}
.phone__icons {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}
.phone__icons i {
  display: block;
  inline-size: 1rem;
  block-size: 0.55rem;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.85;
}
.phone__icons i:first-child {
  inline-size: 0.85rem;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(30, 23, 36, 0.1);
  background: #f6f0e8;
}
.chat-head__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  background: var(--night);
}
.chat-head__avatar svg {
  inline-size: 1.25rem;
  block-size: auto;
}
.chat-head__avatar .mark {
  fill: var(--gold);
}
.chat-head__who {
  display: grid;
  line-height: 1.25;
  min-inline-size: 0;
}
.chat-head__name {
  font-weight: 700;
  font-size: 0.975rem;
}
.chat-head__sub {
  font-size: 0.75rem;
  color: rgba(30, 23, 36, 0.64);
}
.chat-head__tag {
  margin-inline-start: auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wine);
  background: rgba(122, 47, 79, 0.1);
  white-space: nowrap;
}
html[lang='ar'] .chat-head__tag {
  font-size: 0.75rem;
}
.chat-log {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0.9rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.chat-log:focus-visible {
  outline-offset: -3px;
}
.chat-day {
  align-self: center;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(30, 23, 36, 0.6);
  background: rgba(30, 23, 36, 0.06);
}
html[lang='ar'] .chat-day {
  font-size: 0.75rem;
}
.msg {
  display: grid;
  gap: 0.2rem;
  max-inline-size: 84%;
}
.msg__bubble {
  padding: 0.6rem 0.85rem;
  border-radius: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
html[lang='ar'] .msg__bubble {
  font-size: 0.95rem;
  line-height: 1.7;
}
.msg__bubble p + p,
.msg__bubble p + ul,
.msg__bubble ul + p {
  margin-top: 0.4rem;
}
.msg__bubble ul {
  display: grid;
  gap: 0.3rem;
}
.msg__bubble li {
  position: relative;
  padding-inline-start: 0.95rem;
}
.msg__bubble li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: var(--wine);
  font-weight: 700;
}
.msg__meta {
  font-size: 0.6875rem;
  color: rgba(30, 23, 36, 0.7);
  padding-inline: 0.4rem;
}
html[lang='ar'] .msg__meta {
  font-size: 0.75rem;
}
.msg--her {
  align-self: flex-end;
  justify-items: end;
}
.msg--her .msg__bubble {
  background: var(--dusk);
  color: var(--ivory);
  border-end-end-radius: 0.35rem;
}
.msg--daya {
  align-self: flex-start;
  justify-items: start;
}
.msg--daya .msg__bubble {
  background: #ffffff;
  color: var(--ink);
  border-end-start-radius: 0.35rem;
  box-shadow: 0 1px 0 rgba(30, 23, 36, 0.06), inset 0 0 0 1px rgba(30, 23, 36, 0.06);
}
.msg__note {
  display: block;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(30, 23, 36, 0.1);
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(30, 23, 36, 0.62);
}
html[lang='ar'] .msg__note {
  font-size: 0.8125rem;
  line-height: 1.6;
}
.msg__alert {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #6e1f17;
  background: #fbe8e3;
}
.msg__alert::before {
  content: '';
  flex: none;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  margin-top: 0.35em;
  border-radius: 50%;
  background: var(--signal);
}
.msg__status {
  align-self: center;
  max-inline-size: 92%;
  padding: 0.45rem 0.8rem;
  border-radius: 0.8rem;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
  color: rgba(30, 23, 36, 0.72);
  background: rgba(30, 23, 36, 0.06);
}
html[lang='ar'] .msg__status {
  font-size: 0.8125rem;
}
/* Messages not yet revealed in the animation stay in the accessibility tree (the
   transcript is complete for screen readers at once) but take no space on screen. */
.chat-log .is-pending {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 0.28rem;
  padding: 0.75rem 0.9rem;
  border-radius: 1.15rem;
  border-end-start-radius: 0.35rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(30, 23, 36, 0.06);
}
.typing i {
  inline-size: 0.42rem;
  block-size: 0.42rem;
  border-radius: 50%;
  background: rgba(30, 23, 36, 0.45);
  animation: dot 1.1s infinite ease-in-out;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
.typing--her {
  align-self: flex-end;
  border-radius: 1.15rem;
  border-end-end-radius: 0.35rem;
  background: rgba(36, 26, 46, 0.12);
}
@keyframes dot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .chat-log .is-new {
    animation: msg-in 380ms var(--ease-out) both;
  }
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
.phone__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 3.4rem;
  padding: 0.6rem 1rem 1rem;
  border-top: 1px solid rgba(30, 23, 36, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(30, 23, 36, 0.6);
  background: #efe7dd;
}
html[lang='ar'] .phone__foot {
  font-size: 0.8125rem;
}
.phone__foot::before {
  content: '';
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--wine);
  opacity: 0.6;
}
.chat-demo.is-expanded .phone__screen {
  block-size: auto;
}
.chat-demo.is-expanded .chat-log {
  overflow: visible;
}
.chat-demo__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.chat-demo__controls button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.chat-demo__controls button:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}
.chat-demo__controls button[disabled] {
  opacity: 0.5;
  cursor: default;
}
.chat-demo__controls svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
  fill: currentColor;
}
.chat-demo__caption {
  max-inline-size: 30rem;
  text-align: center;
  font-size: var(--size-small);
  color: var(--fg-muted);
}
.no-js .chat-demo__controls {
  display: none;
}

/* Agent sequence */
.sequence {
  display: grid;
  gap: 1rem;
  counter-reset: seq;
}
@media (min-width: 900px) {
  .sequence {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.sequence li {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.5rem 1.25rem 1.4rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sequence li > span:first-child {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}
html[lang='ar'] .sequence li > span:first-child {
  letter-spacing: 0;
}
.sequence h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
}
html[lang='ar'] .sequence h3 {
  font-family: var(--font-ar);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
}
.sequence p {
  color: var(--fg-muted);
}
@media (min-width: 900px) {
  .sequence li:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -0.85rem;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-block-start: 1.5px solid var(--accent);
    border-inline-end: 1.5px solid var(--accent);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
  }
  html[dir='rtl'] .sequence li:not(:last-child)::after {
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* ---------- Journey ---------- */
.stage {
  display: grid;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 960px) {
  .stage {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .stage--reverse > .stage__media {
    order: 2;
  }
  .stage__media {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
  }
}
.stage__body {
  display: grid;
  gap: 1.5rem;
}
.stage__body h3 {
  margin-top: 0.5rem;
}
.daya-does {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.daya-does__label {
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
html[lang='ar'] .daya-does__label {
  letter-spacing: 0;
  font-size: 0.875rem;
}
.sources {
  display: grid;
  gap: 0.5rem;
  font-size: var(--size-small);
  color: var(--fg-muted);
}
.sources li {
  padding-inline-start: 1rem;
  position: relative;
}
.sources li::before {
  content: '—';
  position: absolute;
  inset-inline-start: 0;
  color: var(--fg-faint);
}
.review-note {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  font-size: var(--size-small);
  color: var(--fg-muted);
  background: var(--surface-2);
}
.review-note strong {
  color: var(--fg);
}

/* ---------- Doctors ---------- */
.phase-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 960px) {
  .phase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.phase {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.phase__when {
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
html[lang='ar'] .phase__when {
  letter-spacing: 0;
  font-size: 0.875rem;
}
.phase ul {
  display: grid;
  gap: 0.6rem;
}
.phase li {
  position: relative;
  padding-inline-start: 1.15rem;
  color: var(--fg-muted);
}
.phase li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}
.phase__limit {
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line-strong);
  font-size: var(--size-small);
  color: var(--fg-muted);
}
.phase__limit strong {
  color: var(--fg);
}
.panel {
  display: grid;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dusk);
  color: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, 0.12), 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
.panel__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(244, 236, 226, 0.12);
}
.panel__title {
  font-weight: 600;
}
.panel__tag {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--night);
  background: var(--gold);
}
.panel__list {
  display: grid;
}
.panel__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.9rem;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid rgba(244, 236, 226, 0.08);
}
.panel__who {
  font-weight: 600;
}
.panel__what {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  color: rgba(244, 236, 226, 0.72);
}
.level {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.level::before {
  content: '';
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
}
.level--red::before {
  background: #e0634f;
}
.level--yellow::before {
  background: #e7b44a;
}
.level--green::before {
  background: #6fbf8a;
}
.panel__caption {
  padding: 0.9rem 1.25rem 1.1rem;
  font-size: 0.8125rem;
  color: rgba(244, 236, 226, 0.6);
}
.settings {
  display: grid;
  gap: 1rem;
}
@media (min-width: 960px) {
  .settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.settings > div {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.settings__who {
  justify-self: start;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--surface);
  background: var(--fg);
}
.settings > div:nth-child(2) .settings__who {
  background: var(--wine);
  color: #fff;
}
.settings > div:nth-child(3) .settings__who {
  color: var(--fg);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.settings ul {
  display: grid;
  gap: 0.65rem;
}
.settings li {
  position: relative;
  padding-inline-start: 1.15rem;
  color: var(--fg-muted);
}
.settings li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}
.settings li strong {
  color: var(--fg);
}
.flows {
  display: grid;
  gap: 1rem;
}
@media (min-width: 960px) {
  .flows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.flow {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.flow__tag {
  justify-self: start;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wine);
  background: rgba(122, 47, 79, 0.1);
}
.flow ol {
  display: grid;
  gap: 0;
}
.flow li {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
}
.flow li > span {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
}
.flow li > p {
  color: var(--fg-muted);
}

/* ---------- Download ---------- */
.get-groups {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 960px) {
  .get-groups {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}
.get-group {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}
.get-group__label {
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
html[lang='ar'] .get-group__label {
  letter-spacing: 0;
  font-size: 0.9375rem;
}
.get-group--doctor {
  background: var(--dusk);
  color: var(--ivory);
  --fg: var(--ivory);
  --fg-muted: rgba(244, 236, 226, 0.7);
  --line: rgba(244, 236, 226, 0.14);
  --line-strong: rgba(244, 236, 226, 0.32);
  --accent: var(--gold);
  --link: var(--gold);
  --focus: var(--gold);
}
.get-group__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.qr {
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.qr svg {
  inline-size: 6.5rem;
  block-size: 6.5rem;
}
.qr p {
  max-inline-size: 9rem;
  font-size: var(--size-small);
  color: var(--fg-muted);
}
@media (min-width: 900px) and (hover: hover) {
  .qr {
    display: inline-flex;
  }
}
.need {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.need > div {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .need > div {
    grid-template-columns: 9rem 1fr;
  }
}
.need dt {
  font-weight: 600;
}
.need dd {
  color: var(--fg-muted);
}

/* CTA band */
.cta-band {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(239, 180, 95, 0.18), transparent 60%),
    var(--dusk);
  color: var(--ivory);
  --fg: var(--ivory);
  --fg-muted: rgba(244, 236, 226, 0.72);
  --accent: var(--gold);
  --link: var(--gold);
  --focus: var(--gold);
  --em: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, 0.1);
}
html[dir='rtl'] .cta-band {
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(239, 180, 95, 0.18), transparent 60%),
    var(--dusk);
}
@media (min-width: 900px) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.cta-band__copy {
  display: grid;
  gap: 0.6rem;
}
.cta-band__copy p {
  color: var(--fg-muted);
}
.cta-band__actions {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

/* Trust strip */
.trust-strip {
  display: grid;
  gap: 1rem;
}
@media (min-width: 860px) {
  .trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.trust-strip > div {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 1.1rem;
  border-top: 2px solid var(--accent);
}
.trust-strip p {
  color: var(--fg-muted);
}

/* Roles (who does what) */
.roles {
  display: grid;
  gap: 1rem;
}
@media (min-width: 960px) {
  .roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.role {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.role__who {
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
html[lang='ar'] .role__who {
  letter-spacing: 0;
  font-size: 0.875rem;
}
.role p,
.role li {
  color: var(--fg-muted);
}
.role ul {
  display: grid;
  gap: 0.5rem;
}
.role li {
  position: relative;
  padding-inline-start: 1.1rem;
}
.role li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  inline-size: 0.38rem;
  block-size: 0.38rem;
  border-radius: 50%;
  background: var(--accent);
}

/* Image credits */
.credits {
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 760px) {
  .credits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.credit {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.credit img {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  object-fit: cover;
  border-radius: 0.75rem;
}
.credit p {
  font-size: var(--size-small);
  color: var(--fg-muted);
}
.credit p strong {
  color: var(--fg);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--night);
  color: var(--ivory);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) 2rem;
  border-top: 1px solid rgba(244, 236, 226, 0.08);
}
.footer-grid {
  display: grid;
  gap: 2.25rem;
}
@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  }
}
.footer-brand {
  --logo-cap: 26px;
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.footer-brand p {
  max-inline-size: 30ch;
  color: rgba(244, 236, 226, 0.66);
  font-size: var(--size-small);
}
.footer-col {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}
.footer-col h2 {
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 236, 226, 0.55);
}
html[lang='ar'] .footer-col h2 {
  letter-spacing: 0;
  font-size: 0.875rem;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-size: 0.9375rem;
  color: rgba(244, 236, 226, 0.82);
}
.footer-col a:hover {
  color: var(--gold);
}
.footer-col a[aria-current='page'] {
  color: var(--gold);
}
.footer-col p {
  font-size: var(--size-small);
  color: rgba(244, 236, 226, 0.6);
}
.footer-urgent {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: rgba(184, 57, 42, 0.12);
  box-shadow: inset 0 0 0 1px rgba(224, 99, 79, 0.35);
  color: rgba(244, 236, 226, 0.88);
  font-size: 0.9375rem;
}
.footer-urgent strong {
  color: #ffd1c7;
}
.footer-legal {
  display: grid;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 236, 226, 0.1);
  font-size: 0.8125rem;
  color: rgba(244, 236, 226, 0.55);
}
html[lang='ar'] .footer-legal {
  font-size: 0.875rem;
}
.footer-legal a {
  color: rgba(244, 236, 226, 0.8);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Legal reading pages (drafts) ---------- */
.legal {
  max-inline-size: 48rem;
}
.draft-banner {
  display: grid;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
  border-radius: 1rem;
  background: #fff4dc;
  color: #4a3410;
  box-shadow: inset 0 0 0 1px #e9cf95;
}
.draft-banner strong {
  color: #2a1d06;
}
.legal h1 {
  margin-bottom: 0.75rem;
}
.legal h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.25;
}
html[lang='ar'] .legal h2 {
  font-family: var(--font-ar);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.6;
}
.legal p,
.legal li {
  color: var(--fg-muted);
}
.legal p + p {
  margin-top: 0.75rem;
}
.legal ul {
  display: grid;
  gap: 0.4rem;
  margin-block: 0.75rem;
  padding-inline-start: 1.25rem;
  list-style: disc;
}
.legal .doc-meta {
  font-size: var(--size-small);
  color: var(--fg-muted);
}
.legal aside.review {
  margin-block: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  background: rgba(122, 47, 79, 0.07);
  border-inline-start: 3px solid var(--wine);
  font-size: var(--size-small);
}
.legal aside.review p {
  color: var(--fg-muted);
}

/* ---------- 404 ---------- */
.notfound {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  min-block-size: 50vh;
  align-content: center;
}

/* ---------- Reveal on scroll ----------
   Content is visible by default. site.js adds html.reveal-ready only when motion is allowed and
   IntersectionObserver exists; a timer reveals everything after 2.5 s in case anything fails. */
.reveal-ready [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(16px);
}
.reveal-ready [data-reveal] {
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.d1 {
  --d: 1;
}
.d2 {
  --d: 2;
}
.d3 {
  --d: 3;
}

/* ---------- Page transitions ----------
   Cross-document View Transitions: a short cross-fade with a slight lift on the incoming page.
   The header keeps its own name so it stays put. Browsers without support navigate instantly;
   reduced-motion turns the transition off entirely. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root) {
    animation: vt-out 180ms var(--ease) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 340ms var(--ease-out) both;
  }
  ::view-transition-group(site-header) {
    animation-duration: 0s;
  }
}
@keyframes vt-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

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

@media print {
  .site-header,
  .menu,
  .chat-demo__controls,
  .chat-demo__examples,
  .skip-link {
    display: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .chat-log .is-pending {
    position: static !important;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    white-space: normal;
  }
  .phone__screen {
    block-size: auto;
  }
}

/* ---------- Additions ---------- */
.msg--urgent .msg__bubble {
  border-inline-start: 3px solid var(--signal);
}
.chat-demo.is-paused .typing i {
  animation-play-state: paused;
}
.mini-chat {
  background: #f6f0e8;
  color: var(--ink);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.7);
}
.mini-chat .mini-chat__label {
  color: rgba(30, 23, 36, 0.62);
}
.chat-log--static {
  padding: 0;
  overflow: visible;
}
.draft-banner__title {
  font-weight: 700;
  color: #2a1d06;
}
.draft-banner a {
  text-decoration: underline;
}
.legal .review__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine);
}
.lang-switch--footer {
  justify-self: start;
  margin-top: 0.25rem;
}

/* Journey map (hero of Your health journey) */
.journey-map {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--dusk), #1c1524);
  box-shadow: inset 0 0 0 1px var(--line);
  counter-reset: stage;
}
.journey-map__label {
  margin-bottom: 0.5rem;
  font-size: var(--size-small);
  color: var(--fg-muted);
}
.journey-map ol {
  position: relative;
  display: grid;
  gap: 0.25rem;
}
.journey-map ol::before {
  content: '';
  position: absolute;
  inset-block: 1.2rem;
  inset-inline-start: 1.15rem;
  inline-size: 1px;
  background: linear-gradient(var(--gold), rgba(239, 180, 95, 0.2));
}
.journey-map a {
  position: relative;
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  gap: 0.15rem 0.9rem;
  align-items: center;
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-radius: 0.9rem;
  transition: background-color 160ms var(--ease);
}
html[dir='rtl'] .journey-map a {
  padding: 0.55rem 0 0.55rem 0.6rem;
}
.journey-map a:hover {
  background: rgba(244, 236, 226, 0.05);
}
.journey-map__n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--night);
  background: var(--gold);
  font-family: var(--font-text);
  position: relative;
  z-index: 1;
}
.journey-map__t {
  font-weight: 600;
  color: var(--fg);
}
.journey-map__d {
  font-size: var(--size-small);
  color: var(--fg-muted);
}
/* At a glance (About hero) */
.glance {
  display: grid;
  gap: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--dusk), #1c1524);
  box-shadow: inset 0 0 0 1px var(--line);
}
.glance p:first-child {
  margin-bottom: 0.5rem;
  font-size: var(--size-small);
  color: var(--fg-muted);
}
.glance dl {
  display: grid;
}
.glance dl > div {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
}
.glance dt {
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
html[lang='ar'] .glance dt {
  letter-spacing: 0;
  font-size: 0.875rem;
}
.glance dd {
  color: var(--fg);
}

.site-header .button[aria-current='page'] {
  box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--gold);
}

/* Arabic has no letter case: labels styled in capitals elsewhere stay as written */
html[lang='ar'] .get-group__label,
html[lang='ar'] .phase__when,
html[lang='ar'] .daya-does__label,
html[lang='ar'] .role__who,
html[lang='ar'] .glance dt,
html[lang='ar'] .footer-col h2,
html[lang='ar'] .sequence li > span:first-child,
html[lang='ar'] .legal .review__label {
  text-transform: none;
}

/* ==========================================================================
   RC2.1 (23 Oct 2026): refinement of RC2. Same palette, type and components;
   new composition for the first phone screen, RC1's warmth and air, and two new
   parts (the home conversation's three beats; the two-apps panel).
   ========================================================================== */

/* ---------- Heroes composed for the first phone screen ----------
   Children: .hero__head (eyebrow, title, short introduction), the media (the portrait or the phone
   conversation) and .hero__body (store badges and one secondary link). Phones stack them in that
   order, so the face or the first message is in the first screen without shrinking anything; from
   960 px the media takes the second column and the copy is centred beside it. */
.hero > .wrap {
  position: relative;
  z-index: 1;
}
.hero__grid--stack {
  row-gap: 0;
  align-items: start;
}
.hero__grid--stack > .hero__head,
.hero__grid--stack > .hero__body {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}
.hero__grid--stack .lead {
  color: rgba(244, 236, 226, 0.82);
}
.hero__grid--stack > :nth-child(2) {
  margin-block: 1.6rem 1.75rem;
}
@media (min-width: 960px) {
  .hero__grid--stack {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: '. media' 'head media' 'body media' '. media';
    column-gap: clamp(3rem, 1rem + 5vw, 6.5rem);
  }
  .hero__grid--stack > .hero__head {
    grid-area: head;
  }
  .hero__grid--stack > :nth-child(2) {
    grid-area: media;
    margin: 0;
    align-self: center;
  }
  .hero__grid--stack > .hero__body {
    grid-area: body;
    margin-top: 2.25rem;
  }
}

/* Home: RC1's confident display type, air and amber light */
.hero--home,
.hero--agent {
  padding-block: clamp(1.25rem, -1rem + 6vw, 6.5rem) clamp(3rem, 1.5rem + 5vw, 7.5rem);
}
.hero--home::after,
.hero--agent::after {
  content: '';
  position: absolute;
  inset-block-start: -14rem;
  inset-inline-start: -16rem;
  inline-size: min(62rem, 150vw);
  block-size: min(52rem, 130vw);
  background: radial-gradient(closest-side, rgba(255, 199, 128, 0.17), rgba(239, 180, 95, 0.07) 48%, transparent 74%);
  pointer-events: none;
}
@media (min-width: 960px) {
  .hero--home .h1 {
    font-size: clamp(4rem, 1.2rem + 4.6vw, 6.4rem);
    line-height: 0.98;
  }
  html[lang='ar'] .hero--home .h1 {
    font-size: clamp(3.2rem, 1rem + 3.6vw, 5rem);
    line-height: 1.25;
  }
}
/* The portrait: a closer crop of the same photograph below 960 px (7:6), so her face is
   recognisable in the first screen; the full 4:5 frame beside the copy above it. */
@media (max-width: 959px) {
  .hero .photo--art {
    aspect-ratio: 1200 / 1029;
    max-block-size: none;
    max-inline-size: 34rem;
  }
  .hero .photo--art img {
    object-position: 50% 50%;
  }
}

/* ---------- Meet Daya: the conversation opens the page ---------- */
.hero--agent .chat-demo {
  justify-self: center;
}
@media (min-width: 960px) {
  .hero--agent .h1 {
    font-size: clamp(3.2rem, 1rem + 3.3vw, 4.6rem);
  }
}
/* Narrow phones: the conversation starts higher (shorter phone chrome; the languages line is
   already said in the introduction). */
@media (max-width: 400px) {
  .chat-head__langs {
    display: none;
  }
  .hero--agent .phone__status {
    padding-block: 0.7rem 0.15rem;
  }
  .hero--agent .chat-head {
    padding-block: 0.45rem 0.6rem;
  }
  .hero--agent .chat-log {
    padding-block-start: 0.75rem;
  }
}
.chat-demo__examples {
  align-items: center;
}
.chat-demo__examples-label {
  inline-size: 100%;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-muted);
}

/* ---------- Home conversation: what you ask, how Daya helps, your next step ---------- */
.mini-chat {
  display: grid;
  gap: 1rem;
}
.mini-chat__beats {
  display: grid;
  gap: 1rem;
}
.beat {
  display: grid;
  gap: 0.65rem;
}
.beat + .beat {
  padding-top: 1rem;
  border-top: 1px solid rgba(30, 23, 36, 0.1);
}
.beat__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine);
}
html[lang='ar'] .beat__label {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.9375rem;
}
.beat__n {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  font-family: var(--font-text);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: #ffffff;
  background: var(--wine);
}
.beat__outcome {
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(30, 23, 36, 0.82);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(30, 23, 36, 0.08);
}
html[lang='ar'] .beat__outcome {
  line-height: 1.75;
}
.mini-chat .chat-log--static {
  gap: 0.5rem;
}

/* ---------- The two apps, and what passes between them ---------- */
.two-apps {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--radius-lg);
  color: var(--ivory);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(239, 180, 95, 0.13), transparent 62%),
    linear-gradient(160deg, var(--dusk), #1c1524);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, 0.14), 0 40px 80px -50px rgba(0, 0, 0, 0.8);
}
html[dir='rtl'] .two-apps {
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(239, 180, 95, 0.13), transparent 62%),
    linear-gradient(200deg, var(--dusk), #1c1524);
}
.two-apps__title {
  font-size: var(--size-small);
  font-weight: 600;
  color: rgba(244, 236, 226, 0.72);
}
.two-apps__app {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  background: rgba(244, 236, 226, 0.06);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, 0.12);
}
.two-apps__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 0.8rem;
  background: var(--night);
  box-shadow: inset 0 0 0 1px rgba(239, 180, 95, 0.4);
}
.two-apps__icon svg {
  inline-size: 1.35rem;
  block-size: auto;
}
.two-apps__icon .mark {
  fill: var(--gold);
}
.two-apps__app--bottom .two-apps__icon {
  background: var(--gold);
  box-shadow: none;
}
.two-apps__app--bottom .two-apps__icon .mark {
  fill: var(--night);
}
.two-apps__who {
  font-weight: 600;
  line-height: 1.3;
}
.two-apps__name {
  font-size: var(--size-small);
  line-height: 1.4;
  color: rgba(244, 236, 226, 0.7);
}
.two-apps__flow {
  position: relative;
  display: grid;
  gap: 0.45rem;
  padding-block: 0.35rem;
  padding-inline-start: 2.4rem;
}
.two-apps__flow::before {
  content: '';
  position: absolute;
  inset-block: 0.3rem;
  inset-inline-start: 0.95rem;
  inline-size: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--gold), rgba(239, 180, 95, 0.2));
}
.two-apps__flow--up::before {
  background: linear-gradient(rgba(239, 180, 95, 0.2), var(--gold));
}
.two-apps__flow::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(0.95rem - 4px);
  inline-size: 10px;
  block-size: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}
.two-apps__flow--down::after {
  inset-block-end: 0.3rem;
  transform: rotate(45deg);
}
.two-apps__flow--up::after {
  inset-block-start: 0.3rem;
  transform: rotate(-135deg);
}
.two-apps__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}
html[lang='ar'] .two-apps__label {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.9375rem;
}
.two-apps__flow ul {
  display: grid;
  gap: 0.3rem;
}
.two-apps__flow li {
  position: relative;
  padding-inline-start: 0.95rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(244, 236, 226, 0.88);
}
.two-apps__flow li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 0.32rem;
  block-size: 0.32rem;
  border-radius: 50%;
  background: rgba(244, 236, 226, 0.5);
}
html[lang='ar'] .two-apps__flow li {
  line-height: 1.7;
}
.two-apps__note {
  font-size: var(--size-small);
  color: rgba(244, 236, 226, 0.72);
}

/* ---------- RC2.1 review fixes (five-viewpoint critique, 23 Oct 2026) ---------- */
/* Doctors: what Daya doesn't change, before the working day */
.dr-commit {
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.dr-commit ul {
  display: grid;
  gap: 0.45rem;
}
.dr-commit li {
  position: relative;
  padding-inline-start: 1.1rem;
  color: var(--fg-muted);
}
.dr-commit li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  inline-size: 0.38rem;
  block-size: 0.38rem;
  border-radius: 50%;
  background: var(--accent);
}
/* Settings cards: never wider than a 320 px screen (the button text may wrap) */
.settings {
  grid-template-columns: minmax(0, 1fr);
}
.settings .button {
  white-space: normal;
  text-align: center;
}
/* Space between blocks that follow one another inside a section */
.cards + .split,
.split + .daya-does {
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}
.pillars + .small {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
/* Arabic glyphs read smaller than Latin at the same size: the page names step up */
html[lang='ar'] .nav {
  font-size: 1rem;
}
/* Short landscape phones: the two-row header would cover too much of the screen, so it scrolls away */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header {
    position: relative;
  }
  html {
    scroll-padding-top: 1rem;
  }
}
@media (min-width: 960px) {
  /* Meet Daya: the title starts level with the top of the phone */
  .hero__grid--demo {
    grid-template-rows: auto auto 1fr;
    grid-template-areas: 'head media' 'body media' '. media';
  }
  .hero__grid--demo > :nth-child(2) {
    align-self: start;
  }
  /* Long right-hand columns: the left one stays in view while you read them */
  .agent-band {
    align-items: start;
  }
  .agent-band > .section-head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2.5rem);
  }
}
@media (min-width: 900px) {
  .split--top > .photo {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2.5rem);
  }
}
/* Without JavaScript, the other two conversations are shown under the phone (a <noscript> block) */
.chat-demo__more {
  display: grid;
  gap: 1.5rem;
  inline-size: min(100%, 30rem);
}
.chat-demo__static {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: #f6f0e8;
  color: var(--ink);
}
.chat-demo__static-title {
  font-weight: 700;
}
.chat-demo__static .chat-demo__caption {
  color: rgba(30, 23, 36, 0.72);
  text-align: start;
}
/* Download on narrow phones: both official badges on one row inside the card (44 px, above Apple's
   40 px minimum), right under the app's name */
@media (max-width: 420px) {
  .get-group .badge img {
    height: 44px;
  }
  .get-group .badges {
    gap: 0.6rem;
  }
}