/* story.css: the front page. Deck look, generous type, one clear path forward. */
.story { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; font-size: 1.05rem; }
.story a.btn { text-decoration: none; }
.hero { padding: 1.5rem 0 1rem; border-bottom: 3px solid var(--navy); }
.hero__eyebrow { margin: 0; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--primary-text); }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.05; margin-top: .25rem; }
.hero__lead { font-size: 1.3rem; max-width: 44rem; margin: .9rem 0 0; color: var(--ink); }
.hero__note { margin: .6rem 0 0; color: var(--ink-soft); }
.story__h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 2.25rem 0 .9rem; }
.story__note { color: var(--ink-soft); font-size: 1.1rem; margin: 1rem 0 0; }

.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.tl__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-bottom: 1rem; position: relative; }
.tl__item:not(:last-child)::before { content: ""; position: absolute; left: 1.2rem; top: 2.6rem; bottom: 0; width: 3px; background: var(--primary-tint); }
.tl__badge { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; z-index: 1; }
.tl__card { background: var(--surface); border-radius: var(--radius-2); padding: .85rem 1.1rem 1rem; }
.tl__card h3 { font-size: 1.35rem; margin: 0; }
.tl__card p { margin: .3rem 0 .65rem; }
.tl__card .chip { font-size: .95rem; }

.problem__q { font-size: 1.5rem; font-family: var(--font-display); padding: 1rem 1.25rem 1rem 2.6rem; }
.problem__q::before { font-size: 3.2rem; top: .15rem; left: .6rem; }
.problem__text { font-size: 1.15rem; max-width: 46rem; margin: 1rem 0 0; }
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.pstat { background: var(--surface); border-radius: var(--radius-2); padding: .8rem 1rem; display: grid; gap: .1rem; border-top: 4px solid var(--navy); }
.pstat strong { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--heading); }
.pstat span { color: var(--ink-soft); font-size: 1rem; }
.pstat:last-child { border-top-color: var(--primary); }
.pstat:last-child strong { color: var(--primary-text); }
.answer { margin-top: 1rem; }
.mfoot { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }