/* Landing v3, tool-first chooser (spec 2026-09-15 §4, §5): the home page and
   /start. Same-origin only, no @import. Seven equal tiles with no primary
   styling; four columns on desktop, two on a phone. Consumes the shared
   tokens (--surface-*, --text-*, --control, --link) like landing-v2.css. */
.tf {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0 64px;
  direction: rtl;
  text-align: center;
  color: var(--text-default);
  font-family: var(--font-body);
}
.tf * { box-sizing: border-box; }
.tf-h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.2;
  margin: 0 0 12px;
}
.tf-question {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: var(--fw-semibold, 600);
  margin: 0 0 8px;
}
/* One line bridging the question to the tiles for a first-time visitor:
   pick what built the project, we take it from there. */
.tf-lead { color: var(--text-muted); margin: 0 0 24px; }
/* Flex-wrap + center so the short last row (7 tiles = 4 + 3) sits centered
   under the full row instead of pinning to the start edge. The flex items are
   the <li> wrappers (NOT the <a>.tf-tile), so the basis goes there: a
   percentage basis with no grow and no shrink locks four per row on desktop
   and two on a phone (otherwise shrink crams all seven onto one line). */
.tf-tiles {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
}
.tf-tiles > li { flex: 0 0 calc(25% - 9px); display: flex; }
@media (max-width: 520px) {
  .tf-tiles > li { flex-basis: calc(50% - 6px); }
}
.tf-tile {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; min-height: 6.5rem; padding: 0.9rem 0.6rem;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
  background: var(--surface-raised); color: var(--text-default); text-decoration: none;
}
.tf-tile:hover { border-color: var(--control); }
.tf-tile:focus-visible { outline: 3px solid var(--control); outline-offset: 3px; }
.tf-mark { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
/* The monogram marks (B44, v0, WP) carry the wizard's class name. */
.tf .sw-tile-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--text-default); color: var(--surface-raised);
  font-weight: var(--fw-bold, 700); font-size: 0.78rem; letter-spacing: 0.02em;
}
.tf-label { font-size: 0.95rem; font-weight: var(--fw-semibold, 600); }
.tf-reassure { color: var(--text-muted); margin: 0 0 16px; }
.tf-disclaimer { color: var(--text-muted); font-size: 13px; opacity: 0.75; margin: 0 0 16px; }
.tf-links {
  display: flex; flex-wrap: wrap; gap: var(--space-4, 1rem); justify-content: center;
  color: var(--text-muted); font-size: 15px; margin: 0;
}
.tf-links:empty { display: none; }
.tf-links a { color: var(--link); }