/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════ */
:root {
  /* Base */
  --bg-cream:     #FDF4E8;
  --card-white:   #FFFFFF;
  --panel-cream:  #F3E8D5;
  --border-warm:  #E8DCC8;
  --card-shadow:  #EADFCB;

  /* Text */
  --ink:          #2C2C2A;
  --ink-soft:     #6B6459;
  --ink-faint:    #A89B87;

  /* Pink family */
  --pink-bg:      #FCE4EA;
  --pink:         #F5A7B8;
  --pink-deep:    #B24A66;
  --pink-accent:  #E0708C;
  --pink-ink:     #7A2E42;

  /* Mint family */
  --mint-bg:      #DDEEE2;
  --mint-card:    #E4F1E7;
  --mint-deep:    #3D7D57;
  --mint-ink:     #446B54;
  --mint-shadow:  #C9E0CF;

  /* Lavender family */
  --lav-bg:         #E9E4F8;
  --lav-strong:     #CFC5F0;
  --lav-deep:       #6B58A8;
  --lav-ink:        #4A3E80;
  --lav-soft:       #8A7DB0;
  --lav-footer-ink: #3A3160;
  --lav-mid:        #5A4F8A;

  /* Accent singles */
  --peach:        #F8C99B;
  --peach-deep:   #B78A3D;
  --blue:         #9CC8EE;

  /* Signal bars — data only, never decorative */
  --signal-positive: #7FC29B;
  --signal-negative: #F08A6C;

  /* Typography */
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ═══════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--bg-cream);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; border: none; }
input { font-family: inherit; border: none; outline: none; }

/* Page wrapper — constrains 2.2–2.7 */
.page {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--bg-cream);
  padding-bottom: 32px;
}

/* ═══════════════════════════════════════════════════════
   2.1  RAINBOW SIGNAL STRIPE
═══════════════════════════════════════════════════════ */
.rainbow-stripe {
  display: flex;
  height: 6px;
  width: 100%;
}
.rainbow-stripe span { flex: 1; }

/* ═══════════════════════════════════════════════════════
   2.2  HEADER
═══════════════════════════════════════════════════════ */
.site-header {
  background: var(--bg-cream);
  text-align: center;
  padding: 18px 32px 0;
}

/* Logo row */
.header-logo { margin-bottom: 12px; }
.header-logo a {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.header-logo a:hover { text-decoration: none; }
.logo-signal { color: var(--ink); }
.logo-before {
  font-style: italic;
  font-weight: 500;
  color: var(--pink-accent);
}
.logo-buy { color: var(--ink); }

/* Hairline rule */
.header-rule {
  height: 0.5px;
  background: var(--border-warm);
}

/* Nav row */
.header-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.header-nav a {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  padding-bottom: 2px;
}
.header-nav a:hover { color: var(--ink); text-decoration: none; }
.header-nav a.active {
  color: var(--ink);
  border-bottom: 2px solid var(--pink);
}

/* ═══════════════════════════════════════════════════════
   2.3  HERO — floating white card on mint band
═══════════════════════════════════════════════════════ */
.hero-band {
  background: var(--mint-bg);
  border-radius: 14px;
  margin: 10px 32px 0;
  padding: 40px 24px;
  text-align: center;
}

.hero-card {
  background: var(--card-white);
  border-radius: 10px;
  max-width: 420px;
  margin: 0 auto;
  padding: 26px 28px;
  box-shadow: 0 2px 0 var(--mint-shadow);
  text-align: center;
}
.hero-card:hover { box-shadow: 0 3px 0 var(--mint-shadow); }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--mint-deep);
  margin-bottom: 14px;
}

.hero-card h1 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 12px;
}

.hero-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 20px;
}

.hero-cta {
  display: inline-block;
  background: var(--pink);
  color: var(--pink-ink);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 26px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.hero-cta:hover {
  background: var(--pink-accent);
  color: #fff;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════
   2.4  STAT CHIPS
═══════════════════════════════════════════════════════ */
.stat-section {
  padding: 22px 32px 0;
}
.stat-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.stat-chip {
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.stat-chip--pink { background: var(--pink-bg); }
.stat-chip--mint { background: var(--mint-card); }
.stat-chip--lav  { background: var(--lav-bg); }

.stat-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}
.stat-chip--pink .stat-num { color: var(--pink-deep); }
.stat-chip--mint .stat-num { color: var(--mint-deep); }
.stat-chip--lav  .stat-num { color: var(--lav-deep); }

.stat-label {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.3;
}
.stat-chip--pink .stat-label { color: #9A6B79; }
.stat-chip--mint .stat-label { color: #6E9480; }
.stat-chip--lav  .stat-label { color: var(--lav-soft); }

/* ═══════════════════════════════════════════════════════
   2.5  FEATURED ARTICLE CARD ("LATEST SIGNAL")
═══════════════════════════════════════════════════════ */
.featured-section {
  padding: 28px 32px 0;
}

.featured-heading {
  text-align: center;
  margin-bottom: 16px;
}
.featured-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 6px;
}
.featured-heading h2 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}

.featured-card {
  background: var(--card-white);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 2px 0 var(--card-shadow);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: center;
}
.featured-card:hover { box-shadow: 0 3px 0 var(--card-shadow); }

/* LEFT column */
.featured-left {}

.feat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
}
/* Featured card: always --pink-deep */
.cat-label--feat    { color: var(--pink-deep); }
/* Secondary card rotation */
.cat-label--review  { color: var(--lav-deep); }
.cat-label--guide   { color: var(--peach-deep); }
.cat-label--comparison { color: var(--pink-deep); }

.n-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--mint-deep);
  background: var(--mint-card);
  border-radius: 999px;
  padding: 2px 9px;
  line-height: 1.6;
}

.feat-title {
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 8px;
}

.feat-dek {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 12px;
}

.feat-link {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--pink-accent);
}
.feat-link:hover { text-decoration: underline; }

/* RIGHT column — mini Buyer Signals panel */
.signals-panel {
  background: var(--bg-cream);
  border-radius: 10px;
  padding: 14px 16px;
}

.sig-row { margin-bottom: 10px; }
.sig-row:last-child { margin-bottom: 0; }

.sig-row-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.sig-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sig-track {
  flex: 1;
  height: 6px;
  background: var(--panel-cream);
  border-radius: 3px;
  overflow: hidden;
}

.sig-fill {
  height: 100%;
  border-radius: 3px;
}
.sig-fill--pos { background: var(--signal-positive); }
.sig-fill--neg { background: var(--signal-negative); }

.sig-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  min-width: 22px;
  text-align: right;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   2.6  SECONDARY ARTICLE CARDS
═══════════════════════════════════════════════════════ */
.secondary-section {
  padding: 16px 32px 0;
}
.secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.secondary-card {
  background: var(--card-white);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 0 var(--card-shadow);
}
.secondary-card:hover { box-shadow: 0 3px 0 var(--card-shadow); }

.sec-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sec-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 8px;
}

.sec-signal {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════
   2.7  "HOW WE COUNT" MINT BAND
═══════════════════════════════════════════════════════ */
.how-count-band {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
  background: var(--mint-bg);
  border-radius: 14px;
  margin: 26px 32px 0;
  padding: 26px 28px;
  text-decoration: none;
  flex-wrap: wrap;
}
.how-count-band:hover { text-decoration: none; opacity: .95; }

.how-count-left { flex-shrink: 0; line-height: 1.15; }
.how-count-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  color: var(--mint-deep);
  display: block;
}
.how-count-bold {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  display: block;
}

.how-count-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.how-count-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--mint-ink);
  line-height: 1.6;
}
.how-num {
  font-family: var(--font-mono);
  color: var(--mint-deep);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   2.8  TRUST BADGE BAND  (full-width, edge to edge)
═══════════════════════════════════════════════════════ */
.trust-band {
  background: var(--lav-bg);
  padding: 22px 32px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.trust-item svg { display: block; color: var(--lav-deep); }
.trust-title {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lav-ink);
}
.trust-sub {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--lav-soft);
}

/* ═══════════════════════════════════════════════════════
   2.9  FOOTER  (full-width, deep lavender, giant wordmark)
═══════════════════════════════════════════════════════ */
.site-footer {
  background: var(--lav-strong);
  padding: 24px 32px 14px;
}

/* Row 1: newsletter + links */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.footer-nl-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--lav-footer-ink);
  margin-bottom: 8px;
}
.footer-nl-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.footer-nl-input {
  background: var(--card-white);
  border-radius: 999px;
  padding: 8px 16px;
  width: 150px;
  font-size: 12px;
  color: var(--ink);
}
.footer-nl-input::placeholder { color: var(--ink-faint); }
.footer-nl-btn {
  background: var(--lav-footer-ink);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
}

.footer-links {
  display: flex;
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col-head {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lav-footer-ink);
  margin-bottom: 2px;
}
.footer-col a {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--lav-mid);
}
.footer-col a:hover { color: var(--lav-footer-ink); text-decoration: none; }

/* Row 2: giant wordmark */
.footer-wordmark {
  font-family: var(--font-serif);
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 700;
  color: var(--lav-footer-ink);
  letter-spacing: -2px;
  line-height: 0.9;
  opacity: .9;
  text-align: center;
  padding: 4px 0 16px;
  overflow: hidden;
  white-space: nowrap;
}

/* Row 3: legal */
.footer-legal {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--lav-mid);
  max-width: 1080px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — 720px
═══════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  .hero-card h1 { font-size: 30px; }
}

@media (max-width: 720px) {
  /* Hero */
  .hero-band { margin: 10px 16px 0; padding: 24px 16px; }
  .hero-card { padding: 20px 18px; max-width: 100%; }

  /* Sections */
  .stat-section    { padding: 18px 16px 0; }
  .featured-section { padding: 22px 16px 0; }
  .secondary-section { padding: 14px 16px 0; }

  /* Featured card: single column */
  .featured-card {
    grid-template-columns: 1fr;
  }

  /* How we count */
  .how-count-band {
    margin: 20px 16px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* Trust */
  .trust-band { padding: 20px 16px; }

  /* Footer */
  .site-footer { padding: 20px 16px 12px; }
  .footer-top { flex-direction: column; gap: 24px; }
  .footer-links { flex-direction: column; gap: 20px; }
  .footer-nl-input { width: 130px; }
}