/* home.css — front page hero + tool cards. Pairs with site.css, which provides
   the tokens, body/starfield, header, footer and nav; this file only adds the
   landing-specific layout. Loaded after site.css. */
:root { --blue: #6fb3d6; }

.wordmark { display: block; margin-top: 2px; font-size: 22px; font-weight: 650; letter-spacing: -0.4px; color: var(--ink); }

main.home { max-width: 940px; margin: 0 auto; padding: 4px 28px 56px; }

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 244px; gap: 28px;
  align-items: center; padding: 44px 0 40px;
}
.hero .kick { font: 500 10.5px/1 var(--mono); letter-spacing: 2.4px; text-transform: uppercase; color: var(--beacon); margin: 0; }
.hero-title { font-size: 33px; font-weight: 650; letter-spacing: -0.6px; line-height: 1.12; margin: 15px 0 0; color: #f3f6fc; max-width: 20ch; }
.hero .lede { color: var(--dim); font-size: 15.5px; line-height: 1.62; margin: 16px 0 0; max-width: 48ch; }
.hero .sky { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero .sky { justify-self: center; max-width: 280px; margin-top: 6px; }
}

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
.tool-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 22px 20px; transition: border-color .15s;
}
.tool-card:hover { border-color: var(--line-bright); }
.tool-card .top { display: flex; align-items: center; gap: 10px; }
.tool-card .ic { width: 22px; height: 22px; flex: 0 0 auto; }
.tool-card .kick { font: 500 10.5px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.tool-card h3 { font-size: 18px; font-weight: 650; margin: 14px 0 0; color: #eef2f9; }
.tool-card p { color: var(--dim); font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; }
.tool-card .meta { font: 500 11px var(--mono); color: #5f6a85; margin: 15px 0 0; }
.tool-card .cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 650; font-size: 14px; }
.tool-card .cta svg { width: 15px; height: 15px; }
.tool-card:hover .cta svg { transform: translateX(2px); transition: transform .15s; }
.tc-forecast .ic, .tc-forecast .cta { color: var(--beacon); }
.tc-convert .ic, .tc-convert .cta { color: var(--blue); }

footer .grow { margin-left: auto; }