/* ──────────────────────────────────────────────────────────────
   2026 skin for the long-form pages: blog posts, privacy, terms and download.

   These pages keep their own inline <style> (they carry a lot of bespoke
   widgets: recipe cards, calculators, comparison tables). Rather than rewrite
   each one, this file is linked after that block and does two things:

   1. Remaps the shared custom properties every page defines (--bg, --fore,
      --blue, --radius...) onto the 2026 palette, so every widget built on them
      follows without being touched. Same specificity as the inline :root, so
      the later file wins.
   2. Restyles the parts the design draws differently: type, the article
      header and hero image, prose, and the common cards.

   Selectors are scoped under body.ff-article so they outrank the inline
   element rules (`h1 {}`, `.prose h2 {}`) without !important.
   ────────────────────────────────────────────────────────────── */

:root {
  --bg: #F3F3F0;
  --bg-warm: #E8E8E4;
  --card: #FFFFFF;
  --fore: #0E1116;
  --muted: #5E6671;
  --border: #E2E2DE;
  --blue: #1E6FE0;
  --blue-lt: #E6EFFC;
  --blue-mid: #5B9BFF;
  --blue-pale: #F2F6FD;
  /* The old pages alias --amber to the accent blue; keep it blue. */
  --amber: #1E6FE0;
  --amber-dark: #1559B8;
  --amber-lt: #E6EFFC;
  --primary-dark: #1559B8;
  --secondary: #E6EFFC;
  --gold: #F5B935;
  --gold-lt: #FFF4D6;
  --gold-dark: #9A6B00;
  --good: #17663A;
  --good-lt: #E3F5EA;
  --radius: 28px;
}

body.ff-article { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.55; }
body.ff-article :focus-visible { outline-color: var(--blue); }

/* ── Type ── */
body.ff-article h1,
body.ff-article h2,
body.ff-article h3,
body.ff-article h4 { font-family: var(--display); font-weight: 700; }
body.ff-article h2 { letter-spacing: -0.035em; line-height: 1.05; }
body.ff-article h3 { letter-spacing: -0.02em; }

/* ── Article header ── */
body.ff-article .hero { max-width: 980px; padding-top: 72px; padding-bottom: 40px; }
body.ff-article .hero h1 {
  font-size: clamp(44px, 6.4vw, 76px); font-weight: 700;
  letter-spacing: -0.04em; line-height: .96; margin-bottom: 22px;
  animation: ff-rise 1s var(--ease) .08s both;
}
body.ff-article .hero h1 span { color: var(--blue); }
body.ff-article .eyebrow,
body.ff-article .hero-welcome {
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--blue); margin-bottom: 18px;
  animation: ff-rise 1s var(--ease) both;
}
body.ff-article .article-meta,
body.ff-article .hero-meta { font-size: 14px; color: var(--muted); animation: ff-rise 1s var(--ease) .16s both; }
body.ff-article .article-meta strong { color: var(--ink); font-weight: 600; }
body.ff-article .hero-sub { font-size: 19px; line-height: 1.55; color: var(--ink-3); max-width: 640px; margin-left: auto; margin-right: auto; animation: ff-rise 1s var(--ease) .12s both; }

body.ff-article .hero-image { max-width: 1240px; padding: 0 32px; margin-top: 40px; animation: ff-pop 1.2s var(--ease) .2s both; }
body.ff-article .hero-image img { border-radius: 44px; aspect-ratio: 21 / 10; }

/* ── Body ── */
body.ff-article .wrap { max-width: 1000px; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
body.ff-article .wrap.prose { max-width: 820px; }
body.ff-article section.block { padding: 48px 0; }
body.ff-article .prose p,
body.ff-article .prose li { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
body.ff-article .prose h2,
body.ff-article section.block > .wrap > h2 { font-size: clamp(30px, 3.6vw, 40px); margin-bottom: 20px; }
body.ff-article .prose h3 { font-size: 24px; }
body.ff-article .prose a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.ff-article .prose a:hover { color: var(--link-hover); }
body.ff-article .prose ul.plain li::before { color: var(--blue); }

/* ── Cards ── */
body.ff-article .stat-box {
  background: var(--card); border: 0; border-radius: 32px; padding: 28px 32px;
}
body.ff-article .stat-box h3 { color: var(--blue); font-size: 24px; }
body.ff-article .table-card,
body.ff-article .faq-item,
body.ff-article .author-bio,
body.ff-article .legal-card,
body.ff-article .meal-card,
body.ff-article .highlight-card,
body.ff-article .app-block,
body.ff-article .platform-card,
body.ff-article .shop-card,
body.ff-article .tool { border-color: transparent; }
body.ff-article .faq-item { border-radius: 20px; transition: box-shadow .3s; }
body.ff-article .faq-item[open] { box-shadow: 0 0 0 2px var(--blue-lt); }
body.ff-article .faq-item summary { font-family: var(--display); font-size: 18px; letter-spacing: -0.2px; }
body.ff-article .author-bio { border-radius: 32px; }
body.ff-article .author-avatar { font-family: var(--display); }
body.ff-article .article-image img,
body.ff-article .recipe-photo img { border-radius: 24px; border-color: transparent; }
body.ff-article .legal-card { border-radius: 28px; padding: 28px 32px; }
body.ff-article .legal-card h2 { font-size: 20px; letter-spacing: -0.3px; }
body.ff-article .section-label { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Dark call-to-action bands keep their shape but take the 2026 ink and radius. */
body.ff-article .cta-section,
body.ff-article .dark-callout,
body.ff-article .banner-cta { border-radius: 40px; background-color: var(--ink); }
body.ff-article .cta-section h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -1.5px; }
body.ff-article .store-btn {
  border-radius: 28px; min-height: 52px; padding: 0 22px; font-weight: 600;
  transition: transform .25s var(--ease);
}
body.ff-article .store-btn:hover { transform: translateY(-2px); }

@media (max-width: 640px) {
  body.ff-article .hero { padding: 40px 16px 28px; }
  body.ff-article .hero-image { padding: 0 16px; margin-top: 24px; }
  body.ff-article .hero-image img { border-radius: 28px; aspect-ratio: 16 / 10; }
  body.ff-article .wrap { padding-left: 16px; padding-right: 16px; }
  body.ff-article .prose p, body.ff-article .prose li { font-size: 17px; }
  body.ff-article .stat-box, body.ff-article .legal-card { padding: 22px 22px; border-radius: 24px; }
  body.ff-article .cta-section, body.ff-article .dark-callout, body.ff-article .banner-cta { border-radius: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ff-article .hero h1, body.ff-article .eyebrow, body.ff-article .hero-welcome,
  body.ff-article .article-meta, body.ff-article .hero-meta, body.ff-article .hero-sub,
  body.ff-article .hero-image { animation: none; }
  body.ff-article .store-btn, body.ff-article .faq-item { transition: none; }
}