/* Courses area — tool-page specifics. Reuses theme.css tokens:
   --ink, --ink-2, --muted, --accent, --lime, --rule, --paper, --radius, --sp-* */

.hero--compact { padding-bottom: var(--sp-7); }
.hero--compact .hero__display { margin-top: var(--sp-4); }

.link-arrow--back::before { content: "← "; }

/* Hub: tools landscape grouped by category */
.courses-intro { max-width: 60ch; margin-bottom: var(--sp-7); }

.tool-group { margin-top: var(--sp-8); }
.tool-group__head { margin-bottom: var(--sp-5); }
.tool-group__title { font-size: 1.4rem; margin: 0 0 var(--sp-2); }
.tool-group__blurb { color: var(--muted); margin: 0; max-width: 56ch; }
.tool-vendor { color: var(--muted); font-weight: 400; }

/* Per-tool: two columns */
.tool-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
}
@media (max-width: 720px) { .tool-cols { grid-template-columns: 1fr; } }
.tool-col__head { font-size: 1.1rem; margin: 0 0 var(--sp-4); }

.list-ticks { list-style: none; padding: 0; margin: 0; }
.list-ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.list-ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 700;
}

/* Per-tool: tier table */
.tier-table {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.tier {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
}
@media (max-width: 560px) { .tier { grid-template-columns: 1fr; gap: var(--sp-1); } }
.tier__name { font-weight: 600; color: var(--ink); }
.tier__note { color: var(--ink-2); }

.tool-privacy {
  margin-top: var(--sp-5);
  max-width: 70ch;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Per-tool: course block */
.tool-course { max-width: 64ch; }
.tool-course__title { font-size: 1.8rem; margin: var(--sp-4) 0 var(--sp-3); }

/* Hub CTA */
.courses-cta { max-width: 56ch; }