/* FIF Academy: option 13 "Clean Cut plus" (v1.3.0-preview, lane D, 12 Nov 2026; Riz chose option 13 on 12 Nov).
   Same identity as the rest of the site: the site header, Archivo / FIF Display (wide), yellow only for actions and numbered
   steps, the home page's corner frame marks on heroes and players. Soft grey ground, white rounded cards, pill buttons.
   No slate, clapperboard, hazard stripes, call-sheet tables or monospace. Scoped to .ac. 44px tap targets.
   Contrast (WCAG 2.2 AA): #1d1d1f on #f5f5f7 16:1; #4f4f55 on #f5f5f7 7.4:1; #636369 on #fff 5.9:1 and on #f5f5f7 5.4:1. */
/* r8 polish: the Academy's tokens now live in fif13.css (".sys13 .ac", section 1b). This sheet keeps only the Academy's components. */
.ac{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);font-stretch:100%;padding-bottom:var(--rowgap)}
.ac a{color:inherit}
.ac :focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--y)}
.ac-w{max-width:84rem;margin-inline:auto;padding-inline:var(--gut)}
.ac-narrow{max-width:46rem}
.ac .credit{font:500 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink3)}
.ac p,.ac li{max-width:46rem}
.ac h1,.ac h2,.ac h3{color:var(--ink);font-family:var(--sans)}
.ac h1{font-size:clamp(38px,1.4rem + 4.4vw,84px);font-stretch:112%;font-weight:800;letter-spacing:-.035em;line-height:.97;margin:12px 0 18px;max-width:15ch}
.ac h2{font-size:clamp(26px,1.1rem + 2vw,44px);font-stretch:110%;font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0 0 12px}
.ac h3{font-size:clamp(19px,1rem + .4vw,23px);font-stretch:106%;font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:0 0 8px}
.ac-kick{font:700 12.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0}
.ac-lead{font-size:clamp(18px,1rem + .45vw,22px);color:var(--ink2);max-width:44rem;margin:0 0 24px}
.ac-crumbs{font:600 14px/1.4 var(--sans);color:var(--ink3);margin:0 0 8px}
.ac-crumbs a{color:var(--ink2);text-decoration:none;display:inline-block;padding:10px 0}
.ac-crumbs a:hover{text-decoration:underline}
/* the old slate label now reads as a plain kicker (no hatch, no box, no mono) */
.ac-slate{display:flex;flex-wrap:wrap;gap:4px 14px;font:700 12.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.ac-slate b{font-weight:800;color:var(--ink);margin-left:6px}
/* numbered step badge (yellow: a numbered step to take) */
.ac-n{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--y);color:#000;font:800 19px/1 var(--sans);font-stretch:110%;letter-spacing:0}

/* preview strip: honest demo label on every academy page */
.ac-demo{background:var(--bg3);border-bottom:1px solid var(--line)}
.ac-demo .ac-w{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding-block:8px;font:500 14px/1.45 var(--sans);color:var(--ink2)}
.ac-demo b{font:800 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink);padding:6px 9px;border-radius:999px}
.ac-demo [data-ac-learner]{margin-left:auto;color:var(--ink)}
.ac-demo button{background:var(--bg2);border:1px solid var(--line2);border-radius:999px;color:var(--ink);font:600 14px/1 var(--sans);min-height:44px;padding:0 16px;cursor:pointer}
.ac-demo button:hover{border-color:var(--ink)}

/* buttons: pills; yellow is the action */
.ac-btns{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0;align-items:center}
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font:700 15.5px/1.1 var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .16s;background:transparent;color:var(--ink)}
.ac-btn.y,.ac a.ac-btn.y{background:var(--y);color:#000;border-color:var(--y)}
.ac-btn.y:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.ac-btn.o{border-color:var(--ink);background:var(--bg2)}
.ac-btn.o:hover{background:var(--ink);color:#fff}
.ac-btn.sm{min-height:44px;padding:8px 16px;font-size:14px}
.ac-btn[disabled],.ac-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.ac-btn .pl{width:0;height:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-right:2px;flex:none}
.ac-lnk{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 15px/1 var(--sans);text-decoration:underline;text-underline-offset:5px;color:var(--ink)}

/* tags: quiet grey pills; department colour as a small dot */
[data-g]{--dc:#9aa0a6}[data-g="1"]{--dc:#ff6b57}[data-g="2"]{--dc:#4ea1ff}[data-g="3"]{--dc:#2fd4b5}[data-g="4"]{--dc:#ff9a3c}[data-g="5"]{--dc:#b18cff}[data-g="6"]{--dc:#5ee08a}[data-g="7"]{--dc:#ff6fd8}[data-g="8"]{--dc:#ff8fa3}[data-g="9"]{--dc:#8a8a85}
.ac-tape{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--dc);vertical-align:1px;flex:none}
.ac-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ac-tag{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 var(--sans);padding:6px 10px;border-radius:999px;background:var(--bg3);color:var(--ink2);white-space:nowrap}
.ac-tag.uk{background:var(--ink);color:#fff}
.ac-tag.us{background:transparent;border:1px solid var(--line2)}
.ac-tag.crit{background:var(--y);color:#000;font-weight:800}
.ac-tag.next{background:transparent;border:1px dashed var(--line2)}
.ac-tag.ok{background:var(--ink);color:#fff}

/* ---- hero: rounded cover card with a FIF still, corner frame marks, fact pills under it ---- */
.ac-top{padding-top:clamp(16px,2.4vw,28px)}
.ac-cv{position:relative;border-radius:var(--r2);overflow:hidden;color:#fff;background:#111;min-height:clamp(420px,42vw,600px);display:flex;align-items:flex-end;box-shadow:0 20px 50px -24px rgba(0,0,0,.45);isolation:isolate}
.ac-cv>img,.ac-cv>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ac-cv::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(80deg,rgba(0,0,0,.86),rgba(0,0,0,.5) 48%,rgba(0,0,0,.08) 82%)}
.ac-cv::before,.ac-frame::before{content:"";position:absolute;inset:16px;pointer-events:none;z-index:2;opacity:.9;
  background:linear-gradient(#fff,#fff) 0 0/22px 2px,linear-gradient(#fff,#fff) 0 0/2px 22px,linear-gradient(#fff,#fff) 100% 0/22px 2px,linear-gradient(#fff,#fff) 100% 0/2px 22px,linear-gradient(#fff,#fff) 0 100%/22px 2px,linear-gradient(#fff,#fff) 0 100%/2px 22px,linear-gradient(#fff,#fff) 100% 100%/22px 2px,linear-gradient(#fff,#fff) 100% 100%/2px 22px;background-repeat:no-repeat}
.ac-ct{position:relative;z-index:3;padding:clamp(28px,4.4vw,60px);max-width:46rem}
.ac-cv h1,.ac-cv h2,.ac-cv .ac-kick,.ac-cv .ac-crumbs,.ac-cv .ac-crumbs a{color:#fff}
.ac-cv .ac-lead{color:rgba(255,255,255,.88)}
.ac-cv .ac-crumbs{color:rgba(255,255,255,.75)}
.ac-cv .ac-btn.o{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(6px)}
.ac-cv .ac-btn.o:hover{background:#fff;color:#000}
.ac-cv .ac-lnk{color:#fff}
.ac-cv :focus-visible{outline-color:#fff;box-shadow:0 0 0 7px #000}
.ac-cv .ac-pt{font:700 15px/1.2 var(--sans);color:#fff}
/* plain page head (teachers): text, then the facts as pills */
.ac-hero{padding:clamp(20px,3vw,40px) 0 0}
.ac-hero-g{display:grid;gap:20px}
@media (min-width:1000px){.ac-hero-g{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:48px}.ac-hero-g .ac-cs{margin:0}}
/* hero carousel (index): the academy, then each course */
.ac-hk{padding-top:clamp(16px,2.4vw,28px)}
.ac-hk-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 max(var(--gut),calc((100vw - 84rem)/2 + var(--gut)));scroll-padding-inline:max(var(--gut),calc((100vw - 84rem)/2 + var(--gut)))}
.ac-hk-rail::-webkit-scrollbar{display:none}
.ac-hk-rail>.ac-cv{flex:0 0 min(88%,78rem);scroll-snap-align:start}
.ac-hk-rail>.ac-cv:not(:first-child) .ac-ct{max-width:36rem}
.ac-cue{display:inline-flex;align-items:center;gap:6px;font:600 13.5px/1 var(--sans);color:var(--ink3);white-space:nowrap}
.ac-cue i{font-style:normal}
.ac-hk-f{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
/* fact pills: replace the old call-sheet strip. A <dl> keeps its meaning; each pair is a white pill. */
.ac-cs,.ac-pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.ac-cs>div,.ac-pills>li{display:inline-flex;align-items:baseline;gap:8px;background:var(--bg2);border-radius:999px;padding:10px 16px;box-shadow:0 2px 8px rgba(0,0,0,.06);max-width:100%;min-width:0}
.ac-cs dt,.ac-pills b{font:700 11.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);flex:none}
.ac-cs dd{margin:0;font:700 15px/1.35 var(--sans);color:var(--ink);min-width:0}
.ac-cs .hdr{display:none}
.ac-cs .wide{border-radius:16px}
/* sample call sheet inside a lesson, records and the lesson aside: the same pairs as a white card grid */
.ac-sheet .ac-cs,.ac-rec,.ac-cs.card,.ac-aside .ac-cs,.ac-vcard .ac-cs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:0;background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.ac-sheet .ac-cs>div,.ac-rec>div,.ac-cs.card>div,.ac-aside .ac-cs>div,.ac-vcard .ac-cs>div{display:block;border-radius:0;box-shadow:none;padding:12px 16px;border-bottom:1px solid var(--line);background:transparent}
.ac-sheet .ac-cs .wide,.ac-rec .wide,.ac-cs.card .wide,.ac-aside .ac-cs .wide,.ac-vcard .ac-cs .wide{grid-column:1/-1}
.ac-sheet .ac-cs .hdr,.ac-aside .ac-cs .hdr{display:flex;grid-column:1/-1;justify-content:space-between;gap:8px;background:var(--ink);border:0}
.ac-sheet .ac-cs .hdr dt,.ac-sheet .ac-cs .hdr dd,.ac-aside .ac-cs .hdr dt,.ac-aside .ac-cs .hdr dd{color:#fff;font:700 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:none}
.ac-sheet .ac-cs dd{font-weight:500;font-size:14.5px}
.ac-vcard .ac-cs{box-shadow:none;border:1px solid var(--line)}

/* ---- sections and carousels ---- */
.ac-sec{padding-top:var(--rowgap)}
.ac-sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;margin-bottom:16px}
.ac-sec-h>div:first-child{flex:1 1 20rem;min-width:0}
.ac-sec-h h2{font:800 clamp(22px,1rem + 1vw,28px)/1.1 var(--sans);font-stretch:104%;letter-spacing:-.02em;margin:0}
.ac-sec-h p{color:var(--ink2);margin:6px 0 0}
.ac-nav{display:flex;gap:10px;align-items:center}
.ac .st-car-b{width:44px;height:44px;border-radius:50%;border:0;background:var(--bg2);color:var(--ink);font-size:18px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.ac .st-car-b:hover{background:var(--ink);color:#fff}
.ac-rail{list-style:none;margin:0;padding:6px var(--gut) 18px;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
.ac-rail::-webkit-scrollbar{display:none}
.ac-railwrap{max-width:84rem;margin-inline:auto}
.ac-rail>.st-slide{flex:0 0 min(82vw,380px);scroll-snap-align:start;display:flex}
.ac-rail.wide>.st-slide{flex-basis:min(86vw,440px)}
.ac-rail.lessons>.st-slide{flex-basis:min(84vw,460px)}
/* the scroll-position track under every rail (visible cue on phones as well as desktop) */
.ac-track{display:block;position:relative;height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:0 var(--gut)}
.ac-track i{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--ink);border-radius:2px;transition:left .15s}
.ac-railwrap .ac-track{margin-inline:var(--gut)}
/* four or fewer items fit on a desktop row: a grid, no arrows (S4 #8, #9) */
@media (min-width:1000px){
  .ac-rail.fit{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));overflow:visible;padding-inline:var(--gut)}
  .ac-rail.fit>.st-slide{flex:none}
  .ac-sec-h.fit .ac-nav,.ac-railwrap.fit .ac-track{display:none}
}

/* ---- course card: one card family (photo, title once, status in the meta row) ---- */
.ac-card,.st-slide a.ac-card{display:flex;flex-direction:column;width:100%;background:var(--bg2);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;position:relative;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}
.ac-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.35)}
.ac-card .th{display:block;position:relative;aspect-ratio:16/10;background:#222;overflow:hidden}
.ac-card .th img{width:100%;height:100%;object-fit:cover;transition:transform .32s}
.ac-card:hover .th img{transform:scale(1.04)}
.ac-card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ac-card .bd>span{display:block}
.ac-card .m .mt{display:inline}
.ac-card .ac-kick{display:flex;align-items:center;gap:8px;letter-spacing:.1em}
.ac-card .t{font:800 21px/1.12 var(--sans);font-stretch:106%;letter-spacing:-.015em;margin:0}
.ac-card .d{font-size:15.5px;color:var(--ink2);margin:0}
.ac-card .m{display:block;flex:none;font:600 14px/1.4 var(--sans);color:var(--ink3);margin-top:auto}
.ac-card .st{display:inline-block;margin:0 10px 6px 0;vertical-align:1px;font:800 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--ink);color:#fff}
.ac-card .st.next{background:var(--bg3);color:var(--ink)}
.ac-card .bd>.go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:700 15px/1 var(--sans);padding:12px 18px;border-radius:999px;background:var(--y);color:#000;margin-top:4px}
.ac-card .go.o{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.ac-card:hover .go.o{background:var(--ink);color:#fff}
/* progress on a course card (written by the academy script) */
.ac-tc{display:flex;align-items:center;gap:10px;position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.94);border-radius:999px;padding:7px 12px;color:var(--ink)}
.ac-tc .v{font:700 12.5px/1 var(--sans);white-space:nowrap}
.ac-tc .l{flex:1;height:4px;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
.ac-tc .l i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0}
.ac-tc[hidden]{display:none}

/* lesson card (course page lessons carousel): still, minutes, lesson number, title over the image */
.ac-les,.st-slide a.ac-les{display:flex;flex-direction:column;width:100%;text-decoration:none;color:#fff;border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:16/10;background:#222;box-shadow:var(--sh2)}
.ac-les img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .32s}
.ac-les:hover img{transform:scale(1.04)}
.ac-les::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.88))}
.ac-les .tx{position:relative;z-index:1;margin-top:auto;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.ac-les .nn{font:700 13px/1.2 var(--sans);color:rgba(255,255,255,.85)}
.ac-les .lt{font:800 clamp(18px,1rem + .4vw,21px)/1.15 var(--sans);font-stretch:104%;letter-spacing:-.01em}
.ac-les .lm{font:500 14px/1.35 var(--sans);color:rgba(255,255,255,.85)}
.ac-les .ls{position:absolute;right:12px;top:12px;z-index:2;font:700 12.5px/1 var(--sans);padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff}
.ac-les .ls.done{background:#fff;color:#000}
.ac-les .ls.prog{background:var(--y);color:#000}
.ac-les .ls.lock{background:rgba(0,0,0,.72)}
.ac-les.fin{background:var(--ink)}
.ac-les.fin::after{content:none}
.ac-les.fin .tx{margin-top:auto}
.ac-les:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* stage cards and the learning model: white cards, yellow numbered steps */
.ac-stage{position:relative;width:100%;border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;background:var(--bg2);box-shadow:var(--sh)}
.ac-stage .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--y);color:#000;font:800 21px/1 var(--sans);font-stretch:110%;margin:0 0 6px}
.ac-stage .n small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ac-stage p{margin:0;color:var(--ink2);font-size:15.5px}
.ac-stage .e{font:600 14px/1.4 var(--sans);color:var(--ink);border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
.ac .lm{margin-top:0}
.ac .lm-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.ac .lm-steps li{max-width:none;background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh);padding:22px;display:flex;flex-direction:column;gap:8px}
.ac .lm-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--y);color:#000;font:800 21px/1 var(--sans);font-stretch:110%}
.ac .lm-t{font:800 21px/1.15 var(--sans);font-stretch:106%;letter-spacing:-.015em;color:var(--ink);margin:6px 0 0}
.ac .lm-steps p{margin:0;font-size:15.5px;color:var(--ink2)}
.ac .lm-steps .lm-t{color:var(--ink)}
.ac .lm-small{color:var(--ink3);font-size:15px;margin-top:16px}
.ac .lm-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ac .lm .b{border-radius:999px}
.ac .lm-short{background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh);padding:16px 20px}
.ac .lm-short p{margin:0}

/* six steps */
.ac-beats{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));counter-reset:beat}
@media (min-width:900px){.ac-beats{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ac-beats li{background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh);padding:16px;counter-increment:beat}
.ac-beats li::before{content:counter(beat);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg3);font:800 15px/1 var(--sans);color:var(--ink);margin-bottom:10px}
.ac-beats b{display:block;font:800 19px/1.1 var(--sans);font-stretch:106%;margin-bottom:6px}
.ac-beats span{font-size:14.5px;color:var(--ink2);display:block}

/* grids, boxes and door cards */
.ac-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
/* r11 design: nine Q&A boxes as three full rows of three (never a lone box on the last row) */
.ac-grid.ac-grid-3{grid-template-columns:1fr}@media (min-width:900px){.ac-grid.ac-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ac-box{border-radius:var(--r);padding:20px 22px;background:var(--bg2);box-shadow:var(--sh)}
.ac-box>:last-child{margin-bottom:0}
.ac-box.ink{background:var(--ink);color:#fff}
.ac-box.ink h3,.ac-box.ink p{color:#fff}
.ac-box .n{font:700 12.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.ac-box blockquote{margin:12px 0 0;padding:12px 16px;border-left:4px solid var(--ink);border-radius:0 10px 10px 0;font:400 15.5px/1.5 var(--sans);color:var(--ink);background:var(--bg3)}
.ac-door>span{display:block}
.ac-door{display:flex;flex-direction:column;gap:6px;border-radius:var(--r);padding:20px;text-decoration:none;min-height:170px;background:var(--bg2);box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}
.ac-door:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.35)}
.ac-door .t{font:800 21px/1.1 var(--sans);font-stretch:106%}
.ac-door .d{font-size:15.5px;color:var(--ink2)}
.ac-door .a{margin-top:auto;font:700 15px/1 var(--sans);text-decoration:underline;text-underline-offset:5px}

/* closing band: white, to sit between the grey academy and the black footer */
.ac-band{background:var(--bg2);color:var(--ink);margin-top:var(--rowgap);padding:clamp(32px,5vw,56px) 0}
.ac-band .ac-box{background:var(--bg);box-shadow:none}

/* prose and tables */
.ac-prose{max-width:46rem}
.ac-prose h2{margin-top:40px}
.ac-prose h3{margin-top:28px}
.ac-prose ul,.ac-prose ol{padding-left:1.2rem}
.ac-prose li{margin:6px 0}
.ac-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;margin:12px 0 24px;background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.ac-table th,.ac-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.ac-table tr:last-child td{border-bottom:0}
.ac-table th{font:700 12.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);background:var(--bg3)}
.ac-tw{overflow-x:auto}

/* course page lesson list (kept for courses that are not open yet) */
.ac-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ac-list li{max-width:none}
.ac-list a,.ac-list li.outline div{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh);text-decoration:none;min-height:64px}
.ac-list li.outline div{grid-template-columns:44px minmax(0,1fr)}
.ac-list a:hover .lt{text-decoration:underline}
.ac-list .nn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bg3);font:800 16px/1 var(--sans);color:var(--ink)}
.ac-list .lt{font:700 18px/1.25 var(--sans);font-stretch:104%}
.ac-list .lm{display:block;font:500 15px/1.4 var(--sans);color:var(--ink2);margin-top:4px}
.ac-list .ls{font:700 13px/1 var(--sans);color:var(--ink3);text-align:right;white-space:nowrap}
.ac-list .ls.done{color:#fff;background:var(--ink);padding:6px 10px;border-radius:999px}
.ac-list .ls.prog{color:#000;background:var(--y);padding:6px 10px;border-radius:999px}

/* ---- lesson ---- */
.ac-lhead{padding-top:clamp(20px,3vw,32px)}
.ac-lhead h1{font-size:clamp(34px,1.2rem + 3.4vw,64px);max-width:20ch;margin:6px 0 14px}
.ac-lesson{display:grid;gap:32px;padding-top:20px}
@media (min-width:1080px){.ac-lesson{grid-template-columns:minmax(0,1fr) 340px}}
.ac-beatnav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-top:18px}
.ac-beatnav ol{list-style:none;margin:0 auto;padding:8px var(--gut);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:84rem}
.ac-beatnav ol::-webkit-scrollbar{display:none}
/* r11 design: on a phone the six steps scroll sideways; a fade and arrow on the right edge says so (hidden at the end, or when all six fit) */
.ac-beatcue{position:absolute;top:0;right:0;bottom:1px;display:flex;align-items:center;justify-content:flex-end;padding:0 var(--gut) 0 44px;background:linear-gradient(to right,transparent,var(--bg) 60%);pointer-events:none;transition:opacity .2s}
.ac-beatcue i{font:800 16px/1 var(--sans);font-style:normal;color:var(--ink)}
.ac-beatnav.az-end .ac-beatcue,.ac-beatnav.az-fits .ac-beatcue{opacity:0}
.ac-mapd summary{cursor:pointer;font:600 14.5px/1.4 var(--sans);color:var(--ink2);min-height:44px;display:flex;align-items:center}
.ac-mapd[open] summary{margin-bottom:4px}
.ac-beatnav li{flex:0 0 auto;max-width:none}
.ac-beatnav a{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--bg2);color:var(--ink2);text-decoration:none;font:600 14.5px/1 var(--sans);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ac-beatnav a[aria-current=step]{background:var(--ink);color:#fff}
.ac-beatnav a.done{color:var(--ink)}
.ac-beatnav a.done::after{content:"✓";margin-left:2px}
.ac-beat{padding:36px 0 8px;scroll-margin-top:72px}
.ac-beat+.ac-beat{border-top:1px solid var(--line)}
/* r11 design: on a phone the lesson head is compact so the first film sits high (board mode is for classroom screens, so it stays on tablets and up) */
@media (max-width:759px){.ac-lhead .ac-pills{margin-top:10px;gap:6px}.ac-lhead .ac-pills>li{padding:7px 12px;font-size:14px}.ac-lhead h1{margin:4px 0 8px}.ac-lhead .ac-btns{display:none}.ac-lhead .ac-kick{margin-bottom:0}.ac-lesson{padding-top:4px}.ac-lesson .ac-beat:first-child{padding-top:20px}.ac-lesson #b-watch{padding-top:24px}.ac-lesson .ac-outcome{margin-bottom:6px}}
.ac-beat>h2{font-size:clamp(24px,1rem + 1.5vw,34px);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ac-beat>h2 .ac-slate{margin:0;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--y);color:#000;font:800 18px/1 var(--sans);letter-spacing:0}
.ac-beat>h2 .ac-slate>span{padding:0}
.ac-outcome{font:700 clamp(20px,1rem + .8vw,27px)/1.25 var(--sans);font-stretch:104%;max-width:40rem;margin:0 0 16px}
.ac-map{font:500 14.5px/1.5 var(--sans);color:var(--ink2);margin:0;padding:0;list-style:none}
.ac-map li{padding:8px 0;border-top:1px solid var(--line)}
.ac-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r2);overflow:hidden;box-shadow:0 20px 50px -24px rgba(0,0,0,.5)}
.ac-player::before{content:"";position:absolute;inset:14px;pointer-events:none;z-index:4;opacity:.85;
  background:linear-gradient(#fff,#fff) 0 0/20px 2px,linear-gradient(#fff,#fff) 0 0/2px 20px,linear-gradient(#fff,#fff) 100% 0/20px 2px,linear-gradient(#fff,#fff) 100% 0/2px 20px,linear-gradient(#fff,#fff) 0 100%/20px 2px,linear-gradient(#fff,#fff) 0 100%/2px 20px,linear-gradient(#fff,#fff) 100% 100%/20px 2px,linear-gradient(#fff,#fff) 100% 100%/2px 20px;background-repeat:no-repeat}
.ac-player:has(iframe)::before{content:none}
.ac-player img{width:100%;height:100%;object-fit:cover;opacity:.82}
.ac-player iframe,.ac-player>div{position:absolute;inset:0;width:100%;height:100%;border:0}
.ac-bigplay{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:var(--y);color:#000;border:0;cursor:pointer;display:grid;place-items:center;z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .16s}
.ac-bigplay:hover{transform:scale(1.06)}
.ac-bigplay svg{width:30px;height:30px;margin-left:5px}
.ac-vids{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.ac-vids li{max-width:none}
.ac-vid{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:start;width:100%;text-align:left;background:var(--bg2);border:0;border-radius:var(--r);box-shadow:var(--sh);color:var(--ink);padding:10px;cursor:pointer;min-height:44px;font:inherit}
.ac-vid[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink),var(--sh)}
.ac-vid img{width:132px;height:74px;object-fit:cover;border-radius:10px}
.ac-vid .vt{font:700 16px/1.25 var(--sans);display:block}
.ac-vid .vc{font:500 14px/1.4 var(--sans);color:var(--ink3);display:block;margin:4px 0 6px}
.ac-vid .vn{font-size:14px;color:var(--ink2);display:block;margin-top:6px}
.ac-meter{display:flex;align-items:center;gap:12px;margin:14px 0 0;font:600 14px/1.3 var(--sans);color:var(--ink2)}
.ac-meter .bar{flex:1;height:6px;background:var(--line);border-radius:3px;position:relative;max-width:360px;overflow:hidden}
.ac-meter .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0}
.ac-teach{display:grid;gap:16px;margin-top:24px;align-items:start}
@media (min-width:800px){.ac-teach{grid-template-columns:1fr 1fr}.ac-teach>:last-child:nth-child(odd){grid-column:1/-1}}/* r11: an odd last box runs full width */
.ac-teach .ac-box ul{margin:0;padding-left:1.1rem}
.ac-teach .ac-box li{margin:6px 0;font-size:15.5px}
.ac-teach .ac-box li,.ac-teach .ac-box p{max-width:none}
.ac-sheet{margin-top:20px}

/* check */
.ac-check{border-radius:var(--r);padding:20px 22px;background:var(--bg2);box-shadow:var(--sh)}
.ac-check fieldset{border:0;padding:0;margin:0 0 20px}
.ac-check legend{font:700 18px/1.35 var(--sans);margin:0 0 12px;padding:0;max-width:44rem}
.ac-check legend .ac-tag{margin-right:8px;vertical-align:2px}
.ac-opts{display:grid;gap:8px}
.ac-opt{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-size:16px;line-height:1.35;background:var(--bg2)}
.ac-opt:hover{border-color:var(--ink)}
.ac-opt input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.ac-opt:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.ac-opt.right{border-color:var(--ink);background:var(--ink);color:#fff}
.ac-opt.wrong{border-style:dashed;color:var(--ink2)}
.ac-fb{font-size:15px;margin:8px 0 0;color:var(--ink2)}
.ac-result{border-radius:12px;background:var(--bg3);padding:14px 16px;margin:16px 0 0;font-weight:600}
.ac-result.pass{background:var(--ink);color:#fff}
.ac-result.fail{border:1.5px dashed var(--line2);background:transparent}
.ac-result p{margin:4px 0;font-weight:400}
.ac-rules{font:500 14.5px/1.5 var(--sans);color:var(--ink3);margin:0 0 14px}

/* do / reflect forms */
.ac-form label,.ac-form .lbl{display:block;font:700 16px/1.35 var(--sans);margin:18px 0 8px;max-width:46rem}
.ac-form .hint{font:500 14px/1.4 var(--sans);color:var(--ink3);margin:-4px 0 8px}
.ac-form textarea,.ac-form input[type=text],.ac-form select{width:100%;max-width:46rem;background:var(--bg2);border:1.5px solid var(--line2);border-radius:12px;color:var(--ink);padding:12px 14px;font:400 16px/1.45 var(--sans);min-height:48px}
.ac-form textarea:focus,.ac-form input:focus,.ac-form select:focus{border-color:var(--ink)}
.ac-form .checks{display:grid;gap:6px;max-width:46rem}
.ac-form .checks label{display:flex;gap:12px;align-items:flex-start;font:400 16px/1.35 var(--sans);margin:0;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg2);min-height:48px;cursor:pointer}
.ac-form .checks input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin-top:1px}
.ac-form .order{display:grid;gap:6px;max-width:46rem}
.ac-form .order label{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:12px;align-items:center;font-weight:400;margin:0}
.ac-scene{border-left:4px solid var(--ink);border-radius:0 12px 12px 0;padding:12px 16px;background:var(--bg2);font-size:16px;max-width:46rem}
.ac-status{font:700 14px/1.4 var(--sans);margin:16px 0 0;padding:10px 14px;border-radius:999px;background:var(--bg3);display:inline-block}
.ac-status.met{background:var(--ink);color:#fff}
.ac-status.sub{background:var(--bg2);box-shadow:0 0 0 1.5px var(--ink)}
.ac-rubric{margin:8px 0 0;padding-left:1.1rem;color:var(--ink2);font-size:15px}
.ac-model{margin-top:12px;background:var(--bg2);border-radius:12px;padding:0 16px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ac-model summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font:700 15px/1 var(--sans)}
.ac-model[open]{padding-bottom:12px}

/* aside */
.ac-aside{display:grid;gap:16px;align-content:start}
@media (min-width:1080px){.ac-aside{position:sticky;top:72px}}
.ac-upnext{list-style:none;margin:0;padding:6px;background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh)}
.ac-upnext li{max-width:none}
.ac-upnext a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:10px;border-radius:10px;text-decoration:none;font-size:15px;min-height:44px;align-items:center}
.ac-upnext a:hover{background:var(--bg)}
.ac-upnext a[aria-current=page]{background:var(--ink);color:#fff}
.ac-upnext a[aria-current=page] .nn{background:var(--y);color:#000}
.ac-upnext .nn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg3);font:800 13px/1 var(--sans);color:var(--ink)}
.ac-upnext .s{font:700 12px/1 var(--sans);color:var(--ink3)}
.ac-upnext .s.done{color:#fff;background:var(--ink);padding:5px 8px;border-radius:999px}
.ac-upnext a[aria-current=page] .s{color:#fff}
.ac-pn{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line)}

/* board mode: a dark classroom screen (projected), same type, no monospace */
.ac-board{position:fixed;inset:0;z-index:300;background:#0a0a0b;color:#fff;display:flex;flex-direction:column;font-family:var(--sans)}
.ac-board[hidden]{display:none}
.ac-board .bd-top{display:flex;align-items:center;gap:16px;padding:12px 24px;border-bottom:1px solid #2c2c2c}
.ac-board .bd-t{font:700 14px/1.3 var(--sans);color:#d5d5d0;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-board .bd-steps{display:flex;gap:8px;padding:12px 24px;overflow-x:auto;margin:0;list-style:none}
.ac-board .bd-steps li{flex:1 0 auto}
.ac-board .bd-steps button{width:100%;background:#1b1c1f;border:0;border-radius:999px;color:#c9c9c4;font:600 14px/1.2 var(--sans);padding:8px 14px;text-align:center;cursor:pointer;min-height:44px}
.ac-board .bd-steps button[aria-current=step]{background:#fff;color:#000}
.ac-board .bd-body{flex:1;overflow:auto;display:grid;place-items:center;padding:32px 24px}
.ac-board .bd-slide{width:min(1100px,100%)}
.ac-board .bd-slide h2{font-size:clamp(34px,5vw,76px);color:#fff;max-width:20ch}
.ac-board .bd-slide p,.ac-board .bd-slide li{font-size:clamp(18px,1.9vw,28px);line-height:1.45;color:#e6e6e1;max-width:56rem}
.ac-board .bd-slide .ac-player{max-width:1000px}
.ac-board .bd-q{font:700 clamp(22px,2.4vw,36px)/1.25 var(--sans);margin:0 0 20px;color:#fff}
.ac-board .ac-opt{font-size:clamp(17px,1.7vw,24px);border-color:#555;background:transparent;color:#fff}
.ac-board .timer{font:800 clamp(56px,10vw,140px)/1 var(--sans);font-variant-numeric:tabular-nums;margin:16px 0}
.ac-board .bd-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid #2c2c2c}
.ac-board .bd-k{font:600 14px/1.3 var(--sans);color:#b5b5b0}
.ac-board .ac-btn.o{background:transparent;border-color:#fff;color:#fff}
.ac-board .ac-btn.o:hover{background:#fff;color:#000}
.ac-board :focus-visible{outline-color:#fff;box-shadow:0 0 0 7px #000}

/* verify and records */
.ac-vform{display:flex;flex-wrap:wrap;gap:8px;max-width:40rem}
.ac-vform input{flex:1 1 16rem;min-height:52px;background:var(--bg2);border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);padding:0 18px;font:600 18px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.ac-vout{margin-top:20px}
.ac-vcard{border-radius:var(--r);background:var(--bg2);box-shadow:var(--sh);padding:20px 22px;max-width:40rem}
.ac-vcard.ok{box-shadow:0 0 0 2px var(--ink),var(--sh)}
.ac-vcard.none{box-shadow:none;border:1.5px dashed var(--line2)}

/* phones: video and pictures first, generous targets, rails peek */
@media (max-width:640px){
  .ac-cv{min-height:500px;padding-top:120px}
  .ac-hk-rail>.ac-cv:not(:first-child) .ac-lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ac h1{font-size:40px}
  .ac-hk-rail>.ac-cv{flex-basis:90%}
  .ac-ct{padding:22px 20px 24px}
  .ac-cv::before{inset:12px}
  .ac-cv .ac-lead{font-size:17px}
  .ac-cs{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
  .ac-cs>div{display:block;border-radius:0;box-shadow:none;padding:10px 14px;border-bottom:1px solid var(--line)}
  .ac-cs>div:nth-child(odd):not(.wide){border-right:1px solid var(--line)}
  .ac-cs .wide{grid-column:1/-1;border-radius:0}
  .ac-cs dt{display:block;margin-bottom:2px}
  .ac-cs dd{font-size:14.5px}
  .ac-vid{grid-template-columns:104px minmax(0,1fr)}
  .ac-vid img{width:104px;height:58px}
  .ac-sec-h .ac-nav .st-car-b{display:none}
  .ac-demo .ac-w{font-size:13px}
}
/* print: the online record prints cleanly */
@media print{
  .fh,.ff,.preview-bar,.ac-demo,.ac-beatnav,.ac-noprint,.skip{display:none!important}
  .ac{background:#fff!important;color:#000!important}
  .ac *{color:#000!important;background:transparent!important;border-color:#999!important;box-shadow:none!important}
}
@media (prefers-reduced-motion:reduce){.ac *{transition:none!important;scroll-behavior:auto!important}.ac-card:hover,.ac-door:hover{transform:none}}
/* r6 lane D: lessons link back to the learning paths their films come from */
.ac-mlt{margin:12px 0 0;font-size:15.5px;color:var(--ink2)}
.ac-mlt a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* r6: course list on phones: shorter images so eight courses don't run to 8,000px; 2-up from 600px */
@media (max-width:599px){.ac-grid .ac-card .th{aspect-ratio:21/9}.ac-grid .ac-card .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}