/* Medence marketing site — design tokens shared with the app. */
:root {
  --page:#F7F6F3; --card:#FFFFFF; --ink:#0C1B3A; --muted:#62708A;
  --line:#E7E5E0; --blue:#2563EB; --blue-soft:#E7EEFF; --navy:#101E45;
  --green:#16A34A; --purple:#7C3AED; --coral:#E11D48;
  --shadow:0 1px 3px rgba(15,30,69,.07), 0 4px 14px rgba(15,30,69,.05);
  --shadow-lg:0 1px 3px rgba(15,30,69,.07), 0 16px 40px rgba(15,30,69,.12);
  --r:16px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:linear-gradient(180deg,#EBEFF9 0%, var(--page) 560px); color:var(--ink);
  font:16px/1.55 Manrope, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }

/* nav */
.nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:1rem; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand svg { width:38px; height:38px; }
.wordmark { font-size:1.16rem; font-weight:800; letter-spacing:.08em; color:var(--navy); }
.wordmark .ence { color:var(--blue); }
.nav-links { display:flex; align-items:center; gap:26px; font-size:.9rem; font-weight:600; color:#3D4C6B; }
.nav-links a { color:inherit; text-decoration:none; }
.nav-links a:hover { color:var(--blue); }
.nav-links .login { color:var(--muted); }
.btn { display:inline-block; border:0; cursor:pointer; font:inherit; font-weight:700; text-decoration:none;
  background:var(--blue); color:#fff; padding:.8rem 1.4rem; border-radius:12px;
  box-shadow:0 4px 14px rgba(37,99,235,.25); }
.btn:hover { background:#1D4ED8; }
.btn.slim { padding:.6rem 1.05rem; font-size:.9rem; box-shadow:none; }
.mobile-cta { display:none; }

/* hero */
.hero { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; padding:38px 0 26px; }
#wave { position:absolute; left:50%; transform:translateX(-50%); bottom:-40px; width:100vw; max-width:1400px; height:280px; pointer-events:none; }
.hero > div { position:relative; }
.hero h1 { font-size:clamp(2rem, 4.2vw, 2.9rem); font-weight:800; line-height:1.13; letter-spacing:-.024em; margin:0; text-wrap:balance; }
.tagline { font-size:clamp(1.1rem, 2vw, 1.35rem); font-weight:800; color:var(--blue); margin:.9rem 0 0; }
.hero .sub { font-size:1.05rem; color:var(--muted); max-width:30rem; margin:1.1rem 0 1.4rem; }
.hero .micro { font-size:.86rem; color:var(--muted); margin-top:.8rem; }

/* answer card */
.proof-label { font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--muted); margin:0 0 .5rem 4px; }
.answer-card { position:relative; background:var(--card); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:24px 26px; display:flex; flex-direction:column; gap:15px; }
.proof-glow { position:absolute; inset:-30px; background:radial-gradient(closest-side, rgba(37,99,235,.13), rgba(37,99,235,0)); pointer-events:none; }
.q-chip { align-self:flex-start; background:var(--blue-soft); color:var(--blue); font-size:.85rem; font-weight:700; padding:.5rem .9rem; border-radius:999px; }
.f-lbl { font-size:.69rem; font-weight:800; letter-spacing:.09em; color:var(--muted); margin:0 0 .2rem; }
.f-answer { font-size:.97rem; font-weight:600; margin:0; }
.f-body { font-size:.88rem; color:#3D4C6B; margin:0; }
.src-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.src-doc { font-size:.85rem; font-weight:700; color:var(--blue); }
.pill-ok { background:#E9F7EE; color:var(--green); font-size:.72rem; font-weight:800; padding:.15rem .55rem; border-radius:999px; }
.conf-row { display:flex; gap:28px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; margin-right:6px; }

/* section scaffolding */
section { padding:44px 0 8px; }
.eyebrow { font-size:.8rem; font-weight:800; letter-spacing:.09em; color:var(--muted); margin:0 0 1rem; }
h2 { font-size:clamp(1.5rem, 3vw, 2.1rem); font-weight:800; line-height:1.18; letter-spacing:-.02em; margin:0 0 .7rem; text-wrap:balance; }
.lede { font-size:1.02rem; color:var(--muted); max-width:46rem; margin:0 0 1.6rem; }

/* knowledge / connect band */
#why { padding-top:30px; }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:1.6rem 0 0; }
.chip { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; font-size:.88rem; font-weight:700; color:#3D4C6B; box-shadow:var(--shadow); }
.converge { display:flex; flex-direction:column; align-items:center; gap:6px; margin:.9rem 0 0; }
.converge svg.lines { width:220px; height:34px; }
.hub { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.65rem 1.1rem; box-shadow:var(--shadow); }
.hub svg { width:28px; height:28px; }
.hub span { font-weight:800; letter-spacing:.08em; color:var(--navy); font-size:.95rem; }
.hub span .ence { color:var(--blue); }
.to-rep { font-size:.95rem; font-weight:700; color:var(--muted); margin:.5rem 0 0; }
.enhance { text-align:center; font-size:1rem; color:#3D4C6B; max-width:44rem; margin:1.4rem auto 0; }
.enhance strong { color:var(--ink); }
.caps-band { background:var(--navy); border-radius:var(--r); padding:26px 34px; margin-top:1.8rem;
  font-size:clamp(1rem, 2vw, 1.25rem); font-weight:800; letter-spacing:.04em; color:#fff; line-height:1.5; }
.caps-band .accent { color:#7FA5F8; }

/* four experiences */
.tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.tile { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:22px 20px; border-left:4px solid var(--blue); }
.tile.learn { border-color:var(--green); }
.tile.practice { border-color:var(--purple); }
.tile.territory { border-color:var(--coral); }
.tile .tag { display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--blue); margin-bottom:.6rem; }
.tile.learn .tag { color:var(--green); } .tile.practice .tag { color:var(--purple); } .tile.territory .tag { color:var(--coral); }
.tile h3 { font-size:.98rem; font-weight:800; margin:0 0 .35rem; }
.tile p { font-size:.85rem; color:var(--muted); margin:0; }
.strip { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); border-left:4px solid var(--navy);
  padding:16px 22px; margin-top:18px; font-size:.88rem; color:var(--muted); }
.strip strong { color:var(--ink); font-size:.92rem; }

/* sales leaders */
.panels { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.panel { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:24px 26px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.panel-head h3 { font-size:1rem; font-weight:800; margin:0; }
.panel-head span { font-size:.76rem; font-weight:700; color:var(--muted); }
.gap { margin-bottom:.9rem; }
.gap .row { display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.35rem; }
.gap .row b { font-weight:700; }
.gap .row .pct { font-weight:800; }
.bar { height:8px; background:#EEF2F9; border-radius:999px; }
.bar i { display:block; height:8px; border-radius:999px; }
.most-missed { border-top:1px solid var(--line); padding-top:.85rem; font-size:.83rem; color:var(--muted); }
.most-missed b { color:var(--ink); }
.rep-head { display:flex; align-items:center; gap:12px; margin-bottom:1rem; }
.avatar { width:42px; height:42px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; flex:0 0 auto; }
.rep-head .who b { display:block; font-size:.98rem; }
.rep-head .who span { font-size:.78rem; font-weight:700; color:var(--muted); }
.badge { margin-left:auto; background:#FFF1F2; color:var(--coral); font-size:.7rem; font-weight:800; padding:.25rem .6rem; border-radius:999px; }
.care { display:flex; gap:12px; border-top:1px solid var(--line); padding-top:.9rem; margin-top:1rem; }
.care > div { flex:1; }
.care .d-lbl { font-size:.72rem; font-weight:700; color:var(--muted); margin-bottom:.25rem; }
.care .bar { height:6px; } .care .bar i { height:6px; }

/* persona collage */
.personas { display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin:1.8rem 0 0; }
.personas figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.personas img { width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:var(--shadow-lg); }
.personas figcaption { font-size:.8rem; font-weight:700; color:#3D4C6B; }
.persona-note { text-align:center; font-size:.9rem; color:var(--muted); margin:1.3rem auto 1.5rem; max-width:36rem; }
.cta-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cta-row .micro { font-size:.86rem; color:var(--muted); }

/* pricing */
.pricing-band { background:var(--navy); border-radius:var(--r); padding:34px 38px; display:flex; align-items:center; gap:36px; }
.pricing-band .num { font-size:clamp(1.6rem, 3vw, 2.4rem); font-weight:800; color:#fff; letter-spacing:-.02em; }
.pricing-band .num small { font-size:1rem; font-weight:700; color:#B6C3DD; margin-left:8px; }
.pricing-band p { font-size:.9rem; color:#B6C3DD; margin:.4rem 0 0; max-width:34rem; }

/* footer */
footer { display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:56px; padding:30px 0 36px; }
footer .fine { font-size:.82rem; color:var(--muted); max-width:30rem; }
footer .nav-links { gap:20px; font-size:.85rem; }

/* security page */
.sec-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.sec-card { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:22px 22px; border-top:4px solid var(--blue); }
.sec-card:nth-child(2) { border-color:var(--green); }
.sec-card:nth-child(3) { border-color:var(--navy); }
.sec-card:nth-child(4) { border-color:var(--purple); }
.sec-card:nth-child(5) { border-color:var(--coral); }
.sec-card:nth-child(6) { border-color:var(--green); }
.sec-card h3 { font-size:.98rem; font-weight:800; margin:0 0 .4rem; }
.sec-card p { font-size:.88rem; color:var(--muted); margin:0; }
.road { display:flex; flex-direction:column; gap:16px; }
.road-item { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:20px 24px; }
.road-head { display:flex; align-items:center; gap:12px; margin-bottom:.45rem; flex-wrap:wrap; }
.road-head b { font-size:1rem; }
.status-chip { background:var(--blue-soft); color:var(--blue); font-size:.72rem; font-weight:800; padding:.25rem .65rem; border-radius:999px; letter-spacing:.04em; }
.status-chip.alt { background:#FDF1E3; color:var(--amber, #B45309); }
.road-item p { font-size:.9rem; color:#3D4C6B; margin:0; }
@media (max-width: 900px) { .sec-grid { grid-template-columns:1fr; } }

/* modal */
dialog { border:0; border-radius:var(--r); box-shadow:var(--shadow-lg); padding:0; max-width:26rem; width:calc(100% - 40px); }
dialog::backdrop { background:rgba(12,27,58,.45); }
.modal-body { padding:28px; }
.modal-body h3 { margin:0 0 .4rem; font-size:1.2rem; font-weight:800; }
.modal-body p { margin:0 0 1.1rem; font-size:.92rem; color:var(--muted); }
.modal-body input { width:100%; font:inherit; padding:.75rem .9rem; border:1px solid var(--line); border-radius:12px; margin-bottom:.8rem; }
.modal-body input:focus { outline:2px solid var(--blue); outline-offset:1px; }
.modal-body .btn { width:100%; text-align:center; }
.modal-err { color:var(--coral); font-size:.85rem; min-height:1.2em; margin:.5rem 0 0; }
.modal-fine { font-size:.76rem; color:var(--muted); margin-top:.8rem; }

/* responsive */
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; gap:34px; padding-top:26px; }
  .tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .panels { grid-template-columns:1fr; }
  .personas { gap:16px; }
  .personas img { width:84px; height:84px; }
  .pricing-band { flex-direction:column; align-items:flex-start; gap:18px; }
  .nav-links { display:none; }
  .mobile-cta { display:inline-block; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns:1fr; }
  .conf-row { flex-direction:column; gap:12px; }
  .care { flex-wrap:wrap; } .care > div { flex:1 1 40%; }
}