/* Shared styles for the hub page. Self-hosted fonts, no external origins. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700-latin.woff2') format('woff2');}

:root {
  --paper: #F4F6F7;
  --ink: #0E2438;
  --slate: #5C6E7B;
  --hair: #D7DDE1;
  --indigo-50: #f2f5ff;
  --indigo-200: #8fb3ea;
  --indigo-500: #2f44c4;
  --indigo-600: #303f9e;
  --card: #FFFFFF;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px 72px; }

.hub-head { border-bottom: 1px solid var(--hair); padding-bottom: 22px; margin-bottom: 24px; }
.ticker { font-size: 12px; letter-spacing: 0.14em; color: var(--indigo-500); text-transform: uppercase; font-weight: 600; }
h1 { font-size: 26px; font-weight: 700; margin: 6px 0 6px; letter-spacing: -0.01em; }
.sub { color: var(--slate); font-size: 14px; max-width: 560px; margin: 0; }

.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tool {
  display: block; background: var(--card); border: 1px solid var(--hair); border-radius: 12px;
  padding: 18px 20px; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(14,36,56,0.04); transition: border-color 0.15s ease, transform 0.15s ease;
}
.tool:hover { border-color: var(--indigo-200); transform: translateY(-1px); }
.tool-name { display: block; font-size: 16px; font-weight: 600; color: var(--indigo-600); margin-bottom: 4px; }
.tool-desc { display: block; font-size: 13.5px; color: var(--slate); }