/* Track Macro — trackmacro.app
   Design tokens come from tokens.css (generated from docs/design-system/tokens.json by
   `yarn web:tokens`, linked before this file). Never hard-code colors or scale values here:
   tints are color-mix() of token colors, so both themes follow automatically. */

:root {
  /* Site-only layout values (not app tokens). */
  --fg: var(--color-text-primary);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  --fs-hero: clamp(var(--font-size-display), 7.2vw, 64px);
  --fs-section: clamp(28px, 4.2vw, 44px);
  --fs-lede: clamp(var(--font-size-lg), 2vw, var(--font-size-xl));
  --max: 1120px;
  --gutter: var(--space-lg);
  --header-h: 64px;
  --island: black; /* the Dynamic Island is hardware black in both themes, not a design token */

  /* Derived surfaces: token colors at an alpha. --fg is white in dark and ink in light. */
  --border-soft: color-mix(in srgb, var(--fg) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--fg) 35%, transparent);
  --well: color-mix(in srgb, var(--color-bg) 55%, transparent);
  --highlight: color-mix(in srgb, var(--color-palette-white) 10%, transparent);
  --header-stuck: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --glow-1: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --glow-2: color-mix(in srgb, var(--color-macro-fats) 14%, transparent);
  --glow-3: color-mix(in srgb, var(--color-macro-protein) 8%, transparent);

  /* Theme-dependent site value (light override below). */
  --macro-text-mix: 100%;
}

/* Light: macro pastels are darkened toward ink when used as text; the logo swaps to the dark mark. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --macro-text-mix: 50%; --highlight: transparent; }
  :root:not([data-theme="dark"]) .logo-dark-theme { display: none; }
  :root:not([data-theme="dark"]) .logo-light-theme { display: block; }
}
:root[data-theme="light"] { --macro-text-mix: 50%; --highlight: transparent; }
:root[data-theme="light"] .logo-dark-theme { display: none; }
:root[data-theme="light"] .logo-light-theme { display: block; }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-lg));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-size-lg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Ambient glow behind the whole page: cheap, no images, no layout. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 0%, var(--glow-1), transparent 70%),
    radial-gradient(45% 35% at 90% 10%, var(--glow-2), transparent 70%),
    radial-gradient(50% 40% at 70% 100%, var(--glow-3), transparent 70%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
p { margin: 0 0 var(--space-lg); }
ul, ol { margin: 0 0 var(--space-lg); padding-inline-start: 1.25em; }
li + li { margin-top: var(--space-sm); }
strong { font-weight: var(--font-weight-bold); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--color-surface-glass); border: 1px solid var(--border-soft); padding: 1px 6px; border-radius: 6px; }

:focus-visible { outline: var(--stroke-thick) solid var(--fg); outline-offset: 3px; border-radius: var(--radius-sm); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Icons: Lucide glyphs from /icons.svg, sized on the type scale like the app's SF Symbols. */
.icon { width: var(--icon-size-lg); height: var(--icon-size-lg); flex: none; }

.skip {
  position: absolute; inset-inline-start: var(--space-lg); top: -60px;
  background: var(--fg); color: var(--color-bg);
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold); z-index: 100;
  transition: top var(--motion-duration-base) var(--motion-easing-standard);
}
.skip:focus { top: var(--space-lg); }

/* Type */
h1, h2, h3, h4 { margin: 0 0 var(--space-lg); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; line-height: var(--line-height-tight); text-wrap: balance; }
h1 { font-size: var(--fs-hero); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--font-size-xl); line-height: var(--line-height-snug); }
h4 { font-size: var(--font-size-lg); line-height: 1.3; }
.lede { font-size: var(--fs-lede); color: var(--color-text-secondary); line-height: 1.45; max-width: 36em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: var(--space-lg);
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--color-accent); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--font-size-sm); }

/* Layout */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding: calc(var(--space-3xl) * 2) 0; }
.section + .section { padding-top: var(--space-3xl); }
.section-head { max-width: 40em; margin-bottom: var(--space-3xl); }
@media (min-width: 720px) { :root { --gutter: var(--space-xl); } .section { padding: calc(var(--space-3xl) * 3) 0; } .section + .section { padding-top: calc(var(--space-3xl) * 1.5); } }

/* Glass */
.glass {
  background: var(--component-glass-card-background-color);
  border: 1px solid var(--component-glass-card-border-color);
  border-radius: var(--component-glass-card-radius);
  box-shadow: var(--component-glass-card-shadow), inset 0 1px 0 var(--highlight);
  -webkit-backdrop-filter: blur(var(--component-glass-card-backdrop-blur)) saturate(140%);
  backdrop-filter: blur(var(--component-glass-card-backdrop-blur)) saturate(140%);
}
.glass-alt { background: var(--color-surface-glass-alt); }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background var(--motion-duration-base) var(--motion-easing-standard), border-color var(--motion-duration-base) var(--motion-easing-standard);
}
.header.is-stuck {
  background: var(--header-stuck);
  border-bottom-color: var(--border-soft);
  -webkit-backdrop-filter: blur(var(--blur-glass-background)) saturate(140%);
  backdrop-filter: blur(var(--blur-glass-background)) saturate(140%);
}
.header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); letter-spacing: -0.01em; min-height: 44px; white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 7px; }
.logo-light-theme { display: none; }
.nav { display: none; align-items: center; gap: var(--space-xs); }
.nav a { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-pill); color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); min-height: 44px; display: inline-flex; align-items: center; transition: color var(--motion-duration-base) var(--motion-easing-standard), background var(--motion-duration-base) var(--motion-easing-standard); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); background: var(--color-surface-glass); }
@media (min-width: 720px) { .nav { display: inline-flex; } }
.header-actions { display: inline-flex; align-items: center; gap: var(--space-sm); }

/* Theme toggle: one 44pt button cycling system -> light -> dark. Hidden until site.js runs. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-glass);
  background: var(--color-surface-glass); color: var(--fg); cursor: pointer;
  transition: background var(--motion-duration-base) var(--motion-easing-standard), transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--color-surface-glass-alt); }
.theme-toggle:active { transform: scale(var(--motion-press-scale)); }
.theme-toggle .icon { width: var(--icon-size-md); height: var(--icon-size-md); display: none; }
.theme-toggle[data-mode="system"] .icon-system,
.theme-toggle[data-mode="light"] .icon-light,
.theme-toggle[data-mode="dark"] .icon-dark { display: block; }

/* Language switcher: a 44pt glass button opening a native <details> list (works without JS;
   site.js closes it on outside click / Escape and remembers the choice). */
.lang-menu { position: static; }
.header .wrap { position: relative; }
.lang-toggle {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-glass);
  background: var(--color-surface-glass); color: var(--fg); cursor: pointer;
  transition: background var(--motion-duration-base) var(--motion-easing-standard), transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.lang-toggle::-webkit-details-marker { display: none; }
.lang-toggle::marker { content: ""; }
.lang-toggle:hover, .lang-menu[open] .lang-toggle { background: var(--color-surface-glass-alt); }
.lang-toggle:active { transform: scale(var(--motion-press-scale)); }
.lang-toggle .icon { width: var(--icon-size-md); height: var(--icon-size-md); }
.lang-list {
  /* Anchored to the header's end edge (not the button), so it never leaves the viewport in LTR or RTL. */
  position: absolute; top: calc(100% - var(--space-xs)); inset-inline-end: var(--gutter); z-index: 60;
  min-width: 200px; max-width: calc(100% - 2 * var(--gutter));
  list-style: none; margin: 0; padding: var(--space-sm);
  background: var(--color-bg); border: 1px solid var(--color-border-glass); border-radius: var(--radius-md);
  box-shadow: var(--elevation-floating);
}
.lang-list li + li { margin-top: 0; }
.lang-list a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-sm);
  color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: var(--font-weight-medium);
}
.lang-list a:hover { background: var(--color-surface-glass); color: var(--fg); }
.lang-list a[aria-current] { color: var(--fg); background: var(--color-surface-glass-alt); }
@media (max-width: 400px) {
  /* 375pt iPhones: mark + three 44pt controls + CTA must fit; the logo keeps the brand. */
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 48px; padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-pill); font-weight: var(--font-weight-bold); font-size: var(--font-size-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--motion-duration-base) var(--motion-easing-standard), background var(--motion-duration-base) var(--motion-easing-standard), border-color var(--motion-duration-base) var(--motion-easing-standard);
}
.btn:active { transform: scale(var(--motion-press-scale)); }
.btn-primary { background: var(--fg); color: var(--color-bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--fg) 86%, var(--color-bg)); }
.btn-ghost { background: var(--color-surface-glass); color: var(--fg); border-color: var(--color-border-glass); -webkit-backdrop-filter: blur(var(--blur-glass-background)); backdrop-filter: blur(var(--blur-glass-background)); }
.btn-ghost:hover { background: var(--color-surface-glass-alt); }
.btn-sm { min-height: 44px; padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); }

/* App Store badge: Apple's black badge in both themes (Apple marketing guidelines). */
.appstore {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding-block: var(--space-sm); padding-inline: 14px 18px;
  background: var(--color-palette-ink); color: var(--color-palette-white);
  border: 1px solid color-mix(in srgb, var(--color-palette-white) 35%, transparent); border-radius: var(--radius-sm);
  line-height: 1.05; text-align: start;
  transition: transform var(--motion-duration-base) var(--motion-easing-standard), border-color var(--motion-duration-base) var(--motion-easing-standard);
}
.appstore:hover { border-color: color-mix(in srgb, var(--color-palette-white) 60%, transparent); }
.appstore:active { transform: scale(var(--motion-press-scale)); }
.appstore .icon { width: 26px; height: 26px; }
.appstore small { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0.02em; opacity: 0.85; }
.appstore span { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

/* Hero */
.hero { padding: var(--space-3xl) 0 calc(var(--space-3xl) * 1.5); }
.hero-grid { display: grid; gap: var(--space-3xl); align-items: center; }
.hero-copy h1 { margin-bottom: var(--space-xl); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-lg); }
.hero-note { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: 0; }
@media (min-width: 900px) {
  .hero { padding: calc(var(--space-3xl) * 1.5) 0 calc(var(--space-3xl) * 2); }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: calc(var(--space-3xl) * 1.5); }
}

/* Phone mock: a glass device with the real dashboard layout. Pure CSS/SVG. */
.device-wrap { display: flex; justify-content: center; }
.device {
  width: min(100%, 360px); aspect-ratio: 9 / 18.4;
  border-radius: 44px; padding: var(--space-md);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fg) 14%, transparent), color-mix(in srgb, var(--fg) 4%, transparent));
  border: 1px solid var(--color-border-glass);
  box-shadow: var(--elevation-floating), inset 0 1px 0 color-mix(in srgb, var(--color-palette-white) 25%, transparent);
  position: relative;
}
.device::before { content: ""; position: absolute; top: 24px; inset-inline: 0; margin-inline: auto; width: 96px; height: 28px; background: var(--island); border-radius: var(--radius-pill); z-index: 2; }
.screen {
  width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 4%, var(--color-bg)) 0%, var(--color-bg) 100%);
  border: 1px solid var(--border-soft);
  padding: 72px 18px 18px; display: flex; flex-direction: column; gap: var(--space-md);
}
.screen-title { display: flex; justify-content: space-between; align-items: baseline; }
.screen-title b { font-size: var(--font-size-xl); letter-spacing: -0.02em; }
.screen-title span { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.rings { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-md); align-items: center; padding: var(--space-lg); }
.ring { width: 100%; height: auto; }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring .track { stroke: var(--color-track); }
.ring .fill { transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring .fill.kcal { stroke: var(--color-macro-calories); stroke-dasharray: 251; stroke-dashoffset: 72; }
.ring text { fill: var(--fg); font-family: var(--font); font-weight: var(--font-weight-bold); text-anchor: middle; }
.ring text.sub { fill: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.macro-list { display: grid; gap: var(--space-sm); font-size: var(--font-size-xs); min-width: 0; }
.macro { display: grid; gap: var(--space-xs); }
.macro .row { display: flex; justify-content: space-between; color: var(--color-text-secondary); }
.macro .row b { color: var(--fg); font-weight: var(--font-weight-medium); white-space: nowrap; }
.bar { height: 6px; background: var(--color-track); border-radius: var(--component-stat-bar-radius); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; }
.bar .p { width: 78%; background: var(--color-macro-protein); }
.bar .c { width: 54%; background: var(--color-macro-carbs); }
.bar .f { width: 63%; background: var(--color-macro-fats); }
.nutrients { display: grid; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); }
.nutrients .hd { display: flex; justify-content: space-between; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.nrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); }
.dot-mg { background: var(--color-macro-magnesium); } .dot-fiber { background: var(--color-macro-fiber); } .dot-omega { background: var(--color-macro-omega3); } .dot-carbs { background: var(--color-macro-carbs); } .dot-fats { background: var(--color-macro-fats); } .dot-protein { background: var(--color-macro-protein); }
.m0 { margin: 0; } .mt-sm { margin-top: var(--space-sm); } .t1 { color: var(--fg); }
.nrow .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: var(--space-sm); vertical-align: 1px; }
.pill { display: inline-flex; align-items: center; min-height: 22px; padding: 2px var(--component-pill-padding-x); border-radius: var(--component-pill-radius); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--component-pill-text); }
.pill-low { background: var(--component-pill-bg-warning); }
.pill-ok { background: var(--component-pill-bg-positive); }
.pill-high { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger-text); }
.pill-neutral { background: var(--color-surface-glass-alt); color: var(--color-text-secondary); }

/* Proof strip */
.proof { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); }
.proof div { padding: var(--space-lg); border-radius: var(--radius-md); }
.proof b { display: block; font-size: var(--font-size-xl); letter-spacing: -0.02em; margin-bottom: var(--space-xs); }
.proof span { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
@media (min-width: 720px) { .proof { grid-template-columns: repeat(4, 1fr); } }

/* Feature rows */
.feature { display: grid; gap: var(--space-xxl); align-items: center; }
.feature > *, .hero-grid > *, .widgets > *, .plans > *, .proof > * { min-width: 0; }
.feature-visual, .device, .screen { overflow: hidden; }
.feature + .feature { margin-top: calc(var(--space-3xl) * 2); }
.feature-copy h2 { margin-bottom: var(--space-lg); }
.feature-copy p { color: var(--color-text-secondary); font-size: var(--font-size-lg); max-width: 34em; }
.feature-copy ul { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; gap: var(--space-md); }
.feature-copy li { display: grid; grid-template-columns: var(--icon-size-lg) 1fr; gap: var(--space-md); color: var(--color-text-secondary); font-size: var(--font-size-md); }
.feature-copy li .icon { color: var(--color-accent); margin-top: 1px; }
.feature-visual { padding: var(--space-xl); min-height: 280px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); }
.feature-visual > * { min-width: 0; max-width: 100%; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: calc(var(--space-3xl) * 1.5); }
  .feature.flip .feature-visual { order: -1; }
}

/* Nutrient grid visual */
.ngrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.ngrid div { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); background: var(--color-surface-glass); border: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); }
.ngrid b { font-weight: var(--font-weight-medium); color: var(--fg); }
.ngrid small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
@media (min-width: 480px) { .ngrid { grid-template-columns: repeat(3, 1fr); } }

/* Chat/estimate visual */
.estimate { display: grid; gap: var(--space-md); }
.bubble { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); font-size: var(--font-size-md); max-width: 90%; }
.bubble.user { background: var(--color-surface-glass-alt); border: 1px solid var(--border-soft); justify-self: end; border-end-end-radius: 6px; }
.bubble.app { background: var(--color-surface-glass); border: 1px solid var(--color-border-glass); border-end-start-radius: 6px; }
.bubble .meta { display: flex; gap: var(--space-sm); align-items: center; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.bubble .meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); display: inline-block; }
.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }
.kv div { min-width: 0; text-align: start; padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--well); }
.kv b { display: block; font-size: var(--font-size-lg); letter-spacing: -0.01em; white-space: nowrap; }
.kv span { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); overflow-wrap: break-word; }
/* Phones: 2 x 2, so long macro names (Kohlenhydrate, carbohidratos) never break mid-word. */
@media (max-width: 479px) { .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kv .kcal b { color: color-mix(in srgb, var(--color-macro-calories) var(--macro-text-mix), var(--fg)); }
.kv .p b { color: color-mix(in srgb, var(--color-macro-protein) var(--macro-text-mix), var(--fg)); }
.kv .c b { color: color-mix(in srgb, var(--color-macro-carbs) var(--macro-text-mix), var(--fg)); }
.kv .f b { color: color-mix(in srgb, var(--color-macro-fats) var(--macro-text-mix), var(--fg)); }

/* Widgets visual */
.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.widget { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface-glass-alt); border: 1px solid var(--color-border-glass); aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; }
.widget.wide { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; align-items: center; gap: var(--space-lg); }
.widget .lbl { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.widget .big { font-size: 28px; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
.widget .big small { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.widget .mini { display: grid; gap: 6px; }
.widget .mini .bar { height: 5px; }
.siri { display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-pill); background: var(--well); border: 1px solid var(--border-soft); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.siri i { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 90deg, var(--color-macro-fats), var(--color-macro-protein), var(--color-macro-omega3), var(--color-macro-fiber), var(--color-macro-fats)); flex: none; }

/* "Not in the app" visual */
.nobloat { display: grid; gap: var(--space-sm); }
.nobloat div { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); background: var(--color-surface-glass); border: 1px solid var(--border-soft); font-size: var(--font-size-md); }
.nobloat .no { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.nobloat .yes { color: var(--fg); font-weight: var(--font-weight-medium); }

/* Pricing */
.plans { display: grid; gap: var(--space-lg); }
.plan { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); position: relative; }
.plan.featured { border-color: var(--border-strong); background: var(--color-surface-glass-alt); }
.plan .tag { position: absolute; top: var(--space-lg); inset-inline-end: var(--space-lg); }
.plan h3 { margin: 0; display: flex; align-items: center; gap: var(--space-sm); }
.plan h3 .icon { width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-accent); }
.price { display: flex; align-items: baseline; gap: var(--space-sm); }
.price b { font-size: var(--font-size-display); letter-spacing: -0.03em; line-height: 1; }
.price span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.plan li { display: grid; grid-template-columns: var(--icon-size-md) 1fr; gap: var(--space-md); font-size: var(--font-size-md); color: var(--color-text-secondary); }
.plan li .icon { width: var(--icon-size-md); height: var(--icon-size-md); color: var(--color-success); margin-top: 3px; }
.plan .btn { margin-top: auto; }
.plan-alt { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--border-soft); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.plan-alt b { color: var(--fg); }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
.legal-note { color: var(--color-text-muted); font-size: var(--font-size-sm); max-width: 50em; margin-top: var(--space-xl); }

/* FAQ */
.faq { display: grid; gap: var(--space-md); max-width: 46em; }
.faq details { border-radius: var(--radius-md); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: var(--font-weight-regular); font-size: var(--icon-size-lg); color: var(--color-text-muted); flex: none; transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 var(--space-xl) var(--space-xl); color: var(--color-text-secondary); font-size: var(--font-size-md); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Final CTA */
.cta { text-align: start; padding: var(--space-3xl) var(--space-xl); display: grid; gap: var(--space-lg); }
.cta h2 { margin-bottom: var(--space-sm); }
@media (min-width: 900px) { .cta { grid-template-columns: 1fr auto; align-items: center; padding: calc(var(--space-3xl) * 1.5); } }

/* Footer */
.footer { border-top: 1px solid var(--border-soft); padding: var(--space-3xl) 0; margin-top: calc(var(--space-3xl) * 2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.footer .wrap { display: grid; gap: var(--space-xl); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; padding: 0; margin: 0; }
.footer-links a { color: var(--color-text-secondary); display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a:hover { color: var(--fg); }
.footer p { margin: 0; }
@media (min-width: 720px) { .footer .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.footer-langs { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: 1px solid var(--border-soft); }
.footer-langs ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; padding: 0; margin: 0; }
.footer-langs li + li { margin-top: 0; }
.footer-langs a { color: var(--color-text-secondary); display: inline-flex; align-items: center; min-height: 44px; }
.footer-langs a:hover, .footer-langs a[aria-current] { color: var(--fg); }

/* Legal / long-form pages */
.doc { max-width: 44em; padding-top: var(--space-3xl); }
.doc header { margin-bottom: var(--space-3xl); }
.doc h1 { font-size: var(--fs-section); }
.doc .meta { color: var(--color-text-muted); font-size: var(--font-size-sm); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.doc h2 { font-size: var(--font-size-xl); margin-top: calc(var(--space-3xl) + var(--space-sm)); padding-top: var(--space-xl); border-top: 1px solid var(--border-soft); }
.doc h3 { font-size: var(--font-size-lg); margin-top: var(--space-xl); }
.doc p, .doc li { color: var(--color-text-secondary); font-size: var(--font-size-md); }
.doc li strong, .doc p strong { color: var(--fg); }
.doc a:not(.btn) { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); margin: var(--space-lg) 0 var(--space-xl); display: block; overflow-x: auto; }
.doc th, .doc td { text-align: start; vertical-align: top; padding: var(--space-md); border-bottom: 1px solid var(--border-soft); color: var(--color-text-secondary); }
.doc th { color: var(--fg); font-weight: var(--font-weight-bold); white-space: nowrap; }
.doc .callout { padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-md); margin: var(--space-xl) 0; }
.doc .callout p { margin: 0; }
.translation-note { margin: calc(var(--space-xl) * -1) 0 var(--space-xl); padding: var(--space-md) var(--space-lg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.doc .translation-note { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.toc { padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-md); margin-bottom: var(--space-xxl); }
.toc ol { margin: 0; padding-inline-start: 1.25em; columns: 1; }
.toc li { font-size: var(--font-size-sm); margin: 0; padding: var(--space-xs) 0; }
.toc a, .doc .toc a:not(.btn) { color: var(--color-text-secondary); text-decoration: none; }
.toc a:hover { color: var(--fg); }
@media (min-width: 720px) { .toc ol { columns: 2; column-gap: var(--space-xl); } }

/* Support cards */
.support-grid { display: grid; gap: var(--space-lg); margin: var(--space-xxl) 0; }
.support-card { padding: var(--space-xl); display: grid; gap: var(--space-md); }
.support-card h3 { margin: 0; }
.support-card p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-md); }
@media (min-width: 720px) { .support-grid { grid-template-columns: 1fr 1fr; } }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--space-md); }
.steps li { counter-increment: step; position: relative; padding-inline-start: calc(28px + var(--space-md)); min-height: 28px; }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-glass-alt); border: 1px solid var(--color-border-glass); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--fg); }

/* Right-to-left (Arabic). Layout uses logical properties throughout, so it mirrors by itself.
   Icons with a direction (none of the current glyphs) take .icon-dir to flip in RTL.
   Arabic type: SF Arabic on Apple devices, then Noto Sans Arabic / system fonts; no web fonts.
   Negative tracking breaks Arabic joining, so letter-spacing is reset. */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }
:root:lang(ar) {
  --font: "SF Arabic", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
}
html:lang(ar) body { line-height: 1.7; }
html:lang(ar) body * { letter-spacing: normal; text-transform: none; }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(ar) h4 { line-height: 1.35; }
html:lang(ar) .lede { line-height: 1.65; }

/* Entrance: gated behind reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal 600ms var(--motion-easing-standard) backwards; }
  .reveal-2 { animation-delay: 120ms; }
  .reveal-3 { animation-delay: 240ms; }
  @keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

@media print {
  body::before, .header, .footer, .skip { display: none; }
  body { background: var(--color-palette-white); color: var(--color-palette-ink); }
  .doc p, .doc li, .doc td, .doc th { color: var(--color-palette-ink); }
}