/* Landing page (index.html): the front door to the three tools. A website page, so it uses the site's reading sizes. */
body { font-size: var(--fs-md); }
.wrap { width: min(100% - 2 * var(--gutter), var(--w-content)); margin: 0 auto; }

.home-back { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin: 0 auto; padding-top: var(--s-5); }
.home-back .wordmark { color: var(--text-2); white-space: nowrap; }
.home-back .wordmark:hover { color: var(--text); }

.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-7); align-items: center; padding: var(--s-9) 0 var(--s-8); }
.hero::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; pointer-events: none; background-image: var(--grid-dot); background-size: var(--grid-size) var(--grid-size); mask-image: radial-gradient(ellipse at center, var(--bg) 30%, transparent 78%); }
.hero h1 { margin: 0 0 var(--s-5); font-size: var(--fs-4xl); }
.lede { margin: 0 0 var(--s-6); max-width: 34em; font-size: var(--fs-lg); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: var(--bw) solid var(--line); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-5); padding-bottom: var(--s-8); }
.card { padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; text-decoration: none; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.card:hover { border-color: var(--line-strong); background: var(--surface-2); box-shadow: var(--shadow-raise); transform: translateY(calc(-2 * var(--bw))); color: inherit; }
.card .n { font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-2); }
.card h2 { margin: 0; font: var(--fw-medium) var(--fs-xl)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text); }
.card p { margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.55; }
.card .go { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--brass); }
a.card:hover .go { color: var(--brass-bright); }

.facts { border-top: var(--bw) solid var(--line); padding: var(--s-7) 0 var(--s-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-6); }
.facts h3 { margin: 0 0 var(--s-2); font: var(--fw-semibold) var(--fs-md)/1.3 var(--font-ui); letter-spacing: 0; color: var(--text); }
.facts p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; text-wrap: pretty; }

.site-footer { border-top: var(--bw) solid var(--line); padding: var(--s-6) 0 var(--s-7); color: var(--text-3); font-size: var(--fs-sm); display: flex; gap: var(--s-3) var(--s-6); flex-wrap: wrap; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--brass-bright); }
.site-footer .links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

@media (max-width: 800px) { .hero { grid-template-columns: 1fr; padding: var(--s-7) 0 var(--s-6); gap: var(--s-6); } }