/* tMP Core 2.25.0: the Features page. Rides on home.css; this is only what is new here. */
.tmp-features { --member: #1A6A96; --member-tint: #DDEEF8; --course: #2D6A4F; --course-tint: #DCE8D6; --network: #B07A1E; --network-tint: #F6E7C8; }

/* hero: three cards joined */
.tmp-hero--features { padding-bottom: 60px; }
.tmp-ftr-trio { position: relative; height: 340px; max-width: 460px; margin-left: auto; }
.tmp-ftr-trio__lines { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(15, 32, 41, .28); }
.tmp-ftr-trio__l { stroke-dasharray: 4 6; animation: tmp-ftr-dash 6s linear infinite; }
@keyframes tmp-ftr-dash { to { stroke-dashoffset: -100; } }
.tmp-ftr-trio__card { position: absolute; width: 200px; padding: 16px 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 40px -28px rgba(15, 32, 41, .4); display: flex; flex-direction: column; gap: 4px; }
.tmp-ftr-trio__card b { font-family: var(--serif); font-size: 24px; line-height: 1.1; font-weight: 400; }
.tmp-ftr-trio__card small { color: var(--muted); font-size: 13px; }
.tmp-ftr-trio__card--member { left: 0; top: 40px; border-left: 3px solid var(--member); }
.tmp-ftr-trio__card--course { right: 0; top: 130px; border-left: 3px solid var(--course); background: var(--ink); color: var(--card); border-color: var(--ink); }
.tmp-ftr-trio__card--course .tmp-eyebrow { color: rgba(255, 253, 248, .6); }
.tmp-ftr-trio__card--course small { color: rgba(255, 253, 248, .7); }
.tmp-ftr-trio__card--net { left: 0; top: 210px; border-left: 3px solid var(--network); }

/* the picture */
.tmp-ftr-stories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -20px; }
.tmp-ftr-story { font: 500 14px/1.2 var(--sans); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.tmp-ftr-story:hover { background: rgba(15, 32, 41, .05); }
.tmp-ftr-story.is-on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.tmp-ftr-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 28px; align-items: start; margin-top: -12px; }
.tmp-ftr-map { margin: 0; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 44px 12px 12px; }
.tmp-ftr-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.tmp-ftr-map__heads { position: absolute; top: 14px; left: 12px; right: 12px; display: grid; grid-template-columns: 30% 40% 30%; text-align: center; pointer-events: none; }
.tmp-ftr-map__head--member { color: var(--member); }
.tmp-ftr-map__head--course { color: var(--course); }
.tmp-ftr-map__head--network { color: var(--network); }
.tmp-ftr-edge { fill: none; stroke: rgba(15, 32, 41, .16); stroke-width: 1.4; transition: stroke .25s, stroke-width .25s, opacity .25s; }
.tmp-ftr-map.is-focused .tmp-ftr-edge { opacity: .35; }
.tmp-ftr-map.is-focused .tmp-ftr-edge.is-on { opacity: 1; stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: 6 5; animation: tmp-ftr-dash 3s linear infinite; }
.tmp-ftr-ring circle { fill: var(--network-tint); stroke: var(--network); stroke-width: 1.2; }
.tmp-ftr-ring .tmp-ftr-ring__o { fill: none; stroke: var(--network); stroke-opacity: .35; stroke-dasharray: 3 6; }
.tmp-ftr-node { cursor: pointer; transition: opacity .25s; outline: none; }
.tmp-ftr-node rect { fill: var(--card); stroke: var(--line); stroke-width: 1.2; transition: fill .2s, stroke .2s, stroke-width .2s; }
.tmp-ftr-node text { font: 500 17px/1 var(--sans); fill: var(--ink); pointer-events: none; }
.tmp-ftr-node--member rect { stroke: var(--member); fill: var(--member-tint); }
.tmp-ftr-node--course rect { stroke: var(--course); fill: var(--course-tint); }
.tmp-ftr-node--network rect { stroke: var(--network); fill: var(--network-tint); }
.tmp-ftr-node:hover rect, .tmp-ftr-node:focus-visible rect { stroke-width: 2.4; }
.tmp-ftr-map.is-focused .tmp-ftr-node { opacity: .38; }
.tmp-ftr-map.is-focused .tmp-ftr-node.is-on { opacity: 1; }
.tmp-ftr-map.is-focused .tmp-ftr-node.is-on rect { stroke-width: 2.4; }
.tmp-ftr-node.is-sel rect, .tmp-ftr-map.is-focused .tmp-ftr-node.is-sel rect { fill: var(--ink); stroke: var(--ink); }
.tmp-ftr-node.is-sel text { fill: var(--card); }
.tmp-ftr-node.is-lit rect { animation: tmp-ftr-pop .5s ease-out; }
@keyframes tmp-ftr-pop { 0% { stroke-width: 1.2; } 40% { stroke-width: 5; } 100% { stroke-width: 2.4; } }

/* the panel beside it */
.tmp-ftr-panel { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 26px 26px 24px; min-height: 320px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 92px; }
.tmp-ftr-panel > div[hidden] { display: none; }
.tmp-ftr-panel > div { display: flex; flex-direction: column; gap: 12px; animation: tmp-ftr-in .3s ease; }
@keyframes tmp-ftr-in { from { opacity: 0; transform: translateY(6px); } }
.tmp-ftr-panel p { color: var(--ink2); line-height: 1.5; }
.tmp-ftr-panel .tmp-display--sm { color: var(--ink); }
.tmp-ftr-panel__joins { margin-top: 6px; }
.tmp-ftr-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink2); margin-top: 6px; }
.tmp-ftr-legend li { display: flex; align-items: center; gap: 7px; }
.tmp-ftr-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--ink); flex: none; }
.tmp-ftr-swatch--member { background: var(--member); }
.tmp-ftr-swatch--course { background: var(--course); }
.tmp-ftr-swatch--network { background: var(--network); }
.tmp-ftr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tmp-ftr-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.2 var(--sans); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; }
.tmp-ftr-chip:hover { background: rgba(15, 32, 41, .05); }
.tmp-ftr-chip.is-on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.tmp-ftr-chip--member { border-color: var(--member); }
.tmp-ftr-chip--course { border-color: var(--course); }
.tmp-ftr-chip--network { border-color: var(--network); }
.tmp-ftr-chip--member.is-on { background: var(--member); border-color: var(--member); }
.tmp-ftr-chip--course.is-on { background: var(--course); border-color: var(--course); }
.tmp-ftr-chip--network.is-on { background: var(--network); border-color: var(--network); }
.tmp-ftr-panel__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--blue-deep) !important; margin-top: 4px; }
.tmp-ftr-panel__lead { font-family: var(--serif); font-size: 22px; line-height: 1.25; color: var(--ink) !important; }
.tmp-ftr-steps { display: flex; flex-direction: column; gap: 4px; }
.tmp-ftr-step__btn { display: flex; gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--ink); transition: background .15s; }
.tmp-ftr-step__btn:hover { background: rgba(15, 32, 41, .04); }
.tmp-ftr-step.is-on .tmp-ftr-step__btn { background: var(--tint); }
.tmp-ftr-step__n { font-size: 12px; color: var(--muted); padding-top: 3px; }
.tmp-ftr-step__t { display: flex; flex-direction: column; gap: 3px; }
.tmp-ftr-step__t b { font-weight: 500; }
.tmp-ftr-step__t span { font-size: 14px; color: var(--ink2); line-height: 1.45; display: none; }
.tmp-ftr-step.is-on .tmp-ftr-step__t span { display: block; }
.tmp-ftr-play { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.tmp-ftr-play__bar { flex: 1; height: 3px; border-radius: 3px; background: var(--line2); overflow: hidden; }
.tmp-ftr-play__bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.tmp-ftr-play__bar.is-running i { animation: tmp-ftr-bar var(--t, 6s) linear forwards; }
@keyframes tmp-ftr-bar { from { width: 0; } to { width: 100%; } }

/* the index */
.tmp-ftr-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -24px; }
.tmp-ftr-index { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ink); }
.tmp-ftr-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding: 34px 0 30px; border-bottom: 1px solid var(--line); }
.tmp-ftr-group.is-empty { display: none; }
.tmp-ftr-group__head { display: flex; gap: 18px; align-items: flex-start; }
.tmp-ftr-group__head h3 { font-family: var(--serif); font-size: 30px; line-height: 1.05; letter-spacing: -.01em; }
.tmp-ftr-group__head p { color: var(--ink2); margin-top: 6px; }
.tmp-ftr-items { display: flex; flex-direction: column; }
.tmp-ftr-item { border-bottom: 1px solid var(--line2); transition: opacity .2s; }
.tmp-ftr-item:last-child { border-bottom: 0; }
.tmp-ftr-item.is-hidden { display: none; }
.tmp-ftr-item.is-hit summary { background: var(--tint); }
.tmp-ftr-item summary { display: flex; align-items: center; gap: 12px; padding: 14px 10px; cursor: pointer; list-style: none; border-radius: 8px; font-size: 17px; }
.tmp-ftr-item summary::-webkit-details-marker { display: none; }
.tmp-ftr-item summary::after { content: '+'; margin-left: auto; font-family: var(--mono); color: var(--muted); }
.tmp-ftr-item details[open] summary::after { content: '–'; }
.tmp-ftr-item__name { font-weight: 500; }
.tmp-ftr-item__for { margin-left: 8px; font-size: 11px; }
.tmp-ftr-item__body { padding: 0 10px 18px 32px; display: flex; flex-direction: column; gap: 12px; color: var(--ink2); line-height: 1.5; }
.tmp-ftr-item__joins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* three sides */
.tmp-ftr-side { border-top: 3px solid var(--ink); gap: 12px; }
.tmp-ftr-side h3 { font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.tmp-ftr-side p { color: var(--ink2); line-height: 1.5; }
.tmp-ftr-side__join { font-size: 14px; border-top: 1px solid var(--line2); padding-top: 12px; }
.tmp-ftr-side__join b { font-weight: 500; color: var(--ink); }
.tmp-ftr-side--member { border-top-color: var(--member); }
.tmp-ftr-side--course { border-top-color: var(--course); }
.tmp-ftr-side--network { border-top-color: var(--network); }

@media (max-width: 1000px) {
	.tmp-ftr-stage { grid-template-columns: minmax(0, 1fr); }
	.tmp-ftr-panel { position: static; min-height: 0; }
	.tmp-ftr-group { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
	.tmp-hero--features .tmp-hero__art { display: none; }
	.tmp-ftr-map { padding: 36px 4px 4px; }
	.tmp-ftr-node text { font-size: 21px; }
	.tmp-ftr-map__heads { font-size: 10px; }
	.tmp-ftr-item summary { font-size: 16px; flex-wrap: wrap; }
	.tmp-ftr-item__for { display: none; }
	.tmp-ftr-item__body { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.tmp-ftr-trio__l, .tmp-ftr-map.is-focused .tmp-ftr-edge.is-on { animation: none; }
	.tmp-ftr-node.is-lit rect { animation: none; }
	.tmp-ftr-panel > div { animation: none; }
}