/* BenchStats Academy pages (draft 2026-11-01). Loads after site.css and reuses its tokens, buttons,
   sections, FAQ and form band. Marker colors match the Academy product (cyan offense, red defense). */
:root{--offense:#1788A8;--defense:#DB5B52}
html{scroll-padding-top:72px}
.sample [hidden]{display:none}
@media (max-width:860px){html{scroll-padding-top:60px}}

/* Academy header: same shell as the site header, with the product name beside the logo */
.ac-home{display:flex;align-items:center;gap:12px;margin-right:auto;padding-block:8px;text-decoration:none}
.ac-tag{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep);border-left:1px solid var(--line);padding:5px 0 5px 12px}
@media (max-width:640px){.ac-home{gap:9px}.ac-tag{font-size:11px;padding-left:9px}}

/* hero */
.ac-hero .container{padding-block:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center}
.ac-hero h1{font-weight:600;font-size:clamp(38px,4.8vw,62px);line-height:1.02;letter-spacing:-.022em;margin-top:14px}
.ac-hero h1 span{display:block}
.ac-hero .lede{font-size:clamp(17px,1.5vw,20px);color:var(--graphite);max-width:50ch;margin-top:18px;text-wrap:pretty}
.ac-hero .actions{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:24px}
.ac-hero .fine{margin-top:16px;font:500 12px/1.5 var(--mono);color:var(--graphite)}

/* phone frame */
.phone{width:min(100%,300px);justify-self:center;background:var(--white);border:2px solid var(--ink);border-radius:30px;box-shadow:6px 6px 0 var(--ink);padding:18px 14px 16px;display:grid;gap:10px}
.phone-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.phone-top strong{font-weight:600;font-size:17px;line-height:1.2}
.phone-step{font-size:14px;line-height:1.35;color:#2B3138;min-height:2.7em}
.phone .btn{width:100%}

/* court */
.court{display:block;width:100%;height:auto;background:var(--white);border:1px solid var(--line)}
.court .lines{fill:none;stroke:#7D868E;stroke-width:2}
.court .rim{fill:none;stroke:var(--orange);stroke-width:4}
.court .route{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.court .route.pass{stroke-dasharray:3 10}
.court .route.draft{stroke:var(--orange-deep)}
.court .route.wrong{stroke:var(--defense)}
.court .arrow{fill:var(--ink)}
.court .arrow.draft{fill:var(--orange-deep)}
.court .arrow.wrong{fill:var(--defense)}
.tok-o circle{fill:var(--white);stroke:var(--offense);stroke-width:4}
.tok-o text{font:600 18px/1 var(--sans);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.tok-d path{fill:none;stroke:var(--defense);stroke-width:4;stroke-linecap:round}
.ball{fill:var(--orange);stroke:var(--ink);stroke-width:2}

/* sections */
.ac-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ac-steps li{border:1px solid var(--line);background:var(--white);padding:24px;display:grid;gap:12px;align-content:start}
.ac-steps .o{width:44px;height:44px;font-size:17px}
.ac-steps h3{font-weight:600;font-size:22px;line-height:1.2}
.ac-steps p{color:#2B3138;font-size:16px}
.ac-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.ac-split .section-head{margin-bottom:18px}
.ac-shot{justify-self:center;width:min(100%,260px);border:1px solid var(--line);box-shadow:6px 6px 0 var(--ink)}
.ac-shot img{display:block;width:100%;height:auto}
.ac-shot figcaption{font:500 11px/1.4 var(--mono);color:var(--graphite);padding:10px 12px;border-top:1px solid var(--line);background:var(--white)}
.ticks li{position:relative;padding-left:22px;color:#2B3138}
.ticks li + li{margin-top:10px}
.ticks li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:2px;background:var(--orange)}
.ac-sample-cta{margin-top:24px}

/* pricing */
.price{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start;max-width:1000px}
.price-tag{font-weight:600;font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.02em}
.price-tag small{font:500 14px/1 var(--mono);letter-spacing:0;color:var(--graphite);margin-left:6px}
.price-sub{color:var(--graphite);margin-top:12px;max-width:34ch}
.plan-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line)}
.plan-table th,.plan-table td{text-align:left;padding:12px 16px;font-size:15px;line-height:1.4;vertical-align:top}
.plan-table thead th{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);background:var(--board);border-bottom:1px solid var(--line)}
.plan-table tbody th{font-weight:600;width:34%}
.plan-table tr + tr th,.plan-table tr + tr td{border-top:1px solid var(--grid)}

/* sample play */
.sample{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,56px);align-items:start;max-width:1040px}
.sample-court{position:relative}
.sample[data-mode="quiz"] .court{touch-action:none;cursor:crosshair}
.sample-panel{display:grid;gap:16px}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--ink);justify-self:start}
.seg button{font:600 15px/1 var(--sans);color:var(--ink);background:var(--white);border:0;padding:12px 18px;min-height:44px;cursor:pointer}
.seg button + button{border-left:1px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tools button{font:600 15px/1 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--line);padding:12px 14px;min-height:44px;cursor:pointer}
.tools button[aria-pressed="true"]{border-color:var(--orange-deep);background:var(--orange-tint);color:var(--orange-deep)}
.sample-step{font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.sample-q{font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.01em}
.sample-note{color:#2B3138;min-height:3.2em}
.sample-hint{font-size:15px;color:var(--graphite)}
.sample-feedback{font-size:15px;line-height:1.45;padding:10px 12px;border-left:3px solid var(--orange);background:var(--orange-tint)}
.sample-feedback[data-state="wrong"]{border-left-color:var(--defense);background:#FDF0EF}
.ctrls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ghost{font:600 15px/1 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--ink);padding:12px 14px;min-height:44px;cursor:pointer}
.ghost:disabled{opacity:.4;cursor:default}
.speed{font:500 13px/1 var(--mono);color:var(--ink);background:var(--white);border:1px solid var(--line);min-height:44px;padding:0 8px}
.sample-done{border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:20px;display:grid;gap:12px}
.sample-done h2{font-weight:600;font-size:24px;line-height:1.15}
.sample-done .btn{justify-self:start}

/* reassurance strip under the sample */
.sample-foot{margin-top:clamp(24px,3vw,36px);max-width:760px;font-size:15px;color:var(--graphite);border-left:3px solid var(--grid);padding-left:14px}

/* footer link out to the film product */
.site-footer .out{color:var(--white);font-weight:600}

@media (max-width:900px){
  .ac-hero .container,.ac-split,.sample,.price{grid-template-columns:minmax(0,1fr)}
  .ac-steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ac-hero h1{font-size:clamp(28px,8.6vw,38px)}
  .phone,.ac-shot,.sample-done{box-shadow:4px 4px 0 var(--ink)}
  .plan-table th,.plan-table td{padding:10px 12px}
}

/* Academy contact section (2026-11-04). Form styles match the film site's contact form in film-privacy. */
.ac-contact{border-top:1px solid var(--grid);scroll-margin-top:72px}
.ac-contact-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,4vw,64px);align-items:start}
.ac-contact .section-head{margin:0}
.cform{display:grid;gap:14px;max-width:560px}
.cform .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cform label{font-weight:600;font-size:15px;display:block;margin-bottom:6px}
.cform input,.cform textarea{width:100%;font:400 16px/1.3 var(--sans);color:var(--ink);background:var(--white);border:1.5px solid #B9C0C4;border-radius:0;padding:12px 14px}
.cform textarea{min-height:112px;resize:vertical}
.cform input:focus-visible,.cform textarea:focus-visible{outline:3px solid var(--orange);outline-offset:0;border-color:var(--ink)}
.cform .btn{justify-self:start}
.cform .form-status{font-size:15px;line-height:1.5;padding:12px 14px;border-left:3px solid var(--ink);background:var(--white)}
.cform .form-status[data-state="error"]{border-left-color:var(--orange-deep)}
.cform .privacy{font-size:13px;color:var(--graphite);line-height:1.5}
@media (max-width:900px){.ac-contact-grid{grid-template-columns:minmax(0,1fr)}.ac-contact .section-head{margin-bottom:10px}}
@media (max-width:640px){.cform .row2{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------------------------------------
   One screen per section (2026-11-15, site-v3). Every section should fit in the visible area under
   the header at normal zoom. Check with /_dev/devices.html. Phones: repeated cards become swipe rows
   (.phone-swipe from site.css), the pricing table opens from a button, the quiz screenshot sits beside
   its heading. iPads keep two columns where there is room. Short laptops get tighter padding and the
   phone pictures size to the screen height.
   --------------------------------------------------------------------------------------------- */
.section .prose > h2:first-child{margin-top:0}

/* iPads: keep the quiz screenshot and the sample court beside their text */
@media (min-width:641px) and (max-width:900px){
  .ac-split{grid-template-columns:minmax(0,1fr) auto;gap:32px}
  .ac-shot{width:min(240px,calc((100vh - 230px) * .4234))}
  .sample{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px}
}

/* short screens (most laptops, iPad sideways): less padding, pictures sized to the height */
@media (min-width:641px) and (max-height:900px){
  .section{padding-block:clamp(36px,5vh,56px)}
  .ac-shot{width:min(260px,calc((100vh - 230px) * .527))}
  .ac-shot img{aspect-ratio:337/640;object-fit:cover;object-position:top}
  .sample-court{width:min(100%,calc((100vh - 190px) * 1.064));justify-self:center}
  .sample-foot{display:none}
  .faq summary{padding-block:13px}
  .faq summary::after{top:10px}
  .faq-group > h2{margin-top:0}
}
@media (min-width:901px) and (max-height:800px){
  .ac-hero .container{padding-block:32px}
  .ac-hero h1{font-size:clamp(38px,4.2vw,54px)}
  .ac-hero .lede{margin-top:14px}
  .ac-hero .actions{margin-top:18px}
  .ac-hero .phone{width:min(100%,270px)}
  .ac-steps li{padding:20px}
  .section-head{margin-bottom:24px}
  .price-sub{margin-top:10px}
  .plan-table th,.plan-table td{padding:9px 14px}
}
@media (min-width:901px) and (max-height:680px){
  .ac-hero .phone{width:min(100%,240px);padding:14px 12px 12px;gap:8px}
  .ac-hero .phone .btn{display:none}
}

@media (max-width:640px){
  /* hero: copy first, then the animated court in a smaller phone frame */
  .ac-hero .container{padding-block:20px 24px;gap:16px}
  .ac-hero h1{margin-top:10px}
  .ac-hero h1 span:nth-child(-n+2){display:inline}
  .ac-hero .lede{font-size:17px;margin-top:12px}
  .ac-hero .actions{margin-top:16px}
  .ac-hero .fine{margin-top:10px}
  .ac-hero .phone{width:min(100%,210px);padding:10px 10px 12px;gap:6px;border-radius:22px}
  .ac-hero .phone-top,.ac-hero .phone .btn{display:none}
  .ac-hero .phone-step{font-size:13px}

  /* how it works: three steps in a swipe row */
  .ac-steps li{padding:18px;gap:10px}
  .ac-steps .o{width:38px;height:38px;font-size:15px}
  .ac-steps h3{font-size:20px}

  /* quiz: heading beside a cropped screenshot, the four points as a swipe row */
  .ac-split{grid-template-columns:minmax(0,1fr) 140px;gap:14px 16px;align-items:center}
  .ac-split > div:first-child{display:contents}
  .ac-split .section-head{grid-column:1;grid-row:1;margin:0}
  .ac-split .ac-shot{grid-column:2;grid-row:1;width:100%}
  .ac-split .ac-shot img{aspect-ratio:337/560;object-fit:cover;object-position:top}
  .ac-split .ac-shot figcaption{display:none}
  .ac-split .ticks,.ac-split .swipe-dots,.ac-split .ac-sample-cta{grid-column:1/-1}
  .ac-split .ticks.phone-swipe li{margin:0;border:1px solid var(--line);background:var(--white);padding:14px 14px 14px 32px}
  .ac-split .ticks.phone-swipe li::before{left:14px;top:calc(14px + .72em)}
  .ac-split .swipe-dots{margin-top:-6px}
  .ac-split .ac-sample-cta{margin-top:0}

  /* players: three cards in a swipe row */
  .cards.phone-swipe .card-item{padding:18px}
  .ac-sample-cta{margin-top:14px}

  /* pricing: the comparison table opens from a button */
  .price{gap:14px}
  .price-tag{font-size:40px}
  .price-sub{margin-top:10px}
  .plan-table:has(.is-folded){display:none}
  .price .fold-btn{margin-top:0}

  /* contact: name and email side by side, shorter message box */
  .ac-contact .lede{font-size:16px}
  .cform{gap:10px}
  .cform .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .cform textarea{min-height:84px}

  /* sample play: court sized so the controls show under it; the note repeats in the next section */
  .sample{gap:14px}
  .sample-court{width:min(100%,calc((100svh - 362px) * 1.064));justify-self:center}
  .sample-panel{gap:10px}
  .sample-q{font-size:21px}
  .sample-note{min-height:0;font-size:16px}
  .seg button{padding:10px 16px}
  .sample-foot{display:none}

  /* FAQ: tighter rows */
  .faq summary{font-size:17px;padding:14px 34px 14px 0}
  .faq summary::after{top:11px}
  .faq-group > h2{margin:20px 0 4px}

  /* guides list: swipe row */
  .g-list.phone-swipe > a{padding:16px 18px}
  .g-list.phone-swipe strong{font-size:19px}
}
@media (max-width:640px) and (max-height:600px){
  .ac-hero .phone-step,.ac-hero .fine{display:none}
  .ac-hero .lede{font-size:16px}
  .ac-hero .phone{width:min(100%,180px)}
  .ac-steps li{padding:14px}
  .cform textarea{min-height:64px}
  .sample-court{width:min(100%,calc((100svh - 340px) * 1.064))}
}