/* ==========================================================================
   1. PRIMITIVE TOKENS — generated 1:1 from Value.tokens.json
   Naming: --<group>-<key>  (JSON path in the trailing comment).
   Size tokens (Figma scope FONT_SIZE + LINE_HEIGHT) are emitted in rem
   (JSON value / 16) so text scales with the user's browser font setting.
   ========================================================================== */
:root {
  /* Color/Teal */
  --color-teal-50: #F0F8F6; /* Color/Teal/50 */
  --color-teal-100: #DDF1EC; /* Color/Teal/100 */
  --color-teal-200: #BCE0D8; /* Color/Teal/200 */
  --color-teal-300: #8FC9BD; /* Color/Teal/300 */
  --color-teal-400: #579E90; /* Color/Teal/400 */
  --color-teal-500: #0B5D52; /* Color/Teal/500 */
  --color-teal-600: #0A5148; /* Color/Teal/600 */
  --color-teal-700: #073F39; /* Color/Teal/700 */
  --color-teal-800: #06322D; /* Color/Teal/800 */
  --color-teal-900: #052622; /* Color/Teal/900 */
  --color-teal-950: #031815; /* Color/Teal/950 */
  /* Color/Amber */
  --color-amber-50: #FDF8EF; /* Color/Amber/50 */
  --color-amber-100: #FAEBCF; /* Color/Amber/100 */
  --color-amber-200: #F4D59B; /* Color/Amber/200 */
  --color-amber-300: #EFC074; /* Color/Amber/300 */
  --color-amber-400: #E8A84E; /* Color/Amber/400 */
  --color-amber-500: #D9973B; /* Color/Amber/500 */
  --color-amber-600: #BD7E2A; /* Color/Amber/600 */
  --color-amber-700: #97621F; /* Color/Amber/700 */
  --color-amber-800: #6F491A; /* Color/Amber/800 */
  --color-amber-900: #4A3213; /* Color/Amber/900 */
  --color-amber-950: #2E1F0C; /* Color/Amber/950 */
  /* Color/Green */
  --color-green-50: #ECF7F1; /* Color/Green/50 */
  --color-green-100: #D3ECE0; /* Color/Green/100 */
  --color-green-200: #A8DCC3; /* Color/Green/200 */
  --color-green-300: #79C8A3; /* Color/Green/300 */
  --color-green-400: #52B187; /* Color/Green/400 */
  --color-green-500: #3C9A72; /* Color/Green/500 */
  --color-green-600: #328363; /* Color/Green/600 */
  --color-green-700: #296A50; /* Color/Green/700 */
  --color-green-800: #21523E; /* Color/Green/800 */
  --color-green-900: #183A2C; /* Color/Green/900 */
  --color-green-950: #0F251C; /* Color/Green/950 */
  /* Color/Red */
  --color-red-50: #FBF0F0; /* Color/Red/50 */
  --color-red-100: #F5D9D9; /* Color/Red/100 */
  --color-red-200: #EBB3B3; /* Color/Red/200 */
  --color-red-300: #E08C8C; /* Color/Red/300 */
  --color-red-400: #D66E6E; /* Color/Red/400 */
  --color-red-500: #C95757; /* Color/Red/500 */
  --color-red-600: #AC4444; /* Color/Red/600 */
  --color-red-700: #8B3636; /* Color/Red/700 */
  --color-red-800: #6A2929; /* Color/Red/800 */
  --color-red-900: #491D1D; /* Color/Red/900 */
  --color-red-950: #2F1313; /* Color/Red/950 */
  /* Color/Orange */
  --color-orange-50: #FBF4EA; /* Color/Orange/50 */
  --color-orange-100: #F6E4CB; /* Color/Orange/100 */
  --color-orange-200: #EECB98; /* Color/Orange/200 */
  --color-orange-300: #E6B066; /* Color/Orange/300 */
  --color-orange-400: #DE9C43; /* Color/Orange/400 */
  --color-orange-500: #D89032; /* Color/Orange/500 */
  --color-orange-600: #B5751F; /* Color/Orange/600 */
  --color-orange-700: #925D19; /* Color/Orange/700 */
  --color-orange-800: #6E4614; /* Color/Orange/800 */
  --color-orange-900: #4B300E; /* Color/Orange/900 */
  --color-orange-950: #301F09; /* Color/Orange/950 */
  /* Color/Grey */
  --color-grey-50: #F8F7F3; /* Color/Grey/50 */
  --color-grey-100: #ECEDE9; /* Color/Grey/100 */
  --color-grey-200: #DADEDB; /* Color/Grey/200 */
  --color-grey-300: #BCC4C1; /* Color/Grey/300 */
  --color-grey-400: #93A09C; /* Color/Grey/400 */
  --color-grey-500: #647773; /* Color/Grey/500 */
  --color-grey-600: #4F615D; /* Color/Grey/600 */
  --color-grey-700: #3D4B48; /* Color/Grey/700 */
  --color-grey-800: #2B3633; /* Color/Grey/800 */
  --color-grey-900: #17332F; /* Color/Grey/900 */
  --color-grey-950: #0E1F1C; /* Color/Grey/950 */
  --color-grey-white: #FFFFFF; /* Color/Grey/White */
  --color-grey-black: #000000; /* Color/Grey/Black */
  /* Size (type scale: font-size & line-height) */
  --size-2: 0.125rem; /* Size/size-2 = 2 */
  --size-4: 0.25rem; /* Size/size-4 = 4 */
  --size-8: 0.5rem; /* Size/size-8 = 8 */
  --size-10: 0.625rem; /* Size/size-10 = 10 */
  --size-12: 0.75rem; /* Size/size-12 = 12 */
  --size-14: 0.875rem; /* Size/size-14 = 14 */
  --size-16: 1rem; /* Size/size-16 = 16 */
  --size-18: 1.125rem; /* Size/size-18 = 18 */
  --size-20: 1.25rem; /* Size/size-20 = 20 */
  --size-24: 1.5rem; /* Size/size-24 = 24 */
  --size-28: 1.75rem; /* Size/size-28 = 28 */
  --size-32: 2rem; /* Size/size-32 = 32 */
  --size-36: 2.25rem; /* Size/size-36 = 36 */
  --size-40: 2.5rem; /* Size/size-40 = 40 */
  --size-48: 3rem; /* Size/size-48 = 48 */
  --size-56: 3.5rem; /* Size/size-56 = 56 */
  --size-64: 4rem; /* Size/size-64 = 64 */
  --size-68: 4.25rem; /* Size/size-68 = 68 */
  --size-72: 4.5rem; /* Size/size-72 = 72 */
  --size-76: 4.75rem; /* Size/size-76 = 76 */
  --size-80: 5rem; /* Size/size-80 = 80 */
  --size-88: 5.5rem; /* Size/size-88 = 88 */
  --size-96: 6rem; /* Size/size-96 = 96 */
  --size-128: 8rem; /* Size/size-128 = 128 */
  /* Spacing */
  --spacing-0: 0px; /* Spacing/spacing-0 */
  --spacing-4: 4px; /* Spacing/spacing-4 */
  --spacing-8: 8px; /* Spacing/spacing-8 */
  --spacing-10: 10px; /* Spacing/spacing-10 */
  --spacing-12: 12px; /* Spacing/spacing-12 */
  --spacing-16: 16px; /* Spacing/spacing-16 */
  --spacing-20: 20px; /* Spacing/spacing-20 */
  --spacing-24: 24px; /* Spacing/spacing-24 */
  --spacing-28: 28px; /* Spacing/spacing-28 */
  --spacing-32: 32px; /* Spacing/spacing-32 */
  --spacing-36: 36px; /* Spacing/spacing-36 */
  --spacing-40: 40px; /* Spacing/spacing-40 */
  --spacing-44: 44px; /* Spacing/spacing-44 */
  --spacing-48: 48px; /* Spacing/spacing-48 */
  --spacing-52: 52px; /* Spacing/spacing-52 */
  --spacing-56: 56px; /* Spacing/spacing-56 */
  --spacing-60: 60px; /* Spacing/spacing-60 */
  --spacing-64: 64px; /* Spacing/spacing-64 */
  --spacing-68: 68px; /* Spacing/spacing-68 */
  --spacing-72: 72px; /* Spacing/spacing-72 */
  --spacing-76: 76px; /* Spacing/spacing-76 */
  --spacing-80: 80px; /* Spacing/spacing-80 */
  --spacing-84: 84px; /* Spacing/spacing-84 */
  --spacing-88: 88px; /* Spacing/spacing-88 */
  --spacing-92: 92px; /* Spacing/spacing-92 */
  --spacing-96: 96px; /* Spacing/spacing-96 */
  --spacing-100: 100px; /* Spacing/spacing-100 */
  --spacing-104: 104px; /* Spacing/spacing-104 */
  --spacing-108: 108px; /* Spacing/spacing-108 */
  --spacing-112: 112px; /* Spacing/spacing-112 */
  --spacing-116: 116px; /* Spacing/spacing-116 */
  --spacing-120: 120px; /* Spacing/spacing-120 */
  --spacing-124: 124px; /* Spacing/spacing-124 */
  --spacing-128: 128px; /* Spacing/spacing-128 */
  /* Radius */
  --radius-0: 0px; /* Radius/radius-0 */
  --radius-4: 4px; /* Radius/radius-4 */
  --radius-8: 8px; /* Radius/radius-8 */
  --radius-10: 10px; /* Radius/radius-10 */
  --radius-12: 12px; /* Radius/radius-12 */
  --radius-16: 16px; /* Radius/radius-16 */
  --radius-20: 20px; /* Radius/radius-20 */
  --radius-24: 24px; /* Radius/radius-24 */
  --radius-28: 28px; /* Radius/radius-28 */
  --radius-32: 32px; /* Radius/radius-32 */
  --radius-36: 36px; /* Radius/radius-36 */
  --radius-40: 40px; /* Radius/radius-40 */
  --radius-44: 44px; /* Radius/radius-44 */
  --radius-48: 48px; /* Radius/radius-48 */
  --radius-52: 52px; /* Radius/radius-52 */
  --radius-56: 56px; /* Radius/radius-56 */
  --radius-60: 60px; /* Radius/radius-60 */
  --radius-64: 64px; /* Radius/radius-64 */
  --radius-68: 68px; /* Radius/radius-68 */
  --radius-72: 72px; /* Radius/radius-72 */
  --radius-76: 76px; /* Radius/radius-76 */
  --radius-80: 80px; /* Radius/radius-80 */
  --radius-84: 84px; /* Radius/radius-84 */
  --radius-88: 88px; /* Radius/radius-88 */
  --radius-92: 92px; /* Radius/radius-92 */
  --radius-96: 96px; /* Radius/radius-96 */
  --radius-100: 100px; /* Radius/radius-100 */
  --radius-104: 104px; /* Radius/radius-104 */
  --radius-108: 108px; /* Radius/radius-108 */
  --radius-112: 112px; /* Radius/radius-112 */
  --radius-116: 116px; /* Radius/radius-116 */
  --radius-120: 120px; /* Radius/radius-120 */
  --radius-124: 124px; /* Radius/radius-124 */
  --radius-128: 128px; /* Radius/radius-128 */
  --radius-full: 999px; /* Radius/Full */
  /* Type */
  --type-font-primary: "IBM Plex Sans Arabic"; /* Type/Font/Primary */
  --type-font-secondary: "Manrope"; /* Type/Font/Secondary */
  --type-weight-regular: 400; /* Type/Weight/Regular = "Regular" */
  --type-weight-medium: 500; /* Type/Weight/Medium = "Medium" */
  --type-weight-semibold: 600; /* Type/Weight/Semibold = "SemiBold" */
  --type-weight-bold: 700; /* Type/Weight/Bold = "Bold" */
}
/* ==========================================================================
   2. NON-TOKEN CONSTANTS
   Value.tokens.json has no motion, z-index or breakpoint groups. These are
   behavioural constants, not design values, kept in one block so they are
   easy to audit. Breakpoints (390 / 768 / 1280) come from the brief; custom
   properties cannot be used inside @media, so 768px and 1280px appear
   literally there. SVG stroke-width numbers are icon geometry in viewBox units.
   ========================================================================== */
:root {
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-reveal: 600ms;
  --motion-stagger: 70ms;
  --motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-below: -1;
  --z-raised: 1;
  --z-header: 100;
  --z-skip: 1000;
}

/* ==========================================================================
   3. SEMANTIC TOKENS — every value references a primitive above
   ========================================================================== */
:root {
  /* Surfaces */
  --color-bg: var(--color-grey-50);               /* warm paper */
  --color-surface: var(--color-grey-white);
  --color-surface-tint: var(--color-teal-50);
  --color-dark: var(--color-teal-900);
  --color-dark-raised: var(--color-teal-800);
  --color-rule: var(--color-grey-200);
  --color-rule-dark: var(--color-teal-800);

  /* Text */
  --color-ink: var(--color-teal-900);
  --color-text: var(--color-grey-800);
  --color-text-soft: var(--color-grey-700);
  --color-text-muted: var(--color-grey-600);
  --color-on-dark: var(--color-teal-50);
  --color-on-dark-soft: var(--color-teal-200);
  --color-on-dark-muted: var(--color-teal-300);

  /* Brand & action */
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-700);
  --color-primary-press: var(--color-teal-800);
  --color-on-primary: var(--color-grey-white);
  --color-accent: var(--color-amber-400);          /* the logo's arc — decorative */
  --color-accent-on-dark: var(--color-amber-300);  /* text-safe on teal-900 */
  --color-on-accent: var(--color-teal-950);
  --color-focus: var(--color-teal-500);
  --color-focus-on-dark: var(--color-amber-300);

  /* Dose states — always icon + label, never colour alone */
  --color-done-fg: var(--color-green-700);
  --color-done-bg: var(--color-green-50);
  --color-pending-fg: var(--color-amber-800);
  --color-pending-bg: var(--color-amber-100);
  --color-missed-fg: var(--color-red-700);
  --color-missed-bg: var(--color-red-50);

  /* Type roles: font-size / line-height pairs from the Size scale */
  --font-body: var(--type-font-primary), system-ui, sans-serif;
  --font-latin: var(--type-font-secondary), var(--type-font-primary), system-ui, sans-serif;
  --text-display: var(--size-40);   --leading-display: var(--size-56);
  --text-h2: var(--size-32);        --leading-h2: var(--size-48);
  --text-h3: var(--size-20);        --leading-h3: var(--size-32);
  --text-lead: var(--size-18);      --leading-lead: var(--size-32);
  --text-body: var(--size-16);      --leading-body: var(--size-28);
  --text-small: var(--size-14);     --leading-small: var(--size-24);
  --text-xs: var(--size-12);        --leading-xs: var(--size-20);

  /* Layout (composites of tokens) */
  --layout-max: calc(var(--size-128) * 9);          /* 1152px */
  --layout-gutter: var(--spacing-20);
  --section-space: var(--spacing-80);
  --header-height: var(--size-72);
  --tap-min: var(--spacing-44);
  --focus-width: var(--size-2);
  --hairline: var(--size-2);
  --arc-stroke: var(--size-4);
  --icon-xs: var(--size-14);
  --icon-sm: var(--size-18);
  --icon-md: var(--size-24);
  --icon-lg: var(--size-28);
}

@media (min-width: 768px) {
  :root {
    --text-display: var(--size-56);   --leading-display: var(--size-76);
    --text-h2: var(--size-40);        --leading-h2: var(--size-56);
    --layout-gutter: var(--spacing-40);
    --section-space: var(--spacing-112);
    --arc-stroke: var(--size-8);
  }
}

@media (min-width: 1280px) {
  :root {
    --text-display: var(--size-72);   --leading-display: var(--size-96);
    --text-h2: var(--size-48);        --leading-h2: var(--size-64);
    --section-space: var(--spacing-128);
  }
}

/* ==========================================================================
   4. BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--spacing-24));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--type-weight-regular);
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  color: var(--color-ink);
  font-weight: var(--type-weight-semibold);
  text-wrap: balance;
}

strong { font-weight: var(--type-weight-semibold); }

img, svg { display: block; max-width: 100%; }

a { color: var(--color-primary); }

bdi { font-family: var(--font-latin); }

button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: var(--size-2);
  height: var(--size-2);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus: visible on every interactive element */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--size-4);
}
.section--dark :focus-visible { outline-color: var(--color-focus-on-dark); }
main:focus { outline: none; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--spacing-16);
  top: var(--spacing-8);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--spacing-16);
  background: var(--color-ink);
  color: var(--color-on-primary);
  border-radius: var(--radius-8);
  font-weight: var(--type-weight-semibold);
  transform: translateY(-200%);
  transition: transform var(--motion-fast) var(--motion-ease-out);
}
.skip-link:focus { transform: translateY(0); }

.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }

.container {
  width: 100%;
  max-width: calc(var(--layout-max) + var(--layout-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* ==========================================================================
   5. SHARED COMPONENTS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--size-48);
  padding: var(--spacing-8) var(--spacing-24);
  border: 0;
  border-radius: var(--radius-full);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--type-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--motion-fast) var(--motion-ease-out),
              transform var(--motion-fast) var(--motion-ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--lg { min-height: var(--size-56); padding-inline: var(--spacing-36); font-size: var(--text-lead); }

.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:active { background: var(--color-primary-press); }

.btn--ink { background: var(--color-ink); color: var(--color-on-primary); }
.btn--ink:hover { background: var(--color-primary); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--tap-min);
  color: var(--color-ink);
  font-size: var(--text-lead);
  font-weight: var(--type-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-decoration-thickness: var(--hairline);
  text-underline-offset: var(--size-8);
  transition: text-decoration-color var(--motion-fast) var(--motion-ease-out);
}
.link-arrow .icon { transition: transform var(--motion-base) var(--motion-ease-out); }
.link-arrow:hover { text-decoration-color: var(--color-accent); }
.link-arrow:hover .icon { transform: translateX(calc(var(--size-4) * -1)); }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--type-weight-semibold);
  white-space: nowrap;
}
.status--done { background: var(--color-done-bg); color: var(--color-done-fg); }
.status--pending { background: var(--color-pending-bg); color: var(--color-pending-fg); }
.status--missed { background: var(--color-missed-bg); color: var(--color-missed-fg); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--type-weight-semibold);
  white-space: nowrap;
}
.tag--available { background: var(--color-done-bg); color: var(--color-done-fg); }
.tag--soon { background: var(--color-pending-bg); color: var(--color-pending-fg); }

.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-block: var(--spacing-20) var(--spacing-24); }
.chip {
  padding: var(--spacing-4) var(--spacing-16);
  border: var(--hairline) solid var(--color-rule);
  border-radius: var(--radius-full);
  color: var(--color-text-soft);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--type-weight-medium);
}

/* Editorial section header: index + title | lead, over a hairline rule */
.head {
  display: grid;
  gap: var(--spacing-20);
  margin-block-end: var(--spacing-56);
  padding-block-start: var(--spacing-24);
  border-block-start: var(--hairline) solid var(--color-rule);
}
.head__index {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-block-end: var(--spacing-16);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--type-weight-medium);
}
.head__index bdi { color: var(--color-primary); font-weight: var(--type-weight-bold); }
.head__title { font-size: var(--text-h2); line-height: var(--leading-h2); }
.head__lead { max-width: 30em; color: var(--color-text-muted); font-size: var(--text-lead); line-height: var(--leading-lead); }

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* ---------- 1. Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-block-end: var(--hairline) solid transparent;
  transition: border-color var(--motion-base) var(--motion-ease-out);
}
.site-header.is-scrolled { border-block-end-color: var(--color-rule); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: var(--header-height);
  column-gap: var(--spacing-24);
}

.nav__brand { display: inline-flex; align-items: center; min-height: var(--tap-min); border-radius: var(--radius-8); }
.nav__brand img { height: var(--size-48); width: auto; }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--size-48);
  height: var(--size-48);
  padding: 0;
  border: var(--hairline) solid var(--color-rule);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  touch-action: manipulation;
}
.nav__toggle:hover { background: var(--color-surface); }

.nav__menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8) var(--spacing-32); }
.nav__links { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--spacing-12);
  border-radius: var(--radius-8);
  color: var(--color-text);
  font-weight: var(--type-weight-medium);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-out);
}
.nav__link:hover { color: var(--color-primary); }

@media (max-width: 767.98px) {
  .js .nav__toggle { display: inline-flex; }
  .js .nav__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-block: var(--spacing-8) var(--spacing-24);
  }
  .js .nav.is-open .nav__menu { display: flex; }
  .js .nav__links { flex-direction: column; gap: 0; }
  .js .nav__link {
    min-height: var(--size-56);
    padding-inline: 0;
    border-block-end: var(--hairline) solid var(--color-rule);
    border-radius: 0;
    font-size: var(--text-lead);
  }
  .js .nav__cta { width: 100%; margin-block-start: var(--spacing-16); }
}

/* ---------- 2. Hero ---------- */
.hero { padding-block: var(--spacing-56) var(--spacing-64); }

.hero__grid { display: grid; gap: var(--spacing-56); align-items: end; }

.kicker {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-block-end: var(--spacing-24);
  color: var(--color-primary);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--type-weight-semibold);
}
.kicker::before {
  content: "";
  width: var(--size-28);
  height: var(--size-4);
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.hero__title {
  position: relative;
  z-index: 0;
  margin-block-end: var(--spacing-24);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: var(--type-weight-semibold);
}

/* The amber stroke under "قلبك" borrows the arc from the logo */
.mark { position: relative; white-space: nowrap; }
.mark__arc {
  position: absolute;
  z-index: var(--z-below);
  inset-inline: calc(var(--size-4) * -1);
  bottom: calc(var(--size-2) * -1);
  width: calc(100% + var(--size-8));
  height: var(--size-24);
  max-width: none;
  overflow: visible;
}
.mark__arc path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: var(--arc-stroke);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero__lead {
  max-width: 30em;
  color: var(--color-text-soft);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16) var(--spacing-32);
  margin-block-start: var(--spacing-40);
}

/* A day with TAMMEN */
.moment {
  padding: var(--spacing-32) var(--spacing-24);
  border-radius: var(--radius-32);
  background: var(--color-dark);
  color: var(--color-on-dark-soft);
}
.moment__label {
  margin-block-end: var(--spacing-28);
  color: var(--color-on-dark-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--type-weight-semibold);
}

.moment__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--size-32) 1fr;
  grid-template-areas: "dot time" ". text";
  column-gap: var(--spacing-16);
  padding-block-end: var(--spacing-24);
}
.moment__dot {
  grid-area: dot;
  display: grid;
  place-items: center;
  width: var(--size-32);
  height: var(--size-32);
  border-radius: var(--radius-full);
  background: var(--color-dark-raised);
  color: var(--color-on-dark-soft);
}
.moment__item--last { padding-block-end: 0; }
.moment__item--last .moment__dot { background: var(--color-accent); color: var(--color-on-accent); }
/* Thread runs from the first dot's centre to the last dot's centre */
.moment__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--size-16) - var(--size-2) / 2);
  top: var(--size-16);
  bottom: calc(var(--size-16) * -1);
  width: var(--hairline);
  background: var(--color-rule-dark);
}
.moment__dot { position: relative; z-index: var(--z-raised); }
.moment__time {
  grid-area: time;
  align-self: center;
  color: var(--color-on-dark-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}
.moment__text { grid-area: text; font-size: var(--text-lead); line-height: var(--leading-lead); }
.moment__text strong { color: var(--color-on-dark); }

.moment__foot {
  margin-block-start: var(--spacing-8);
  padding-block-start: var(--spacing-24);
  border-block-start: var(--hairline) solid var(--color-rule-dark);
  color: var(--color-accent-on-dark);
  font-size: var(--size-24);
  line-height: var(--size-36);
  font-weight: var(--type-weight-semibold);
}

.promise {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12) var(--spacing-40);
  margin-block-start: var(--spacing-64);
  padding-block-start: var(--spacing-24);
  border-block-start: var(--hairline) solid var(--color-rule);
}
.promise__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-text-soft);
  font-weight: var(--type-weight-medium);
}
.promise__item .icon { color: var(--color-primary); }

/* ---------- Generic section ---------- */
.section { padding-block: var(--section-space); }
.section--paper { background: var(--color-surface); }
.section--dark { background: var(--color-dark); color: var(--color-on-dark-soft); }
.section--dark :is(h2, h3, h4) { color: var(--color-on-dark); }
.section--dark .head { border-block-start-color: var(--color-rule-dark); }
.section--dark .head__index { color: var(--color-on-dark-muted); }
.section--dark .head__index bdi { color: var(--color-accent-on-dark); }
.section--dark .head__lead { color: var(--color-on-dark-soft); }

/* ---------- 3. Problem / value ---------- */
.compare { display: grid; }

.compare__col { padding-block: var(--spacing-8) var(--spacing-32); }
.compare__col--after {
  padding-block-start: var(--spacing-32);
  border-block-start: var(--hairline) solid var(--color-rule);
}

.compare__title {
  margin-block-end: var(--spacing-24);
  font-size: var(--size-24);
  line-height: var(--size-36);
}
.compare__title::before {
  content: "";
  display: block;
  width: var(--size-28);
  height: var(--size-4);
  margin-block-end: var(--spacing-16);
  border-radius: var(--radius-full);
  background: var(--color-grey-300);
}
.compare__col--before .compare__title { color: var(--color-text-muted); }
.compare__col--after .compare__title::before { background: var(--color-accent); }

.compare__list { display: grid; gap: var(--spacing-16); }
.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}
.compare__list .icon { margin-block-start: var(--spacing-8); }
.compare__col--before li { color: var(--color-text-muted); }
.compare__col--before .icon { color: var(--color-grey-400); }
.compare__col--after li { color: var(--color-ink); }
.compare__col--after .icon { color: var(--color-primary); }

/* ---------- 4. Features ---------- */
.features { display: grid; gap: var(--spacing-40); align-items: start; }

.features__list { display: grid; column-gap: var(--spacing-40); }

.feature {
  padding-block: var(--spacing-24) var(--spacing-32);
  border-block-start: var(--hairline) solid var(--color-rule);
}
.feature__icon { width: var(--icon-lg); height: var(--icon-lg); margin-block-end: var(--spacing-16); color: var(--color-primary); }
.feature__title { margin-block-end: var(--spacing-8); font-size: var(--text-h3); line-height: var(--leading-h3); }
.feature__text { color: var(--color-text-muted); }

.feature-panel {
  padding: var(--spacing-32) var(--spacing-24);
  border-radius: var(--radius-28);
  background: var(--color-surface);
}

.mini-chart { padding: var(--spacing-20); border-radius: var(--radius-20); background: var(--color-bg); }
.mini-chart__svg { width: 100%; height: var(--size-128); overflow: visible; }
.mini-chart__grid { stroke: var(--color-rule); stroke-width: var(--size-2); vector-effect: non-scaling-stroke; }
.mini-chart__line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: var(--size-4);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mini-chart__dots circle { fill: var(--color-bg); stroke: var(--color-primary); stroke-width: var(--size-2); vector-effect: non-scaling-stroke; }
.mini-chart__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-8);
  margin-block-start: var(--spacing-12);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* ---------- 5. How it works ---------- */
.steps { display: grid; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--size-56) 1fr;
  grid-template-areas: "num title" "num text";
  align-content: start;
  column-gap: var(--spacing-16);
  padding-block: var(--spacing-24);
  border-block-start: var(--hairline) solid var(--color-rule);
}
.step__num {
  grid-area: num;
  color: var(--color-primary);
  font-size: var(--size-40);
  line-height: var(--size-40);
  font-weight: var(--type-weight-regular);
}
.step__title { grid-area: title; font-size: var(--text-h3); line-height: var(--leading-h3); }
.step__text { grid-area: text; color: var(--color-text-muted); }

.step--final { border-block-start-color: var(--color-accent); }
.step--final .step__num { color: var(--color-ink); font-weight: var(--type-weight-semibold); }

/* ---------- 6. Who it's for ---------- */
.personas { display: grid; gap: var(--spacing-16); }

.persona {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-32) var(--spacing-24);
  border-radius: var(--radius-28);
  background: var(--color-surface);
}
.persona__letter {
  margin-block-end: var(--spacing-16);
  color: var(--color-teal-200);
  font-size: var(--size-64);
  line-height: var(--size-72);
  font-weight: var(--type-weight-bold);
}
.persona__role {
  color: var(--color-primary);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--type-weight-semibold);
}
.persona__name { margin-block: var(--spacing-4) var(--spacing-12); font-size: var(--size-24); line-height: var(--size-36); }
.persona__text { color: var(--color-text-muted); }

.persona__points { margin-block-start: var(--spacing-24); }
.persona__points li {
  padding-block: var(--spacing-12);
  border-block-start: var(--hairline) solid var(--color-rule);
  color: var(--color-ink);
  font-weight: var(--type-weight-medium);
}

.persona--simple { background: var(--color-surface-tint); }
.persona--simple .persona__letter { color: var(--color-teal-300); }

.big-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-12); margin-block-start: var(--spacing-24); }
.big-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: var(--size-64);
  border-radius: var(--radius-20);
  font-size: var(--size-24);
  line-height: var(--size-32);
  font-weight: var(--type-weight-bold);
}
.big-button--done { background: var(--color-primary); color: var(--color-on-primary); }
.big-button--pending { background: var(--color-surface); color: var(--color-pending-fg); }

/* ---------- 7. Trust ---------- */
.pillars { display: grid; column-gap: var(--spacing-48); }

.pillar {
  padding-block: var(--spacing-28) var(--spacing-36);
  border-block-start: var(--hairline) solid var(--color-rule-dark);
}
.pillar__icon { width: var(--icon-lg); height: var(--icon-lg); margin-block-end: var(--spacing-20); color: var(--color-accent-on-dark); }
.pillar__title { margin-block-end: var(--spacing-8); font-size: var(--text-h3); line-height: var(--leading-h3); }
.pillar__text { color: var(--color-on-dark-soft); }

.states { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-block-start: var(--spacing-20); }

.faq { display: grid; gap: var(--spacing-24); margin-block-start: var(--spacing-64); }
.faq__heading { font-size: var(--size-24); line-height: var(--size-36); }
.faq__item { border-block-end: var(--hairline) solid var(--color-rule-dark); }
.faq__item:first-child { border-block-start: var(--hairline) solid var(--color-rule-dark); }
.faq__q { font-size: var(--text-lead); line-height: var(--leading-lead); }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  width: 100%;
  min-height: var(--size-64);
  padding: var(--spacing-16) 0;
  border: 0;
  background: transparent;
  color: var(--color-on-dark);
  font-weight: var(--type-weight-semibold);
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--motion-fast) var(--motion-ease-out);
}
.faq__trigger:hover { color: var(--color-accent-on-dark); }
.faq__chevron {
  width: var(--size-40);
  height: var(--size-40);
  padding: var(--spacing-8);
  border: var(--hairline) solid var(--color-rule-dark);
  border-radius: var(--radius-full);
  color: var(--color-on-dark-soft);
  transition: transform var(--motion-base) var(--motion-ease-out);
}
.faq__trigger[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }

.faq__inner { color: var(--color-on-dark-soft); }
.faq__inner p { max-width: 40em; padding-block-end: var(--spacing-24); }

/* Collapsible only when JS can toggle it; otherwise every answer stays visible */
.js .faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--motion-base) var(--motion-ease-out),
              visibility 0s linear var(--motion-base);
}
.js .faq__panel > .faq__inner { overflow: hidden; min-height: 0; }
.js .faq__panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--motion-base) var(--motion-ease-out), visibility 0s;
}

/* ---------- 8. Pricing ---------- */
.plans { display: grid; gap: var(--spacing-16); }

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-32) var(--spacing-24);
  border-radius: var(--radius-28);
}
.plan--free { background: var(--color-surface); }
.plan--premium { border: var(--hairline) dashed var(--color-grey-300); }

.plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); margin-block-end: var(--spacing-24); }
.plan__name { font-size: var(--text-h3); line-height: var(--leading-h3); }
.plan__price {
  margin-block-end: var(--spacing-8);
  color: var(--color-ink);
  font-size: var(--size-56);
  line-height: var(--size-72);
  font-weight: var(--type-weight-semibold);
}
.plan__price--tbd { color: var(--color-text-soft); font-size: var(--size-28); line-height: var(--size-72); }
.plan__desc { color: var(--color-text-muted); margin-block-end: var(--spacing-28); }

.plan__features { margin-block-end: var(--spacing-32); }
.plan__features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding-block: var(--spacing-12);
  border-block-start: var(--hairline) solid var(--color-rule);
  color: var(--color-ink);
}
.plan__features .icon { color: var(--color-primary); }

.store-badges { display: flex; flex-wrap: wrap; gap: var(--spacing-12); margin-block-start: auto; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  min-height: var(--size-56);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-16);
  background: var(--color-ink);
  color: var(--color-on-primary);
}
.store-badge__text { display: flex; flex-direction: column; }
.store-badge__small { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-on-dark-soft); }
.store-badge__name { font-size: var(--text-body); line-height: var(--size-20); font-weight: var(--type-weight-bold); }

.plan__note {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-block-start: auto;
  color: var(--color-pending-fg);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--type-weight-semibold);
}

/* ---------- 9. Footer ---------- */
.site-footer {
  padding-block: var(--spacing-64) var(--spacing-40);
  background: var(--color-surface);
  border-block-start: var(--hairline) solid var(--color-rule);
}

.footer__signoff {
  max-width: 14em;
  padding-block-end: var(--spacing-48);
  color: var(--color-ink);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--type-weight-semibold);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  padding-block: var(--spacing-24);
  border-block: var(--hairline) solid var(--color-rule);
}
.footer__brand { display: inline-flex; border-radius: var(--radius-8); }
.footer__brand img { height: var(--size-48); width: auto; }

.footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-4); }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--spacing-12);
  border-radius: var(--radius-8);
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-out);
}
.footer__nav a:hover { color: var(--color-primary); }

.footer__base {
  display: grid;
  gap: var(--spacing-12);
  padding-block-start: var(--spacing-24);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}
.footer__disclaimer { max-width: 48em; }

/* ==========================================================================
   7. SCROLL REVEAL (JS only; disabled under reduced motion)
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--spacing-20));
  transition: opacity var(--motion-reveal) var(--motion-ease-out),
              transform var(--motion-reveal) var(--motion-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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

/* ==========================================================================
   8. RESPONSIVE — mobile-first; 768px tablet, 1280px desktop
   ========================================================================== */
@media (min-width: 768px) {
  .hero { padding-block: var(--spacing-88) var(--spacing-72); }
  .moment { padding: var(--spacing-40) var(--spacing-36); }

  .head { grid-template-columns: 7fr 5fr; column-gap: var(--spacing-48); align-items: end; }

  .compare { grid-template-columns: 1fr 1fr; }
  .compare__col--before { padding-inline-end: var(--spacing-48); }
  .compare__col--after {
    padding-block-start: var(--spacing-8);
    padding-inline-start: var(--spacing-48);
    border-block-start: 0;
    border-inline-start: var(--hairline) solid var(--color-rule);
  }

  .features__list { grid-template-columns: 1fr 1fr; }
  .feature-panel { padding: var(--spacing-40); }

  .personas { grid-template-columns: 1fr 1fr; gap: var(--spacing-20); }
  .persona { padding: var(--spacing-40) var(--spacing-32); }
  .persona--simple { grid-column: 1 / -1; }

  .pillars { grid-template-columns: repeat(3, 1fr); }

  .faq { grid-template-columns: 1fr 2fr; column-gap: var(--spacing-48); margin-block-start: var(--spacing-88); }

  .plans { grid-template-columns: 1fr 1fr; gap: var(--spacing-24); }
  .plan { padding: var(--spacing-40); }

  .footer__base { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 1280px) {
  .hero { padding-block: var(--spacing-112) var(--spacing-88); }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--spacing-80); }
  .hero__lead { font-size: var(--size-20); line-height: var(--size-36); }
  .moment { padding: var(--spacing-48) var(--spacing-40); }

  .features { grid-template-columns: 7fr 5fr; gap: var(--spacing-64); }

  /* Five steps in one row, reading right → left along a single rule */
  .steps { grid-template-columns: repeat(5, 1fr); column-gap: var(--spacing-32); }
  .step {
    grid-template-columns: 1fr;
    grid-template-areas: "num" "title" "text";
    row-gap: var(--spacing-8);
    padding-block: var(--spacing-28) 0;
  }
  .step__num { margin-block-end: var(--spacing-16); font-size: var(--size-56); line-height: var(--size-64); }

  .personas { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }
  .persona--simple { grid-column: auto; }
}