/* ============================================================
   MELLOW — Refined landing restyle
   Scoped ENTIRELY under .public-site so it cannot affect the
   logged-in portal. Loads AFTER styles.css to override the
   landing look only. Remove the <link> to this file to revert.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

.public-site {
  --r-ink:#0f1117; --r-ink-60:#60646e; --r-ink-30:#b8bbc2;
  --r-surface:#f7f8fa; --r-white:#ffffff;
  --r-accent:#2c6e49; --r-accent-lt:#e8f2ec; --r-accent-mid:#4a9970;
  --r-gold:#c8a84b; --r-gold-lt:#fdf6e3; --r-warn:#d85c3a;
  --r-display:'DM Serif Display',Georgia,serif;
  --r-mono:'JetBrains Mono',monospace;
  --r-body:'Inter',system-ui,sans-serif;

  font-family: var(--r-body);
  color: var(--r-ink);
  background: var(--r-white);
}

/* ── Typography ─────────────────────────────────────────── */
.public-site h1,
.public-site h2 {
  font-family: var(--r-display);
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--r-ink);
}
.public-site h1 { font-size: clamp(2.6rem,5vw,4rem); }
.public-site h1 em { font-style: italic; color: var(--r-accent); }
.public-site h2 { font-size: clamp(2rem,3.5vw,2.8rem); }
.public-site h3 { font-weight: 600; letter-spacing: -.01em; }
.public-site p  { color: var(--r-ink-60); }
.public-site .eyebrow {
  font-family: var(--r-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--r-accent);
}

/* ── Header / nav ───────────────────────────────────────── */
.public-site .site-header {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.public-site .site-brand,
.public-site .footer-brand strong {
  font-family: var(--r-display);
  color: var(--r-accent);
}
.public-site .brand-mark {
  background: var(--r-accent) !important;
  color: #fff !important;
}
.public-site .site-nav a { color: var(--r-ink-60); }
.public-site .site-nav a:hover { color: var(--r-ink); }

/* ── Buttons ────────────────────────────────────────────── */
.public-site .primary-btn,
.public-site .hero-cta {
  background: var(--r-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600;
  transition: background .15s, transform .1s;
}
.public-site .primary-btn:hover,
.public-site .hero-cta:hover { background:#235438 !important; transform: translateY(-1px); }
.public-site .soft-btn {
  border: 2px solid rgba(44,110,73,.3) !important;
  color: var(--r-accent) !important;
  background: transparent !important;
  border-radius: 10px !important;
  font-weight: 600;
}
.public-site .soft-btn:hover { background: var(--r-accent-lt) !important; }

/* ── Hero ───────────────────────────────────────────────── */
.public-site .hero-section {
  background: linear-gradient(160deg,#f0f7f3 0%,#f7f8fa 55%,#fdf6e3 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: relative; overflow: hidden;
}
.public-site .hero-section::before {
  content:''; position:absolute; right:-80px; top:-80px;
  width:560px; height:560px;
  background: radial-gradient(circle,rgba(44,110,73,.08) 0%,transparent 70%);
  pointer-events:none;
}
.public-site .hero-sub { color: var(--r-ink-60); font-size: 1.05rem; line-height: 1.7; }
.public-site .hero-disclaimer { color: var(--r-ink-30); font-size: .8rem; }

/* ── The bio-age demo card (if present in hero) ─────────── */
.public-site .bioage-card,
.public-site .hero-card {
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 48px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
}
.public-site .bioage-number,
.public-site .hero-card .big-number {
  font-family: var(--r-display);
  color: var(--r-accent);
}
.public-site .bioage-delta {
  background: var(--r-accent-lt); color: var(--r-accent);
  border-radius: 20px; font-weight: 600;
}

/* ── Section accents ────────────────────────────────────── */
.public-site .section-dark,
.public-site .dark-section { background: var(--r-ink); color:#fff; }
.public-site .section-dark .eyebrow,
.public-site .dark-section .eyebrow { color: var(--r-gold); }
.public-site .section-dark p,
.public-site .dark-section p { color: rgba(255,255,255,.72); }

/* gold science-note accent */
.public-site .science-note {
  background: rgba(200,168,75,.1);
  border-left: 3px solid var(--r-gold);
  border-radius: 0 8px 8px 0;
}

/* ── Step numbers / chips ───────────────────────────────── */
.public-site .step-num {
  background: var(--r-accent) !important;
  color:#fff !important;
  font-family: var(--r-mono);
  box-shadow: 0 0 0 6px var(--r-accent-lt);
}
.public-site .report-chip,
.public-site .feature-chip {
  background: var(--r-accent-lt);
  color: var(--r-accent);
  border: 1px solid rgba(44,110,73,.15);
  border-radius: 20px;
}

/* ── Cards (features, hospitals, trust) ─────────────────── */
.public-site .feature-card,
.public-site .hospital-card,
.public-site .trust-card,
.public-site .hc-card {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.07);
  transition: box-shadow .2s, transform .2s;
}
.public-site .feature-card:hover,
.public-site .hospital-card:hover,
.public-site .trust-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.09); transform: translateY(-2px); }

/* ── Login panel (bottom sign-in) — refined to match ────── */
.public-site .unified-login-section { background: var(--r-surface); }
.public-site .auth-panel.unified-panel {
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
}
.public-site .auth-brand strong { font-family: var(--r-display); color: var(--r-accent); }
.public-site .login-tab.active {
  color: var(--r-accent);
  border-bottom-color: var(--r-accent);
}
.public-site .login-submit-btn { background: var(--r-accent) !important; border-radius:10px !important; }

/* ── Footer ─────────────────────────────────────────────── */
.public-site .site-footer { background: var(--r-ink); }
.public-site .site-footer a:hover { color:#fff; }

/* ── Accent-color for any leftover green tokens on landing ─ */
.public-site .eyebrow,
.public-site .accent-text { color: var(--r-accent); }

/* ============================================================
   READABILITY FIX — portal sign-in buttons
   Ensure both Patient and Provider nav buttons have strong
   contrast against the refined palette.
   ============================================================ */
.public-site .nav-login {
  color: var(--r-accent) !important;          /* readable green text */
  background: var(--r-accent-lt) !important;  /* light green bg */
  font-weight: 600;
}
.public-site .nav-login:hover {
  background: #d8ebe0 !important;
  color: #235438 !important;
}
/* Patient button stays solid green with WHITE text (high contrast) */
.public-site .nav-login.patient-login-btn {
  background: var(--r-accent) !important;
  color: #ffffff !important;
}
.public-site .nav-login.patient-login-btn:hover {
  background: #235438 !important;
  color: #ffffff !important;
}

/* If the patient PORTAL area text is dark-on-dark, force readable */
.public-site .login-tab { color: var(--r-ink-60) !important; }
.public-site .login-tab.active { color: var(--r-accent) !important; }
.public-site .tab-description,
.public-site .auth-tagline { color: var(--r-ink-60) !important; }
.public-site .login-form label { color: var(--r-ink) !important; }

/* ============================================================
   NEW SECTIONS — Why Different, Consortium, Roadmap
   ============================================================ */
.public-site .section-green {
  background: var(--r-accent);
  color: #fff;
}
.public-site .section-green .eyebrow { color: var(--r-gold); }
.public-site .section-green p { color: rgba(255,255,255,.78); }

/* Why-different grid */
.public-site .diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.public-site .diff-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 22px 20px;
  transition: transform .2s, background .2s;
}
.public-site .diff-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); }
.public-site .diff-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(200,168,75,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 14px;
}
.public-site .diff-card h3 { color: #fff; font-size: 1rem; }
.public-site .diff-card p { color: rgba(255,255,255,.65); font-size: .86rem; margin-top: 6px; }

/* Consortium tags */
.public-site .consortium-tags {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px;
}
.public-site .ca-tag {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-family: var(--r-mono);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .03em;
  padding: 8px 16px; border-radius: 6px;
}

/* Roadmap grid */
.public-site .roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 40px;
}
.public-site .rm-card {
  background: var(--r-gold-lt);
  border: 1px solid rgba(200,168,75,.25);
  border-radius: 12px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.public-site .rm-pill {
  display: inline-block; width: fit-content;
  font-family: var(--r-mono);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--r-gold); color: #fff;
  padding: 3px 9px; border-radius: 4px; margin-bottom: 4px;
}
.public-site .rm-card h3 { color: var(--r-ink); font-size: .92rem; }
.public-site .rm-card p { color: var(--r-ink-60); font-size: .8rem; }

@media (max-width: 1024px) {
  .public-site .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .public-site .roadmap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .public-site .diff-grid,
  .public-site .roadmap-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FIXES — round 2 (login tab contrast, spacing, button polish)
   ============================================================ */

/* Active login tab: white text on solid green (was dark-on-dark) */
.public-site .login-tab.active {
  background: var(--r-accent) !important;
  color: #ffffff !important;
}
.public-site .login-tab.active i { color:#ffffff !important; }
.public-site .login-tab:not(.active) {
  color: var(--r-ink-60) !important;
  background: transparent !important;
}

/* Spacing between the M brand mark and "MELLOW" + "Sign in to your portal" */
.public-site .auth-brand { gap: 12px !important; align-items: center; }
.public-site .auth-brand strong { margin-left: 2px; }
.public-site .auth-tagline { margin-top: 14px !important; }

/* Nav brand: space between M mark and MELLOW wordmark */
.public-site .site-brand { gap: 12px !important; }

/* Nav login buttons — cleaner, with readable icons */
.public-site .nav-login {
  gap: 6px;
  padding: 9px 16px !important;
  font-weight: 600;
}
.public-site .nav-login i {
  width: 16px; height: 16px;
  stroke-width: 2.2;
}
.public-site .nav-login.patient-login-btn i { color:#fff !important; }
.public-site .nav-login:not(.patient-login-btn) i { color: var(--r-accent) !important; }

/* Provider nav button: give it a subtle outline so it reads as a button */
.public-site .nav-login:not(.patient-login-btn) {
  border: 1.5px solid rgba(44,110,73,.25) !important;
}

/* "Learn more" text link for the sections where we removed the sign-in button */
.public-site .learn-more-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--r-accent); font-weight: 600; font-size: .9rem;
  cursor: pointer;
}
.public-site .learn-more-link:hover { color:#235438; text-decoration: underline; }
.public-site .learn-more-link i { width:16px; height:16px; }