/* ANIMA HYBRID site. The Anima Nutrition palette: Ink base, Violet brand,
   Violet Glow for the // mark and the numbers. Inter (self-hosted, subset,
   ~32 kB for both weights) is the Anima face - 700 headings, 400 body - so the
   site, the app and the supplement brand set type the same way.
   Violet #5b21b6 is 2.1:1 on Ink: it fills buttons and never sets text, and
   Violet Lift #a78bfa is the tone links and numbers take on dark.
   Tokens mirror src/brand/theme.ts. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-grotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}
:root {
  --ink: #101014;
  --ink-lift: #1a1824;
  --ink-raise: #231f30;
  --line: #332d45;
  --paper: #fbfaf8;
  --ink-soft: #a9a2bc;
  --ink-faint: #968eae;
  --violet: #5b21b6;
  --violet-deep: #3a1673;
  --violet-glow: #8b5cf6;
  --violet-lift: #a78bfa;
  --lilac: #e9e1fa;
  --coral: #ff5a4e;
  --brand-gradient: linear-gradient(160deg, #5b21b6 0%, #3a1673 100%);
  /* Space Grotesk carries the wordmark and headlines, matching the app and the
     store art (src/brand/theme.ts). Inter stays on body copy. */
  --display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max: 1080px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-size: 17px;
}
a { color: var(--violet-lift); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.mono { font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }

header { padding: 26px 0; position: sticky; top: 0; background: rgba(16, 16, 20, 0.86); backdrop-filter: blur(12px); z-index: 10; border-bottom: 1px solid transparent; }
header .bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.word { display: flex; align-items: center; gap: 11px; color: var(--paper); }
.word:hover { text-decoration: none; }
.word img { width: 26px; height: 26px; }
/* The wordmark: 'ANIMA' regular + 'HYBRID' bold, always caps. */
.wm { font-family: var(--display); font-size: 19px; line-height: 1; letter-spacing: 0.05em; white-space: nowrap; }
.wm b { font-weight: 700; margin-left: 0.24em; }
.wm span { font-weight: 400; }
nav { display: flex; gap: 20px; font-size: 14px; color: var(--ink-soft); }
nav a { color: var(--ink-soft); white-space: nowrap; }
/* On a phone the header has room for the wordmark and nothing else; every
   link is repeated in the footer, which wraps. */
@media (max-width: 600px) { header nav { display: none; } }

h1 { font-family: var(--display); font-size: clamp(40px, 7.6vw, 76px); line-height: 1; letter-spacing: -0.03em; font-weight: 700; }
h1 .accent { color: var(--violet-lift); }
h2 { font-family: var(--display); font-size: clamp(25px, 3.4vw, 36px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 14px; }
h3 { font-family: var(--display); font-size: 19px; letter-spacing: -0.01em; font-weight: 700; }
p.lead { font-size: clamp(17px, 2vw, 21px); color: var(--ink-soft); margin-top: 20px; max-width: 46ch; }
.eyebrow { font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }

section { padding: 72px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; padding-top: 48px; }

.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero .shot { justify-self: center; max-width: 320px; width: 100%; border-radius: 26px; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
/* height:auto matters: the <img> carries width/height attributes for layout
   stability, and without it the browser keeps the 932px height while CSS
   shrinks the width - squashing every screenshot sideways on a phone. */
.hero .shot img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

.badges { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper); color: var(--ink);
  padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 15px;
}
.badge:hover { text-decoration: none; }
.badge.ghost { background: transparent; color: var(--paper); border: 1px solid var(--line); }
.note { color: var(--ink-faint); font-size: 13px; margin-top: 14px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--ink-lift); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 15px; }
.card .num { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--violet-lift); }

.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 860px) { .shots { grid-template-columns: repeat(2, 1fr); } }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); display: block; }
.shots figcaption { font-size: 13px; color: var(--ink-faint); margin-top: 9px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-faint); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
td.n { text-align: right; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
td.loss { color: var(--coral); }
td.gain { color: var(--violet-lift); }

.prose { max-width: 70ch; }
.prose h2 { margin-top: 42px; font-size: 26px; }
.prose h3 { margin-top: 28px; }
.prose p, .prose li { color: var(--ink-soft); margin-top: 14px; }
.prose ul, .prose ol { margin-top: 14px; padding-left: 22px; }
.prose strong { color: var(--paper); }
.legal { background: var(--ink-lift); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 24px 0; color: var(--ink-faint); font-size: 14px; }

footer { border-top: 1px solid var(--line); padding: 44px 0 64px; color: var(--ink-faint); font-size: 14px; }
footer nav { flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
.fbrand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.fbrand .wm { font-size: 18px; }
.byline { font-size: 13px; color: var(--ink-faint); letter-spacing: 0.04em; }
footer .fine { max-width: 76ch; }

.cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--brand-gradient); color: var(--paper); border-radius: 22px; padding: 30px; }
.cta h2 { margin: 0; flex: 1 1 320px; }
.cta .badge { background: var(--paper); color: var(--ink); }
.cta a:not(.badge) { color: var(--paper); }