/* ========================================
   BARLEY DENIAL GUIDE — Design System
   Mirrors barley_app/src/styles/theme.css
   ======================================== */

/* Fonts loaded via <link> in baseof.html to avoid render-blocking @import waterfall */

:root {
  /* Primary (Midnight Slate) */
  --color-primary: #2F4F4F;
  --color-primary-foreground: #ffffff;
  --color-primary-hover: #1E3535;

  /* Gold */
  --color-gold: #C9A84C;
  --color-gold-light: #F5EDD4;
  --color-gold-text: #7F6012;
  --color-gold-hover: #6B5110;
  --color-gold-foreground: #182A2A;

  /* Semantic */
  --color-danger: #C53030;
  --color-danger-dark: #B02A37;
  --color-danger-light: #FED7D7;
  --color-warning: #B7791F;
  --color-warning-light: #FFF3CD;
  --color-info: #2B6CB0;
  --color-info-light: #D1ECF1;
  --color-success: #16a34a;
  --color-success-light: #D4EDDA;

  /* Neutral */
  --color-bg: #F9F7F2;
  --color-card: #FFFFFF;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A5258;
  --color-text-muted: #5C6366;
  --color-border: #D4CFC6;
  --color-input-border: #6C757D;
  --color-secondary-bg: #EDE8DF;

  /* Typography */
  --text-body: 18px;
  --text-body-secondary: 16px;
  --text-h1-mobile: 30px;
  --text-h1-tablet: 36px;
  --text-h1-desktop: 40px;
  --text-h2-mobile: 24px;
  --text-h2-tablet: 28px;
  --text-h2-desktop: 32px;
  --text-h3-mobile: 20px;
  --text-h3-tablet: 22px;
  --text-h3-desktop: 24px;
  --text-button: 18px;
  --line-height-body: 1.625;
  --line-height-heading: 1.4;

  /* Touch targets */
  --button-height-mobile: 56px;
  --button-height-desktop: 48px;
  --touch-target-min: 48px;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Layout */
  --radius: 0.5rem;
  --content-max-width: 720px;
  --page-max-width: 1200px;
}


/* ── Reset & Base ────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-body);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: Georgia, serif;
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}


/* ── Typography ──────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--text-h1-mobile);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

h2 {
  font-size: var(--text-h2-mobile);
  font-weight: 600;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
}

h3 {
  font-size: var(--text-h3-mobile);
  font-weight: 600;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xs);
}

h4 {
  font-size: var(--text-body);
  font-weight: 600;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

@media (min-width: 768px) {
  h1 { font-size: var(--text-h1-tablet); }
  h2 { font-size: var(--text-h2-tablet); }
  h3 { font-size: var(--text-h3-tablet); }
}

@media (min-width: 1200px) {
  h1 { font-size: var(--text-h1-desktop); }
  h2 { font-size: var(--text-h2-desktop); }
  h3 { font-size: var(--text-h3-desktop); }
}

p {
  margin-bottom: var(--spacing-sm);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-primary-hover);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

ul, ol {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-lg);
}

li {
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-body);
}

strong {
  font-weight: 700;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
  font-size: var(--text-body);
  line-height: var(--line-height-body);
}

thead {
  background-color: var(--color-secondary-bg);
}

th {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  text-align: left;
  padding: var(--spacing-sm);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-primary);
}

td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text-primary);
}

tr:last-child td {
  border-bottom: none;
}

@media (max-width: 640px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

blockquote {
  border-left: 3px solid var(--color-gold);
  padding-left: var(--spacing-md);
  margin: var(--spacing-md) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}


/* ── Layout ──────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #C9A84C;
  color: #182A2A;
  font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  outline: 4px solid rgba(201, 168, 76, 0.5);
  outline-offset: 0;
}

.site-header {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 var(--spacing-md);
}

/* Reset ALL anchor styles inside header */
.site-header a {
  color: inherit;
  text-decoration: none;
}

.site-header a:hover {
  text-decoration: none;
}

.site-header-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  height: 64px;
}

@media (min-width: 768px) {
  .site-header-inner {
    height: 80px;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-width: 0;
}

.site-logo-block {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-header .site-logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  min-width: 0;
}

.site-logo-img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}

.site-logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-logo-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.site-tagline {
  display: none;
  font-family: Georgia, 'Cormorant Garamond', serif;
  font-size: 12px;
  font-style: italic;
  color: var(--color-gold-text);
  line-height: 1.2;
  pointer-events: none;
}

@media (min-width: 640px) {
  .site-tagline {
    display: block;
  }
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--spacing-md);
}

/* The desktop nav appears at 1280px, not 768px, and the mobile menu covers
   everything below it.

   This moved on 2026-09-12 when the header went from four nav links to seven,
   matching the marketing site's header. Seven do not fit at 768px: measured
   there, "How It Works" broke onto three lines, "Joining Medicare" and
   "Denial Guides" onto two, the logo's tagline collided with "Home", and at a
   24px root font — an ordinary setting for readers of this site — the nav
   overlapped the CTA button outright.

   1280px is the same threshold the marketing site uses, and for the same
   reason: its nav is `md:flex` with six links and `xl:flex` once the
   "Joining Medicare" link is enabled. Keeping the two sites on the same
   breakpoint means a reader crossing between them sees the nav appear and
   disappear at the same width. */
@media (min-width: 1280px) {
  .site-nav {
    display: flex;
  }
}

.site-header .site-nav a {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-header .site-nav a:hover {
  color: var(--color-gold-text);
  text-decoration: none;
}

.site-header .site-nav a:focus-visible {
  outline: 2px solid var(--color-gold-text);
  outline-offset: 2px;
}

.site-header .site-nav a.nav-active {
  color: var(--color-gold-text);
}

.site-header a.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #182A2A;
  background-color: #C9A84C;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.15s ease;
}

@media (min-width: 768px) {
  .site-header a.header-cta {
    font-size: 16px;
    padding: 0.5rem 1.25rem;
  }
}

.site-header a.header-cta:hover {
  background-color: #B39440;
  color: #182A2A;
  text-decoration: none;
}

.site-header a.header-cta:focus-visible {
  outline: 2px solid #C9A84C;
  outline-offset: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
}

@media (min-width: 1280px) {
  .mobile-menu-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}

.mobile-nav.mobile-nav-open {
  display: block;
}

@media (min-width: 1280px) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: mobile-nav-fade-in 0.2s ease;
}

.mobile-nav-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 288px;
  max-width: 85vw;
  background: #FFFFFF;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  animation: mobile-nav-slide-in 0.2s ease;
}

@keyframes mobile-nav-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mobile-nav-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.25rem;
}

.mobile-nav-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.mobile-nav-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius);
}

.mobile-nav-close:hover {
  color: var(--color-gold-text);
  background: #F9F7F2;
}

.mobile-nav-panel nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-nav-panel nav a {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: 0 0.75rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-nav-panel nav a:hover {
  color: var(--color-gold-text);
  background: #F9F7F2;
}

.mobile-nav-panel nav a.nav-active {
  color: var(--color-gold-text);
}

.mobile-nav-cta {
  margin-top: var(--spacing-sm);
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: #182A2A !important;
  background-color: #C9A84C !important;
  border-radius: var(--radius);
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-nav-cta:hover {
  background-color: #B39440 !important;
  color: #182A2A !important;
}

body.mobile-nav-lock {
  overflow: hidden;
}

.page-container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md);
}

.content-wrapper {
  max-width: var(--content-max-width);
}

.content-wrapper.centered {
  margin: 0 auto;
}


/* ── Cards ───────────────────────────────────────────────────────── */

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card-link:hover .card {
  border-color: var(--color-primary);
}

.card-link:hover .card-title {
  color: var(--color-primary-hover);
}

.card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--text-h3-mobile);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.card-description {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}


/* ── Trust Bar ───────────────────────────────────────────────────── */

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.trust-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.trust-bar-separator {
  color: var(--color-border);
}


/* ── Appeal Outlook Callouts ─────────────────────────────────────── */

.callout {
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.callout-strong {
  background-color: var(--color-success-light);
  border-left: 4px solid var(--color-success);
}

.callout-mixed {
  background-color: var(--color-warning-light);
  border-left: 4px solid var(--color-warning);
}

.callout-weak {
  background-color: var(--color-danger-light);
  border-left: 4px solid var(--color-danger);
}

.callout-info {
  background-color: var(--color-info-light);
  border-left: 4px solid var(--color-info);
}

.callout-not-applicable {
  background-color: var(--color-secondary-bg);
  border-left: 4px solid var(--color-text-muted);
}

.callout-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--text-body);
  margin-bottom: var(--spacing-xs);
}


/* ── Deadline Box ────────────────────────────────────────────────── */

.deadline-box {
  background-color: var(--color-card);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.deadline-box-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-gold-text);
  margin-bottom: var(--spacing-xs);
}

.deadline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

@media (min-width: 768px) {
  .deadline-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.deadline-item {
  padding: var(--spacing-sm);
  background-color: var(--color-bg);
  border-radius: var(--radius);
}

.deadline-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

.deadline-value {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text-primary);
}

.deadline-help {
  font-size: var(--text-body-secondary);
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
}


/* ── CTA ─────────────────────────────────────────────────────────── */

.cta-section {
  background-color: var(--color-secondary-bg);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  text-align: center;
}

.cta-section p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-button);
  font-weight: 600;
  color: var(--color-primary-foreground);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius);
  padding: var(--spacing-sm) var(--spacing-lg);
  min-height: var(--button-height-mobile);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cta-button:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-primary-foreground);
  text-decoration: none;
}

.cta-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .cta-button {
    min-height: var(--button-height-desktop);
  }
}

.cta-button-full {
  width: 100%;
  margin-top: var(--spacing-md);
}

.cta-privacy {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}


/* ── Inline CTA ──────────────────────────────────────────────────── */

.inline-cta {
  background: var(--color-gold-light);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.inline-cta p {
  margin: 0;
  color: var(--color-text-primary);
}

.inline-cta a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.inline-cta a:hover {
  color: var(--color-gold-text);
  text-decoration: underline;
}


/* ── MSN Match Block (top of page) ───────────────────────────────── */

.match-block {
  background-color: var(--color-info-light);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.match-block-prompt {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.match-block-phrase {
  font-style: italic;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  padding-left: var(--spacing-sm);
  border-left: 2px solid var(--color-border);
  margin-bottom: var(--spacing-xs);
}

.match-block-confirm {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}


/* ── FAQ ─────────────────────────────────────────────────────────── */

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.faq-answer {
  color: var(--color-text-secondary);
}


/* ── Page Disclaimer ─────────────────────────────────────────────── */

.page-disclaimer {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}


/* ── Sources ─────────────────────────────────────────────────────── */

.sources {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.sources ul {
  list-style-type: decimal;
}


/* ── Breadcrumbs ─────────────────────────────────────────────────── */

.breadcrumbs {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumbs .separator {
  margin: 0 0.5rem;
}


/* ── Category Badge ──────────────────────────────────────────────── */

.category-badge {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-gold-text);
  background-color: var(--color-gold-light);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  margin-bottom: var(--spacing-sm);
}


/* ── Footer ──────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--color-card);
  border-top: 2px solid var(--color-gold);
  padding: var(--spacing-xl) var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.footer-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-section h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.footer-section p {
  font-size: var(--text-body);
  line-height: var(--line-height-body);
}

.footer-section a {
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.25rem 0;
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
}

.footer-section a:hover {
  color: var(--color-gold-text);
}

.footer-section a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.footer-legal {
  max-width: var(--page-max-width);
  margin: var(--spacing-lg) auto 0;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-body);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

.footer-legal p {
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

.footer-copyright {
  margin-top: var(--spacing-sm);
  font-size: var(--text-body);
  color: var(--color-text-muted);
}


/* ── Search ──────────────────────────────────────────────────────── */

.search-container {
  max-width: var(--content-max-width);
  margin: 0 auto var(--spacing-xl);
}


/* ── Homepage ────────────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: var(--spacing-xl) 0;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.hero p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .category-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/* ── Scenario List (Category Pages) ──────────────────────────────── */

.scenario-list {
  list-style: none;
  padding-left: 0;
}

.scenario-list li {
  margin-bottom: 0;
}

.scenario-list a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text-primary);
  min-height: var(--touch-target-min);
}

.scenario-list a:hover {
  background-color: var(--color-secondary-bg);
  color: var(--color-primary);
}


/* ── Related Guides (single.html, directly after article body) ─────
   Card wrapper around the existing .scenario-list markup so the module
   reads as a distinct "next steps" widget rather than more body copy.
   Link rows inherit min-height: var(--touch-target-min) from
   .scenario-list a above — do not shrink it here. ────────────────── */

.related-guides {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.related-guides h2 {
  margin-top: 0;
}

.related-guides .scenario-list {
  margin: 0;
}

.related-guides .scenario-list li:last-child a {
  border-bottom: none;
}


/* ── Medicare next-step ──────────────────────────────────────────────
   The link from a denial guide into the Getting Started with Medicare
   section, and its counterpart on the index page.

   VISUAL WEIGHT IS THE WHOLE DESIGN. This sits between Related Guides (a
   white card with a border) and the inline CTA (gold-light with a 4px gold
   left border), and it must be quieter than BOTH so it never competes with
   the conversion path. Hence: no background fill, no accent border, no
   card — a hairline rule and a small label. A card treatment was tried and
   rejected: it reproduces .related-guides exactly, putting two near-
   identical boxes in a row, which is the weight at which this starts to
   read as a link farm.

   Tokens only — no new custom properties. ──────────────────────── */

.medicare-next-step {
  margin: var(--spacing-lg) 0;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

/* Labelled the way THIS site labels things. An earlier version set this as a
   12px letter-spaced uppercase eyebrow, which was wrong twice over: it was the
   only `text-transform: uppercase` in the stylesheet, and it put CONTENT below
   the 16px floor of the type scale on a product read by people 65 and over.
   (12px exists once elsewhere, on `.site-tagline` — but that is decorative
   chrome, hidden below 640px, and nothing is lost by not reading it.) The
   sans/serif contrast against the Georgia body already marks this as a label;
   it does not need to shrink or shout to do that. */
.medicare-next-step-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-body-secondary);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.medicare-next-step-body {
  font-size: var(--text-body-secondary);
  color: var(--color-text-secondary);
  margin-bottom: 0.333rem;
}

/* The module's only control, so it carries the touch target even though it
   reads as a run of text. Flex rather than line-height for the same reason as
   the index links below: a label that wraps must not turn every line into a
   48px row. `align-self: flex-start` keeps the hit area to the text width
   instead of the full column. */
.medicare-next-step-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  font-size: var(--text-body-secondary);
  font-weight: 600;
}

/* Index page only. Still not a card: a rule, an icon and a short list. */
.medicare-section-nav {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.medicare-section-nav-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.medicare-section-nav h2 {
  font-size: var(--text-h3-mobile);
  margin: 0;
}

.medicare-section-nav p {
  font-size: var(--text-body-secondary);
  color: var(--color-text-secondary);
}

.medicare-section-nav-links {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Link rows are touch targets on the index, where they are the only
   interactive element in the block.

   Centred with flex rather than `line-height: var(--touch-target-min)`.
   The line-height trick hits the 48px target only while the label fits on
   one line: as soon as it wraps — a longer label, a narrow phone, or a
   reader who has enlarged their text — every line becomes 48px tall and the
   row balloons to 96px or more. Flex centring holds the minimum without
   touching the leading. */
.medicare-section-nav-links a {
  display: flex;
  align-items: center;
  align-self: flex-start;
  font-size: var(--text-body-secondary);
  min-height: var(--touch-target-min);
}


/* ── Print ───────────────────────────────────────────────────────── */

@media print {
  .site-header,
  .site-footer,
  .cta-section,
  .search-container {
    display: none;
  }

  body {
    background-color: white;
    color: black;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 12px;
  }
}

/* ----- Auth-aware visibility (set by layouts/partials/auth-aware.html) -----
   Default to anonymous-friendly when JS hasn't run or no cookie is present:
   the "anonymous" element shows, the "signed-in" element hides. */
html:not([data-barley-auth="signed-in"]) [data-barley-show="signed-in"] {
  display: none !important;
}
html[data-barley-auth="signed-in"] [data-barley-show="anonymous"] {
  display: none !important;
}

/* Header CTA dual-render */
html[data-barley-auth="signed-in"] .header-cta--anonymous,
html[data-barley-auth="signed-in"] .mobile-nav-cta--anonymous {
  display: none !important;
}
html:not([data-barley-auth="signed-in"]) .header-cta--authenticated,
html:not([data-barley-auth="signed-in"]) .mobile-nav-cta--authenticated {
  display: none !important;
}

/* Soft dashboard prompt above the per-guide CTA form */
.cta-auth-prompt {
  font-size: 0.95rem;
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--color-primary);
  text-align: center;
}
.cta-auth-prompt a {
  color: var(--color-gold-text);
  font-weight: 600;
  text-decoration: underline;
}
.cta-auth-prompt a:hover,
.cta-auth-prompt a:focus-visible {
  color: var(--color-gold-hover);
}

/* ============================================================
   Share bar — private-first "share this guide" control.
   Parity with the app's ToolShareBar: >=48px targets, >=18px
   labels, visible focus rings, Copy + Email primary, Facebook +
   Messenger behind a <details> "More" disclosure. No X/Twitter.
   ============================================================ */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.share-bar-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-button);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.share-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--button-height-desktop); /* 48px */
  padding: 0.5rem 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-button); /* 18px */
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.share-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-info-light);
  color: var(--color-text-primary);
}
.share-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.share-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}
.share-copy.is-copied .share-icon {
  color: var(--color-success);
}
.share-copy.is-copied {
  border-color: var(--color-success);
}

/* Native <details> "More" disclosure. */
.share-more {
  position: relative;
  display: inline-block;
}
.share-more-toggle {
  list-style: none; /* hide default marker (Firefox) */
}
.share-more-toggle::-webkit-details-marker {
  display: none; /* hide default marker (Safari/Chrome) */
}
.share-chevron {
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.share-more[open] .share-chevron {
  transform: rotate(180deg);
}
.share-more-panel {
  display: none;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.share-more[open] .share-more-panel {
  display: flex;
}

/* On wider screens, float the revealed targets beside the toggle. */
@media (min-width: 640px) {
  .share-more[open] .share-more-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 0.25rem);
    z-index: 5;
    margin-top: 0;
    padding: var(--spacing-sm);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    flex-wrap: nowrap;
  }
}

@media (max-width: 640px) {
  .share-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .share-bar-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .share-btn {
    width: 100%;
    min-height: var(--button-height-mobile); /* 56px */
  }
  .share-more,
  .share-more-toggle {
    width: 100%;
  }
}

/* ── Email capture (enrollment guides) ───────────────────────────────
   Replaces the bill-upload CTA at the foot of an enrollment guide. Built on
   .cta-section's vocabulary — same secondary background, radius and control
   metrics — with two deliberate divergences, both for a 65+ reader:

     1. The longer honesty paragraph is LEFT-aligned. .cta-section centres
        everything, which is fine for one short line and poor for four.
     2. The input and button are stacked, never side by side. A row collapses
        badly at 320px and puts a 56px control next to a 56px field on a
        narrow screen.

   Touch targets follow the house floor: 56px on mobile, 48px from the tablet
   breakpoint, matching .cta-button. */

.email-capture {
  margin: var(--spacing-xl) 0;
}

/* `display: flex` beats the `hidden` ATTRIBUTE, which is only a UA-stylesheet
   `display: none`. Without this rule the success panel and the error line both
   render on first paint while still marked hidden — the page looks like the
   form has already been submitted, and shows an error icon above an untouched
   field. Neither the Hugo build nor any guard can see this; it was caught by
   opening the page. Scoped to this block rather than set globally. */
.email-capture [hidden],
.email-capture-panel[hidden] {
  display: none !important;
}

.email-capture-panel {
  background-color: var(--color-secondary-bg);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.email-capture-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  text-align: center;
}

.email-capture-intro h3 {
  margin: 0;
}

.email-capture-intro p {
  margin: 0;
  color: var(--color-text-secondary);
}

.email-capture-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.email-capture-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.email-capture-field label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-body-secondary);
  font-weight: 600;
  color: var(--color-text-primary);
}

.email-capture-field input[type="email"] {
  width: 100%;
  min-height: var(--button-height-mobile);
  padding: 0.75rem var(--spacing-sm);
  font-family: Georgia, serif;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-card);
  border: 2px solid var(--color-input-border);
  border-radius: var(--radius);
}

.email-capture-field input[type="email"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.email-capture-field input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.email-capture-error {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin: 0;
  font-size: var(--text-body-secondary);
  color: var(--color-danger);
}

.email-capture-error-icon {
  display: inline-flex;
  padding-top: 3px;
  flex-shrink: 0;
}

.email-capture-button {
  width: 100%;
  min-height: var(--button-height-mobile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-button);
  font-weight: 600;
  color: var(--color-primary-foreground);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius);
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.email-capture-button:hover {
  background-color: var(--color-primary-hover);
}

.email-capture-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.email-capture-button[disabled] {
  opacity: 0.75;
  cursor: default;
}

.email-capture-privacy {
  margin: 0;
  text-align: center;
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

.email-capture-honesty {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}

.email-capture-honesty p {
  margin: 0;
  font-size: var(--text-body-secondary);
  color: var(--color-text-secondary);
}

/* The honeypot. Hidden from sight and from assistive technology, and
   unfocusable via tabindex="-1" in the markup. Not display:none — some bots
   skip fields that are display:none, which is the opposite of what we want. */
.email-capture-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.email-capture-success {
  text-align: center;
  gap: var(--spacing-sm);
}

.email-capture-success:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.email-capture-success-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.email-capture-success-head h3 {
  margin: 0;
}

.email-capture-success-icon {
  display: inline-flex;
  color: var(--color-success);
}

.email-capture-success p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* At the narrow end the 32px side padding costs the label two extra lines.
   The target is already well over the floor, so the padding gives way first
   and the copy stays precise. */
@media (max-width: 400px) {
  .email-capture-panel {
    padding: var(--spacing-md);
  }
  .email-capture-button {
    padding: var(--spacing-sm);
  }
}

@media (min-width: 768px) {
  .email-capture-field input[type="email"],
  .email-capture-button {
    min-height: var(--button-height-desktop);
  }
}

/* ── Section landing (problem-first section index) ───────────────────
   Used by partials/section-landing.html. Deliberately NOT a variant of
   .scenario-list: that list leads with the guide title, and the whole point
   here is that the title is the demoted line.

   Everything is built from the existing tokens — no new colours, no new type
   sizes. The one new idea is the card's left rule, which borrows the weight
   .inline-cta already uses to mark "this block is addressed to you", in the
   primary colour rather than the gold so the two are not confused. */

.section-landing {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.section-landing-intro {
  margin-bottom: var(--spacing-xl);
}

.section-landing-intro p:last-child {
  margin-bottom: 0;
}

.section-landing-lede {
  color: var(--color-text-muted);
  font-size: var(--text-body-secondary);
  margin-bottom: var(--spacing-md);
}

.section-landing-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.section-landing-list > li {
  margin: 0;
}

.section-landing-list a {
  display: block;
  min-height: var(--touch-target-min);
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-left: 6px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--spacing-md) var(--spacing-md);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.section-landing-list a:hover {
  border-color: var(--color-primary);
  background: var(--color-secondary-bg);
  color: var(--color-text-primary);
}

.section-landing-list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The reader's problem, in their words — the largest thing on the card. */
.section-landing-problem {
  display: block;
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

/* The guide's own title, demoted to a label. */
.section-landing-title {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-body-secondary);
  font-weight: 600;
  color: var(--color-primary);
}

.section-landing-search {
  background: var(--color-secondary-bg);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.section-landing-search label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--text-body-secondary);
  font-weight: 600;
}

.section-landing-search-note {
  margin: 0;
  font-size: var(--text-body-secondary);
  color: var(--color-text-muted);
}

.section-landing-next,
.section-landing-taxonomy {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.section-landing-next p:last-child,
.section-landing-taxonomy p:last-child {
  margin-bottom: 0;
}

.section-landing-taxonomy {
  font-size: var(--text-body-secondary);
}