/* The homepage (core/marketing.html): what Tailwind utilities don't draw
   well. The hero's overlapping cards, the free tools' two lists sharing one
   set of rows (subgrid), the small hills, the pine coach band around the
   tool demos (onboarding/css/tool_demos.css), the price rows. Classes start
   hm-. Approved mock: docs/mocks/homepage/round3/homepage.html. */

.hm-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 768px) { .hm-wrap { padding-inline: 40px; } }
.hm-band { background: var(--color-card); border-block: 1px solid var(--color-line); }
.hm-h1 { font-family: var(--font-serif); font-weight: 600; font-size: 38px; line-height: 1.06; letter-spacing: -.018em; text-wrap: balance; margin: 0; }
.hm-h2 { font-family: var(--font-serif); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; margin: 0; }
.hm-lead { font-size: 17px; line-height: 1.55; color: var(--color-muted); max-width: 34em; text-wrap: pretty; }
.hm-fine { font-size: 13px; line-height: 1.45; color: var(--color-faint); }
.hm-btn-lg { font-size: 16px; padding: 14px 26px; border-radius: 10px; }
.hm-link { color: var(--color-pine); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-mint-line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hm-link:hover { text-decoration-color: var(--color-mint); }
@media (min-width: 768px) {
  .hm-h1 { font-size: 52px; }
  .hm-h2 { font-size: 42px; }
  .hm-lead { font-size: 19px; }
}

/* ---- Hero ---- */
.hm-hero { padding-block: 40px 56px; }
.hm-hero-grid { display: grid; gap: 36px; }
.hm-ctas { display: grid; gap: 10px; margin-top: 28px; }
.hm-art { display: grid; }
.hm-art .ch-rcard { position: relative; z-index: 1; padding-bottom: 22px; box-shadow: 0 26px 50px -30px rgba(11, 20, 39, .38); }
.hm-next { position: relative; z-index: 2; margin: -20px 12px 0 28px; background: var(--color-card); border: 1px solid var(--color-line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 22px 44px -26px rgba(11, 20, 39, .42); }
.hm-next-alone { margin: 0; }
.hm-next-k { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--color-faint); }
.hm-next-date { font-family: var(--font-serif); font-size: 28px; font-weight: 600; line-height: 1.1; margin-top: 4px; }
.hm-next-in { font-size: 13.5px; color: var(--color-muted); }
.hm-next-what { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-line); font-size: 14.5px; line-height: 1.5; }
.hm-next-what b { color: var(--color-pine); font-weight: 600; }
.hm-art-note { margin-top: 14px; }
@media (min-width: 768px) {
  .hm-hero { padding-block: 76px 96px; }
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }
  .hm-ctas { display: flex; gap: 12px; }
  .hm-art .ch-rcard { padding-bottom: 32px; }
  .hm-next { margin: -26px -8px 0 96px; }
  .hm-art-note { margin-left: 96px; }
}

/* ---- The two free tools ---- */
.hm-free { padding-block: 56px 64px; }
.hm-two { display: grid; gap: 48px; margin-top: 32px; }
.hm-tool { display: grid; align-content: start; }
.hm-tool h3 { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.2; margin: 0; }
.hm-what { margin-top: 8px; color: var(--color-muted); max-width: 30em; }
.hm-list { margin-top: 22px; border-top: 1px solid var(--color-line); }
.hm-tool > .btn { margin-top: 24px; justify-self: start; }
/* Both columns share one set of rows, so the titles, the lists and the
   buttons sit on the same lines (owner, 2026-10-30). */
@media (min-width: 768px) {
  .hm-free { padding-block: 88px 96px; }
  .hm-two { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); column-gap: 64px; row-gap: 0; margin-top: 44px; }
  .hm-tool { grid-row: span 4; grid-template-rows: subgrid; }
}
.hm-lrow { display: grid; align-items: center; gap: 12px; min-height: 62px; padding: 9px 0; border-bottom: 1px solid var(--color-line); font-size: 14.5px; line-height: 1.35; }
.hm-sm { display: block; font-size: 12.5px; color: var(--color-muted); }
.hm-bd { display: block; font-weight: 600; }
.hm-lrow-ch { grid-template-columns: minmax(0, 1fr) 92px 56px; color: inherit; text-decoration: none; }
a.hm-lrow-ch:hover .hm-bd { color: var(--color-pine); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-mint-line); }
.hm-ln { text-align: right; font-weight: 700; color: var(--color-fix); font-variant-numeric: tabular-nums; }
.hm-hill { display: block; overflow: visible; }
.hm-hill-wash { fill: rgba(23, 138, 104, .14); }
.hm-hill-solid { fill: #178A68; }
.hm-hill-line { stroke: var(--color-fix); stroke-width: 1.5; stroke-dasharray: 3 2; }
.hm-hill-axis { stroke: var(--color-line-strong); stroke-width: 1; }
.hm-lrow-pl { grid-template-columns: 56px minmax(0, 1fr) auto; }
.hm-d { font-weight: 600; white-space: nowrap; align-self: start; padding-top: 9px; }
.hm-v { font-size: 13.5px; font-weight: 600; color: var(--color-pine); white-space: nowrap; }
.hm-v:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767.98px) {
  .hm-lrow-pl { grid-template-columns: 56px minmax(0, 1fr); row-gap: 4px; }
  .hm-v { grid-column: 2; }
}
/* The planner's colour per university (planner/css/planner.css .udot). */
.hm-udot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; transform: translateY(-1px); }
.hm-u0 { background: #3D6B99; } .hm-u1 { background: #2E8070; } .hm-u2 { background: #B07A2A; } .hm-u3 { background: #7A5AA6; }
.hm-u4 { background: #B04A6A; } .hm-u5 { background: #4F7F3A; } .hm-u6 { background: #8A6A55; } .hm-u7 { background: #2F7FA0; }
.hm-source { margin-top: 44px; font-family: var(--font-serif); font-size: 18px; line-height: 1.5; max-width: 46em; }
@media (min-width: 768px) { .hm-source { font-size: 20px; margin-top: 64px; } }

/* ---- The coach: a pine band (owner: as prominent as the free tools) ---- */
.hm-coach { background: var(--color-pine); color: #fff; padding-block: 64px 72px; scroll-margin-top: 56px; }
.hm-coach .hm-h2 { color: #fff; }
.hm-coach .hm-lead { color: rgba(255, 255, 255, .74); }
.hm-slice { margin-top: 56px; }
.hm-slice + .hm-slice { margin-top: 72px; }
.hm-slice .td { scroll-margin-top: 80px; }
.hm-coach-free { margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 16px; }
.hm-coach-free p { color: rgba(255, 255, 255, .8); font-size: 15.5px; max-width: 40em; }
.hm-coach-free .btn { justify-self: start; }
.hm-btn-mint { background: var(--color-mint); color: var(--color-pine); }
.hm-btn-mint:hover { background: var(--color-mint-hover); }
@media (min-width: 768px) {
  .hm-coach { padding-block: 104px 112px; }
  .hm-slice { margin-top: 72px; }
  .hm-slice + .hm-slice { margin-top: 104px; }
  .hm-coach-free { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: 96px; }
}

/* ---- Pricing ---- */
.hm-price { padding-block: 64px; border-top: 0; }
.hm-price-grid { display: grid; gap: 24px; }
.hm-prices { border-top: 1px solid var(--color-line); }
.hm-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--color-line); align-items: center; }
.hm-p-n { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hm-badge { font-size: 11.5px; font-weight: 700; color: var(--color-pine); background: var(--color-mint-tint); border-radius: 999px; padding: 2px 9px; }
.hm-p-amt { grid-column: 2; grid-row: 1; font-family: var(--font-serif); font-size: 24px; font-weight: 600; text-align: right; white-space: nowrap; }
.hm-p-amt small { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--color-muted); }
.hm-p-inc { grid-column: 1 / -1; font-size: 14px; color: var(--color-muted); max-width: 40em; }
.hm-p .btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
@media (min-width: 768px) {
  .hm-price { padding-block: 96px; }
  .hm-price-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .hm-p { grid-template-columns: minmax(0, 1fr) 120px 168px; gap: 4px 24px; }
  .hm-p-inc { grid-column: 1; grid-row: 2; }
  .hm-p-amt { grid-column: 2; grid-row: 1 / 3; }
  .hm-p .btn { grid-column: 3; grid-row: 1 / 3; margin: 0; justify-self: stretch; }
}

/* ---- Questions and the close ---- */
.hm-faq { padding-block: 64px; }
.hm-qs { margin: 28px 0 0; border-top: 1px solid var(--color-line); }
.hm-qs > div { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--color-line); }
.hm-qs dt { font-weight: 600; }
.hm-qs dd { margin: 0; color: var(--color-muted); font-size: 15px; line-height: 1.6; max-width: 40em; }
.hm-research { margin-top: 22px; font-size: 14.5px; color: var(--color-muted); }
@media (min-width: 768px) {
  .hm-faq { padding-block: 96px; }
  .hm-qs > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; }
}
.hm-close { padding-block: 24px 80px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.hm-close-big { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.2; max-width: 18em; text-wrap: balance; }
@media (min-width: 768px) { .hm-close { padding-block: 32px 112px; } .hm-close-big { font-size: 34px; } }