/* ============================================================
   homeoslab.com — Ghost theme
   Design language: Grupo Bennu Design System (Claude Design)
   Foundation: Untitled UI — cool gray neutral, corporate blue
   (#1570EF) brand, navy (#1a2744) dark sections, Inter + Roboto
   Mono, strict 4px grid, soft low-opacity elevation.
   Tokens below are transcribed verbatim from the Grupo Bennu
   token files (tokens/colors.css, typography.css, spacing.css,
   shadows.css). Do NOT invent values — extend from these.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — Color
   ------------------------------------------------------------ */
:root {
  --color-white: #ffffff;
  --color-black: #000000;

  /* Gray (neutral, slightly cool) */
  --gray-25:  #fcfcfd;
  --gray-50:  #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #101828;
  --gray-950: #0c111d;

  /* Brand (Corporate Blue / primary) */
  --brand-25:  #f5faff;
  --brand-50:  #eff8ff;
  --brand-100: #d1e9ff;
  --brand-200: #b2ddff;
  --brand-300: #84caff;
  --brand-400: #53b1fd;
  --brand-500: #2e90fa;
  --brand-600: #1570ef;
  --brand-700: #175cd3;
  --brand-800: #1849a9;
  --brand-900: #194185;
  --brand-950: #102a56;

  /* Error (Red) */
  --error-50:  #fef3f2;
  --error-200: #fecdca;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;

  /* Warning (Orange) */
  --warning-50:  #fffaeb;
  --warning-200: #fedf89;
  --warning-400: #fdb022;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;

  /* Success (Green) */
  --success-50:  #ecfdf3;
  --success-200: #a6f4c5;
  --success-500: #12b76a;
  --success-600: #039855;
  --success-700: #027a48;

  /* Navy (corporate dark — Grupo Bennu theme) */
  --navy-600: #243556;
  --navy-700: #1a2744;
  --navy-800: #141d34;
  --navy-900: #0e1525;

  /* ---- Semantic aliases ---- */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-600);
  --text-quaternary: var(--gray-500);
  --text-white: var(--color-white);
  --text-brand-secondary: var(--brand-700);
  --text-brand-tertiary: var(--brand-600);
  --text-error-primary: var(--error-600);
  --text-success-primary: var(--success-600);
  --text-warning-primary: var(--warning-700);

  --fg-brand-primary: var(--brand-600);

  --bg-primary: var(--color-white);
  --bg-secondary: var(--gray-50);
  --bg-tertiary: var(--gray-100);
  --bg-brand-secondary: var(--brand-50);
  --bg-brand-solid: var(--brand-600);
  --bg-brand-solid-hover: var(--brand-700);
  --bg-brand-dark: var(--navy-700);
  --bg-brand-darker: var(--navy-900);

  --border-primary: var(--gray-300);
  --border-secondary: var(--gray-200);
  --border-tertiary: var(--gray-100);
  --border-brand: var(--brand-600);

  --button-primary-bg: var(--brand-600);
  --button-primary-bg-hover: var(--brand-700);
  --button-primary-fg: var(--color-white);
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: var(--gray-50);
  --button-secondary-fg: var(--gray-700);
  --button-secondary-border: var(--gray-300);

  /* ------------------------------------------------------------
     2. TOKENS — Typography
     ------------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --display-2xl-size: 72px;  --display-2xl-line: 90px;  --display-2xl-tracking: -0.02em;
  --display-xl-size: 60px;   --display-xl-line: 72px;   --display-xl-tracking: -0.02em;
  --display-lg-size: 48px;   --display-lg-line: 60px;   --display-lg-tracking: -0.02em;
  --display-md-size: 36px;   --display-md-line: 44px;   --display-md-tracking: -0.02em;
  --display-sm-size: 30px;   --display-sm-line: 38px;   --display-sm-tracking: 0em;
  --display-xs-size: 24px;   --display-xs-line: 32px;   --display-xs-tracking: 0em;

  --text-xl-size: 20px;  --text-xl-line: 30px;
  --text-lg-size: 18px;  --text-lg-line: 28px;
  --text-md-size: 16px;  --text-md-line: 24px;
  --text-sm-size: 14px;  --text-sm-line: 20px;
  --text-xs-size: 12px;  --text-xs-line: 18px;

  /* ------------------------------------------------------------
     3. TOKENS — Spacing / radius / layout
     ------------------------------------------------------------ */
  --spacing-xxs: 2px;  --spacing-xs: 4px;   --spacing-sm: 6px;   --spacing-md: 8px;
  --spacing-lg: 12px;  --spacing-xl: 16px;  --spacing-2xl: 20px; --spacing-3xl: 24px;
  --spacing-4xl: 32px; --spacing-5xl: 40px; --spacing-6xl: 48px; --spacing-7xl: 64px;
  --spacing-8xl: 80px; --spacing-9xl: 96px; --spacing-10xl: 128px;

  --container-max-width: 1216px;
  --container-pad-mobile: 16px;
  --container-pad-desktop: 32px;
  --measure: 720px; /* article reading width */

  --radius-xs: 4px;  --radius-sm: 6px;   --radius-md: 8px;   --radius-lg: 10px;
  --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-full: 9999px;

  /* ------------------------------------------------------------
     4. TOKENS — Elevation
     ------------------------------------------------------------ */
  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-focus-brand: 0px 0px 0px 4px rgba(46, 144, 250, 0.24);
}

/* ------------------------------------------------------------
   5. RESET / BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--gh-font-body, var(--font-sans));
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
img, picture, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--text-brand-secondary); text-decoration: none; }
a:hover { color: var(--brand-800); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--gh-font-heading, var(--font-display)); font-weight: var(--weight-semibold); color: var(--text-primary); }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--border-secondary); margin: var(--spacing-6xl) 0; }
code, pre, kbd { font-family: var(--font-mono); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus-brand); border-radius: var(--radius-xs); }
::selection { background: var(--brand-100); color: var(--brand-950); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-600); color: #fff; padding: 12px 20px;
  border-radius: var(--radius-md); font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; color: #fff; }

/* Signature 4px brand bar at the very top of the page */
.brand-bar { height: 4px; background: var(--brand-600); }

/* ------------------------------------------------------------
   6. LAYOUT PRIMITIVES
   ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--container-pad-desktop);
  padding-right: var(--container-pad-desktop);
}
.section { padding-top: var(--spacing-9xl); padding-bottom: var(--spacing-9xl); }
.section--tight { padding-top: var(--spacing-7xl); padding-bottom: var(--spacing-7xl); }
.section--gray { background: var(--bg-secondary); border-top: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); }
.section--navy { background: var(--navy-700); color: #fff; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: var(--text-sm-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-brand-tertiary);
}
.eyebrow--light { color: var(--brand-300); }

.site-main { min-height: 60vh; }

/* Type helpers mirroring the design system's display scale */
.display-2xl { font-size: var(--display-2xl-size); line-height: var(--display-2xl-line); letter-spacing: var(--display-2xl-tracking); font-weight: var(--weight-semibold); }
.display-xl  { font-size: var(--display-xl-size);  line-height: var(--display-xl-line);  letter-spacing: var(--display-xl-tracking); font-weight: var(--weight-semibold); }
.display-lg  { font-size: var(--display-lg-size);  line-height: var(--display-lg-line);  letter-spacing: var(--display-lg-tracking); font-weight: var(--weight-semibold); }
.display-md  { font-size: var(--display-md-size);  line-height: var(--display-md-line);  letter-spacing: var(--display-md-tracking); font-weight: var(--weight-semibold); }
.display-sm  { font-size: var(--display-sm-size);  line-height: var(--display-sm-line);  font-weight: var(--weight-semibold); }
.display-xs  { font-size: var(--display-xs-size);  line-height: var(--display-xs-line);  font-weight: var(--weight-semibold); }

/* ------------------------------------------------------------
   7. BUTTONS  (Untitled UI hierarchy)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: var(--text-md-size); font-weight: var(--weight-semibold);
  line-height: 1; padding: 12px 18px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .14s ease, box-shadow .14s ease, color .14s ease, border-color .14s ease;
  box-shadow: var(--shadow-xs);
}
.btn:hover { color: inherit; }
.btn .icon { width: 20px; height: 20px; }
.btn--sm { padding: 8px 14px; font-size: var(--text-sm-size); }
.btn--lg { padding: 14px 22px; font-size: var(--text-lg-size); }
.btn--xl { padding: 16px 26px; font-size: var(--text-lg-size); }

.btn--primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.btn--primary:hover { background: var(--button-primary-bg-hover); color: #fff; }

.btn--secondary {
  background: var(--button-secondary-bg); color: var(--button-secondary-fg);
  border-color: var(--button-secondary-border);
}
.btn--secondary:hover { background: var(--button-secondary-bg-hover); color: var(--gray-800); }

.btn--on-navy {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.25); box-shadow: none;
}
.btn--on-navy:hover { background: rgba(255,255,255,0.08); color: #fff; }

.btn--link {
  background: none; border: none; box-shadow: none; padding: 0;
  color: var(--text-brand-tertiary); font-weight: var(--weight-semibold);
}
.btn--link:hover { color: var(--brand-800); }

/* ------------------------------------------------------------
   8. BADGES  (pill, fully rounded)
   ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs-size); line-height: 1; font-weight: var(--weight-medium);
  padding: 4px 10px; border-radius: var(--radius-full);
  border: 1px solid transparent; white-space: nowrap;
}
.badge--gray   { background: var(--gray-50);    color: var(--gray-700);    border-color: var(--gray-200); }
.badge--brand  { background: var(--brand-50);   color: var(--brand-700);   border-color: var(--brand-200); }
.badge--success{ background: var(--success-50); color: var(--success-700); border-color: var(--success-200); }
.badge--warning{ background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-200); }
.badge--error  { background: var(--error-50);   color: var(--error-700);   border-color: var(--error-200); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Section-color coded badges (subtle differentiation per IA section) */
.badge--news    { background: var(--brand-50);   color: var(--brand-700);   border-color: var(--brand-200); }
.badge--reviews { background: var(--warning-50);  color: var(--warning-700); border-color: var(--warning-200); }
.badge--guides  { background: var(--success-50);  color: var(--success-700); border-color: var(--success-200); }
.badge--deals   { background: var(--error-50);    color: var(--error-700);   border-color: var(--error-200); }
.badge--best-of { background: var(--navy-700);    color: #fff;               border-color: var(--navy-700); }

/* ------------------------------------------------------------
   9. SITE HEADER / NAV
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border-secondary);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.site-header__left { display: flex; align-items: center; gap: 40px; min-width: 0; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; }
.site-brand__logo { height: 30px; width: auto; }
.site-brand__wordmark { font-size: var(--text-xl-size); font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--text-primary); }
.site-brand__wordmark b { color: var(--brand-600); }

.primary-nav { display: flex; gap: 2px; }
.primary-nav a {
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text-tertiary); font-size: var(--text-md-size); font-weight: var(--weight-semibold);
  transition: background-color .14s ease, color .14s ease;
}
.primary-nav a:hover { color: var(--text-primary); background: var(--gray-50); }
.primary-nav a.is-active { color: var(--brand-700); background: var(--brand-50); }

.site-header__right { display: flex; align-items: center; gap: 12px; }
.header-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  color: var(--text-tertiary); border: 1px solid var(--border-secondary); background: #fff;
}
.header-search:hover { color: var(--text-primary); background: var(--gray-50); }

.nav-toggle { display: none; }

/* Mobile nav */
@media (max-width: 900px) {
  .primary-nav, .site-header__right .btn { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: #fff; border: 1px solid var(--border-secondary); color: var(--text-secondary); cursor: pointer;
  }
  .mobile-nav {
    display: none; border-bottom: 1px solid var(--border-secondary); background: #fff;
  }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a {
    display: block; padding: 14px var(--container-pad-mobile);
    color: var(--text-secondary); font-weight: var(--weight-semibold);
    border-top: 1px solid var(--border-tertiary);
  }
  .mobile-nav a:first-child { border-top: none; }
}

/* ------------------------------------------------------------
   10. HERO (homepage curated feed)
   ------------------------------------------------------------ */
.home-hero { background: var(--navy-700); color: #fff; overflow: hidden; }
.home-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 80px 0; }
.home-hero__title { margin: 16px 0 0; font-size: var(--display-xl-size); line-height: var(--display-xl-line); letter-spacing: var(--display-xl-tracking); font-weight: var(--weight-semibold); }
.home-hero__title .accent { color: var(--brand-400); }
.home-hero__lede { margin: 24px 0 0; max-width: 540px; font-size: var(--text-xl-size); line-height: var(--text-xl-line); color: rgba(255,255,255,0.72); }
.home-hero__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

.home-hero__feature {
  position: relative; display: block; border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-2xl); background: var(--navy-800);
}
.home-hero__feature img { width: 100%; height: 420px; object-fit: cover; }
.home-hero__feature-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; background: linear-gradient(to top, rgba(14,21,37,0.92), rgba(14,21,37,0)); }
.home-hero__feature-title { color: #fff; font-size: var(--display-xs-size); line-height: var(--display-xs-line); font-weight: var(--weight-semibold); }
.home-hero__feature:hover .home-hero__feature-title { color: var(--brand-200); }

/* ------------------------------------------------------------
   11. STAT / TRUST BAND
   ------------------------------------------------------------ */
.trust-band { background: var(--navy-800); }
.trust-band__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 36px 0; }
.trust-item { display: flex; align-items: center; gap: 14px; color: #fff; padding-left: 32px; border-left: 1px solid rgba(255,255,255,0.12); }
.trust-item:first-child { padding-left: 0; border-left: none; }
.trust-item__icon { color: var(--brand-400); flex: none; }
.trust-item__value { font-size: var(--display-xs-size); font-weight: var(--weight-bold); line-height: 1.1; }
.trust-item__label { font-size: var(--text-sm-size); color: rgba(255,255,255,0.6); }

/* ------------------------------------------------------------
   12. CARDS  (post cards — radius-2xl, hairline border, xs shadow)
   ------------------------------------------------------------ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.post-card {
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.post-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-primary); transform: translateY(-2px); }
.post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--gray-100); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-card__title { font-size: var(--text-lg-size); line-height: var(--text-lg-line); font-weight: var(--weight-semibold); }
.post-card__title a { color: var(--text-primary); }
.post-card__title a:hover { color: var(--brand-700); }
.post-card__excerpt { font-size: var(--text-sm-size); line-height: var(--text-sm-line); color: var(--text-tertiary); margin: 0; }
.post-card__footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: var(--text-sm-size); color: var(--text-quaternary); }
.post-card__footer .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-400); }
.post-card.is-expired { opacity: 0.62; }
.post-card.is-expired .post-card__media img { filter: grayscale(0.6); }

/* Featured / wide card variant */
.post-card--wide { grid-column: span 2; flex-direction: row; }
.post-card--wide .post-card__media { aspect-ratio: auto; width: 46%; }
.post-card--wide .post-card__body { padding: 28px; gap: 12px; }
.post-card--wide .post-card__title { font-size: var(--display-xs-size); line-height: var(--display-xs-line); }
@media (max-width: 900px) { .post-card--wide { grid-column: auto; flex-direction: column; } .post-card--wide .post-card__media { width: 100%; aspect-ratio: 16/9; } }

/* ------------------------------------------------------------
   13. SECTION RAILS ("latest in…")
   ------------------------------------------------------------ */
.rail { margin-top: var(--spacing-7xl); }
.rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: var(--spacing-3xl); }
.rail__title { font-size: var(--display-xs-size); font-weight: var(--weight-semibold); }
.rail__title a { color: inherit; }

/* Archive / listing header */
.page-head { padding: var(--spacing-8xl) 0 var(--spacing-6xl); }
.page-head__title { margin: 12px 0 0; font-size: var(--display-lg-size); line-height: var(--display-lg-line); letter-spacing: var(--display-lg-tracking); font-weight: var(--weight-semibold); }
.page-head__desc { margin: 16px 0 0; max-width: var(--measure); font-size: var(--text-xl-size); line-height: var(--text-xl-line); color: var(--text-tertiary); }

/* ------------------------------------------------------------
   14. PAGINATION
   ------------------------------------------------------------ */
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: var(--spacing-8xl) 0 0; }
.pagination a, .pagination .page-number {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--radius-md);
  font-size: var(--text-sm-size); font-weight: var(--weight-semibold);
}
.pagination a { color: var(--text-secondary); border: 1px solid var(--border-primary); background: #fff; box-shadow: var(--shadow-xs); }
.pagination a:hover { background: var(--gray-50); color: var(--text-primary); }
.pagination .page-number { color: var(--text-quaternary); }

/* ------------------------------------------------------------
   15. ARTICLE / POST
   ------------------------------------------------------------ */
.article { padding-bottom: var(--spacing-9xl); }
.article__header { padding: var(--spacing-8xl) 0 var(--spacing-5xl); }
.article__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; font-size: var(--text-sm-size); color: var(--text-quaternary); }
.article__title { font-size: var(--display-lg-size); line-height: var(--display-lg-line); letter-spacing: var(--display-lg-tracking); font-weight: var(--weight-semibold); max-width: 15ch; }
.article__excerpt { margin: 20px 0 0; max-width: var(--measure); font-size: var(--text-xl-size); line-height: var(--text-xl-line); color: var(--text-tertiary); }
.article__byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.article__byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(16,24,40,0.08); }
.article__byline .name { font-weight: var(--weight-semibold); color: var(--text-secondary); font-size: var(--text-sm-size); }
.article__byline .sub { font-size: var(--text-sm-size); color: var(--text-quaternary); }

.article__hero { margin: 0 0 var(--spacing-6xl); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.article__hero img { width: 100%; max-height: 560px; object-fit: cover; }

/* Reading column */
.prose { max-width: var(--measure); margin: 0 auto; font-size: var(--text-lg-size); line-height: 1.75; color: var(--gray-800); }
.prose > * { margin-left: auto; margin-right: auto; }
.prose h2 { margin: 1.6em 0 0.5em; font-size: var(--display-sm-size); line-height: var(--display-sm-line); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.prose h3 { margin: 1.4em 0 0.4em; font-size: var(--display-xs-size); line-height: var(--display-xs-line); font-weight: var(--weight-semibold); }
.prose h4 { margin: 1.3em 0 0.4em; font-size: var(--text-xl-size); font-weight: var(--weight-semibold); }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--brand-200); }
.prose a:hover { text-decoration-color: var(--brand-700); }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.prose li { margin: 0.35em 0; }
.prose img, .prose iframe, .prose video { border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.prose figure { margin: var(--spacing-6xl) auto; }
.prose figcaption { margin-top: 10px; text-align: center; font-size: var(--text-sm-size); color: var(--text-quaternary); }
.prose blockquote {
  margin: var(--spacing-5xl) 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--brand-600);
  font-size: var(--text-xl-size); line-height: var(--text-xl-line); color: var(--text-secondary); font-style: normal;
}
.prose pre { background: var(--gray-900); color: var(--gray-50); padding: 20px 22px; border-radius: var(--radius-xl); overflow-x: auto; font-size: var(--text-sm-size); line-height: 1.6; box-shadow: none; }
.prose :not(pre) > code { background: var(--gray-100); color: var(--gray-800); padding: 2px 6px; border-radius: var(--radius-xs); font-size: 0.9em; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--spacing-5xl) auto; font-size: var(--text-md-size); }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-secondary); }
.prose th { font-weight: var(--weight-semibold); color: var(--text-secondary); background: var(--gray-50); }

/* Ghost Koenig full/wide-width cards inside the reading column */
.prose .kg-width-wide { max-width: 1000px; }
.prose .kg-width-full { max-width: 100%; }

.article__footer { max-width: var(--measure); margin: var(--spacing-7xl) auto 0; }
.article__tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------
   16. AFFILIATE DISCLOSURE  (distinct bordered/tinted callout)
   ------------------------------------------------------------ */
.affiliate-disclosure {
  max-width: var(--measure); margin: 0 auto var(--spacing-6xl);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 4px solid var(--brand-600);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  font-size: var(--text-sm-size); line-height: var(--text-sm-line); color: var(--brand-950);
}
.affiliate-disclosure--prominent { background: var(--warning-50); border-color: var(--warning-200); border-left-color: var(--warning-600); color: var(--warning-700); }
.affiliate-disclosure__label { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-bold); text-transform: none; }
.affiliate-disclosure p { margin: 6px 0 0; }
.affiliate-disclosure a { color: var(--brand-700); font-weight: var(--weight-semibold); text-decoration: underline; }
.affiliate-disclosure--prominent a { color: var(--warning-700); }

/* Near-link micro disclosure */
.affiliate-micro { display: block; margin-top: 8px; font-size: var(--text-xs-size); color: var(--text-quaternary); }

/* ------------------------------------------------------------
   17. RELATED (Review ⇄ Best-Of ⇄ Guide triangle)
   ------------------------------------------------------------ */
.related { background: var(--bg-secondary); border-top: 1px solid var(--border-secondary); padding: var(--spacing-8xl) 0; margin-top: var(--spacing-9xl); }
.related__title { font-size: var(--display-xs-size); font-weight: var(--weight-semibold); margin-bottom: var(--spacing-3xl); }

/* ------------------------------------------------------------
   18. CUSTOM SECTION MODULES
   ------------------------------------------------------------ */
/* Shared module frame */
.module {
  max-width: var(--measure); margin: 0 auto var(--spacing-6xl);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-2xl);
  background: var(--bg-primary); box-shadow: var(--shadow-xs); overflow: hidden;
}
.module__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--border-secondary); background: var(--gray-50); }
.module__title { font-size: var(--text-lg-size); font-weight: var(--weight-semibold); }
.module__body { padding: 22px; }

/* Review — verdict box + rating */
.verdict { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.verdict__score { text-align: center; padding: 16px 22px; background: var(--brand-600); color: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.verdict__score .num { font-size: var(--display-md-size); line-height: 1; font-weight: var(--weight-bold); }
.verdict__score .of { font-size: var(--text-sm-size); opacity: 0.8; }
.rating-stars { display: inline-flex; gap: 2px; color: var(--warning-400); }
.rating-stars .star-off { color: var(--gray-300); }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.proscons > div { padding: 22px; }
.proscons > div + div { border-left: 1px solid var(--border-secondary); }
.proscons h4 { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm-size); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.proscons--pros h4 { color: var(--success-700); }
.proscons--cons h4 { color: var(--error-700); }
.proscons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--text-md-size); color: var(--text-secondary); }
.proscons li { display: flex; gap: 10px; align-items: flex-start; }
.who-for { background: var(--gray-50); border-radius: var(--radius-xl); padding: 18px 20px; margin-top: 0; }

/* Where to buy */
.where-to-buy { border: 1px dashed var(--border-primary); border-radius: var(--radius-xl); padding: 22px; text-align: center; background: var(--gray-25); }
.where-to-buy__note { font-size: var(--text-sm-size); color: var(--text-quaternary); margin-top: 8px; }

/* Guide — meta bar + steps */
.guide-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-secondary); border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border-secondary); }
.guide-meta__item { background: var(--bg-primary); padding: 18px 20px; }
.guide-meta__label { font-size: var(--text-xs-size); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-quaternary); font-weight: var(--weight-semibold); }
.guide-meta__value { margin-top: 6px; font-size: var(--text-lg-size); font-weight: var(--weight-semibold); color: var(--text-primary); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-md-size); color: var(--text-secondary); }
.checklist .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Deal — validity + expiry */
.deal-banner { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius-xl); background: var(--success-50); border: 1px solid var(--success-200); color: var(--success-700); font-weight: var(--weight-semibold); }
.deal-banner .icon { flex: none; }
.deal-banner--expired { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-600); }
.deal-caveat { font-size: var(--text-sm-size); color: var(--text-quaternary); margin-top: 12px; }
.expired-flag { display: inline-flex; align-items: center; gap: 6px; }

/* Best-Of — comparison table + winners */
.winners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.winner-card { border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); padding: 20px; background: var(--bg-primary); box-shadow: var(--shadow-xs); }
.winner-card__label { font-size: var(--text-xs-size); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--weight-bold); color: var(--brand-600); }
.winner-card--top { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm-size); }
.compare-table th, .compare-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-secondary); text-align: left; }
.compare-table thead th { background: var(--gray-50); font-weight: var(--weight-semibold); color: var(--text-secondary); position: sticky; top: 76px; }
.compare-table tbody tr:hover { background: var(--gray-25); }

/* ------------------------------------------------------------
   19. AUTHOR / TAG headers
   ------------------------------------------------------------ */
.profile { display: flex; align-items: center; gap: 20px; }
.profile__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(16,24,40,0.08); }

/* ------------------------------------------------------------
   20. CTA / NEWSLETTER band
   ------------------------------------------------------------ */
.cta-band { background: var(--navy-700); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 72px 0; }
.cta-band h2 { color: #fff; font-size: var(--display-sm-size); font-weight: var(--weight-semibold); margin: 0; }
.cta-band p { color: rgba(255,255,255,0.7); font-size: var(--text-lg-size); margin: 12px 0 0; }
.subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe-form input {
  min-width: 260px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-primary); font-size: var(--text-md-size); font-family: inherit;
}
.subscribe-form input:focus-visible { box-shadow: var(--shadow-focus-brand); border-color: var(--brand-400); }

/* ------------------------------------------------------------
   21. SITE FOOTER
   ------------------------------------------------------------ */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.7); }
.site-footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding: 72px 0 40px; }
.site-footer__brand .site-brand__wordmark { color: #fff; }
.site-footer__brand .site-brand__wordmark b { color: var(--brand-400); }
.site-footer__tag { margin: 20px 0 0; max-width: 300px; font-size: var(--text-sm-size); line-height: 20px; }
.footer-col h4 { font-size: var(--text-sm-size); font-weight: var(--weight-bold); color: #fff; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255,255,255,0.65); font-size: var(--text-sm-size); }
.footer-col a:hover { color: #fff; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.1); padding: 24px 0 40px; }
.site-footer__disclaimer { font-size: var(--text-sm-size); line-height: 20px; color: rgba(255,255,255,0.6); max-width: 900px; }
.site-footer__disclaimer strong { color: rgba(255,255,255,0.85); }
.site-footer__copyright { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-size: var(--text-sm-size); color: rgba(255,255,255,0.5); }

/* ------------------------------------------------------------
   22. ERROR PAGE
   ------------------------------------------------------------ */
.error-page { text-align: center; padding: var(--spacing-10xl) 0; }
.error-page__code { font-size: 120px; line-height: 1; font-weight: var(--weight-bold); color: var(--brand-600); letter-spacing: -0.03em; }
.error-page__msg { margin: 16px 0 0; font-size: var(--display-xs-size); font-weight: var(--weight-semibold); }

/* ------------------------------------------------------------
   23. UTILITIES
   ------------------------------------------------------------ */
.u-center { text-align: center; }
.u-measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.u-mt-lg { margin-top: var(--spacing-5xl); }
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.icon--sm { width: 18px; height: 18px; }
/* Grupo Bennu signature: featured-icon square (48px, radius-lg, brand-50 bg, brand-600 icon) */
.featured-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--brand-50); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.module__head .module__lead { display: inline-flex; align-items: center; gap: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------
   24. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --container-pad-desktop: 20px; }
  .home-hero__inner { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .home-hero__title { font-size: var(--display-lg-size); line-height: var(--display-lg-line); }
  .trust-band__inner { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .trust-item { padding-left: 0; border-left: none; }
  .winners, .guide-meta, .proscons { grid-template-columns: 1fr; }
  .proscons > div + div { border-left: none; border-top: 1px solid var(--border-secondary); }
  .article__title { font-size: var(--display-md-size); line-height: var(--display-md-line); max-width: none; }
  .page-head__title { font-size: var(--display-md-size); line-height: var(--display-md-line); }
}
@media (max-width: 640px) {
  :root { --container-pad-desktop: 16px; }
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; padding: 48px 0; }
  .prose { font-size: var(--text-md-size); }
  .verdict { grid-template-columns: 1fr; }
  .compare-table thead th { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------
   25. RECONCILIATION — support the shared partials/navigation.hbs
       (emits <ul class="nav"><li class="nav-item …">) and the
       .wrap-on-element / u-measure-wide conventions used by the
       article templates. Appended last so these rules win.
   ------------------------------------------------------------ */

/* Ghost {{navigation}} renders partials/navigation.hbs -> <ul class="nav"> */
.nav { list-style: none; margin: 0; padding: 0; }
.nav-item { margin: 0; }

/* Primary (header) nav — horizontal row */
.primary-nav .nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.primary-nav .nav-item a {
  display: inline-block;
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text-tertiary); font-size: var(--text-md-size); font-weight: var(--weight-semibold);
  transition: background-color .14s ease, color .14s ease;
}
.primary-nav .nav-item a:hover { color: var(--text-primary); background: var(--gray-50); }
.primary-nav .nav-current a,
.primary-nav .nav-item a[aria-current] { color: var(--brand-700); background: var(--brand-50); }

/* Footer secondary nav — inherits .footer-col ul styling (vertical) */
.footer-col .nav { display: flex; flex-direction: column; gap: 10px; }

/* Mobile nav — vertical list with hairline separators (fix first-child) */
@media (max-width: 900px) {
  .mobile-nav .nav { display: block; }
  .mobile-nav .nav-item a {
    display: block; padding: 14px var(--container-pad-mobile);
    color: var(--text-secondary); font-weight: var(--weight-semibold);
    border-top: 1px solid var(--border-tertiary);
  }
  .mobile-nav .nav-item:first-child a { border-top: none; }
}

/* Reading column now sits directly in <div class="prose"> (no .wrap parent):
   give it side gutters on small screens while preserving the ~720px measure. */
.prose {
  max-width: calc(var(--measure) + 2 * var(--container-pad-desktop));
  padding-left: var(--container-pad-desktop);
  padding-right: var(--container-pad-desktop);
  box-sizing: border-box;
}

/* Wider constrained band (feature image inside article) */
.u-measure-wide { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* Article hero is now <div class="article__hero wrap"> — round the image itself
   so the .wrap gutter doesn't clip the rounded corners. */
.article__hero { border-radius: 0; overflow: visible; box-shadow: none; margin-bottom: var(--spacing-6xl); }
.article__hero img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); width: 100%; max-height: 560px; object-fit: cover; }
.article__hero figcaption { margin-top: 10px; text-align: center; font-size: var(--text-sm-size); color: var(--text-quaternary); }