/* Base */
:root{
  --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#a5b4fc;
  --sub:#93c5fd; --brand:#60a5fa; --brand-strong:#3b82f6;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.25); --max:1120px;
}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 80% -10%,rgba(59,130,246,.18),transparent 55%),var(--bg);
  color:var(--text); line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sub);text-decoration:none}

/* Layout */
.container{max-width:var(--max);margin:0 auto;padding:28px 20px}
header, main, footer{width:100%}
header nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
header nav a{color:var(--text);opacity:.9;padding:8px 10px;border-radius:10px}
header nav a:hover{background:rgba(148,163,184,.12)}

.hero{
  padding:64px 0 28px; margin-bottom:10px;
  border-bottom:1px solid rgba(148,163,184,.14);
}
.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.1;margin:0 0 10px}
.hero p{font-size:clamp(16px,2vw,20px);opacity:.92;max-width:60ch}

/* Layout balance fix */
.hero, .intro, header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero h1, .intro h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 0.6em;
}

.hero p, .intro p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted, #cbd5e1);
}

/* Keep the main content comfortably left-aligned */
main, section, article {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
}


section{padding:40px 0}
section h2{font-size:clamp(20px,2.6vw,28px);margin:0 0 10px}
section p{opacity:.92}

/* Cards / articles (works with your blog/resources cards) */
.card, article.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.card .tag, article.card .tag{
  display:inline-block; font-size:12px; color:var(--muted);
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25);
  padding:4px 8px; border-radius:999px; margin-bottom:10px;
}
.grid, .cards{display:grid;gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Buttons */
.btn, a.button{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));
  color:#fff;border:none;border-radius:999px;padding:12px 18px;font-weight:700;
  box-shadow:var(--shadow)
}
.btn:hover, a.button:hover{filter:brightness(1.08)}

/* Feature tiles */
.tile{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(148,163,184,.2); border-radius:var(--radius);
  padding:20px; min-height:160px
}

/* Footer */
footer{border-top:1px solid rgba(148,163,184,.2);margin-top:40px}
footer .inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:22px 0;color:#a3b2cc;font-size:14px}

/* Optional: hero badge if you have one */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(59,130,246,.14);border:1px solid rgba(99,102,241,.35);
  color:var(--sub);padding:6px 10px;border-radius:999px;font-size:.9rem
}

/* Make default tables and lists look nicer without changing HTML */
table{width:100%;border-collapse:collapse;border:1px solid rgba(148,163,184,.18);border-radius:12px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid rgba(148,163,184,.14)}
tr:nth-child(even){background:rgba(255,255,255,.02)}
ul{padding-left:1.2rem}

/* --- Hero polish (match MyInsight Health) --- */
header nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 20px;
}

.hero{
  /* override earlier border + spacing */
  border: 0;
  padding: 96px 20px 72px;

  /* soft blue spotlight like MIH */
  background:
    radial-gradient(1000px 600px at 70% -10%, rgba(59,130,246,.20), transparent 60%),
    var(--bg);

  text-align: center;
}

.hero .hero-wrap{ max-width: 900px; margin: 0 auto; }
.hero h1{ color:#fff; margin-bottom:16px; }
.hero p{ max-width: 620px; margin: 0 auto 24px; opacity:.9; }
.hero .btn{ margin-top: 10px; }

/* --- Fix: FSA / HSA Note readability --- */
.note, .fsa-note {
  background: rgba(255, 255, 255, 0.07); /* slightly brighter gray-blue tint */
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #e5e7eb; /* readable text */
  border-radius: 14px;
  padding: 20px;
  line-height: 1.5;
}

.note strong, .fsa-note strong {
  color: #f9fafb;
}

.note em, .fsa-note em {
  color: var(--sub);
  font-style: normal;
}

.note h4, .fsa-note h4 {
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.note h4::before, .fsa-note h4::before {
  content: "💡";
  font-size: 1.1em;
  opacity: 0.9;
}
/* --- Fix: Email subscribe box readability --- */
.subscribe-box, form.subscribe, .email-box {
  background: rgba(255, 255, 255, 0.06); /* darker translucent panel */
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  padding: 20px;
  color: #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.subscribe-box h4, .email-box h4 {
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 10px;
}

.subscribe-box input[type="email"],
.email-box input[type="email"] {
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  width: 60%;
  font-family: inherit;
}

.subscribe-box input[type="email"]::placeholder {
  color: rgba(229, 231, 235, 0.5);
}

.subscribe-box input[type="submit"],
.email-box input[type="submit"] {
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  margin-left: 10px;
  cursor: pointer;
  font-weight: 600;
}

.subscribe-box input[type="submit"]:hover,
.email-box input[type="submit"]:hover {
  filter: brightness(1.1);
}

.subscribe-box small,
.email-box small {
  display: block;
  margin-top: 10px;
  opacity: 0.85;
  font-size: 0.9rem;
  color: #cbd5e1;
}
/* --- Dark mode fix: pricing & resource tiles --- */
.plan,
.card.note,
.fsa-note,
.subscribe-box {
  background: rgba(255, 255, 255, 0.06); /* darker translucent panel */
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  color: #e5e7eb;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Headings inside dark tiles */
.plan h3,
.fsa-note h3,
.subscribe-box h3 {
  color: var(--brand);
}

/* Muted text and small notes inside */
.plan .note,
.fsa-note p,
.subscribe-box small,
.subscribe-box p {
  color: var(--muted, #cbd5e1);
}

/* Email input and button in subscribe box */
.subscribe-box input[type="email"] {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
}

.subscribe-box input::placeholder {
  color: rgba(229,231,235,.6);
}
/* ==== Pricing layout ==== */
.pricing { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }
.price-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.plan {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  color: #e5e7eb;
}
.plan h3 { margin: 0 0 .35rem; color: var(--brand, #60a5fa); }
.price { font-size: 1.75rem; font-weight: 700; color: var(--brand, #60a5fa); margin: .25rem 0 .5rem; }
.badge-line { font-size: .95rem; color: var(--muted, #cbd5e1); margin-bottom: .75rem; }
.features { margin: 0 0 1.25rem; padding-left: 1.1rem; }
.features li { margin: .35rem 0; }

/* If you need a button look for the pricing CTAs */
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand,#60a5fa), var(--brand-strong,#3b82f6));
  color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.cta-btn:hover { filter: brightness(1.08); }

/* ==== Darken “too white” cards on Resources page ==== */
.card,
.subscribe-box {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  color: #e5e7eb !important;
}
.card h3,
.subscribe-box h3 { color: #e5e7eb !important; }
.card .muted,
.subscribe-box .muted { color: var(--muted, #cbd5e1) !important; }

/* Input in subscribe box */
.subscribe-inline input[type="email"],
.subscribe-inline input[type="text"] {
  background: rgba(2,6,23,.6);
  border: 1px solid rgba(148,163,184,.35);
  color: #e5e7eb;
  border-radius: 10px;
  padding: .6rem .8rem;
}
.subscribe-inline input::placeholder { color: #9aa4b2; }

/* Fix for white pricing cards – make them match dark theme */
.plan {
  background: var(--card);
  border: 1px solid rgba(148,163,184,.18);
  color: var(--text);
}

.price, .badge-line {
  color: var(--sub);
}

.features li {
  color: var(--text);
}

/* Pricing grid: 1 → 2 → 3 columns */
.pricing { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; 
}

.price-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;              /* mobile default */
}

@media (min-width: 800px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }  /* tablets */
}

@media (min-width: 1200px) {
  .price-grid { grid-template-columns: repeat(3, 1fr); }  /* desktop */
}

/* Make cards equal height and keep the CTA pinned at the bottom */
.plan {
  display: flex;
  flex-direction: column;
}

.plan .center {
  margin-top: auto;
}
/* Blog post readability on dark backgrounds */
main > article {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  color: #334155;
}

main > article h1,
main > article h2,
main > article h3 {
  color: #0f172a;
}

main > article p,
main > article li {
  color: #334155;
}

main {
  padding: 1rem;
}
/* --- Blog post mobile fix --- */
main > article{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  max-width:850px;
  width:100%;
  box-sizing:border-box;
  margin:1rem auto;             /* centers the white card */
  padding:1.25rem;              /* default desktop padding */
}

/* Make all content stay inside the card on small screens */
@media (max-width:640px){
  main{ padding:0; }            /* remove outer page padding */
  main > article{
    margin:.75rem 12px;         /* side gutters so card doesn't touch edges */
    padding:1rem;
    border-radius:10px;
  }
  /* Prevent sideways scroll / bleed */
  table, .callout, pre, code, .code, .block {
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  img, iframe { max-width:100%; height:auto; display:block; }
  h1{ font-size:1.5rem; line-height:1.25; }
}