/* ============================================================
   24 NORTH — style.css
   "Your 24 hours. Sleep is the north star."
   Light editorial gallery aesthetic — white paper, deep green,
   gold. Generous whitespace, serif display, hairline rules,
   uppercase letterspaced eyebrows.
   Every colour token below meets WCAG AA (4.5:1) on BOTH
   #ffffff and --bg-section. Re-check both if you change one.
   Exception: --gold-bright is DECORATIVE ONLY (rules, icons,
   stars) — never use it for text.
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────────── */
:root {
  /* Colors — white paper, forest green, gold */
  --bg: #ffffff;
  --bg-section: #f7f8f5;
  --bg-elevated: #ffffff;
  --bg-tint: #edf2ec;
  --ink: #ffffff;
  --ink-2: #ffffff;
  --ink-3: #f7f8f5;
  --slate: #4c5350;
  --border: #e3e6e0;
  --border-soft: #f0f2ee;
  --text-primary: #141715;
  --text-secondary: #4c5350;
  /* 4.68:1 on white, 4.52:1 on --bg-section */
  --text-muted: #6c736f;
  /* Forest green — the brand colour. ~8.7:1 on white, ~8.3:1 on --bg-section. */
  --accent: #1d5240;
  --accent-hover: #143a2d;
  --accent-soft: #e8f0ec;
  --accent-border: #c2d8cd;
  --accent-glow: rgba(29,82,64,0.08);
  /* Gold, text-safe. ~5.2:1 on white, ~5.0:1 on --bg-section. */
  --accent-2: #8a6a12;
  --gold: #8a6a12;
  --gold-soft: #faf3e0;
  --gold-border: #e8d9a8;
  /* DECORATIVE ONLY — hairlines, stars, icons. Fails AA as text. */
  --gold-bright: #c9a227;
  --green: #1d5240;
  --red: #b3261e;
  --white: #ffffff;

  /* Typography */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --container-max: 1180px;
  --container-narrow: 760px;
  --section-gap: 96px;

  /* Effects */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04);
  --shadow-card-hover: 0 4px 12px rgba(15,23,42,0.06), 0 16px 32px rgba(15,23,42,0.08);
  --shadow-soft: 0 1px 2px rgba(15,23,42,0.04);
  --transition: 180ms cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input { font: inherit; }

/* ── Accessibility ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--accent);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 9999;
  transition: top var(--transition);
}
.skip-link:focus { top: 16px; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ── Layout ─────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Typography ─────────────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.section-label.light { color: var(--accent); }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 48px;
  letter-spacing: -0.01em;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  transition: all var(--transition);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(29,82,64,0.25);
}
.btn-ghost {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--white);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.btn-outline {
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 14px 36px;
  border-radius: 100px;
  background: var(--white);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Tags ────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}
/* Tag palette — the whole family stays inside green/gold. Legacy names kept
   so inherited tagColor values in article JSON still resolve. */
.tag--green  { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.tag--amber  { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-border); }
.tag--blue   { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.tag--purple { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.tag--red    { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-border); }

/* ── HEADER / NAV ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text-primary);
  flex-shrink: 0;
}
.logo-icon { color: var(--accent); }
.logo-text {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.2;
  font-style: normal;
  color: var(--text-primary);
}
.logo-text em {
  font-style: italic;
  color: var(--accent);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-section); }

@media (max-width: 1100px) {
  .nav-links { gap: 0; }
  .nav-link { padding: 8px 9px; font-size: 13px; }
}
.nav-cta {
  background: var(--accent);
  color: var(--white);
  border: none;
}
.nav-cta:hover { background: var(--accent-hover); color: var(--white); }

/* Mobile-menu section heading (used for "Tools" group in hamburger) */
.mobile-menu-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 16px 4px;
  pointer-events: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition);
}

.mobile-menu {
  display: none;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 24px;
}
.mobile-menu ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  display: block;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.mobile-menu a:hover { color: var(--accent); background: var(--bg-section); }
.mobile-menu.open { display: block; }

/* ── CATEGORY NAV STRIP (sub-nav under header) ─────────── */
.category-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 72px; /* under the main header */
  z-index: 90;
}
.category-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  position: relative;
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}
.category-nav-inner::-webkit-scrollbar { display: none; }
.category-nav-link {
  position: relative;
  flex-shrink: 0;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color 180ms ease;
}
.category-nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.category-nav-link:hover { color: var(--text-primary); }
.category-nav-link.active { color: var(--accent); font-weight: 600; }
.category-nav-link.active::after { transform: scaleX(1); }
.category-nav-link:not(.active):hover::after { transform: scaleX(0.4); opacity: 0.4; }

@media (max-width: 640px) {
  .category-nav-inner { padding: 0 12px; }
  .category-nav-link { padding: 11px 12px; }
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--bg-tint) 0%, var(--white) 100%);
  padding: 88px 24px 72px;
  overflow: hidden;
}
.hero-bg { display: none; }
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}
.hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent);
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 24px;
  max-width: 880px;
}
.hero-headline em {
  font-style: italic;
  color: var(--accent);
}
.hero-subhead {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: 36px;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}
.hero-trust span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-trust svg { color: var(--accent); }

/* ── TOPICS (legacy class kept for compatibility) ──────── */
.topics-section {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.topic-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.topic-pill {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--transition);
  background: var(--white);
}
.topic-pill:hover,
.topic-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* ── FEATURED ARTICLE ────────────────────────────────────── */
.featured-section {
  padding: 64px 0 32px;
  background: var(--white);
}
.featured-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-card);
}
.featured-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card-hover);
}
.featured-label {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid var(--gold-border);
  border-radius: 100px;
  padding: 4px 12px;
  z-index: 1;
}
.featured-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 340px;
}
.featured-text {
  padding: 64px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.featured-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  color: var(--text-primary);
  margin: 16px 0;
  letter-spacing: -0.01em;
}
.featured-title a { color: var(--text-primary); transition: color var(--transition); }
.featured-title a:hover { color: var(--accent); }
.featured-excerpt {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 32px;
}
.article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.author-block {
  display: flex;
  align-items: center;
  gap: 10px;
}
.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.author-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.pub-date {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.read-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: color var(--transition);
  white-space: nowrap;
}
.read-link:hover { color: var(--accent-hover); }

.featured-visual {
  background: var(--bg-tint);
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.sleep-chart svg { width: 100%; max-width: 300px; }

/* ── ARTICLE GRID ────────────────────────────────────────── */
.articles-section {
  padding: 64px 0 80px;
  background: var(--bg-section);
}
.section-header {
  margin-bottom: 40px;
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}
.article-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}
.article-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.article-card--coming-soon {
  opacity: 0.7;
  pointer-events: none;
}
.article-card--coming-soon .card-title { color: var(--text-secondary); }

/* Card Image Placeholders — soft tinted backgrounds */
.card-image {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 1;
}
/* Card image washes — one per window of the day, running from a pale gold
   sunrise through to a deep green night. Kept inside the brand family. */
.card-image--morning { background: linear-gradient(135deg, #fdf6e3, #f5e3b3); }
.card-image--morning::before { background: radial-gradient(ellipse at 30% 30%, rgba(201,162,39,0.20), transparent 60%); }
.card-image--day { background: linear-gradient(135deg, #f2f8f2, #d3e8d8); }
.card-image--day::before { background: radial-gradient(ellipse at 30% 30%, rgba(29,82,64,0.16), transparent 60%); }
.card-image--evening { background: linear-gradient(135deg, #f7f3e8, #e2dcc4); }
.card-image--evening::before { background: radial-gradient(ellipse at 30% 30%, rgba(138,106,18,0.20), transparent 60%); }
.card-image--night { background: linear-gradient(135deg, #e9f0ec, #bcd6c8); }
.card-image--night::before { background: radial-gradient(ellipse at 30% 30%, rgba(14,47,36,0.24), transparent 60%); }

/* Legacy aliases — inherited card-image names from the shared generator code.
   Mapped onto the four windows so older `cardImage` values still render. */
.card-image--science, .card-image--breath { background: linear-gradient(135deg, #e9f0ec, #bcd6c8); }
.card-image--science::before, .card-image--breath::before { background: radial-gradient(ellipse at 30% 30%, rgba(14,47,36,0.24), transparent 60%); }
.card-image--hrv, .card-image--recovery { background: linear-gradient(135deg, #f2f8f2, #d3e8d8); }
.card-image--hrv::before, .card-image--recovery::before { background: radial-gradient(ellipse at 30% 30%, rgba(29,82,64,0.16), transparent 60%); }
.card-image--sleepmaxx, .card-image--circadian { background: linear-gradient(135deg, #fdf6e3, #f5e3b3); }
.card-image--sleepmaxx::before, .card-image--circadian::before { background: radial-gradient(ellipse at 30% 30%, rgba(201,162,39,0.20), transparent 60%); }

.card-image-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  opacity: 0.7;
  color: var(--text-primary);
  transition: opacity var(--transition), transform var(--transition);
}
.article-card:hover .card-image-icon { opacity: 1; transform: scale(1.05); }
.card-image-icon svg { width: 100%; height: 100%; }
.card-image-link { display: block; }

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.read-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  letter-spacing: 0.04em;
}
.card-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 12px;
  flex: 1;
  letter-spacing: -0.005em;
}
.card-title a { color: var(--text-primary); transition: color var(--transition); }
.card-title a:hover { color: var(--accent); }
.card-excerpt {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
  margin-top: auto;
}
.card-footer .pub-date { font-size: 12px; color: var(--text-muted); }

.load-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* ── NEWSLETTER ──────────────────────────────────────────── */
.newsletter-section {
  padding: 80px 0;
  background: var(--white);
}
.newsletter-card {
  position: relative;
  background: linear-gradient(135deg, var(--bg-tint) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 64px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}
.newsletter-decoration {
  position: absolute;
  right: -100px;
  top: -100px;
  width: 360px;
  height: 360px;
  background: radial-gradient(ellipse, rgba(29,82,64,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.newsletter-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.newsletter-title em { color: var(--accent); font-style: italic; }
.newsletter-desc {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 480px;
  margin-bottom: 32px;
  line-height: 1.7;
}
.form-row {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin-bottom: 12px;
}
.email-input {
  flex: 1;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.email-input::placeholder { color: var(--text-muted); }
.email-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29,82,64,0.12);
}
.btn-subscribe { flex-shrink: 0; }
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 12px;
  cursor: pointer;
  max-width: 480px;
}
.consent-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-row span {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.consent-row a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.consent-row strong { color: var(--text-primary); }
.form-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.newsletter-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 180px;
  align-self: center;
}
.stat-item {
  padding: 20px 24px;
  text-align: center;
}
.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}
.stat-divider {
  height: 1px;
  background: var(--border);
}

/* ── ABOUT STRIP ─────────────────────────────────────────── */
.about-strip {
  padding: 72px 0;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.about-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 880px;
  margin: 0 auto;
}
.about-icon {
  color: var(--accent);
  flex-shrink: 0;
  opacity: 1;
}
.about-text { flex: 1; }
.about-heading {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.about-text p {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.7;
}
.about-btn { flex-shrink: 0; }

/* ── BLOG INDEX (/blog) — editorial design ────────────────── */
.blog-hero {
  padding: 80px 0 56px;
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border);
}
.blog-hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.blog-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 18px;
  max-width: 880px;
}
.blog-hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 680px;
}

.blog-shell { padding: 56px 0 96px; background: #ffffff; }

.blog-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 72px;
  align-items: flex-start;
}

/* ── Sidebar ── */
.blog-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
.blog-sidebar::-webkit-scrollbar { width: 6px; }
.blog-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.blog-sidebar-block { display: flex; flex-direction: column; }
.blog-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding: 0 12px;
}
.blog-sidebar-list { display: flex; flex-direction: column; gap: 1px; }
.blog-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
  line-height: 1.3;
}
.blog-sidebar-link:hover { background: var(--bg-section); color: var(--text-primary); }
.blog-sidebar-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.blog-sidebar-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}
.blog-sidebar-link.active .blog-sidebar-count { color: var(--accent); }

.blog-sidebar-note {
  padding: 18px 16px;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blog-sidebar-note .blog-sidebar-label { padding: 0; margin-bottom: 6px; }
.blog-sidebar-note p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.blog-sidebar-cta-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
  transition: color var(--transition);
}
.blog-sidebar-cta-link:hover { color: var(--accent-hover); }

/* ── Feed ── */
.blog-feed { min-width: 0; }

/* Featured (latest) article — full-bleed card */
.feed-featured {
  margin-bottom: 64px;
}
.feed-featured-inner {
  display: block;
  padding: 32px 36px 36px;
  background: linear-gradient(135deg, #f8fbff 0%, #f0f6ff 100%);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
  color: inherit;
}
.feed-featured-inner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(29,82,64,0.08), 0 24px 48px rgba(29,82,64,0.06);
}
.feed-featured-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.feed-meta-sep { color: var(--text-muted); opacity: 0.5; }
.feed-featured-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(29,82,64,0.12);
  padding: 4px 10px;
  border-radius: 100px;
}
.feed-featured-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 16px;
  max-width: 760px;
}
.feed-featured-excerpt {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 20px;
}
.feed-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: gap var(--transition);
}
.feed-featured-inner:hover .feed-featured-cta { gap: 12px; }

/* Section header */
.feed-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--text-primary);
}
.feed-section-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.feed-section-count {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

/* Editorial list */
.feed-list { display: flex; flex-direction: column; }

.feed-item {
  border-bottom: 1px solid var(--border);
  transition: transform var(--transition);
}
.feed-item:hover { transform: translateX(2px); }

.feed-item-link {
  display: block;
  padding: 28px 0 28px 20px;
  border-left: 3px solid transparent;
  transition: border-color var(--transition), padding-left var(--transition);
  color: inherit;
}
.feed-item-link:hover {
  border-left-color: var(--accent);
  padding-left: 24px;
}

.feed-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.feed-item-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin-bottom: 8px;
  transition: color var(--transition);
}
.feed-item-link:hover .feed-item-title { color: var(--accent); }
.feed-item-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 720px;
}

@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 200px 1fr; gap: 48px; }
}
@media (max-width: 880px) {
  .blog-layout { grid-template-columns: 1fr; gap: 32px; }
  .blog-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .blog-sidebar-note { display: none; }
  .blog-hero { padding: 56px 0 40px; }
  .feed-featured-inner { padding: 24px 24px 28px; }
}

/* ── INFOGRAPHICS PAGE ──────────────────────────────────── */
.infographic-block {
  margin: 48px 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.infographic-block:last-of-type { border-bottom: none; }
.infographic-block h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.infographic-block h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 24px 0 10px;
}
.infographic-block > p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.infographic-block > p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.infographic-preview {
  background: var(--bg-section);
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin: 12px 0 24px;
}
.embed-code {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.embed-code code { color: inherit; background: none; padding: 0; font-size: inherit; }

/* ── START HERE / PATH CARDS ────────────────────────────── */
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.path-grid--compact { gap: 14px; }
.path-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  color: inherit;
  text-decoration: none !important;
}
.path-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
}
.path-card-num {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.path-card h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 24px);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}
.path-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-primary);
  margin: 0;
}
.path-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}
.path-card-cta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.path-card:hover .path-card-cta { color: var(--accent-hover); }
.path-card--compact { padding: 22px 22px 20px; }
.path-card--compact h3 { font-size: 16px; }
.path-card--compact p { font-size: 13.5px; }

@media (max-width: 640px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* ── TOOLS / QUIZZES / CALCULATOR ────────────────────────── */
.tool-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  margin: 0 0 16px;
}

/* Mode toggle (segmented control) */
.tool-mode-toggle {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  margin: 0 0 28px;
  gap: 2px;
  flex-wrap: wrap;
}
.tool-mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 9px 18px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 160ms ease;
  letter-spacing: -0.005em;
}
.tool-mode-btn:hover { color: var(--text-primary); }
.tool-mode-btn.active {
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* Time / number input row */
.tool-input-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  flex-wrap: wrap;
}
.tool-input-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.tool-input-row input[type="time"],
.tool-input-row input[type="number"] {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  border: 1px solid var(--border);
  background: #fafafa;
  border-radius: 12px;
  padding: 12px 18px;
  color: var(--text-primary);
  min-width: 180px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.tool-input-row input[type="time"]:focus,
.tool-input-row input[type="number"]:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.tool-input-row .btn-primary {
  padding: 13px 22px;
  font-size: 14.5px;
}

/* Calculator results */
.tool-results { margin-top: 36px; }
.tool-results:empty { display: none; }
.tool-results-headline {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 16px;
  line-height: 1.5;
}
.tool-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.tool-result-card {
  position: relative;
  padding: 22px 18px 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.tool-result-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.18); }
.tool-result-time {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
}
.tool-result-meta {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.tool-result-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent);
}
.tool-result-card--optimal {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #a7f3d0;
}
.tool-result-card--optimal .tool-result-time { color: #065f46; }
.tool-result-card--optimal .tool-result-tag {
  background: #059669;
  color: #fff;
}
.tool-results-footer {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
}
.tool-results-footer a { color: var(--accent); font-weight: 500; }

/* Quiz card */
.quiz-card { padding: 28px 36px; }

/* Quiz questions */
.quiz-q {
  border: 0;
  padding: 24px 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.quiz-q:first-of-type { padding-top: 8px; }
.quiz-q legend {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1.4;
  width: 100%;
}
.quiz-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(37, 99, 235, 0.1);
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Quiz options */
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quiz-options--vertical { grid-template-columns: 1fr; }
.quiz-options label {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 18px 14px 46px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 160ms ease;
  user-select: none;
  line-height: 1.45;
}
.quiz-options label:hover {
  border-color: var(--accent);
  background: #f8fafc;
}
.quiz-options label::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  transition: all 160ms ease;
  box-sizing: border-box;
}
.quiz-options input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.quiz-options label:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.5);
}
.quiz-options label:has(input:checked)::before {
  border-color: #fff;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px #fff;
}
.quiz-options label span { display: block; }

/* Submit button */
.quiz-card .btn-primary {
  margin-top: 28px;
  padding: 14px 28px;
  font-size: 15px;
}

/* Quiz results container */
.quiz-results { margin-top: 0; }
.quiz-results:empty { display: none; }

/* Quiz result card */
.quiz-result {
  margin: 32px 0 0;
  padding: 32px 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid var(--border);
}
.quiz-result-score {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.1;
}
.quiz-result-headline {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.25;
}
.quiz-result-body {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
}
.quiz-result-detail {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0 0 20px;
}
.quiz-result-detail strong { color: var(--text-primary); }
.quiz-result-cta {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.quiz-result-cta .btn-primary { padding: 12px 22px; font-size: 14.5px; }

/* Mouth-breathing result variants */
.quiz-result--low {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #a7f3d0;
}
.quiz-result--low .quiz-result-score { color: #047857; }
.quiz-result--moderate {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a;
}
.quiz-result--moderate .quiz-result-score { color: #b45309; }
.quiz-result--high {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fecaca;
}
.quiz-result--high .quiz-result-score { color: #b91c1c; }

/* Chronotype result variants */
.quiz-result--strong-lark,
.quiz-result--mod-lark {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a;
}
.quiz-result--strong-lark .quiz-result-score,
.quiz-result--mod-lark .quiz-result-score { color: #b45309; }
.quiz-result--intermediate {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #bfdbfe;
}
.quiz-result--intermediate .quiz-result-score { color: #1d4ed8; }
.quiz-result--mod-owl,
.quiz-result--strong-owl {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-color: #c4b5fd;
}
.quiz-result--mod-owl .quiz-result-score,
.quiz-result--strong-owl .quiz-result-score { color: #6d28d9; }

@media (max-width: 640px) {
  .tool-card { padding: 28px 22px; }
  .quiz-card { padding: 24px 22px; }
  .tool-input-row { gap: 12px; }
  .tool-input-row input[type="time"],
  .tool-input-row input[type="number"] {
    font-size: 26px;
    min-width: 0;
    width: 100%;
  }
  .tool-input-row .btn-primary { width: 100%; }
  .tool-result-grid { grid-template-columns: 1fr 1fr; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-q legend { font-size: 16.5px; gap: 10px; }
  .quiz-result { padding: 26px 22px; }
  .quiz-result-headline { font-size: 21px; }
  .quiz-result-score { font-size: 32px; }
}

/* ── MEDIA KIT DOC (consolidated) ───────────────────────── */
.mk-cover {
  padding: 96px 0 64px;
  background: linear-gradient(135deg, #f0f6ff 0%, #ddd6fe 100%);
  border-bottom: 1px solid var(--border);
}
.mk-cover .content-title { font-size: clamp(44px, 7vw, 72px); }
.mk-cover-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.mk-cover-meta {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mk-doc .mk-section {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.mk-doc .mk-section:last-of-type { border-bottom: none; }
.mk-doc h2 { margin-top: 0 !important; }
.mk-doc h3 {
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 28px 0 14px;
}
.mk-note {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 14px;
}
.mk-save {
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
  margin-left: 6px;
  font-family: var(--font-body);
}
.mk-doc-footer {
  margin-top: 24px;
  padding-top: 32px !important;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.mk-doc-footer p { margin: 4px 0; }
.mk-doc-footer p:first-child { color: var(--text-primary); font-weight: 600; }

/* Page-break hints for PDF rendering */
@media print {
  .mk-section { break-inside: avoid; page-break-inside: avoid; }
  .mk-page-break { page-break-before: always; break-before: page; }
  .mk-cover { padding: 48px 0 32px !important; background: white !important; border-bottom: 2px solid #000 !important; }
  .mk-cover-actions { display: none !important; }
  .mk-doc { padding-top: 24px !important; padding-bottom: 0 !important; }
  .kit-table { font-size: 10pt; }
  .mk-doc h2 { font-size: 22pt; margin-bottom: 14px; }
  .mk-doc h3 { font-size: 11pt; }
  .mk-doc p, .mk-doc li { font-size: 10.5pt; line-height: 1.55; }
}

/* ── SPONSOR / MEDIA-KIT / RATE-CARD ────────────────────── */
.offering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 28px 0 32px;
}
.offering-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.offering-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.offering-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 4px;
}
.offering-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.offering-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
}
.stat-block {
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.stat-block .stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.stat-block .stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  line-height: 1;
}
.stat-block .stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.kit-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 14px;
}
.kit-table th, .kit-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.kit-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--text-primary);
  background: var(--bg-section);
}
.kit-table td:first-child { font-weight: 600; color: var(--text-primary); }
.rate-table td:last-child { font-family: var(--font-display); font-size: 16px; color: var(--accent); white-space: nowrap; }

/* Print styles for the rate card */
@media print {
  .site-header, .category-nav, .scroll-progress, .site-footer,
  .skip-link, .footer-admin-link, .nav-toggle, .mobile-menu { display: none !important; }
  body { background: white !important; font-size: 11pt; }
  .content-hero { background: white !important; border-bottom: 2px solid #000 !important; padding: 24px 0 !important; }
  .content-title { font-size: 28pt !important; }
  .content-eyebrow { color: #000 !important; }
  .kit-table { font-size: 10pt; page-break-inside: avoid; }
  h2 { page-break-after: avoid; }
  table { page-break-inside: avoid; }
  a { color: #1d5240 !important; text-decoration: none; }
  .container { max-width: 100% !important; padding: 0 !important; }
}

/* ── ARTICLE HERO BANNER (category-themed SVG visual) ───── */
.article-hero-banner {
  max-width: var(--container-max);
  margin: 32px auto 48px;
  padding: 0 32px;
  height: 220px;
}
.article-hero-banner-inner {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.article-hero-banner--science .article-hero-banner-inner {
  background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
}
.article-hero-banner--science .article-hero-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220'%3E%3Cpath d='M0 130 Q 75 60 150 130 T 300 130 T 450 130 T 600 130' stroke='rgba(29,82,64,0.4)' stroke-width='2' fill='none'/%3E%3Cpath d='M0 110 Q 75 50 150 110 T 300 110 T 450 110 T 600 110' stroke='rgba(29,82,64,0.25)' stroke-width='2' fill='none'/%3E%3Cpath d='M0 150 Q 75 90 150 150 T 300 150 T 450 150 T 600 150' stroke='rgba(29,82,64,0.25)' stroke-width='2' fill='none'/%3E%3C/svg%3E") center / cover;
  opacity: 0.7;
}
.article-hero-banner--breath .article-hero-banner-inner {
  background: linear-gradient(135deg, #cffafe 0%, #67e8f9 100%);
}
.article-hero-banner--breath .article-hero-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.5), transparent 40%),
              radial-gradient(circle at 70% 50%, rgba(255,255,255,0.4), transparent 40%);
}
.article-hero-banner--hrv .article-hero-banner-inner {
  background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
}
.article-hero-banner--hrv .article-hero-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220'%3E%3Cpath d='M0 110 L 80 110 L 100 60 L 130 170 L 160 80 L 190 130 L 230 110 L 600 110' stroke='rgba(5,150,105,0.5)' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / cover;
}
.article-hero-banner--sleepmaxx .article-hero-banner-inner {
  background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
}
.article-hero-banner--sleepmaxx .article-hero-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(255,255,255,0.6) 8%, transparent 12%),
              radial-gradient(circle at 70% 60%, rgba(255,255,255,0.4) 4%, transparent 8%),
              radial-gradient(circle at 90% 70%, rgba(255,255,255,0.4) 4%, transparent 8%);
}
.article-hero-banner--circadian .article-hero-banner-inner {
  background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 100%);
}
.article-hero-banner--circadian .article-hero-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4), transparent 30%),
              radial-gradient(circle at 80% 30%, rgba(255,255,255,0.6) 5%, transparent 10%);
}
.article-hero-banner--recovery .article-hero-banner-inner {
  background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%);
}
.article-hero-banner--recovery .article-hero-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.4), transparent 60%);
}
@media (max-width: 640px) {
  .article-hero-banner { height: 140px; padding: 0 22px; margin: 24px 22px 32px; border-radius: 14px; }
}

/* ── RELATED ARTICLES (Keep reading section) ────────────── */
.related-articles {
  max-width: var(--container-max);
  margin: 80px auto 48px;
  padding: 56px 32px 0;
  border-top: 1px solid var(--border);
}
.related-articles-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.related-articles-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 32px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
}
.related-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.related-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.related-card-title a { color: inherit; transition: color var(--transition); }
.related-card:hover .related-card-title a { color: var(--accent); }
.related-card-excerpt {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.related-card-cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
@media (max-width: 640px) {
  .related-articles { padding: 36px 22px 0; margin: 40px 0 0; }
  .related-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── STATIC CONTENT PAGES (About / Privacy / Terms / etc) ── */
.container--narrow { max-width: 760px; }

.content-hero {
  padding: 64px 0 32px;
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border);
}
.content-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.content-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.content-deck {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.content-body {
  padding: 56px 0 96px;
}
.content-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 30px);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 40px 0 14px;
}
.content-body h2:first-child { margin-top: 0; }
.content-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-primary);
  margin: 28px 0 10px;
}
.content-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.content-body ul, .content-body ol { padding-left: 22px; margin-bottom: 20px; }
.content-body ul { list-style: disc; }
.content-body ol { list-style: decimal; }
.content-body li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 8px;
}
.content-body a:not(.btn):not(.btn-primary):not(.btn-ghost) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.content-body a:not(.btn):not(.btn-primary):not(.btn-ghost):hover {
  color: var(--accent-hover);
}
/* Buttons inside .content-body keep their own colors */
.content-body .btn-primary { color: var(--white); text-decoration: none; }
.content-body .btn-primary:hover { color: var(--white); }
.content-body .btn-ghost { color: var(--text-primary); text-decoration: none; }
.content-body .btn-ghost:hover { color: var(--accent); }
.content-body strong { color: var(--text-primary); font-weight: 600; }

/* ── CONTACT FORM ─────────────────────────────────────────── */
.contact-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  margin-top: 32px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.form-field .req { color: var(--red); margin-left: 2px; }
.form-field .optional { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 11px 14px;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: var(--font-body);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}
.form-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0;
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.form-consent span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.form-status {
  margin-top: 16px;
  padding: 0;
  font-size: 14px;
  border-radius: 8px;
}
.form-status.success { background: #ecfdf5; color: #047857; padding: 14px 18px; border-left: 3px solid #047857; }
.form-status.error { background: #fef2f2; color: #b91c1c; padding: 14px 18px; border-left: 3px solid #b91c1c; }

.contact-aside {
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--bg-section);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.contact-aside h2 {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.contact-aside p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.contact-aside a { color: var(--accent); }
.contact-aside strong { color: var(--text-primary); }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 24px 22px; }
}

/* ── 404 PAGE ─────────────────────────────────────────────── */
.four04-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.four04-card {
  display: block;
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.four04-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
}
.four04-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 6px;
}
.four04-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.four04-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.four04-categories a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 14px;
  color: var(--text-primary);
  transition: all var(--transition);
}
.four04-categories a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
@media (max-width: 640px) {
  .four04-grid { grid-template-columns: 1fr; }
}

/* ── FOOTER DISCLAIMER BLOCK ─────────────────────────────── */
.footer-disclaimer-block {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin: 32px 0 24px;
}
.footer-disclaimer-block p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.footer-disclaimer-block p:last-child { margin-bottom: 0; }
.footer-disclaimer-block strong { color: var(--text-primary); font-weight: 600; }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  padding: 72px 0 40px;
}
.footer-logo { margin-bottom: 16px; }
.footer-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 240px;
  margin-bottom: 24px;
  line-height: 1.6;
}
.social-links {
  display: flex;
  gap: 10px;
}
.social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.social-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  margin-bottom: 64px;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-nav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.footer-nav ul { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color var(--transition);
}
.footer-nav a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  flex-wrap: wrap;
}
.copyright {
  font-size: 13px;
  color: var(--text-muted);
}
.footer-admin-link {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.footer-admin-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(25, 118, 210, 0.06);
}
.disclaimer-note {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.6;
  text-align: right;
}

/* ── ARTICLE PAGE (why-you-wake-up-at-3am.html) ──────────── */
.breadcrumb-nav {
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
  background: var(--white);
}
.breadcrumb-nav ol { color: var(--text-secondary) !important; }
.breadcrumb-nav a { color: var(--text-secondary) !important; }
.breadcrumb-nav a:hover { color: var(--accent) !important; }

.article-hero {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--border-soft);
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.article-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.article-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.article-title em { color: var(--accent); font-style: italic; }
.article-deck {
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.55;
  color: var(--text-secondary);
  font-weight: 400;
  margin-bottom: 36px;
}
.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.byline-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-body {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 64px;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--accent);
}
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--text-primary);
  margin: 56px 0 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-primary);
  margin: 40px 0 14px;
}
.article-body p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.article-body strong { color: var(--text-primary); font-weight: 600; }
.article-body em { color: var(--text-primary); font-style: italic; }
.article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}
.article-body a:hover { color: var(--accent-hover); }
.article-body blockquote {
  border-left: 4px solid var(--accent);
  padding: 24px 28px;
  background: var(--bg-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 40px 0;
}
.article-body blockquote p {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}
.article-body ul, .article-body ol {
  padding-left: 24px;
  margin-bottom: 28px;
  list-style: disc;
}
.article-body li {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.article-body li::marker { color: var(--accent); }
.article-callout {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin: 40px 0;
}
.article-callout p { margin: 0; font-size: 17px; color: var(--text-primary); }
.article-callout p strong { color: var(--accent); }

/* ── Product Card (Titan backlinks) ───────────────────── */
.product-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 40px 0;
  box-shadow: var(--shadow-card);
}
.product-card-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.product-card-body { flex: 1; }
.product-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.product-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.product-card-desc {
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.6s ease both; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }

/* ── Reading progress bar ─────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold-bright) 100%);
  z-index: 200;
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(29,82,64,0.35);
}

/* ── Hero animated background ─────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero-bg-animated {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-content { position: relative; z-index: 1; }

.hero-breath-orb {
  position: absolute;
  top: 50%;
  right: -120px;
  width: 640px;
  height: 640px;
  margin-top: -320px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(29,82,64,0.14) 0%,
    rgba(29,82,64,0.07) 35%,
    transparent 70%);
  animation: hero-breathe 9s ease-in-out infinite;
  filter: blur(8px);
}
@keyframes hero-breathe {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50% { transform: scale(1.05); opacity: 1; }
}

.hero-stars { position: absolute; inset: 0; }
.hero-star {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: star-drift 14s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(29,82,64,0.5);
}
.hero-star:nth-child(odd) { background: var(--gold-bright); box-shadow: 0 0 12px rgba(201,162,39,0.6); }
@keyframes star-drift {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20%  { opacity: 0.8; transform: translate(8px, -10px) scale(1); }
  50%  { opacity: 0.5; transform: translate(-6px, -22px) scale(1.1); }
  80%  { opacity: 0.8; transform: translate(12px, -34px) scale(0.9); }
  100% { opacity: 0; transform: translate(0, -48px) scale(0.6); }
}

/* ── Scroll-triggered reveal ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ── Logo hover pulse ─────────────────────────────────── */
.logo:hover .logo-icon { animation: logo-pulse 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes logo-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.18) rotate(-8deg); }
  70% { transform: scale(1.06) rotate(4deg); }
}

/* (Animated category nav underline lives in the main .category-nav block above.) */

/* ── Button shine effect ──────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255,255,255,0.25) 50%,
    transparent 75%);
  transform: translateX(-130%);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.btn-primary:hover::before { transform: translateX(130%); }

/* ── Animated sleep wave (featured card SVG) ─────────── */
.featured-visual svg path[stroke="#1976d2"] {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: draw-wave 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}
@keyframes draw-wave {
  to { stroke-dashoffset: 0; }
}
.featured-visual svg text[fill="#b58400"] {
  animation: pulse-fade 2s ease-in-out 2.8s infinite;
}
@keyframes pulse-fade {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Card hover lift (subtle 3D) ──────────────────────── */
.article-card {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s,
              border-color 0.2s;
}
.article-card:not(.article-card--coming-soon):hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 12px 28px rgba(15,23,42,0.08), 0 24px 48px rgba(15,23,42,0.06);
}

/* ── Featured card hover ──────────────────────────────── */
.featured-card { transition: box-shadow 0.32s, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.featured-card:hover { transform: translateY(-3px); }

/* ── Newsletter card subtle glow ──────────────────────── */
.newsletter-card { position: relative; overflow: hidden; }
.newsletter-card::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -20%;
  width: 70%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(29,82,64,0.12), transparent 60%);
  animation: glow-drift 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8%, 6%) scale(1.1); }
}

/* ── Tag pulse on hover ───────────────────────────────── */
.tag { transition: transform 0.2s ease, background 0.2s ease; }
.article-card:hover .tag,
.featured-card:hover .tag {
  transform: scale(1.04);
}

/* ── Reduce motion (accessibility) ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-breath-orb,
  .hero-star,
  .featured-visual svg path,
  .featured-visual svg text,
  .newsletter-card::before {
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-primary::before { display: none; }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-body { grid-template-columns: 1fr; }
  .featured-visual { display: none; }
  .newsletter-card {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px;
  }
  .newsletter-stats {
    flex-direction: row;
    min-width: unset;
  }
  .stat-divider { width: 1px; height: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  :root { --section-gap: 64px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .article-grid { grid-template-columns: 1fr; }
  .featured-text { padding: 40px 28px 28px; }
  .newsletter-card { padding: 36px 28px; }
  .form-row { flex-direction: column; }
  .btn-subscribe { width: 100%; justify-content: center; }
  .about-inner { flex-direction: column; align-items: flex-start; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-bottom { flex-direction: column; }
  .disclaimer-note { text-align: left; }
  .hero { padding: 56px 24px 56px; }
  .newsletter-stats { width: 100%; justify-content: center; }
  .product-card { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .topic-grid { gap: 8px; }
  .topic-pill { font-size: 12px; padding: 8px 14px; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .site-header, .category-nav, .newsletter-section, .site-footer { display: none; }
  body { background: white; color: black; }
}

/* ── Mobile polish ──────────────────────────────────────── */
@media (max-width: 768px) {
  .btn, .nav-link, .topic-pill, .read-link,
  .social-link, .footer-nav a, .tag, .category-nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .read-link, .tag { min-height: unset; display: inline-flex; }

  .hero { padding: 48px 24px 56px; }
  .hero-eyebrow { font-size: 11px; }
  .hero-headline { font-size: clamp(32px, 9vw, 48px); margin-bottom: 18px; }
  .hero-subhead { font-size: 16px; margin-bottom: 28px; }
  .hero-trust { gap: 16px; }
  .hero-trust span { font-size: 12px; }

  .nav-container { padding: 0 20px; height: 64px; }
  .logo-text { font-size: 14px; }

  .featured-section { padding: 40px 0 24px; }
  .featured-text { padding: 40px 24px 28px; }
  .featured-title { font-size: 24px; }
  .featured-excerpt { font-size: 15px; }
  .article-footer { flex-direction: column; align-items: flex-start; gap: 12px; }

  .articles-section { padding: 48px 0; }
  .article-grid { grid-template-columns: 1fr; gap: 16px; }
  .card-body { padding: 20px; }
  .card-title { font-size: 18px; }
  .card-excerpt { font-size: 13.5px; -webkit-line-clamp: 2; }

  .newsletter-section { padding: 56px 0; }
  .newsletter-card { padding: 36px 24px; border-radius: var(--radius-md); }
  .newsletter-title { font-size: 28px; }
  .newsletter-desc { font-size: 15px; margin-bottom: 24px; }
  .email-input { font-size: 16px; }
  .newsletter-stats { flex-direction: row; width: 100%; }
  .stat-item { padding: 16px 12px; flex: 1; }
  .stat-number { font-size: 20px; }
  .stat-divider { width: 1px; height: auto; }

  .about-strip { padding: 48px 0; }
  .about-heading { font-size: 20px; }
  .about-text p { font-size: 15px; }

  .site-footer { padding: 56px 0 32px; }
  .footer-brand { text-align: center; }
  .footer-brand .logo { justify-content: center; }
  .footer-tagline { margin: 0 auto 20px; text-align: center; }
  .social-links { justify-content: center; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .copyright, .disclaimer-note { text-align: center; }
  .disclaimer-note { font-size: 11px; }

  .article-hero { padding: 40px 0 32px; }
  .article-title { font-size: clamp(28px, 8vw, 40px); }
  .article-deck { font-size: 16px; }
  .article-body { padding: 36px 0 64px; }
  .article-body > p:first-of-type::first-letter { font-size: 48px; }
  .article-body h2 { font-size: 24px; margin: 36px 0 14px; }
  .article-body h3 { font-size: 19px; }
  .article-body p, .article-body li { font-size: 17px; }
  .article-body blockquote p { font-size: 18px; }
  .article-callout { padding: 20px; }

  .section-title { font-size: clamp(24px, 6vw, 36px); margin-bottom: 32px; }
  .btn-outline { width: 100%; justify-content: center; }

  .category-nav-link { padding: 14px 12px; font-size: 12px; }
}

@media (max-width: 375px) {
  .hero-headline { font-size: 30px; }
  .featured-title { font-size: 20px; }
  .newsletter-title { font-size: 24px; }
  .footer-nav { grid-template-columns: 1fr; }
  .stat-number { font-size: 17px; }
  .container { padding: 0 20px; }
}

@media (min-width: 600px) and (max-width: 768px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-headline { font-size: clamp(34px, 7vw, 52px); }
}

/* ── Prevent horizontal scroll ─────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── iOS safari overrides ─────────────────────────────── */
input[type="email"] {
  -webkit-appearance: none;
  border-radius: var(--radius-sm);
}

/* ── Smooth tap highlight removal ─────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ── Safe area padding for notch phones ──────────────── */
.site-header {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.site-footer {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES — comprehensive coverage of
   desktop (>1200) / laptop (1024-1200) / tablet (768-1023) /
   large mobile (481-767) / mobile (≤480) / tiny (≤360)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Global container width controls ─── */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.container--narrow { max-width: 760px; }
img, video, svg { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* ─── Fluid typography (display headings auto-scale) ─── */
.hero-headline,
.content-title { font-size: clamp(28px, 4.6vw, 52px); line-height: 1.1; }
.content-deck,
.hero-subhead { font-size: clamp(15.5px, 1.6vw, 19px); line-height: 1.55; }

/* ═══ LAPTOP / SMALL DESKTOP (≤1200px) ═══ */
@media (max-width: 1200px) {
  .container { padding: 0 32px; }
}

/* ═══ TABLET LANDSCAPE / SMALL LAPTOP (≤1024px) ═══ */
@media (max-width: 1024px) {
  .container { padding: 0 28px; }
  .featured-body { grid-template-columns: 1fr; min-height: 0; }
  .featured-text { padding: 40px 36px 36px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hero-content { padding: 0; }
  .content-hero { padding: 64px 0 40px; }
}

/* ═══ TABLET PORTRAIT (≤860px) ═══ */
@media (max-width: 860px) {
  .container { padding: 0 22px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .featured-text { padding: 32px 28px 32px; }
  .featured-text h2 { font-size: 24px; }
  .article-card-body { padding: 22px 22px 20px; }
}

/* ═══ LARGE MOBILE (≤640px) — primary mobile experience ═══ */
@media (max-width: 640px) {
  /* ─── Container: comfortable editorial gutters ─── */
  .container { padding: 0 22px; }
  main, .main-content { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

  /* ─── Header: tighter, sticky, and unmistakable touch target ─── */
  .site-header { backdrop-filter: blur(12px) saturate(140%); }
  .nav-container { height: 58px; padding: 0 22px; gap: 12px; }
  .logo { gap: 9px; }
  .logo-icon svg { width: 26px; height: 26px; }
  .logo-text { font-size: 13.5px; line-height: 1.15; }
  .logo-text br { display: none; }
  .logo-text em { margin-left: 4px; }
  .nav-toggle {
    width: 40px; height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: -4px -8px -4px 0;
    border-radius: 8px;
  }
  .nav-toggle:active { background: rgba(15,23,42,0.06); }
  .nav-toggle span { width: 20px; height: 2px; }

  /* ─── Mobile menu: animated slide-down, polished ─── */
  .mobile-menu {
    padding: 8px 16px 18px;
    box-shadow: 0 12px 24px -16px rgba(15,23,42,0.18);
  }
  .mobile-menu ul { gap: 2px; }
  .mobile-menu a {
    padding: 13px 14px;
    font-size: 15.5px;
    border-radius: 9px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .mobile-menu-section {
    padding: 14px 14px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 700;
  }

  /* ─── Hero: tighter, breathable rhythm ─── */
  .hero { padding: 36px 0 44px; }
  .hero-content { padding: 0; }
  .hero-eyebrow { font-size: 11.5px; margin-bottom: 14px; letter-spacing: 0.14em; }
  .hero-eyebrow::before { width: 18px; }
  .hero-headline { margin-bottom: 16px; letter-spacing: -0.012em; }
  .hero-subhead { margin-bottom: 28px; max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 28px; }
  .hero-actions .btn { width: 100%; text-align: center; justify-content: center; padding: 14px 20px; }
  .hero-trust {
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }

  /* ─── Featured card (homepage hero post) ─── */
  .featured-section { padding: 0; }
  .featured-card { border-radius: 14px; }
  .featured-body { gap: 0; }
  .featured-image,
  .featured-card .featured-image-col { display: none; }
  .featured-text { padding: 28px 22px 28px; }
  .featured-label { padding: 3px 10px; font-size: 11px; }
  .featured-title { font-size: 22px !important; line-height: 1.18; margin-bottom: 12px; }
  .featured-excerpt { font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
  .featured-meta { font-size: 12px; gap: 10px; }
  .featured-cta-link { font-size: 14px; }

  /* ─── Article grid cards (homepage list) ─── */
  .article-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .article-card { border-radius: 12px; }
  .card-image,
  .article-card .card-image { aspect-ratio: 16/9; height: auto; min-height: 0; }
  .article-card-body,
  .card-body { padding: 20px 20px 22px; }
  .card-tag,
  .article-card .card-tag { font-size: 10.5px; padding: 3px 9px; }
  .card-title,
  .article-card h3 { font-size: 17.5px; line-height: 1.25; margin: 10px 0 8px; }
  .card-excerpt,
  .article-card p { font-size: 14px; line-height: 1.55; }
  .card-meta { font-size: 12px; gap: 8px; margin-top: 12px; }

  /* ─── Article body (the actual reading experience) ─── */
  .content-hero { padding: 36px 0 18px; }
  .content-eyebrow { font-size: 11.5px; margin-bottom: 10px; letter-spacing: 0.14em; }
  .content-title { margin-bottom: 14px; }
  .content-deck { margin-bottom: 0; font-size: 16px; line-height: 1.55; }
  .content-meta { font-size: 12.5px; padding-top: 18px; margin-top: 22px; }

  .content-body { font-size: 16.5px; line-height: 1.7; }
  .content-body > * + * { margin-top: 1.25em; }
  .content-body p { margin: 0; }
  .content-body p + p { margin-top: 1.1em; }
  .content-body h2 {
    font-size: 22px;
    line-height: 1.22;
    margin: 1.6em 0 0.6em;
    letter-spacing: -0.01em;
  }
  .content-body h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 1.4em 0 0.4em;
  }
  .content-body ul,
  .content-body ol { padding-left: 22px; margin: 0; }
  .content-body li { font-size: 16.5px; line-height: 1.65; margin-top: 6px; }
  .content-body li > p { margin: 0; }
  .content-body blockquote {
    padding: 16px 18px;
    margin: 1.4em 0;
    font-size: 15.5px;
    line-height: 1.6;
    border-left-width: 3px;
  }
  .content-body strong { font-weight: 600; }
  .content-body a { word-break: break-word; }

  /* Inline article images: soft full-bleed that lines up with the 22px gutter */
  .content-body img,
  .content-body picture,
  .content-body figure {
    display: block;
    margin: 1.6em -22px;
    max-width: calc(100% + 44px);
    width: calc(100% + 44px);
    border-radius: 0;
  }
  .content-body figcaption { padding: 8px 22px 0; font-size: 13px; color: var(--text-muted); }

  /* Inline affiliate-disclosure callout (the yellow box inside articles) */
  .content-body p[style*="fef3c7"],
  .affiliate-callout {
    padding: 16px 18px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    border-radius: 10px !important;
    margin: 22px 0 !important;
  }

  /* Tables → horizontal scroll on mobile */
  .content-body table,
  .kit-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    margin: 1.4em 0;
  }
  .kit-table th, .kit-table td { white-space: nowrap; padding: 10px 12px; }

  /* ─── Article hero banner (SVG art on top of post pages) ─── */
  .article-hero-banner { height: 120px; margin: 18px auto 24px; border-radius: 12px; }

  /* ─── Related articles row ─── */
  .related-articles { padding: 36px 0 0; margin-top: 40px; border-top: 1px solid var(--border); }
  .related-articles h2 { font-size: 18px; margin-bottom: 16px; }
  .related-grid { gap: 14px; }

  /* ─── Blog layout sidebar collapse ─── */
  .blog-layout { gap: 24px; }
  .blog-sidebar { display: none; }

  /* ─── Forms (contact, newsletter) ─── */
  .form-row,
  .newsletter-form { flex-direction: column; gap: 10px; }
  .contact-form input,
  .contact-form textarea,
  .newsletter-form input { font-size: 16px; padding: 13px 14px; }
  .btn-subscribe { width: 100%; min-height: 48px; }

  /* ─── Footer ─── */
  .site-footer { padding: 36px 0 28px; }
  .footer-grid { gap: 28px; }
  .footer-brand { text-align: left; }
  .footer-tagline { font-size: 13.5px; line-height: 1.5; max-width: 320px; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .footer-nav-title { font-size: 11px; margin-bottom: 10px; letter-spacing: 0.1em; }
  .footer-nav ul { gap: 8px; }
  .footer-nav a { font-size: 13.5px; }
  .footer-disclaimer-block { font-size: 12.5px; line-height: 1.55; padding: 20px 0; }
  .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 16px; font-size: 12px; }

  /* ─── Touch target floor across the board ─── */
  .btn, .btn-primary, .btn-ghost,
  .nav-link,
  .footer-nav a,
  .mobile-menu a { min-height: 44px; }
  .btn, .btn-primary, .btn-ghost { padding: 12px 22px; font-size: 14.5px; }

  /* ─── Scroll progress bar slightly thicker ─── */
  .scroll-progress { height: 2px; }
}

/* ═══ SMALL MOBILE (≤480px) ═══ */
@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .nav-container { padding: 0 20px; }

  .hero { padding: 28px 0 36px; }
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-subhead { margin-bottom: 22px; }

  .content-hero { padding: 28px 0 14px; }
  .content-title { font-size: 26px !important; }
  .content-deck { font-size: 15px; }

  .content-body { font-size: 16px; }
  .content-body p,
  .content-body li { font-size: 16px; }
  .content-body h2 { font-size: 20px; }
  .content-body h3 { font-size: 17px; }
  /* Inline article images: soft full-bleed that respects the wider gutter */
  .content-body img,
  .content-body picture,
  .content-body figure { margin: 1.4em -20px; max-width: calc(100% + 40px); width: calc(100% + 40px); }

  .featured-text { padding: 26px 22px; }
  .featured-title { font-size: 20px !important; }

  .card-body,
  .article-card-body { padding: 20px 22px 22px; }
  .card-title,
  .article-card h3 { font-size: 17px; }
  .card-excerpt,
  .article-card p { font-size: 13.5px; }

  .footer-nav { grid-template-columns: 1fr; }
}

/* ═══ TINY MOBILE (≤360px) ═══ */
@media (max-width: 360px) {
  .container { padding: 0 18px; }
  .nav-container { padding: 0 18px; }
  .logo-text { font-size: 13px; }
  .hero-headline { font-size: 26px; }
  .content-title { font-size: 24px; }
  .content-body img,
  .content-body picture,
  .content-body figure { margin: 1.2em -18px; max-width: calc(100% + 36px); width: calc(100% + 36px); }
  .footer-nav-title { font-size: 12px; }
}

/* ═══ TOUCH-DEVICE TWEAKS (any screen with coarse pointer) ═══ */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover lift on cards — it sticks awkwardly on touch */
  .article-card:hover,
  .path-card:hover,
  .tool-result-card:hover { transform: none; }
  /* Larger tap targets for links inside body text */
  .content-body a { padding: 1px 0; }
}

/* ═══ HIGH-DPI / RETINA ═══ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-icon svg path,
  .logo-icon svg circle { shape-rendering: geometricPrecision; }
}

/* ═══ LANDSCAPE PHONE (short screens) ═══ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 32px 0 24px; }
  .content-hero { padding: 28px 0 16px; }
}

/* ═══ PRINT — make articles print cleanly ═══ */
@media print {
  .site-header, .site-footer, .nav-toggle, .mobile-menu, .scroll-progress,
  .hero-actions, .footer-admin-link { display: none !important; }
  body { color: #000; background: #fff; }
  .content-body a { color: #000; text-decoration: underline; }
  .content-body a::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}

/* ── ARTICLE TABLE OF CONTENTS (jump nav on long articles) ── */
.article-toc {
  background: var(--bg-section, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 36px;
}
.article-toc-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.article-toc-list {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 32px;
}
.article-toc-list li {
  counter-increment: toc;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
  break-inside: avoid;
}
.article-toc-list li::before {
  content: counter(toc) ". ";
  color: var(--accent);
  font-weight: 600;
}
.article-toc-list a {
  color: var(--text-secondary);
  text-decoration: none;
}
.article-toc-list a:hover { color: var(--accent); text-decoration: underline; }
/* Offset anchor jumps so the sticky header doesn't cover the heading */
.content-body h2[id] { scroll-margin-top: 84px; }
@media (max-width: 640px) {
  .article-toc { padding: 16px 18px; margin-bottom: 28px; }
  .article-toc-list { columns: 1; }
}

/* ── ARTICLE HERO IMAGE (unique per-article raster) ───────── */
.article-hero-img-wrap {
  max-width: 860px;
  margin: 28px auto 36px;
  padding: 0 22px;
}
.article-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 28px -12px rgba(15, 23, 42, 0.25);
}
@media (max-width: 640px) {
  .article-hero-img-wrap { margin: 18px auto 26px; padding: 0 22px; }
  .article-hero-img { border-radius: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN REFRESH — accessibility + typographic polish (2026-07-15)
   Audited against Apple HIG principles: contrast, focus visibility,
   typographic craft. Restrained by design — no layout churn.
   ═══════════════════════════════════════════════════════════════ */

/* ── Focus visibility (WCAG 2.4.7) ──────────────────────────────
   The site previously had no :focus-visible styling anywhere, and
   three rules set `outline: none` — so keyboard users navigating
   links and buttons got no visible indicator at all. This restores
   a clear ring for keyboard users without affecting mouse users. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Inputs already signal focus via border + shadow; give the ring room
   and let it replace the previously-suppressed outline. */
.email-input:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.form-field input:focus-visible,
.search-input:focus-visible,
.tool-input-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Keyboard-only: don't show the ring on mouse click. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* ── Typographic craft (progressive enhancement) ─────────────────
   `balance` stops one-word orphans on headlines; `pretty` prevents
   orphaned last lines in body copy. Both degrade silently on older
   browsers — no fallback needed. */
h1, h2, h3,
.article-title, .content-title, .hero-headline, .featured-title, .card-title,
.article-toc-label, .quiz-result-headline {
  text-wrap: balance;
}
/* Articles use .article-body; the static/tool pages use .content-body. Both. */
.article-body p, .content-body p,
.article-deck, .content-deck, .hero-subhead, .card-excerpt, .featured-excerpt {
  text-wrap: pretty;
}

/* Tabular figures so the calculator/quiz numbers don't jitter as
   they update, and stat rows align on the decimal. */
.tool-result-time,
.quiz-result-score,
.tool-input-row input[type="time"],
.tool-input-row input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   3D LAYER
   ------------------------------------------------------------
   Two techniques, deliberately separated by cost:

   1. .hero-3d — a real WebGL canvas (assets/hero3d.js), loaded
      on the homepage only, lazily, after first paint. The
      gradient beneath it is the fallback and is always painted
      first, so the hero never flashes empty and never depends
      on Three.js loading at all.

   2. .tilt — pointer-tracked CSS 3D transforms on cards. No
      WebGL, ~1KB of JS, works everywhere. This is what carries
      the "3D feel" on section content and on mobile.

   Both are disabled under prefers-reduced-motion.
   ============================================================ */

/* ── Hero layout with the dial ────────────────────────────── */
.hero--3d {
  padding-top: 72px;
  padding-bottom: 64px;
}
.hero--3d .hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.hero-copy { min-width: 0; }

.hero-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  /* Fallback, and the first thing painted: a soft aurora that
     reads as intentional on its own if WebGL never arrives. */
  background:
    radial-gradient(circle at 62% 34%, rgba(201,162,39,0.20), transparent 58%),
    radial-gradient(circle at 34% 68%, rgba(29,82,64,0.16), transparent 62%);
  transition: opacity 700ms ease;
}
.hero-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero-3d.is-ready canvas { opacity: 1; }
/* Once the canvas carries the visual, drop the placeholder wash
   so the two do not stack into mud. */
.hero-3d.is-ready { background: none; }

@media (max-width: 900px) {
  .hero--3d .hero-content {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  /* Dial first on mobile — it is the brand mark, and it earns
     the fold better than a third of a paragraph does. */
  .hero-copy { order: 2; }
  .hero-3d {
    order: 1;
    aspect-ratio: 4 / 3;
    max-height: 340px;
    margin: -8px 0 4px;
  }
}

/* ── Pointer-tracked 3D tilt ──────────────────────────────── */
.tilt-scene { perspective: 1100px; }

.tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 420ms ease;
}
.tilt.is-tilting {
  transition: transform 90ms linear,
              box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 420ms ease;
}
.tilt.is-tilting,
.tilt:hover {
  box-shadow: 0 18px 40px -22px rgba(14, 47, 36, 0.42),
              0 2px 8px -4px rgba(14, 47, 36, 0.12);
  border-color: var(--accent-border);
}
/* Children lift out of the card plane, which is what sells the
   depth — a flat rotated rectangle just looks skewed. */
.tilt > * { transform: translateZ(22px); }
.tilt .path-card-num { transform: translateZ(46px); }

/* A specular sheen that tracks the pointer. --mx/--my are set
   in JS as percentages. */
.tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms ease;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(201, 162, 39, 0.13),
    transparent 62%
  );
}
.tilt.is-tilting::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tilt,
  .tilt.is-tilting {
    transform: none !important;
    transition: none;
  }
  .tilt::after { display: none; }
  .hero-3d canvas { transition: none; }
}

/* Coarse pointers get the shadow but not the tilt — a finger
   sitting on the card cannot see under its own contact point. */
@media (hover: none) {
  .tilt { transform: none !important; }
  .tilt::after { display: none; }
}

/* ── The four-window grid ─────────────────────────────────────
   Four cards, one per window of the day, so they want four
   columns — the inherited three-column rule wrapped them 3+1 and
   left an orphan. Two-up in the middle range keeps the pairs
   reading as morning/day and evening/night.

   The inherited .card-excerpt also clamps to 3 lines via
   -webkit-line-clamp, but its computed display is flow-root
   rather than -webkit-box, so the clamp never engages and
   overflow:hidden just guillotines the copy mid-sentence with no
   ellipsis. These blurbs are hand-written and short — show them.
   ------------------------------------------------------------ */
@media (min-width: 1080px) {
  .path-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1079px) {
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.path-card .card-excerpt {
  display: block;
  overflow: visible;
  max-height: none;
  -webkit-line-clamp: none;
}

/* ============================================================
   POLISH LAYER — homepage sections
   Overrides of inherited NSL blocks, kept together so the diff
   against the upstream stylesheet stays legible.
   ============================================================ */

/* ── Hero band ────────────────────────────────────────────── */
.hero--3d {
  background:
    radial-gradient(1100px 520px at 78% 8%, rgba(201,162,39,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-tint) 0%, var(--white) 86%);
}
.hero-eyebrow::before { background: var(--gold-bright); }
.hero-trust {
  font-size: 13.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
  padding-top: 20px;
  max-width: 560px;
}

/* ── Window cards ─────────────────────────────────────────── */
.window-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--border);
  cursor: pointer;
}
/* Colour identity per window: a wash that deepens across the day,
   morning gold → night green — same ramp as the card-image washes. */
.window-card--morning { background: linear-gradient(168deg, #fdf6e3 0%, #fff 55%); }
.window-card--day     { background: linear-gradient(168deg, #f2f8f2 0%, #fff 55%); }
.window-card--evening { background: linear-gradient(168deg, #f7f3e8 0%, #fff 55%); }
.window-card--night   { background: linear-gradient(168deg, #e9f0ec 0%, #fff 55%); }

.window-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.window-card .path-card-num {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
  margin: 0;
  opacity: 0.85;
}
.window-card--day .path-card-num,
.window-card--night .path-card-num { color: var(--accent); }
.window-card-hours {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.window-card .card-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.window-card .card-title em {
  display: block;
  font-size: 15px;
  font-style: italic;
  color: var(--accent);
  margin-top: 6px;
}
.window-card--morning .card-title em,
.window-card--evening .card-title em { color: var(--gold); }
.window-card .card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 20px;
  flex-grow: 1;
}
.window-card .path-card-cta { margin-top: auto; }
.window-card .path-card-cta::after {
  content: ' →';
  transition: transform var(--transition);
  display: inline-block;
}
.window-card:hover .path-card-cta::after { transform: translateX(3px); }

/* ── About strip: centered statement ──────────────────────── */
.about-strip {
  padding: 96px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-section);
}
.about-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
}
.about-star { color: var(--gold-bright); margin-bottom: 24px; }
.about-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 20px;
}
.about-text,
.about-inner .about-text {
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 680px;
  margin-bottom: 32px;
  flex: none;
}
.about-btn {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: all var(--transition);
}
.about-btn:hover { background: var(--accent); color: #fff; }

/* ── Newsletter: dark statement card ──────────────────────── */
.newsletter-section { padding: 0 24px 104px; background: var(--bg-section); }
.newsletter-card {
  position: relative;
  display: block;
  background:
    radial-gradient(700px 340px at 85% -10%, rgba(224,193,104,0.22), transparent 60%),
    linear-gradient(140deg, #0e2f24 0%, #1d5240 100%);
  border: 1px solid rgba(224,193,104,0.25);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.newsletter-decoration {
  position: absolute;
  right: 48px;
  top: 44px;
  width: 54px;
  height: 54px;
  background: none;
  border-radius: 0;
  pointer-events: none;
}
/* The north star, in the card's corner. */
.newsletter-decoration::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #e0c168;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 14px rgba(224,193,104,0.55));
}
.newsletter-body { max-width: 560px; }
.newsletter-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e0c168;
  margin-bottom: 16px;
}
.newsletter-card .newsletter-title { color: #fff; margin-bottom: 16px; }
.newsletter-card .newsletter-desc {
  color: rgba(255,255,255,0.78);
  font-size: 16.5px;
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 480px;
}
.newsletter-card .form-row {
  display: flex;
  gap: 12px;
  max-width: 460px;
  flex-wrap: wrap;
}
.newsletter-card .email-input {
  flex: 1 1 240px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 15px;
  transition: border-color var(--transition), background var(--transition);
}
.newsletter-card .email-input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter-card .email-input:focus {
  outline: none;
  border-color: #e0c168;
  background: rgba(255,255,255,0.12);
}
.newsletter-card .btn-subscribe {
  background: #e0c168;
  color: #0e2f24;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.newsletter-card .btn-subscribe:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(224,193,104,0.6);
}
.newsletter-card .form-note {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.newsletter-card .form-note a {
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.newsletter-card .form-note a:hover { color: #e0c168; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { background: var(--white); }
.footer-rss {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-rss:hover { color: var(--accent); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .newsletter-decoration { display: none; }
}

/* Per-article generated art fills the card image slot; the tinted wash
   underneath remains the loading / coming-soon state. */
.card-image { position: relative; }
.card-image-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   POLISH LAYER — article body extras
   ============================================================ */

/* Markdown tables. The publisher emits bare <table> — style the tag
   directly so every article table is dressed without pipeline changes. */
.article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 32px 0;
  font-size: 15.5px;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.article-body thead th {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 12px 18px;
  font-size: 13.5px;
  letter-spacing: 0.03em;
}
.article-body tbody td {
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.article-body tbody tr:nth-child(even) { background: var(--bg-section); }
.article-body tbody td:first-child { font-weight: 600; color: var(--text-primary); }

/* Wide tables scroll inside their own box instead of breaking the column. */
.article-body .table-scroll { overflow-x: auto; margin: 32px 0; }
.article-body .table-scroll table { margin: 0; }

/* Numbered protocol lists get breathing room. */
.article-body ol li,
.article-body ul li { margin-bottom: 10px; line-height: 1.7; }
.article-body ol li::marker { color: var(--accent); font-weight: 600; }
.article-body ul li::marker { color: var(--gold-bright); }

/* ============================================================
   POLISH LAYER — accessibility + performance
   ============================================================ */

/* A single, obvious focus ring everywhere. Inherited styles had
   several competing treatments and some elements had none. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.newsletter-card :where(a, input, button):focus-visible {
  outline-color: var(--gold-bright);
}

/* Reserve layout space for article art so cards do not reflow as
   images decode — this is most of the CLS budget on list pages. */
.card-image { aspect-ratio: 16 / 9; }

/* Respect reduced motion globally, not just for the 3D layer. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   POLISH LAYER — article FAQ block
   Question-shaped headings matched to People Also Ask queries,
   backed by FAQPage schema. Kept visually quieter than the
   related-articles block so it reads as reference, not a CTA.
   ============================================================ */
.article-faq {
  max-width: var(--container-narrow);
  margin: 64px auto 0;
  padding: 0 24px;
}
.faq-list {
  border-top: 1px solid var(--border);
  margin-top: 24px;
}
.faq-item {
  border-bottom: 1px solid var(--border-soft);
  padding: 24px 0;
}
.faq-q {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.faq-a p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}
.faq-a a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .article-faq { margin-top: 48px; }
  .faq-q { font-size: 17.5px; }
  .faq-a p { font-size: 16px; }
}