/* =====================================================================
   PeptideDx — shared brand styles for landing + dashboard
   Palette: deep indigo + diagnostic teal on slate. (Rebrand of the
   original navy/blue/gold advisor theme.)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --pdx-indigo:#4F46E5;
  --pdx-indigo-dark:#4338CA;
  --pdx-indigo-darker:#3730A3;
  --pdx-indigo-light:#EEF0FF;
  --pdx-teal:#0D9488;
  --pdx-teal-light:#CCFBF1;
  --pdx-ink:#0B1020;
  --pdx-ink-2:#070912;
  --pdx-slate:#364151;
  --pdx-slate-soft:#64748B;
  --pdx-border:#E2E6EF;
  --pdx-bg:#F5F7FB;
  --pdx-white:#FFFFFF;
  --pdx-success:#059669;
  --pdx-danger:#DC2626;
  --pdx-danger-bg:#FEE2E2;
  --shadow-sm:0 1px 2px rgba(11,16,32,.06);
  --shadow-md:0 6px 18px rgba(11,16,32,.09);
  --shadow-lg:0 18px 44px rgba(11,16,32,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--pdx-bg);color:var(--pdx-ink);line-height:1.6;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--pdx-indigo);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.serif{font-family:'Cormorant Garamond',Georgia,serif}

/* ---- Brand mark ---- */
.pdx-brand{display:flex;align-items:center;gap:12px}
.pdx-mark{width:42px;height:42px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--pdx-indigo) 0%,var(--pdx-teal) 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  font-family:'Cormorant Garamond',serif;font-size:1.4rem;letter-spacing:-.02em;
  box-shadow:0 6px 16px rgba(79,70,229,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.pdx-wordmark{font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:var(--pdx-ink)}
.pdx-wordmark .dx{color:var(--pdx-teal)}
.pdx-wordmark.on-dark{color:#fff}

/* ---- Top nav ---- */
.pdx-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--pdx-border)}
.pdx-nav .inner{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px}
.pdx-nav .spacer{flex:1}
.pdx-nav a.navlink{color:var(--pdx-slate);font-weight:500;font-size:.9rem;padding:8px 10px;border-radius:8px}
.pdx-nav a.navlink:hover{background:var(--pdx-indigo-light);color:var(--pdx-indigo-dark)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:none;
  border-radius:9px;font-size:.92rem;font-weight:600;cursor:pointer;transition:.18s ease;font-family:inherit}
.btn-primary{background:var(--pdx-indigo);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.28)}
.btn-primary:hover{background:var(--pdx-indigo-dark);transform:translateY(-1px)}
.btn-teal{background:var(--pdx-teal);color:#fff}
.btn-teal:hover{background:#0B7C72;transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--pdx-slate);border:1px solid var(--pdx-border)}
.btn-ghost:hover{background:var(--pdx-bg);border-color:var(--pdx-slate-soft)}
.btn-ghost.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:8px 14px;font-size:.84rem}
.btn-danger{background:var(--pdx-danger-bg);color:var(--pdx-danger)}
.btn-danger:hover{background:#fca5a5}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---- Cards / panels ---- */
.card{background:#fff;border:1px solid var(--pdx-border);border-radius:16px;box-shadow:var(--shadow-md)}
.eyebrow{font-size:.72rem;font-weight:700;color:var(--pdx-indigo);text-transform:uppercase;letter-spacing:.16em}
.muted{color:var(--pdx-slate-soft)}

/* ---- Forms ---- */
.field{margin-bottom:14px;text-align:left}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--pdx-slate);margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--pdx-border);border-radius:10px;
  font-size:.95rem;font-family:inherit;color:var(--pdx-ink);background:#fff}
.field input:focus{outline:none;border-color:var(--pdx-indigo);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.form-error{background:var(--pdx-danger-bg);color:#991b1b;border:1px solid #fca5a5;border-radius:9px;
  padding:10px 12px;font-size:.84rem;margin-bottom:12px;display:none}
.form-error.show{display:block}

/* ---- Modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,16,32,.5);backdrop-filter:blur(3px);
  z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex;animation:pdxFade .2s ease}
.modal{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:420px;padding:30px;position:relative}
.modal .close-x{position:absolute;top:16px;right:18px;font-size:1.3rem;color:var(--pdx-slate-soft);cursor:pointer;line-height:1}
@keyframes pdxFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ---- Research-use banner / disclaimer ---- */
.pdx-disclaimer{background:var(--pdx-ink);color:rgba(226,232,240,.8);border-radius:14px;padding:18px 22px;
  font-size:.78rem;line-height:1.6}
.pdx-disclaimer strong{color:var(--pdx-teal);display:block;text-transform:uppercase;letter-spacing:.06em;
  font-size:.7rem;margin-bottom:6px}

/* ---- Footer ---- */
.pdx-footer{text-align:center;padding:34px 0;color:var(--pdx-slate-soft);font-size:.8rem}
.pdx-footer .fmark{color:var(--pdx-teal);font-weight:700;letter-spacing:.02em}