/* Shared styling for the Bend Made hub pages (root, /data/, /engagement/).
   Kept as one file so the three pages can't drift apart visually.
   Bend Made palette: Project Branding & Key Messages, June 2026. */
:root{
  color-scheme:light;
  --night:#002b3d; --river:#589ab0; --sun:#ecc94a; --clay:#b9614e;
  --cloud:#f8f7e6; --line:#e5e0cd; --muted:#5c7480;
  --ok:#217346; --ok-bg:#e6f2ea;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cloud);color:var(--night);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.55}
header.app{background:var(--night);color:#fff;padding:16px 24px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;border-bottom:3px solid var(--sun)}
.wordmark{display:inline-flex;align-items:center;background:var(--clay);color:#fff;font-weight:800;
  font-size:12px;letter-spacing:.6px;padding:9px 16px 9px 24px;
  clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0% 50%);text-transform:uppercase;white-space:nowrap}
header.app h1{font-size:17px;margin:0;font-weight:700;line-height:1.2}
header.app .sub{font-size:12px;opacity:.8}
header.app .right{margin-left:auto;font-size:12.5px;opacity:.85;text-align:right}
header.app a.up{color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;
  border:1px solid rgba(255,255,255,.45);padding:7px 14px;border-radius:7px;white-space:nowrap}
header.app a.up:hover{background:rgba(255,255,255,.12)}
main{max-width:940px;margin:0 auto;padding:30px 24px 70px}
.lede{font-size:16px;margin:0 0 28px;max-width:70ch}
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  margin:34px 0 14px;font-weight:700}
h2.sec:first-of-type{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
/* Category cards on the root hub. auto-FIT rather than auto-fill so two cards
   stretch to fill the row instead of huddling left beside an empty track; they
   drop to one column below roughly 700px. */
.grid.cats{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.grid.cats .tool{padding:24px 26px}
.grid.cats .tool h3{font-size:17px;margin-bottom:8px}
.tool{display:block;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:18px 20px;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.tool:hover{border-color:var(--river);transform:translateY(-1px)}
.tool h3{margin:0 0 6px;font-size:15.5px;font-weight:700}
.tool p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.tool .badges{margin-top:11px;display:flex;gap:6px;flex-wrap:wrap}
.b{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  letter-spacing:.3px;text-transform:uppercase}
.b.public{background:var(--ok-bg);color:var(--ok)}
.b.gated{background:#e5eff3;color:#2c6b85}
.b.soon{background:#f0ede2;color:var(--muted)}
.tool.soon{opacity:.62;pointer-events:none}
.empty{background:#fff;border:1px dashed var(--line);border-radius:11px;padding:26px;
  text-align:center;color:var(--muted);font-size:14px}
.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--river);
  border-radius:0 9px 9px 0;padding:14px 18px;margin-top:30px;font-size:13.5px;color:var(--muted)}
.note b{color:var(--night)}
footer.foot{max-width:940px;margin:0 auto;padding:0 24px 44px;color:var(--muted);font-size:12px}