:root{
  /* v3 · 2026-10-09 — Cali renamed Cayl «كيل»: new wordmark + brand period, mark unchanged.
     The system is v2.1, recorded from the shipped app (ios/Cayl/DesignSystem/Theme.swift
     is the source of truth). Every hue means ONE thing. */
  --cayl-emerald: #10B981;         /* brand, the mark, calories, actions — graphics + ≥24px bold only */
  --cayl-emerald-ink: #0B7A57;     /* the ONLY emerald that may carry text on light (5.34:1) */
  --cayl-emerald-bright: #34D399;  /* logo, text & accents on dark surfaces only */
  --cayl-ink: #0E0E0E;
  --cayl-white: #FFFFFF;

  /* macro trio — macros and nothing else, never recolored per screen */
  --cayl-protein: #8B5CF6;         /* violet */
  --cayl-carbs: #F0A32E;           /* grain amber */
  --cayl-fat: #4C9EE8;             /* blue */

  /* amber family — gentle warnings only; red does not exist in this brand */
  --cayl-amber: #F59E0B;           /* low-confidence fills/dots */
  --cayl-over: #DF9F4C;            /* over-budget spill — calm, never alarm */
  --cayl-amber-ink: #B45309;       /* the ONLY warning color that may carry text (5.02:1) */

  --cayl-slate: #64748B;           /* marketing secondary, target ticks (retired from macros in v2) */
  --cayl-gray: #6B7280;            /* supporting text (tertiary #9CA3AF) */
  --cayl-hairline: #EEF0F2;        /* borders, bar & ring tracks */
  --cayl-mint: #E9F9F2;            /* chips, washes, the coach's bubble */

  --cayl-radius-card: 22pt;
  --cayl-radius-pill: 999px;
  --cayl-shadow: 0 4px 12px rgba(0,0,0,.04); /* the ONE resting-card elevation, shape-cast */
  --cayl-ring-gap: 38deg;      /* the open gap — identity constant, always at 3 o'clock */
  --cayl-ring-stroke: 1em;     /* dot diameter == stroke width */
  --cayl-period-ratio: 1.25;   /* wordmark period Ø = 1.25 x letter stem */
  --cayl-font: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --cayl-font-ar: "SF Arabic", "Cairo", system-ui, sans-serif;
}










:root { color-scheme: light; --page-width: 1120px; --cayl-radius-card: 22px; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--cayl-ink); background: var(--cayl-white); font-family: var(--cayl-font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
[lang='ar'] { font-family: var(--cayl-font-ar); letter-spacing: normal; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--cayl-emerald-ink); outline-offset: 5px; }
::selection { color: var(--cayl-ink); background: var(--cayl-mint); }
.skip-link { position: absolute; top: -100px; left: 24px; z-index: 10; background: var(--cayl-white); color: var(--cayl-emerald-ink); padding: 12px 20px; border: 2px solid currentColor; border-radius: 12px; }
.skip-link:focus { top: 12px; }
.draft { padding: 10px 24px; background: var(--cayl-mint); color: var(--cayl-emerald-ink); text-align: center; font-size: 14px; font-weight: 600; }
header, footer { max-width: var(--page-width); margin: auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
header { border-bottom: 1px solid var(--cayl-hairline); }
.brand { display: inline-flex; align-items: center; gap: 16px; flex-shrink: 0; }
.brand img { display: block; height: 36px; width: auto; }
.brand-divider { height: 24px; width: 1px; background: var(--cayl-hairline); }
nav { display: flex; gap: 8px; font-size: 16px; font-weight: 700; }
nav a { padding: 10px 16px; border-radius: var(--cayl-radius-pill); }
nav a:hover { background: var(--cayl-mint); color: var(--cayl-emerald-ink); }
main { max-width: var(--page-width); margin: auto; padding: 68px 24px 76px; }
.eyebrow { display: inline-flex; margin: 0 0 20px; padding: 6px 14px; border-radius: var(--cayl-radius-pill); background: var(--cayl-mint); color: var(--cayl-emerald-ink); font-size: 14px; font-weight: 800; }
h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; margin: 0 0 20px; text-wrap: balance; }
.intro { color: var(--cayl-gray); max-width: 620px; font-size: 19px; line-height: 1.65; margin: 0; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0 28px; }
.card { padding: 30px; border: 1px solid var(--cayl-hairline); border-radius: var(--cayl-radius-card); box-shadow: var(--cayl-shadow); transition: border-color .18s ease, transform .18s ease; }
.card:hover { border-color: var(--cayl-emerald); transform: translateY(-2px); }
.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: var(--cayl-mint); color: var(--cayl-emerald-ink); }
.card h2 { margin: 24px 0 10px; font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -.025em; }
.card p { color: var(--cayl-gray); margin: 0; max-width: 390px; font-size: 17px; }
.card .card-action { display: flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--cayl-emerald-ink); font-size: 16px; font-weight: 800; }
.footnote { color: var(--cayl-gray); font-size: 14px; }
footer { border-top: 1px solid var(--cayl-hairline); color: var(--cayl-gray); font-size: 14px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 30px; height: 30px; }
footer a:hover { color: var(--cayl-emerald-ink); text-decoration: underline; text-underline-offset: 4px; }
.document { max-width: 808px; }
.document h1 { font-size: clamp(36px, 5vw, 48px); }
.document h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.02em; font-weight: 800; margin: 40px 0 16px; }
.document p, .document li { font-size: 17px; color: var(--cayl-ink); overflow-wrap: anywhere; }
.document p { margin-bottom: 22px; }
.document ul { padding-inline-start: 24px; margin-bottom: 28px; }
.document li { list-style: disc; margin-bottom: 14px; }
.document li::marker { color: var(--cayl-emerald-ink); }
.document strong { color: var(--cayl-ink); font-weight: 800; }
.document a { color: var(--cayl-emerald-ink); text-decoration: underline; text-underline-offset: 4px; }
.document .eyebrow { color: var(--cayl-emerald-ink); font-size: 14px; }
.document .intro { color: var(--cayl-gray); font-size: 19px; }
.help-list { margin: 34px 0 26px; }
details { border-bottom: 1px solid var(--cayl-hairline); padding: 22px 0; }
summary { cursor: pointer; font-size: 19px; line-height: 1.4; font-weight: 800; list-style: revert; }
summary::marker { color: var(--cayl-emerald-ink); }
details p { margin: 16px 0 0 !important; }
.contact { border-radius: var(--cayl-radius-card); background: var(--cayl-mint); padding: 28px; margin: 40px 0; }
.contact h2 { margin-top: 0; }
.contact p:last-child { margin-bottom: 0; }
.document .action { display: inline-flex; min-height: 46px; align-items: center; padding: 10px 20px; border-radius: var(--cayl-radius-pill); background: var(--cayl-emerald-ink); color: var(--cayl-white); font-size: 16px; font-weight: 800; text-decoration: none; }
[lang='ar'] h2 { letter-spacing: 0; }
@media (max-width: 640px) {
  header { flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 14px; padding-bottom: 14px; }
  .brand img { height: 32px; }
  nav { justify-content: center; }
  nav a { padding: 8px 16px; }
  main { padding-top: 40px; padding-bottom: 52px; }
  .cards { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .card { padding: 26px; }
  .contact { padding: 24px; }
  footer { align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .card:hover { transform: none; }
}

.contact a { color: var(--cayl-emerald-ink); font-weight: 800; }