/* CSMART Labs — shared styles. Palette + fonts mirror the CompDB demo for a cohesive product feel. */
:root{
  --navy:#0f2236; --steel:#1d3e5e; --ink:#23303c; --mut:#6c7a89; --text2:#4a5560;
  --brass:#9a7b3f; --brass-soft:#c4a35e;
  --bg:#f4f2ec; --panel:#ffffff;
  --line:#e7e3d8; --line2:#ddd8c9;
  --ok:#2f7d54; --warn:#a8651d;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter','Segoe UI',system-ui,Arial,sans-serif;
  --shadow:0 12px 32px rgba(15,34,54,.09);
  --shadow-sm:0 2px 10px rgba(15,34,54,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);min-height:100vh;
  display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;font-feature-settings:"liga" 1}

/* ---- header ---- */
.site-header{background:linear-gradient(120deg,var(--navy),var(--steel));padding:16px 28px;
  border-bottom:1px solid rgba(196,163,94,.4);box-shadow:0 1px 0 rgba(196,163,94,.16),var(--shadow-sm)}
.site-header a{display:inline-block;border-radius:8px}
.site-header a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,163,94,.55)}
.site-header .logo{height:30px;width:auto;display:block}

/* ---- main / hero ---- */
main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:56px 24px 48px}
.hero{margin-bottom:38px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,6vw,52px);color:var(--navy);
  margin:0;line-height:1.05;letter-spacing:.2px}
.hero h1 span{color:var(--brass);font-style:italic}
.hero .lede{font-size:clamp(15px,2.4vw,18px);color:var(--text2);margin:14px 0 0;max-width:56ch;line-height:1.55}

/* ---- app cards ---- */
.apps ul{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{display:flex;flex-direction:column;height:100%;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--brass-soft);border-radius:14px;
  padding:24px 22px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:.18s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,163,94,.5),var(--shadow)}
.card.soon{border-left-color:var(--line2)}
.card-name{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--navy);margin:11px 0 0;letter-spacing:.1px}
.card-desc{font-size:13.5px;color:var(--text2);line-height:1.5;margin:8px 0 0}
.card-go{margin-top:auto;padding-top:18px;font-size:13px;font-weight:600;color:var(--brass)}
.card.soon .card-go{color:var(--mut)}

/* ---- proposals section ---- */
.proposals{margin-top:46px;padding-top:40px;border-top:1px solid var(--line)}
.section-heading{font-family:var(--serif);font-weight:500;font-size:clamp(24px,4vw,32px);color:var(--navy);
  margin:0;letter-spacing:.1px}
.section-heading span{color:var(--brass);font-style:italic}
.section-lede{font-size:14px;color:var(--text2);line-height:1.5;margin:8px 0 22px;max-width:56ch}
.card.proposal{border-left-color:var(--steel)}

/* ---- status badge ---- */
.badge{align-self:flex-start;border-radius:999px;padding:4px 12px;font-size:10.5px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase}
.badge.ok{background:#e6f3ea;color:var(--ok)}
.badge.soon{background:#faecd9;color:var(--warn)}
.badge.prop{background:#e7ecf3;color:var(--steel)}
.badge.guide{background:#f4ecd9;color:var(--brass)}

/* ---- coming-soon stub ---- */
.stub{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  max-width:560px;margin:0 auto;padding-top:8vh}
.stub h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,7vw,48px);color:var(--navy);margin:12px 0 0}
.stub h1 span{color:var(--brass);font-style:italic}
.stub .lede{font-size:16px;color:var(--text2);line-height:1.55;margin:12px 0 0}
.back{display:inline-block;margin-top:26px;font-size:14px;font-weight:600;color:var(--brass);
  text-decoration:none;border-radius:8px;padding:2px 2px}
.back:hover{text-decoration:underline}
.back:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,163,94,.5)}

/* ---- footer ---- */
.site-footer{padding:22px 24px;text-align:center;color:var(--mut);font-size:12px;border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  .card{transition:none}
  .card:hover{transform:none}
}