.concept-page { background: #061427; }
.header-back { justify-self: end; color: var(--cyan); font-size: 24px; text-decoration: none; }
.concept-breadcrumbs { max-width: 1440px; margin: auto; padding: 22px 5vw 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 9px; color: var(--steel); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; overflow-wrap: anywhere; }
.concept-breadcrumbs a { padding: 0; color: var(--white); }
.concept-breadcrumbs a::after { display: none; }
.concept-hero { max-width: 1440px; min-height: 670px; margin: auto; padding: 65px 5vw 90px; display: grid; grid-template-columns: 1fr .9fr; gap: 8vw; align-items: center; }
.concept-hero > * { min-width: 0; }
.concept-hero h1 { margin: 0; font: 900 clamp(63px, 8vw, 122px)/.78 var(--display); text-transform: uppercase; letter-spacing: -.05em; }
.concept-hero h1 em { display: block; margin-bottom: 14px; color: var(--red); font: 900 18px/1 var(--display); letter-spacing: .08em; }
.concept-hero__definition { max-width: 760px; margin: 30px 0; color: #ccd5e0; font-size: 18px; line-height: 1.65; }
.concept-board { min-height: 585px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; align-items: stretch; position: relative; overflow: hidden; border: 1px solid rgba(33,212,253,.28); background: linear-gradient(145deg, var(--blue), #061427); box-shadow: 18px 18px 0 rgba(224,68,74,.09); }
.concept-board svg { display: block; width: 100%; max-width: 100%; height: 100%; min-height: 400px; }
.concept-board::after { content: none; }
.concept-board .field { stroke: rgba(243,245,247,.16); stroke-width: 1; }
.concept-board .offense { fill: var(--navy); stroke: var(--white); stroke-width: 2; }
.concept-board .defense { fill: var(--red); stroke: var(--red); }
.concept-board .route { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.concept-board .read { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 8 7; }
.concept-board .label { fill: var(--white); font: 900 13px var(--display); text-anchor: middle; }
.concept-board__key { min-height: 52px; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 11px 16px; align-items: center; border-bottom: 1px solid var(--rule); background: rgba(3,14,27,.86); color: var(--steel); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.concept-board__key span { display: inline-flex; gap: 6px; align-items: center; }.concept-board__key b { margin-left: auto; color: var(--cyan); font-size: 7px; }
.concept-board__key i { width: 10px; height: 10px; display: inline-block; }.key-offense { border: 1px solid var(--white); border-radius: 50%; }.key-defense { background: var(--red); transform: rotate(45deg); }.key-ball { width: 12px !important; height: 7px !important; border-radius: 50%; background: var(--cyan); transform: rotate(-20deg); }
.concept-page:is([data-concept="punt"], [data-concept="field-goal"], [data-concept="kickoff-dinamico"]) .key-ball { background: #d8ab4c; }
.concept-board__key .key-path { height: 0; border-top: 2px dashed var(--cyan); }
.concept-board__timeline { min-height: 92px; padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--rule); background: rgba(3,14,27,.94); }
.concept-board__timeline ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; list-style: none; }
.concept-board__timeline li { min-width: 0; display: grid; grid-template-columns: 20px 1fr; gap: 6px; align-items: start; }
.concept-board__timeline li b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: white; font: 900 9px var(--display); }
.concept-board__timeline li span { color: #c5d0dc; font-size: 7px; font-weight: 900; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; }
.concept-board__timeline button { min-height: 34px; padding: 0 12px; border: 1px solid var(--cyan); background: transparent; color: var(--cyan); font: 900 8px var(--display); text-transform: uppercase; cursor: pointer; }
.concept-board__timeline button[aria-pressed="true"] { border-color: var(--red); color: var(--white); background: rgba(224,68,74,.16); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.depth-section { padding: 100px 5vw 110px; background: var(--white); color: var(--navy); }
.concept-heading { max-width: 1440px; margin: auto; display: grid; grid-template-columns: 1fr 410px; gap: 48px; align-items: end; }
.concept-heading h2 { margin: 0; font: 900 clamp(43px, 5vw, 74px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.035em; }
.concept-heading > p { margin: 0; color: #5b6c81; font-size: 13px; line-height: 1.65; }
.depth-switch { max-width: 1440px; margin: 38px auto 0; display: flex; gap: 8px; }
.depth-switch button { min-height: 48px; padding: 0 22px; border: 1px solid #ccd5de; background: white; color: var(--navy); font-weight: 900; cursor: pointer; }
.depth-switch button.selected { border-color: var(--navy); background: var(--navy); color: var(--cyan); }
.depth-panel { max-width: 1440px; min-height: 320px; margin: 12px auto 0; padding: clamp(30px, 5vw, 70px); position: relative; overflow: hidden; background: #f1f4f7; border-left: 5px solid var(--red); }
.depth-panel::after { content: attr(data-mark); position: absolute; right: -20px; bottom: -55px; color: rgba(8,26,51,.035); font: 900 220px/.8 var(--display); }
.depth-panel > * { position: relative; z-index: 1; }
.depth-panel span { color: var(--red); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .13em; }
.depth-panel p { max-width: 980px; margin: 24px 0 0; font-size: clamp(19px, 2vw, 28px); line-height: 1.55; }

.watch-section { padding: 105px 5vw; background: var(--blue); }
.concept-heading--light { color: var(--white); }
.concept-heading--light > p { color: var(--steel); }
.watch-grid { max-width: 1440px; margin: 42px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.watch-grid article { min-height: 220px; padding: 28px; display: flex; flex-direction: column; background: var(--navy); }
.watch-grid b { color: var(--red); font: 900 29px var(--display); }
.watch-grid p { margin: auto 0 0; font: 900 22px/1.15 var(--display); text-transform: uppercase; }
.tradeoff { max-width: 1440px; margin: 24px auto 0; padding: 25px; display: grid; grid-template-columns: 180px 1fr; gap: 30px; border: 1px solid rgba(33,212,253,.3); background: #07182e; }
.tradeoff strong { color: var(--cyan); font: 900 13px var(--display); text-transform: uppercase; }
.tradeoff p { margin: 0; color: #c7d1dd; line-height: 1.6; }

.myths-section { padding: 100px 5vw; background: var(--white); color: var(--navy); }
.myth-grid { max-width: 1440px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.myth-grid article { min-height: 190px; padding: 30px; border: 1px solid #d3dbe4; border-top: 4px solid var(--red); }
.myth-grid small { color: var(--red); font-weight: 900; letter-spacing: .12em; }
.myth-grid p { margin: 45px 0 0; font: 900 22px/1.18 var(--display); text-transform: uppercase; }

.knowledge-links { padding: 105px 5vw; background: #061427; }
.link-columns { max-width: 1440px; margin: 42px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.link-column { padding: 28px; border: 1px solid var(--rule); background: var(--blue); }
.link-column h3 { margin: 0 0 20px; color: var(--cyan); font: 900 13px var(--display); text-transform: uppercase; letter-spacing: .1em; }
.link-column div { display: grid; gap: 9px; }
.link-column a { min-height: 64px; padding: 15px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border: 1px solid var(--rule); color: var(--white); text-decoration: none; }
.link-column a:hover { border-color: var(--cyan); }
.link-column a span { color: var(--red); }
.concept-iq { max-width: 1440px; margin: 24px auto 0; padding: 34px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; border: 1px solid rgba(33,212,253,.3); background: var(--navy); }
.concept-iq p { margin: 0; font: 900 27px/1.1 var(--display); text-transform: uppercase; }
.concept-sources { padding: 32px 5vw; display: grid; grid-template-columns: 160px 1fr; gap: 25px; background: var(--red); color: white; }
.concept-sources strong { font: 900 15px var(--display); text-transform: uppercase; }
.concept-sources ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; }
.concept-sources a { font-size: 10px; font-weight: 900; text-decoration: none; }
.concept-sources small { grid-column: 2; line-height: 1.5; }

@media (max-width: 900px) { .concept-hero, .concept-heading { grid-template-columns: 1fr; } .concept-board { min-height: 360px; } }
@media (max-width: 680px) { .concept-hero, .depth-section, .watch-section, .myths-section, .knowledge-links { padding-left: 18px; padding-right: 18px; } .concept-hero h1 { font-size: 64px; } .watch-grid, .myth-grid, .link-columns { grid-template-columns: 1fr; } .tradeoff, .concept-iq, .concept-sources { grid-template-columns: 1fr; } .concept-sources small { grid-column: 1; } .depth-switch { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .link-column a { transition: none; } }

/* Playbook 2.0 — animated tactical board */
.concept-hero h1 { line-height: .94; overflow-wrap: anywhere; }
.concept-board .route { stroke-dasharray: 10 7; animation: concept-route 1s linear infinite; }
.concept-board .read { animation: concept-read 2.2s ease-in-out infinite; }
.concept-board .playhead { fill: var(--cyan); filter: drop-shadow(0 0 7px rgba(33,212,253,.9)); }
.concept-board .playhead--red { fill: var(--red); filter: drop-shadow(0 0 7px rgba(224,68,74,.9)); }
.concept-board .playhead--white { fill: var(--white); filter: drop-shadow(0 0 7px rgba(243,245,247,.85)); }
.concept-board .uprights { fill: none; stroke: #f3d176; stroke-width: 5; stroke-linecap: round; }
.concept-board::before { content: none; }
.concept-board .diagram-label { fill: var(--steel); font: 900 9px var(--display); letter-spacing: .05em; }.concept-board .diagram-label--gold { fill: #f3d176; }
.concept-board .coverage-zone, .concept-board .pocket, .concept-board .block-path, .concept-board .scrimmage-line, .concept-board .gain-line, .concept-board .setup-line, .concept-board .snap-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.concept-board .coverage-zone { stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 9 8; opacity: .72; animation: concept-read 2.4s ease-in-out infinite; }
.concept-board .pocket { stroke: rgba(243,245,247,.65); stroke-width: 3; stroke-dasharray: 7 7; }.concept-board .block-path { stroke: var(--white); stroke-width: 4; stroke-dasharray: 9 7; }
.concept-board .scrimmage-line, .concept-board .gain-line { stroke: var(--red); stroke-width: 3; stroke-dasharray: 10 8; }.concept-board .setup-line { stroke: rgba(243,245,247,.35); stroke-width: 2; stroke-dasharray: 7 8; }.concept-board .snap-path { stroke: var(--white); stroke-width: 3; stroke-dasharray: 5 6; }
.concept-board .landing-zone { fill: rgba(243,209,118,.09); stroke: #f3d176; stroke-width: 2; stroke-dasharray: 7 7; }.concept-board .kick-team circle, .concept-board .punt-line circle, .concept-board .field-goal-line circle, .concept-board .coverage-release { fill: var(--red); }.concept-board .return-team circle, .concept-board .returner, .concept-board .holder { fill: var(--navy); stroke: var(--white); stroke-width: 2; }.concept-board .kicker { fill: var(--red); stroke: var(--white); stroke-width: 2; }
.concept-heading h2 { line-height: .98; overflow-wrap: anywhere; }
@keyframes concept-route { to { stroke-dashoffset: -17; } }
@keyframes concept-read { 50% { opacity: .35; } }
@media (max-width: 680px) { .concept-hero h1 { font-size: clamp(48px, 15vw, 64px); line-height: .98; } .concept-board { min-height: 500px; } .concept-board svg { min-height: 310px; } .concept-board__key b { width: 100%; margin-left: 0; } .concept-board__timeline { grid-template-columns: 1fr; } .concept-board__timeline li { grid-template-columns: 18px 1fr; } .concept-board__timeline li b { width: 18px; height: 18px; } .concept-board__timeline button { justify-self: end; } }
@media (prefers-reduced-motion: reduce) { .concept-board .route, .concept-board .read { animation: none; } }
.concept-board--formation { grid-template-rows: auto auto auto auto; }
body:has(.concept-board--formation) .concept-hero { align-items: start; gap: 4vw; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
body:has(.concept-board--formation) .concept-hero h1 { font-size: clamp(48px, 5.5vw, 82px); line-height: 1.12; letter-spacing: -.025em; }
@media (max-width: 1000px) { body:has(.concept-board--formation) .concept-hero { grid-template-columns: minmax(0, 1fr); } }
.concept-board--formation svg { height: auto; min-height: 0; aspect-ratio: 560 / 400; }
.concept-board--formation .concept-board__key, .concept-board--formation .concept-board__key b { font-size: 10px; line-height: 1.5; }
.concept-board--formation .key-ball { background: #d7a72f; }
.concept-board--formation .concept-board__timeline { grid-template-columns: 1fr; }
.concept-board--formation .concept-board__timeline li { display: block; }
.concept-board--formation .concept-board__timeline button { font: 700 12px/1.4 var(--body); min-height: 44px; padding: 10px 12px; text-transform: none; }
.concept-board--formation .concept-board__timeline li button { display: flex; width: 100%; height: 100%; gap: 8px; align-items: center; text-align: left; }
.concept-board--formation .concept-board__timeline li button span { font: inherit; text-transform: none; letter-spacing: 0; color: inherit; }
.concept-board--formation .concept-board__timeline li button b { flex-shrink: 0; }
.concept-board--formation [data-board-phase][aria-current="step"] { color: var(--white); border-color: var(--red); background: rgba(224,68,74,.22); }
.concept-board--formation [data-board-status] { margin: 0; min-height: 3em; color: #e2eaf4; font-size: 15px; line-height: 1.5; }
.formation-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.formation-controls span { font-size: 12px; color: var(--steel); }
.formation-reading { border-top: 1px solid var(--rule); padding: 20px; color: var(--steel); }
.formation-reading h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.1; }
.formation-reading dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.formation-reading dt { color: var(--white); font-size: 13px; font-weight: 800; }
.formation-reading dd { margin: 5px 0 0; font-size: 13px; line-height: 1.5; }
.formation-reading p { font-size: 13px; line-height: 1.6; margin: 18px 0 0; }
.formation-reading a { color: var(--cyan); }
.concept-board--formation button:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
@media (max-width: 680px) {
  .concept-board--formation .concept-board__timeline li button { flex-direction: column; gap: 6px; padding: 10px 5px; text-align: center; }
  .formation-reading { padding: 16px; }
}