/* ---- OrdersUp catalogue — shared styles (palette + cards + views) ---- */
:root{
  --navy:#0A2540; --teal:#00BFA6; --emerald:#10B981; --amber:#F59E0B;
  --red:#EF4444; --blue:#0686D4; --ink:#0A2540; --muted:#5b6b7a;
  --line:#dde5ec; --bg:#f5f8fa; --card:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.6 "Josefin Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;font-weight:700;letter-spacing:-.01em}
section{padding:64px 0;border-bottom:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;color:var(--teal);margin:0 0 12px}

/* hero (landing) */
.hero{background:linear-gradient(135deg,var(--navy),#0d3050);color:#eaf2f8;border-bottom:none}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:0 0 16px;color:#fff}
.hero p.lead{font-size:1.25rem;max-width:760px;color:#c4d6e4;margin:0 0 8px}
.hero .tag{display:inline-block;margin-top:22px;background:var(--teal);color:#04332c;
  font-weight:700;padding:9px 16px;border-radius:999px;font-size:.95rem}

/* view switcher */
.switch{display:inline-flex;background:#e7eef4;border-radius:999px;padding:4px;gap:4px;margin:6px 0 26px;flex-wrap:wrap}
.switch button{border:0;background:transparent;font:inherit;font-weight:600;font-size:.9rem;
  color:var(--muted);padding:8px 16px;border-radius:999px;cursor:pointer}
.switch button.active{background:var(--navy);color:#fff}

.group-label{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--navy);margin:30px 0 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.group-label small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}

/* cards */
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.uc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column}
.uc .head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.uc .num{font-size:.78rem;font-weight:700;color:var(--teal)}
.uc h3{font-size:1.05rem;margin:0}
.uc p{color:var(--muted);font-size:.92rem;margin:.3em 0 12px;flex:1}
.uc .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:auto}
.badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:6px}
.b-live{background:var(--emerald);color:#fff}
.b-mock{background:#eef0f3;color:var(--muted)}
.b-prod{background:var(--teal);color:#04332c}
.b-prod-part{background:transparent;border:1.5px solid var(--teal);color:#03806f;padding:2px 7px}
.b-mature{background:#e7f1ea;color:#2f6b3f}
.b-emerging{background:#fdf3e0;color:#9a6a17}
.b-build{background:#eceaf6;color:#5b4b9a}
.wsjf{margin-left:auto;font-size:.78rem;color:var(--muted)}
.uc.diff{border:2px solid var(--navy)}
.uc-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px}
.uc .demo-link{font-weight:700;font-size:.9rem}

footer{padding:34px 0;color:var(--muted);font-size:.82rem;text-align:center}
@media print{nav.top{display:none}section{break-inside:avoid}}