.playbook-page { background: #061427; }
.header-back { justify-self: end; color: var(--cyan); font-size: 24px; text-decoration: none; }
.playbook-breadcrumbs { max-width: 1440px; margin: auto; padding: 22px 5vw 0; display: flex; justify-content: flex-start; gap: 9px; color: var(--steel); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.playbook-breadcrumbs a { padding: 0; color: var(--white); }
.playbook-breadcrumbs a::after { display: none; }

.playbook-hero { max-width: 1440px; min-height: 720px; margin: auto; padding: 68px 5vw 90px; display: grid; grid-template-columns: 1fr .82fr; grid-template-rows: 1fr auto; gap: 40px 7vw; align-items: center; position: relative; overflow: hidden; }
.playbook-hero::before { content: "PLAY"; position: absolute; left: -24px; bottom: -75px; color: rgba(243,245,247,.022); font: 900 350px/.8 var(--display); }
.playbook-hero > * { position: relative; }
.playbook-hero h1 { margin: 0; font: 900 clamp(55px, 6.3vw, 96px)/.8 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.playbook-hero h1 em { color: var(--red); font-style: normal; }
.playbook-hero__copy > p:last-of-type { max-width: 700px; margin: 32px 0; color: #c7d2df; font-size: 17px; line-height: 1.65; }
.hero-board { min-height: 430px; position: relative; overflow: hidden; border: 1px solid rgba(33,212,253,.24); background: linear-gradient(140deg, #0d2748, #07182e); box-shadow: 18px 18px 0 rgba(224,68,74,.09); }
.hero-board::before { content: ""; position: absolute; inset: 0; opacity: .28; background: repeating-linear-gradient(0deg, transparent 0 82px, rgba(243,245,247,.2) 83px 84px); }
.hero-board::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(243,245,247,.18); }
.hero-board .yard { position: absolute; top: 24px; bottom: 24px; width: 1px; border-left: 1px dashed rgba(243,245,247,.13); }
.yard--one { left: 24%; } .yard--two { left: 50%; } .yard--three { left: 76%; }
.hero-board .token { position: absolute; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--white); border-radius: 50%; color: var(--white); font: 900 13px var(--display); }
.token--one { left: 12%; bottom: 18%; } .token--two { left: 43%; bottom: 18%; } .token--three { right: 12%; bottom: 18%; } .token--four { left: calc(50% - 19px); bottom: 5%; background: var(--red); border-color: var(--red) !important; }
.hero-board .ball { position: absolute; z-index: 2; left: calc(50% - 7px); bottom: 21%; width: 14px; height: 9px; border-radius: 50%; background: var(--cyan); transform: rotate(-15deg); }
.hero-board .route { position: absolute; z-index: 1; width: 3px; background: var(--cyan); transform-origin: bottom; box-shadow: 0 0 8px rgba(33,212,253,.4); }
.hero-board .route::before { content: ""; position: absolute; top: -5px; left: -3px; width: 7px; height: 7px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: rotate(-45deg); }
.route--one { height: 190px; left: 17%; bottom: 24%; transform: rotate(22deg); } .route--two { height: 230px; left: 47%; bottom: 24%; } .route--three { height: 185px; right: 18%; bottom: 24%; transform: rotate(-27deg); }
.hero-board > strong { position: absolute; z-index: 3; top: 24px; left: 24px; color: var(--steel); font-size: 8px; letter-spacing: .16em; }
.playbook-score { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.playbook-score div { padding: 18px 24px; display: flex; gap: 12px; align-items: baseline; border-right: 1px solid var(--rule); }
.playbook-score div:last-child { border-right: 0; }
.playbook-score dt { color: var(--cyan); font: 900 36px var(--display); }
.playbook-score dd { margin: 0; color: var(--steel); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }

.playbook-guide { padding: 70px 5vw; display: grid; grid-template-columns: 1fr 1fr auto; gap: 5vw; align-items: center; border-block: 1px solid var(--rule); background: #030e1b; }
.playbook-guide > * { min-width: 0; }
.playbook-guide h2 { margin: 0; font: 900 clamp(42px, 4.6vw, 68px)/.88 var(--display); text-transform: uppercase; }
.playbook-guide h2 em { color: var(--red); font-style: normal; }
.playbook-guide__copy > p { margin: 0 0 18px; color: var(--steel); font-size: 13px; line-height: 1.7; }
.playbook-guide__copy > span { margin: 4px 4px 0 0; padding: 8px 10px; display: inline-block; border: 1px solid var(--rule); color: var(--cyan); font: 900 8px var(--display); letter-spacing: .08em; }
.playbook-guide__actions { display: grid; gap: 9px; min-width: 160px; }
.playbook-guide__actions .button { justify-content: center; text-align: center; }

.learning-paths { padding: 100px 5vw 110px; background: var(--white); color: var(--navy); }
.playbook-heading { max-width: 1440px; margin: auto; display: grid; grid-template-columns: 1fr 430px; gap: 50px; align-items: end; }
.playbook-heading h2 { margin: 0; font: 900 clamp(43px, 5.2vw, 76px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.035em; }
.playbook-heading > p { margin: 0; color: #5c6c80; font-size: 13px; line-height: 1.65; }
.path-grid { max-width: 1440px; margin: 45px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #d6dde5; border: 1px solid #d6dde5; }
.path-grid button { min-height: 230px; padding: 25px; display: flex; flex-direction: column; text-align: left; border: 0; background: white; color: var(--navy); cursor: pointer; }
.path-grid button:hover { background: #f2f5f7; }
.path-grid b { color: var(--red); font: 900 28px var(--display); }
.path-grid strong { margin: auto 0 8px; font: 900 27px var(--display); text-transform: uppercase; }
.path-grid span { min-height: 38px; color: #627187; font-size: 12px; line-height: 1.5; }
.path-grid i { margin-top: 17px; padding-top: 13px; border-top: 1px solid #d6dde5; color: var(--navy); font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }

.concept-library { padding: 105px 5vw 120px; background: var(--blue); }
.playbook-heading--light { color: var(--white); }
.playbook-heading--light > p, .concept-library .playbook-heading > p { color: var(--steel); }
.concept-toolbar { max-width: 1440px; margin: 38px auto 28px; padding: 14px; display: grid; grid-template-columns: 1.35fr .7fr .7fr auto; gap: 12px; align-items: end; background: #07182e; border: 1px solid var(--rule); }
.concept-toolbar label { color: var(--steel); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.concept-toolbar input, .concept-toolbar select { display: block; width: 100%; min-height: 46px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--rule); background: var(--navy); color: var(--white); }
.concept-toolbar output { min-width: 100px; min-height: 46px; padding: 15px 10px; color: var(--cyan); font: 900 11px var(--display); text-align: center; }
.concept-grid { max-width: 1440px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.concept-card { min-height: 470px; padding: 0 24px 24px; display: flex; flex-direction: column; background: var(--navy); border: 1px solid var(--rule); border-top: 3px solid var(--red); }
.concept-card:hover { border-top-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.16); }
.mini-board { height: 145px; margin: 0 -24px 22px; position: relative; overflow: hidden; background: #061427; border-bottom: 1px solid var(--rule); }
.mini-board::before { content: ""; position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(90deg, transparent 0 19%, rgba(243,245,247,.12) 20%); }
.mini-board i { position: absolute; z-index: 2; bottom: 24px; width: 17px; height: 17px; border: 1px solid var(--white); border-radius: 50%; }
.mini-board i:nth-child(1) { left: 12%; } .mini-board i:nth-child(2) { left: 30%; } .mini-board i:nth-child(3) { left: 48%; } .mini-board i:nth-child(4) { left: 66%; } .mini-board i:nth-child(5) { left: 84%; }
.mini-board span { position: absolute; z-index: 1; left: 49%; bottom: 38px; width: 3px; height: 75px; background: var(--cyan); transform-origin: bottom; }
.mini-board span::after { content: ""; position: absolute; top: -4px; left: -3px; width: 7px; height: 7px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: rotate(-45deg); }
.mini-board--run span { left: 32%; height: 95px; transform: rotate(55deg); background: var(--red); }
.mini-board--front span { left: 9%; right: 9%; bottom: 57px; width: auto; height: 2px; background: var(--red); }
.mini-board--coverage span { left: 20%; bottom: 38px; width: 60%; height: 66px; border: 2px dashed var(--cyan); border-bottom: 0; background: transparent; border-radius: 50% 50% 0 0; }
.mini-board--formation span, .mini-board--line span { left: 7%; right: 7%; bottom: 55px; width: auto; height: 2px; background: var(--cyan); }
.mini-board--downs span, .mini-board--situation span { left: 24%; bottom: 27px; height: 90px; transform: rotate(90deg); background: var(--red); }
.mini-board--routes span { left: 68%; height: 88px; transform: rotate(-32deg); }
.concept-card__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--cyan); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.concept-card > small { margin: 27px 0 5px; color: var(--steel); text-transform: uppercase; }
.concept-card h3 { margin: 0; font: 900 31px/1 var(--display); text-transform: uppercase; }
.concept-card p { color: #b9c5d3; font-size: 12px; line-height: 1.6; }
.concept-card > a { min-height: 44px; margin-top: auto; padding-top: 15px; display: flex; justify-content: space-between; border-top: 1px solid var(--rule); color: var(--white); font: 900 10px var(--display); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; }
.concept-card > a b { color: var(--red); font-size: 17px; }
.playbook-state { max-width: 1440px; min-height: 260px; margin: auto; display: grid; place-content: center; text-align: center; color: var(--steel); }
.playbook-state > span { width: 36px; height: 36px; margin: auto; border: 3px solid var(--rule); border-top-color: var(--cyan); border-radius: 50%; animation: play-spin .8s linear infinite; }
.playbook-state strong { color: var(--white); font: 900 28px var(--display); text-transform: uppercase; }
.playbook-state button { min-height: 44px; padding: 0 18px; border: 0; background: var(--red); color: white; font-weight: 900; cursor: pointer; }
.playbook-state--error strong { color: var(--red); }
@keyframes play-spin { to { transform: rotate(360deg); } }

.playbook-iq { padding: 110px 5vw; display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; background: #061427; }
.playbook-iq h2 { margin: 0; font: 900 clamp(44px, 5.4vw, 78px)/.89 var(--display); text-transform: uppercase; letter-spacing: -.04em; }
.playbook-iq h2 em { color: var(--red); font-style: normal; }
.playbook-iq > div:first-child > p:last-child { color: var(--steel); font-size: 15px; line-height: 1.7; }
.playbook-iq__prompts { display: grid; gap: 11px; }
.playbook-iq__prompts a { min-height: 160px; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 14px; background: var(--blue); border: 1px solid var(--rule); text-decoration: none; }
.playbook-iq__prompts a:hover { border-color: var(--cyan); }
.playbook-iq__prompts small { grid-column: 1 / -1; color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.playbook-iq__prompts strong { align-self: end; font: 900 24px/1.08 var(--display); text-transform: uppercase; }
.playbook-iq__prompts span { align-self: end; color: var(--red); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.playbook-method { padding: 34px 5vw; display: grid; grid-template-columns: 170px 1fr auto; gap: 28px; align-items: center; background: var(--red); color: white; }
.playbook-method strong { font: 900 16px var(--display); text-transform: uppercase; }
.playbook-method p { margin: 0; font-size: 11px; line-height: 1.55; }
.playbook-method a { font-size: 9px; font-weight: 900; text-decoration: none; text-transform: uppercase; }

@media (max-width: 1040px) { .concept-grid { grid-template-columns: repeat(2, 1fr); } .path-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .playbook-hero, .playbook-heading, .playbook-iq, .playbook-guide { grid-template-columns: 1fr; } .playbook-guide__actions { justify-self: start; } .playbook-score { grid-column: 1; } .concept-toolbar { grid-template-columns: 1fr 1fr; } .playbook-method { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .playbook-hero, .learning-paths, .concept-library, .playbook-iq, .playbook-guide { padding-left: 18px; padding-right: 18px; } .playbook-hero h1 { font-size: 54px; } .hero-board { min-height: 330px; } .playbook-score, .path-grid, .concept-toolbar, .concept-grid { grid-template-columns: 1fr; } .playbook-score div { border-right: 0; border-bottom: 1px solid var(--rule); } .playbook-iq__prompts a { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .playbook-state > span { animation: none; } .concept-card { transition: none; } }

/* Playbook 2.0 — tactical motion and discovery */
.playbook-hero { min-height: 680px; background: radial-gradient(circle at 72% 45%, rgba(33,212,253,.055), transparent 30%); }
.playbook-hero h1 { font-size: clamp(54px, 6.05vw, 92px); line-height: .94; overflow-wrap: anywhere; }
.hero-board { border-radius: 2px; }
.hero-board .route { animation: hero-route 3.2s ease-in-out infinite alternate; }
.hero-board .ball { animation: hero-ball 2.8s cubic-bezier(.2,.7,.3,1) infinite; }
.hero-board .token { animation: hero-token 2.8s ease-in-out infinite alternate; }
.hero-board .token--two { animation-delay: -.5s; }.hero-board .token--three { animation-delay: -1s; }
@keyframes hero-route { from { filter: drop-shadow(0 0 0 transparent); opacity: .55; } to { filter: drop-shadow(0 0 6px rgba(33,212,253,.75)); opacity: 1; } }
@keyframes hero-ball { 0%,8% { transform: translate(0,0) rotate(-15deg); } 72%,100% { transform: translate(92px,-205px) rotate(340deg); } }
@keyframes hero-token { to { transform: translateY(-8px); } }

.play-finder { padding: 92px 5vw; display: grid; grid-template-columns: .72fr 1.28fr; gap: 6vw; align-items: start; border-block: 1px solid var(--rule); background: linear-gradient(120deg, #030d19, #071a32 68%, #0b2340); }
.finder-intro h2 { margin: 0; font: 900 clamp(42px, 4.8vw, 70px)/.96 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.finder-intro h2 em { color: var(--red); font-style: normal; }
.finder-intro > p:last-child { max-width: 590px; color: #bdc9d7; font-size: 15px; line-height: 1.7; }
.finder-console { padding: clamp(20px, 3vw, 38px); border: 1px solid rgba(33,212,253,.28); background: rgba(6,20,39,.86); box-shadow: 16px 16px 0 rgba(224,68,74,.08); }
.finder-console > label { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.finder-input-row { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; }
.finder-input-row input { min-width: 0; min-height: 58px; padding: 0 18px; border: 1px solid var(--rule); background: #020a14; color: var(--white); font-size: 15px; }
.finder-input-row input:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.finder-input-row button { min-height: 58px; padding: 0 22px; border: 0; background: var(--red); color: var(--white); font: 900 11px var(--display); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.finder-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.finder-chips button { min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); background: transparent; color: #bec9d6; font-size: 10px; cursor: pointer; }
.finder-chips button:hover, .finder-chips button:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.finder-status { margin: 22px 0 10px; color: var(--steel); font-size: 11px; }
.finder-results { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.finder-results a { min-width: 0; min-height: 150px; padding: 17px; display: flex; flex-direction: column; border: 1px solid var(--rule); background: #081b33; text-decoration: none; }
.finder-results a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.finder-results small { color: var(--cyan); font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.finder-results strong { margin-top: 8px; font: 900 20px/1.02 var(--display); text-transform: uppercase; }
.finder-results span { margin-top: 8px; color: #aebbc9; font-size: 10px; line-height: 1.45; }
.finder-results b { margin-top: auto; padding-top: 12px; color: var(--red); font-size: 8px; letter-spacing: .08em; }

.learning-paths { padding-top: 88px; }
.path-grid { grid-template-columns: repeat(4, 1fr); }
.path-grid button { min-height: 210px; transition: transform .18s ease, background .18s ease; }
.path-grid button:hover { transform: translateY(-3px); }
.path-grid strong { font-size: 24px; line-height: 1.05; }
.concept-library { background: linear-gradient(180deg, #0c294d 0, var(--blue) 260px); }
.concept-toolbar { position: sticky; top: 88px; z-index: 12; grid-template-columns: 1.35fr .68fr .68fr auto auto; box-shadow: 0 14px 32px rgba(0,0,0,.2); }
.motion-toggle { min-height: 46px; padding: 0 13px; border: 1px solid var(--cyan); background: transparent; color: var(--cyan); font: 900 9px var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.motion-toggle[aria-pressed="true"] { border-color: var(--red); color: var(--white); background: rgba(224,68,74,.16); }
.concept-grid { gap: 16px; }
.concept-card { min-height: 610px; padding: 0 22px 22px; position: relative; overflow: hidden; border-top-width: 2px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.concept-card::after { content: attr(data-category); position: absolute; right: -10px; bottom: 54px; color: rgba(243,245,247,.018); font: 900 64px/.8 var(--display); text-transform: uppercase; pointer-events: none; }
.concept-card > * { position: relative; z-index: 1; }
.mini-board { height: auto; min-height: 250px; margin: 0 -22px 20px; display: grid; grid-template-rows: 158px 92px; border-bottom: 1px solid var(--rule); background: #030e1b; }
.mini-board::before { opacity: .2; background: repeating-linear-gradient(90deg, transparent 0 19.6%, rgba(243,245,247,.12) 20%); }
.mini-board svg { width: 100%; height: 158px; display: block; overflow: visible; }
.mini-board figcaption { position: relative; z-index: 4; padding: 12px 13px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; border-top: 1px solid rgba(243,245,247,.08); background: rgba(8,26,51,.96); }
.mini-board figcaption ol { min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; list-style: none; }
.mini-board figcaption li { min-width: 0; display: grid; grid-template-columns: 17px 1fr; gap: 5px; align-items: start; }
.mini-board figcaption li > b { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--white); font: 900 8px var(--display); }
.mini-board figcaption span { position: static; width: auto; height: auto; background: transparent; transform: none; color: #c1ccda; font-size: 6.5px; font-weight: 900; line-height: 1.35; letter-spacing: .045em; text-transform: uppercase; }
.mini-board figcaption span::after { content: none; }
.mini-board figcaption > strong { color: var(--cyan); font-size: 12px; }
.field-line { fill: none; stroke: rgba(243,245,247,.08); stroke-width: 1; }
.offense-row circle { fill: #061427; stroke: var(--white); stroke-width: 1.5; }
.defense-row path { fill: var(--red); opacity: .82; }
.motion-path, .scrimmage-line, .gain-line, .pocket, .uprights, .lane { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.motion-path { stroke-dasharray: 7 6; animation: route-march .8s linear infinite; }
.motion-path--alt, .lane { stroke: var(--red); }.motion-path--run { stroke-width: 4; }
.playhead { fill: var(--cyan); filter: drop-shadow(0 0 5px rgba(33,212,253,.9)); }.playhead--red { fill: var(--red); filter: drop-shadow(0 0 5px rgba(224,68,74,.9)); }
.playhead--white { fill: var(--white); filter: drop-shadow(0 0 5px rgba(243,245,247,.8)); }
.coverage-zone { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 5 5; opacity: .7; animation: coverage-pulse 2.4s ease-in-out infinite; }
.coverage-shift { fill: var(--red); animation: coverage-shift 2.6s ease-in-out infinite alternate; }
.shift-token { fill: var(--red); stroke: var(--white); stroke-width: 1; }
.scrimmage-line, .gain-line { stroke-width: 2; }.gain-line { stroke: var(--red); stroke-dasharray: 8 5; }
.pocket { stroke: rgba(243,245,247,.58); stroke-dasharray: 4 4; }.uprights { stroke: #f3d176; stroke-width: 3; }.lane { stroke-width: 3; }
.board-label { fill: var(--steel); font: 900 6.5px var(--display); letter-spacing: .08em; }.board-label--gold { fill: #f3d176; }
.concept-card[data-category="special-teams"] .board-label { font-size: 8px; letter-spacing: .025em; }
.concept-card[data-category="special-teams"] .mini-board figcaption span { font-size: 9px; letter-spacing: .015em; }
.landing-zone { fill: rgba(243,209,118,.09); stroke: #f3d176; stroke-width: 1; stroke-dasharray: 4 4; }
.setup-line { fill: none; stroke: rgba(243,245,247,.3); stroke-width: 1; stroke-dasharray: 3 4; }
.kick-team circle, .field-goal-line circle, .punt-line circle { fill: var(--red); }.return-team circle, .returner, .holder { fill: var(--navy); stroke: var(--white); stroke-width: 1.5; }
.kicker { fill: var(--red); stroke: var(--white); stroke-width: 1.5; }.coverage-release { fill: var(--red); }.return-units circle { fill: var(--navy); stroke: var(--white); stroke-width: 1.3; }.return-units path { fill: var(--red); }
@keyframes route-march { to { stroke-dashoffset: -13; } }
@keyframes coverage-pulse { 50% { opacity: 1; stroke-width: 3; } }
@keyframes coverage-shift { to { transform: translateY(13px); } }
.concept-card > small { margin-top: 17px; }
.concept-card h3 { font-size: clamp(25px, 2.15vw, 32px); line-height: 1.05; overflow-wrap: anywhere; }
.concept-card p { font-size: 12px; line-height: 1.62; }

.playbook-guide h2, .playbook-heading h2, .playbook-iq h2 { line-height: .98; overflow-wrap: anywhere; }
.playbook-page.motion-paused .motion-path, .playbook-page.motion-paused .coverage-zone, .playbook-page.motion-paused .coverage-shift, .playbook-page.motion-paused .hero-board * { animation-play-state: paused !important; }

@media (max-width: 1180px) {
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .concept-toolbar { grid-template-columns: 1.2fr .75fr .75fr auto; }
  .motion-toggle { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 900px) {
  .play-finder { grid-template-columns: 1fr; }
  .concept-toolbar { position: static; }
}
@media (max-width: 720px) {
  .play-finder { padding: 70px 18px; }
  .finder-input-row, .finder-results { grid-template-columns: 1fr; }
  .finder-input-row button { min-height: 48px; }
  .finder-results a { min-height: 132px; }
  .concept-toolbar { grid-template-columns: 1fr; }
  .motion-toggle { grid-column: 1; justify-self: stretch; }
}
@media (max-width: 600px) {
  .playbook-hero h1 { font-size: clamp(43px, 13vw, 54px); line-height: .98; }
  .finder-intro h2 { font-size: clamp(38px, 11vw, 52px); line-height: 1; }
  .path-grid { grid-template-columns: 1fr; }
  .concept-card { min-height: 600px; }
  .mini-board figcaption span { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-board *, .motion-path, .coverage-zone, .coverage-shift { animation: none !important; }
  .finder-results a, .path-grid button { transition: none; }
}
.mini-board--formation { grid-template-rows: auto auto; }
.mini-board--formation svg { height: auto; aspect-ratio: 560 / 400; overflow: hidden; }
.mini-board--formation figcaption { min-height: 94px; }
.mini-board--formation figcaption span { font-size: 10px; line-height: 1.5; letter-spacing: 0; }