/* LANDING / TOOL SELECTOR — builds on base.css + style.css tokens. No JS. */

.landing-hero{padding-block:clamp(var(--space-16), 12vw, var(--space-32)) var(--space-10);text-align:center}
.landing-hero h1{margin-inline:auto;max-width:20ch}
.landing-hero p.lede{margin-inline:auto;text-align:center}

/* selector */
.selector{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-12);padding-bottom:var(--space-16)}
.select-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);
  padding:clamp(var(--space-6), 4vw, var(--space-10));box-shadow:var(--shadow-md);
  transition:var(--transition);color:inherit;text-align:left;
}
.select-card::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--card-color, var(--color-accent));opacity:.7;transition:var(--transition)}
.select-card:hover{transform:translateY(-4px);border-color:var(--card-color, var(--color-accent));box-shadow:var(--shadow-lg)}
.select-card:hover::before{opacity:1}
.sc-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--radius-md);background:color-mix(in oklab, var(--card-color, var(--color-accent)) 16%, transparent);color:var(--card-color, var(--color-accent));margin-bottom:var(--space-2)}
.sc-kicker{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.18em;color:var(--card-color, var(--color-accent))}
.select-card h2{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em}
.select-card p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.55;max-width:42ch}
.sc-go{margin-top:auto;font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.04em;color:var(--card-color, var(--color-accent));display:inline-flex;align-items:center;gap:var(--space-2)}
.select-card:hover .sc-go{gap:var(--space-3)}

.card-timeline{--card-color:var(--c-arm)}
.card-compare{--card-color:var(--color-accent)}

@media (max-width:720px){
  .selector{grid-template-columns:1fr}
}