/*
 * The marketing pages (src/marketing.ts): the landing page, /program, /faq,
 * /about, /supporters and /gear. After Learn to Cloud's landing: big two-tone
 * headline, quiet sections divided by a hairline. Tokens from site.css.
 */
.mk-hero { padding: 48px 0 72px; }
@media (min-width: 640px) { .mk-hero { padding: 80px 0 104px; } }
.mk-hero .eyebrow { margin-bottom: 28px; }
.mk-hero .hero-title { font-size: clamp(34px, 7.2vw, 64px); }
.mk-hero .lede { max-width: 38rem; }
.mk-ctas { gap: 12px 24px; }
.mk-stat { margin-top: 24px; }
.mk-stat strong { color: var(--text); font-weight: 600; }

.mk-band { border-top: 1px solid var(--line); padding: 48px 0; }
@media (min-width: 640px) { .mk-band { padding: 64px 0; } }
.mk-h2 { font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -0.025em; color: var(--text); margin-bottom: 12px; }
.mk-top { margin-top: 56px; }
.mk-sub { font-size: 16px; line-height: 1.75; color: var(--text-body); max-width: 40rem; margin-bottom: 16px; }
.mk-narrow { max-width: 40rem; }
.mk-gap { margin-left: 20px; }

.mk-cols { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 640px) { .mk-cols { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.mk-cols h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-bottom: 10px; }
.mk-cols p { font-size: 16px; line-height: 1.75; color: var(--text-body); }

/* The six phases. */
.mk-phases { list-style: none; margin: 28px 0 20px; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 360px) { .mk-phases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mk-phases { grid-template-columns: repeat(3, 1fr); } }
.mk-phase { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 15px; line-height: 1.5; }
.mk-phase strong { color: var(--text); font-weight: 600; font-size: 16px; }
.mk-phase-n { font: 600 12px/1 var(--mono); color: var(--primary); }
.mk-phase-weeks { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); }

/* How verification works. */
.mk-verify { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.mk-verify > div { display: grid; gap: 6px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .mk-verify > div { grid-template-columns: 15rem 1fr; } }
.mk-verify dt { display: grid; gap: 2px; }
.mk-verify dt strong { color: var(--text); font-weight: 600; }
.mk-verify dt span { font-size: 14px; }
.mk-verify dd { margin: 0; color: var(--text-body); font-size: 16px; line-height: 1.7; }

/* FAQ. */
.mk-faq { border-top: 1px solid var(--line); margin: 24px 0 20px; }
.mk-faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.mk-faq-item h2, .mk-faq-item h3 { font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; }
.mk-faq-item p { margin-top: 10px; font-size: 16px; line-height: 1.75; color: var(--text-body); max-width: 44rem; }
.mk-faq-item a, .mk-sub a, .mk-list a { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 4px; }
.mk-faq-item strong { color: var(--text); font-weight: 600; }

/* /program. */
.mk-timeline { list-style: none; margin: 24px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--line); display: grid; gap: 28px; }
.mk-timeline li { position: relative; }
.mk-timeline li::before { content: ''; position: absolute; left: -27px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--primary); }
.mk-timeline h3 { font-size: 18px; color: var(--text); margin: 4px 0 8px; }
.mk-timeline p { color: var(--text-body); font-size: 16px; line-height: 1.7; max-width: 42rem; }
.mk-list { margin: 16px 0 20px; padding-left: 20px; display: grid; gap: 10px; color: var(--text-body); font-size: 16px; line-height: 1.65; max-width: 44rem; }
.mk-list strong { color: var(--text); font-weight: 600; }

.mk-final { text-align: left; }
.mk-book { margin: 28px 0 12px; }

/* /gear. */
.mk-cost { display: grid; gap: 12px; margin: 20px 0 20px; }
@media (min-width: 640px) { .mk-cost { grid-template-columns: repeat(3, 1fr); } }
.mk-cost-card { padding: 18px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 4px; }
.mk-cost-card:first-child { border-color: var(--primary); background: var(--primary-soft); }
.mk-cost-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); }
.mk-cost-total { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.mk-gear { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 760px) { .mk-gear { grid-template-columns: repeat(2, 1fr); } }
.mk-gear-item { padding: 18px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; align-content: start; }
.mk-gear-item h3 { font-size: 17px; color: var(--text); }
.mk-opt-h { margin-top: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); }
.mk-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.mk-opts a { overflow-wrap: anywhere; }
.mk-tip { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.mk-checked { margin: -12px 0 36px; }