/* Watch and Learn: 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 and the Academy (academy.css uses the same tokens): the site header, Archivo /
   FIF Display (wide), yellow only for actions, the home page's corner frame marks on the hero and the player. Soft grey
   ground, rounded cards with shadows, pill buttons, carousels everywhere with three visible scroll cues (arrows on desktop,
   the next card peeking in, "Scroll for more" with a live position bar on every size). No slate, clapperboard, call-sheet
   strip, timecode, hazard stripes or monospace. Targets 44px. No auto-advance. Reduced motion respected.
   Contrast (WCAG 2.2 AA): #1d1d1f on #f5f5f7 16:1; #4f4f55 on #f5f5f7 7.4:1; #636369 on #fff 5.9:1 / on #f5f5f7 5.4:1. */
.wl-app{--bg:#f5f5f7;--bg2:#fff;--bg3:#ececf0;--ink:#1d1d1f;--ink2:#4f4f55;--ink3:#636369;--line:#d2d2d7;--line2:#c7c7cc;--y:#ffe600;
  --sans:"FIF Display","Archivo",Helvetica,Arial,sans-serif;--r:14px;--r2:22px;--sh:0 8px 24px -12px rgba(0,0,0,.35);--sh2:0 4px 20px -10px rgba(0,0,0,.22);
  --gut:clamp(16px,4vw,40px);--gap:18px;--rowgap:clamp(36px,4.6vw,52px);--t-fast:160ms;--t-med:320ms;--ease:cubic-bezier(.2,.7,.2,1);
  --edge:max(var(--gut),calc((100vw - 84rem)/2 + var(--gut)));
  container:wl/inline-size;position:relative;color:var(--ink);background:var(--bg);margin:0 calc(50% - 50vw);padding:0 0 var(--rowgap);font:400 17px/1.55 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased}
.wl-app *{box-sizing:border-box}
.wl-app a{color:inherit}
.wl-app :focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--y)}
.wl-app .mono{font:inherit}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.watch-app .hero,body.watch-app .phead[hidden]{display:none}body.watch-app .phead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0;margin:0;border:0}body.watch-app{overflow-x:clip}
body.watch-app main{background:#f5f5f7}
body.watch-app .flow>.wide:first-child,body.watch-app .flow-sec>.wide:first-child{margin-top:0}
.wl-deep .wl-pre{display:none}

/* department colour: a small dot only */
[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}[data-g="10"]{--dc:#d4b483}
.wl-app .tape{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dc,#9aa0a6);flex:none;vertical-align:1px}
.wl-app .slate{display:none}

/* ---- sub-bar: one row of sections, More, search (same pattern as the site's section bars) ---- */
.wl-bar{position:sticky;top:var(--fh-b,64px);z-index:20;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;justify-content:space-between;padding:4px var(--edge);background:rgba(245,245,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.wl-nav{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0}
.wl-nav-k{font:800 15px/1 var(--sans);color:var(--ink);white-space:nowrap;padding-right:14px;border-right:1px solid var(--line2)}
.wl-nav-l{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;min-width:0}
.wl-nav-l::-webkit-scrollbar{display:none}
.wl-nav-l>li{flex:none;margin:0;padding:0}
.wl-nav-l>li::before{content:none}
.wl-nav a,.wl-more summary{display:flex;align-items:center;min-height:44px;padding:0 11px;color:var(--ink2);text-decoration:none;font:600 14.5px/1 var(--sans);border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer}
.wl-nav a:hover,.wl-more summary:hover{color:var(--ink)}
.wl-nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
.wl-more{position:relative;flex:none}
.wl-more summary{list-style:none}
.wl-more summary::-webkit-details-marker{display:none}
.wl-more summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:-4px 0 0 8px}
.wl-more-m{position:absolute;right:0;top:100%;z-index:30;list-style:none;margin:6px 0 0;padding:8px;min-width:15rem;background:var(--bg2);border-radius:var(--r);box-shadow:0 16px 40px -12px rgba(0,0,0,.3)}
.wl-more-m li{margin:0;padding:0}.wl-more-m li::before{content:none}
.wl-more-m a{border-radius:10px;border:0;padding:0 12px}
.wl-more-m a:hover{background:var(--bg)}
.wl-find{display:flex;gap:8px;align-items:center;flex:0 1 22rem;margin:0}
.wl-find input{flex:1;min-width:0;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;background:var(--bg2);color:var(--ink);font:400 15px/1 var(--sans)}
.wl-find input::placeholder{color:var(--ink3)}
.wl-find .wl-btn{min-height:44px;padding:0 18px}
@media (max-width:899px){.wl-find{flex:1 1 100%;padding-bottom:6px}.wl-nav-k{display:none}}

/* ---- buttons: pills; yellow is the action ---- */
.wl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;font:700 15.5px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform var(--t-fast),background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);white-space:nowrap}
.wl-btn-1{background:var(--y);color:#000;border-color:var(--y)}
.wl-btn-1:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.wl-btn-2{background:var(--bg2);color:var(--ink);border-color:var(--ink)}
.wl-btn-2:hover{background:var(--ink);color:#fff}
.wl-btn-3{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.75);backdrop-filter:blur(6px)}
.wl-btn-3:hover{background:#fff;color:#000}
.wl-play{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;flex:none}
.wl-load{padding:48px var(--edge);color:var(--ink2);margin:0}

/* ---- hero: a rounded carousel, corner frame marks on every slide, the reel first ---- */
.wl-hero{padding:22px 0 0}
.wl-hk{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--edge);scroll-padding-inline:var(--edge)}
.wl-hk::-webkit-scrollbar{display:none}
.wl-s{position:relative;flex:0 0 min(88%,78rem);min-height:clamp(420px,40vw,580px);display:flex;align-items:flex-end;border-radius:var(--r2);overflow:hidden;scroll-snap-align:start;color:#fff;background:#111;box-shadow:0 20px 50px -24px rgba(0,0,0,.45);isolation:isolate}
.wl-s>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.wl-s::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(80deg,rgba(0,0,0,.86),rgba(0,0,0,.48) 50%,rgba(0,0,0,.05) 82%)}
.wl-s::before{content:"";position:absolute;inset:16px;pointer-events:none;z-index:3;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}
.wl-s-t{position:relative;z-index:2;padding:clamp(28px,4.2vw,58px);max-width:44rem}
.wl-s:not(:first-child) .wl-s-t{max-width:34rem}
.wl-k{font:700 12.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 10px}
.wl-hero-t{font-family:var(--sans);font-size:clamp(36px,1rem + 4cqi,76px);font-stretch:112%;font-weight:800;letter-spacing:-.035em;line-height:.97;margin:0 0 16px;color:#fff;max-width:14ch}
h2.wl-hero-t{font-size:clamp(32px,1rem + 3cqi,60px)}
.wl-hero-c{font-size:clamp(17px,1rem + .4cqi,21px);line-height:1.45;color:rgba(255,255,255,.88);margin:0 0 22px;max-width:36rem}
.wl-hero-b{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0}
.wl-pt{font:700 15px/1.2 var(--sans);color:#fff}
.wl-s-play{position:absolute;right:clamp(24px,4vw,56px);top:50%;transform:translateY(-50%);z-index:2;width:88px;height:88px;border-radius:50%;border:0;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);cursor:pointer;display:none}
.wl-s-play::after{content:"";position:absolute;left:36px;top:28px;border-left:24px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}
.wl-s-play:hover{background:var(--y)}.wl-s-play:hover::after{border-left-color:#000}
@container wl (min-width:900px){.wl-s-play{display:block}}
.wl-s :focus-visible{outline-color:#fff;box-shadow:0 0 0 7px #000}
.wl-hk-f{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px var(--edge) 0}
.wl-hk-track{position:relative;display:block;flex:0 1 220px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.wl-hk-track i{position:absolute;top:0;bottom:0;left:0;width:20%;background:var(--ink);border-radius:2px;transition:left .15s}

/* department chips under the hero and on department pages */
.wl-chips{position:relative;margin:18px 0 0}
.wl-chips-in{display:flex;gap:8px;list-style:none;margin:0;padding:4px var(--edge) 8px;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--edge)}
.wl-chips-in::-webkit-scrollbar{display:none}
.wl-chips-in>li{flex:none;margin:0;padding:0}.wl-chips-in>li::before{content:none}
.wl-chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:5px 16px 5px 5px;border-radius:999px;background:var(--bg2);box-shadow:0 2px 8px rgba(0,0,0,.08);font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap;color:var(--ink)}
.wl-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.wl-chip:hover{box-shadow:0 0 0 1.5px var(--ink)}
.wl-chip.on{background:var(--ink);color:#fff}
.wl-chip-all{padding-left:16px}
.wl-new{font:800 10.5px/1 var(--sans);font-style:normal;letter-spacing:.07em;text-transform:uppercase;background:var(--ink);color:#fff;padding:3px 6px;border-radius:4px}
.wl-chip.on .wl-new{background:#fff;color:var(--ink)}
.wl-chips::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;pointer-events:none;background:linear-gradient(90deg,rgba(245,245,247,0),var(--bg) 80%)}

/* ---- page heads (inner screens) ---- */
.wl-page{padding:36px var(--edge) 0;margin:0}
.wl-page h1{font-family:var(--sans);font-size:clamp(36px,1.2rem + 3.6cqi,68px);font-stretch:112%;font-weight:800;letter-spacing:-.035em;line-height:.97;margin:0 0 14px;color:var(--ink);max-width:16ch}
.wl-page h2{font-family:var(--sans);font-stretch:106%;font-weight:800;letter-spacing:-.02em;font-size:clamp(22px,1rem + 1.2cqi,28px);margin:24px 0 8px;color:var(--ink)}
.wl-page .wl-k{color:var(--ink3)}
.wl-page .wl-k a{color:var(--ink2)}
.wl-lede{font-size:clamp(17px,1rem + .4cqi,21px);color:var(--ink2);max-width:46rem;margin:0}
.wl-lede a,.wl-prose a,.wl-out a,.wl-sub a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wl-count{font:600 14px/1.4 var(--sans);color:var(--ink3);margin:10px 0 0}
.wl-prose{padding-top:8px}.wl-prose p,.wl-prose li{max-width:46rem;color:var(--ink2)}.wl-prose strong{color:var(--ink)}
.wl-btns{display:flex;flex-wrap:wrap;gap:10px}
.wl-sub{padding-top:24px}.wl-sub p{color:var(--ink2);max-width:46rem}
.wl-out{padding:28px var(--edge) 0;margin:0;color:var(--ink2)}
.wl-small{font-size:14.5px;color:var(--ink3)}
.wl-pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.wl-pills li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 16px;border-radius:999px;background:var(--bg2);box-shadow:0 2px 8px rgba(0,0,0,.06);font:700 14.5px/1 var(--sans);color:var(--ink);margin:0}
.wl-pills li::before{content:none}
.wl-page+.wl-chips{margin-top:20px}
.wl-lo{list-style:none;padding:0;display:flex;gap:16px;overflow-x:auto;margin:16px 0 32px;scrollbar-width:none}
.wl-lo li{flex:0 0 min(20rem,80%);background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh2);padding:18px;margin:0}
.wl-lo li::before{content:none}
.wl-lo h3{font-size:17px;margin:0 0 6px}.wl-lo-c{font-size:14.5px;color:var(--ink2);margin:0}
.wl-linkout{padding-top:28px}

/* ---- rows (carousels) ---- */
.rail{container-type:inline-size;margin-top:var(--rowgap)}
.wl-pre>.rail:first-of-type,.wl-page+.rail,.wl-chips+.rail{margin-top:32px}
.rail-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 18px;padding:0 var(--edge);margin-bottom:12px}
.rail-ht{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0;flex:1 1 22rem}
.rail-h h2{margin:0;font:800 clamp(21px,1rem + .9cqi,27px)/1.12 var(--sans);font-stretch:104%;letter-spacing:-.02em;color:var(--ink)}
.rail-plain{font:500 .62em/1.2 var(--sans);font-stretch:100%;letter-spacing:0;color:var(--ink3)}
.rail-n{font:600 14px/1 var(--sans);color:var(--ink3)}
.rail-sub{flex:1 0 100%;margin:4px 0 0;color:var(--ink2);font-size:15.5px;max-width:52rem}
.rail-ctl{display:flex;align-items:center;gap:10px;flex:none}
.rail-more{font:700 14.5px/1 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
.rail-cue{display:inline-flex;align-items:center;gap:6px;font:600 13.5px/1 var(--sans);color:var(--ink3);white-space:nowrap}
.rail-cue i{font-style:normal}
.rail-arrow{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--bg2);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.12);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.rail-arrow svg{width:16px;height:16px}
.rail-arrow:hover:not(:disabled){background:var(--ink);color:#fff}
.rail-arrow:disabled{opacity:.35;cursor:default}
.rail-fits .rail-arrow,.rail-fits .rail-cue{display:none}
@container (max-width:640px){.rail-arrow{display:none}.rail-n{display:none}}
.rail-t{--n:1.25;list-style:none;margin:0;padding:6px var(--edge) 16px;display:grid;grid-auto-flow:column;gap:var(--gap);grid-auto-columns:calc((100cqw - 2 * var(--edge) - (var(--n) - 1) * var(--gap) - var(--gap)) / var(--n));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);scrollbar-width:none;overscroll-behavior-x:contain}
.rail-t::-webkit-scrollbar{display:none}
.rail-t>li{position:relative;scroll-snap-align:start;min-width:0;display:flex;margin:0;padding:0}
.rail-t>li::before{content:none}
.rail-t>li>*{width:100%}
@container (min-width:560px){.rail-t{--n:2.3}}
@container (min-width:820px){.rail-t{--n:3.3}}
@container (min-width:1100px){.rail-t{--n:4.3}}
@container (min-width:1600px){.rail-t{--n:5.3}}
.rail-wide .rail-t{--n:1.15}
@container (min-width:560px){.rail-wide .rail-t{--n:1.6}}
@container (min-width:900px){.rail-wide .rail-t{--n:2.3}}
@container (min-width:1400px){.rail-wide .rail-t{--n:3.3}}
.rail-poster .rail-t{--n:1.6}
@container (min-width:560px){.rail-poster .rail-t{--n:3.3}}
@container (min-width:820px){.rail-poster .rail-t{--n:4.3}}
@container (min-width:1100px){.rail-poster .rail-t{--n:5.3}}
@container (min-width:1600px){.rail-poster .rail-t{--n:6.3}}
.rail-svc .rail-t{--n:1.5}
@container (min-width:560px){.rail-svc .rail-t{--n:2.4}}
@container (min-width:900px){.rail-svc .rail-t{--n:3.4}}
@container (min-width:1200px){.rail-svc .rail-t{--n:4.4}}
/* the position bar under each row (initRails moves .gate) */
.rail-perf{position:relative;height:3px;margin:0 var(--edge);background:var(--line);border-radius:2px;overflow:hidden}
.rail-perf .gate{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--ink);border-radius:2px;transition:left .15s}
.rail-perf[hidden]{display:none}

/* ---- cards ---- */
.wc{margin:0;position:relative}
.wc-a{position:relative;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;height:100%;border-radius:var(--r)}
.wc-art{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#d9d9de;box-shadow:var(--sh)}
.wc-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-med) var(--ease)}
.wc-a:hover .wc-art>img{transform:scale(1.04)}
.wc-len{position:absolute;right:10px;top:10px;z-index:2;font:700 12.5px/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff;background:rgba(0,0,0,.72);padding:5px 8px;border-radius:6px}
.wc-play{position:absolute;left:50%;top:50%;z-index:2;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--y);opacity:0;transform:scale(.85);transition:opacity var(--t-fast),transform var(--t-fast);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.wc-play::after{content:"";position:absolute;left:21px;top:16px;border-left:15px solid #000;border-top:10px solid transparent;border-bottom:10px solid transparent}
.wc-a:hover .wc-play,.wc-a:focus-visible .wc-play{opacity:1;transform:none}
.wc-b{display:flex;flex-direction:column;gap:4px;padding:0 2px;min-width:0}
.wc-t{font:700 16px/1.28 var(--sans);font-stretch:100%;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wc-a:hover .wc-t{text-decoration:underline;text-underline-offset:3px}
.wc-prov{display:flex;align-items:center;gap:7px;font:500 14px/1.3 var(--sans);color:var(--ink3);min-width:0}
.wc-prov>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-c{font-size:14.5px;line-height:1.4;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.tag{display:inline-flex;align-items:center;font:700 12px/1 var(--sans);padding:5px 9px;border-radius:999px;background:var(--bg3);color:var(--ink2);white-space:nowrap}
.tag-acc{display:none}
.wc-link .tag-acc,.wd .tag-acc{display:inline-flex}
.tag-uk{background:var(--ink);color:#fff}
.tag-us{background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}
.tag-new{background:var(--ink);color:#fff}
.tag-paid{background:transparent;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
/* wide rows: title over the still (Clean Cut) */
.rail-wide .wc-a{position:relative;gap:0}
.rail-wide .wc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85));z-index:1}
.rail-wide .wc-b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;pointer-events:none}
.rail-wide .wc-t{color:#fff;font-size:clamp(17px,1rem + .3cqi,20px);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.rail-wide .wc-prov{color:rgba(255,255,255,.85)}
.rail-wide .wc-tags{display:none}
.rail-wide .wc-play{opacity:1;transform:none;left:18px;top:18px;margin:0;width:44px;height:44px}
.rail-wide .wc-play::after{left:17px;top:12px;border-left-width:13px;border-top-width:10px;border-bottom-width:10px}
/* poster cards: 4:5 photo, title over it */
.wc-poster .wc-art{aspect-ratio:4/5;border-radius:18px}
.wc-poster .wc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.82));z-index:1}
.wc-pk{position:absolute;left:12px;top:12px;z-index:2;font:700 12px/1 var(--sans);padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-pt{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;font:800 clamp(17px,1rem + .35cqi,21px)/1.12 var(--sans);font-stretch:104%;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.wc-prog{position:absolute;left:14px;right:14px;bottom:8px;height:3px;background:rgba(255,255,255,.35);border-radius:2px;z-index:3;overflow:hidden}
.wc-prog i{position:absolute;inset:0 auto 0 0;background:var(--y)}
.wc-poster .wc-a:hover .wc-pt{text-decoration:underline;text-underline-offset:3px}
/* source art (no still): soft grey with the provider name */
.wc-art-src{background:linear-gradient(150deg,#fff,#e6e6eb)}
.wc-src{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:16px;background:linear-gradient(150deg,#fff 0,#e9e9ee 100%);color:var(--ink)}
.wc-src::before{content:"";position:absolute;left:16px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--dc)}
.wc-src-k{font:700 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.wc-src-n{font:800 clamp(18px,1rem + .4cqi,22px)/1.1 var(--sans);font-stretch:106%;letter-spacing:-.015em}
.wc-src-s{font:500 13.5px/1.2 var(--sans);color:var(--ink3)}
.wc-src-tape{display:none}
.wc-poster .wc-art-src::after{background:none}
.wc-poster .wc-art-src .wc-pt{color:var(--ink);text-shadow:none}
.wc-mos{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.wc-mos img{width:100%;height:100%;object-fit:cover}
/* link-out cards: white rounded info cards */
.wc-link .wc-a{background:var(--bg2);border-radius:18px;box-shadow:var(--sh2);padding:18px 18px 16px;gap:10px;min-height:200px}
.wc-link-pic .wc-a{padding:0 0 16px;overflow:hidden}
.wc-link-pic .wc-art{border-radius:0;box-shadow:none}
.wc-link-pic .wc-b{padding:0 16px}
.wc-link .wc-b{flex:1;gap:7px}
.wc-kind{align-self:flex-start;font:600 12.5px/1 var(--sans);padding:6px 10px;border-radius:999px;background:var(--bg3);color:var(--ink2)}
.wc-link .wc-t{font:800 20px/1.12 var(--sans);font-stretch:106%;letter-spacing:-.01em}
.wc-go{margin-top:auto;display:flex;align-items:center;gap:8px;font:700 15px/1 var(--sans);text-decoration:underline;text-underline-offset:5px;padding-top:6px}
.wc-go .tag{text-decoration:none}
.wc-link .wc-a:hover{box-shadow:0 14px 30px -14px rgba(0,0,0,.35)}
/* designed title card (R5 images, 12 Nov 2026): only where no official still exists. Dark rounded ground, the hero's corner
   frame marks, the department colour as a soft glow, white type. White on #18181b is 17:1. */
.wc-tc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:30px 34px;color:#fff;
  background:radial-gradient(110% 85% at 88% 0%,color-mix(in srgb,var(--dc,#9aa0a6) 42%,transparent),transparent 62%),linear-gradient(160deg,#26262b 0%,#141416 100%)}
.wc-tc::before{display:none}
.wc-tc::after{content:"";position:absolute;inset:12px;pointer-events:none;opacity:.75;
  background:linear-gradient(#fff,#fff) 0 0/16px 2px,linear-gradient(#fff,#fff) 0 0/2px 16px,linear-gradient(#fff,#fff) 100% 0/16px 2px,linear-gradient(#fff,#fff) 100% 0/2px 16px,linear-gradient(#fff,#fff) 0 100%/16px 2px,linear-gradient(#fff,#fff) 0 100%/2px 16px,linear-gradient(#fff,#fff) 100% 100%/16px 2px,linear-gradient(#fff,#fff) 100% 100%/2px 16px;background-repeat:no-repeat}
.wc-tc .wc-src-k{color:rgba(255,255,255,.78)}
.wc-tc .wc-src-n{color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wc-tc .wc-src-s{color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-art-tc{background:#141416}
.wc-poster .wc-art-tc .wc-pk{top:22px;left:22px;max-width:calc(100% - 44px)}
.wc-poster .wc-art-tc .wc-pt{left:24px;right:24px;bottom:24px;font-size:clamp(20px,1.1rem + .5cqi,26px)}
.wc-link-tc .wc-src-n{font-size:clamp(19px,1rem + .45cqi,23px)}
.wc-a:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 8px var(--y)}

/* ---- home wrap line ---- */
.wl-wrap{padding:var(--rowgap) var(--edge) 0}
.wl-wrapline{display:flex;flex-wrap:wrap;gap:10px;margin:0}

/* ---- player dialog: white card, rounded 16:9 player with corner marks ---- */
.wd{width:min(1040px,94vw);max-height:92vh;padding:0;border:0;border-radius:var(--r2);background:var(--bg);color:var(--ink);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);font:400 17px/1.55 var(--sans);--bg:#f5f5f7;--bg2:#fff;--bg3:#ececf0;--ink:#1d1d1f;--ink2:#4f4f55;--ink3:#636369;--line:#d2d2d7;--line2:#c7c7cc;--y:#ffe600;--sans:"FIF Display","Archivo",Helvetica,Arial,sans-serif;--r:14px;--r2:22px;--sh:0 8px 24px -12px rgba(0,0,0,.35);--sh2:0 4px 20px -10px rgba(0,0,0,.22);--gap:16px;--edge:0px;container-type:inline-size}
.wd::backdrop{background:rgba(10,10,12,.72);backdrop-filter:blur(4px)}
.wd :focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--y)}
.wd-b{max-height:92vh;overflow:auto}
.wd-x{position:absolute;top:12px;right:12px;z-index:6;margin:0}
.wd-x button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#000;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.wd-p{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.wd-p::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}
.wd-p:has(iframe)::before{content:none}
.wd-p img,.wd-p iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.wd-p .wc-src{z-index:0}
.wd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--y);color:#000;font:800 17px/1 var(--sans);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.wd-in{padding:22px clamp(18px,3vw,32px) 30px}
.wd-in h2{font-family:var(--sans);font-stretch:108%;font-weight:800;letter-spacing:-.02em;font-size:clamp(22px,2.6vw,32px);line-height:1.1;margin:6px 0 10px;color:var(--ink)}
.wd-in h3{color:var(--ink);font-size:18px;margin:24px 0 8px}
.wd-prov{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font:600 14.5px/1.4 var(--sans);color:var(--ink3)}
.wd-prov .mono{font:inherit}
.wd-c{color:var(--ink2);margin:0 0 12px}
.wd-ds{color:var(--ink2);max-width:62ch;margin:14px 0}
.wd-ds:empty{display:none}
.wd-note{color:var(--ink2);font-size:14.5px;border-left:3px solid var(--line2);padding-left:12px;max-width:62ch}
.wd-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.wd-tags a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--bg2);box-shadow:0 2px 8px rgba(0,0,0,.08);font:600 14.5px/1 var(--sans);color:var(--ink);text-decoration:none}
.wd-tags a:hover{box-shadow:0 0 0 1.5px var(--ink)}
.wd-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0}
.wd-yt{color:var(--ink);font-size:15px;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.wd-cr{order:9;flex-basis:100%;font:500 14px/1.4 var(--sans);color:var(--ink2)}
.wd-where{padding-left:20px;color:var(--ink2)}
.wd-where a{color:var(--ink)}
.wd .rail{margin-top:24px}.wd .rail-h,.wd .rail-t,.wd .rail-perf{padding-inline:0;margin-inline:0}.wd .rail-t{scroll-padding-inline:0}
.wd .rail-t{grid-auto-columns:calc((100cqw - 64px - (var(--n) - 1) * var(--gap)) / var(--n))}
.wd-poster{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:260px;padding:28px;background:#1d1d1f;overflow:hidden;color:#fff}
.wd-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.wd-poster .wc-pk,.wd-pt{position:relative;z-index:2}
.wd-poster .wc-pk{position:relative;left:auto;top:auto;align-self:flex-start}
.wd-pt{font-family:var(--sans);font-stretch:110%;font-weight:800;font-size:clamp(26px,4vw,44px);line-height:1;letter-spacing:-.03em;color:#fff}
.wd-err{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:#111;color:#fff}
.wd-err p{max-width:34rem;margin:0}
@media (max-width:600px){.wd{width:100%;max-width:100%;max-height:100dvh;height:100dvh;border-radius:0}.wd-b{max-height:100dvh}}

/* ---- the page below the app (credits note, next links, last reviewed): same grey ground ---- */
body.watch-app main .flow,body.watch-app main .wrap{background:transparent}

/* ---- phones: the video comes first; rows peek; cues stay visible ---- */
@container wl (max-width:640px){
  .wl-hero{padding-top:12px}
  .wl-s{flex-basis:90%;min-height:520px;padding-top:110px}
  .wl-s::before{inset:12px}
  .wl-s-t{padding:20px 20px 24px}
  .wl-hero-t{font-size:38px}
  h2.wl-hero-t{font-size:32px}
  .wl-hero-c{font-size:16.5px;margin-bottom:18px}
  .wl-s:not(:first-child) .wl-hero-c{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .wl-pt{flex:1 0 100%}
  .wl-page{padding-top:26px}
}
@media (prefers-reduced-motion:reduce){.wl-app *,.wd *{transition:none!important;scroll-behavior:auto!important}.wc-a:hover .wc-art>img{transform:none}}
/* the page tail under the app: no monospace; "Last reviewed" sits quietly, no band of its own (S4 #8) */
body.watch-app nav.next .kicker,body.watch-app .page-updated{font-family:"Archivo",Helvetica,Arial,sans-serif;letter-spacing:.06em}
body.watch-app .page-updated{margin:0;padding-bottom:24px;color:#636369;font-size:14px;text-transform:none}
/* department chips inside a page head run edge to edge like the rows below */
.wl-page .wl-chips{margin-inline:calc(-1 * var(--edge))}
@media (min-width:900px) and (max-width:1599px){.wl-nav-k{display:none}.wl-nav a,.wl-more summary{padding:0 9px;font-size:14px}.wl-find{flex-basis:15rem}.wl-find .wl-btn{padding:0 14px}}
.wl-more,.wl-more[open]{border:0;background:none;padding:0;margin:0}

/* ===== r5 (12 Nov 2026): option 13 department tiles, the department view hero, and the .o13 scope ===== */
/* .o13: the same tokens as .wl-app, for Watch and Learn rows used on department guides and learning paths (kit/o13.js) */
.o13{--bg:#f5f5f7;--bg2:#fff;--bg3:#ececf0;--ink:#1d1d1f;--ink2:#4f4f55;--ink3:#636369;--line:#d2d2d7;--line2:#c7c7cc;--y:#ffe600;
  --sans:"FIF Display","Archivo",Helvetica,Arial,sans-serif;--r:14px;--r2:22px;--sh:0 8px 24px -12px rgba(0,0,0,.35);--sh2:0 4px 20px -10px rgba(0,0,0,.22);
  --gut:clamp(1.15rem,4vw,3rem);--gap:18px;--rowgap:clamp(36px,4.6vw,52px);--t-fast:160ms;--t-med:320ms;--ease:cubic-bezier(.2,.7,.2,1);
  --edge:max(var(--gut),calc((100vw - var(--max,84rem))/2 + var(--gut)));
  color:var(--ink);font:400 17px/1.55 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased}
.o13 *{box-sizing:border-box}
.o13 a{color:inherit}
.o13 :focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--y)}
.o13 .tape{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dc,#9aa0a6);flex:none;vertical-align:1px}
.o13 .rail{overflow:visible;padding:0;scroll-snap-type:none;margin-top:0}
.o13 .rail-h h2{margin:0}
.o13 .rail-t>li{margin:0}
.flow>.o13.st-full{margin:clamp(2.5rem,5vw,4rem) 0;max-width:none;width:100%;padding:0}
.wrap .o13.st-full{margin-inline:calc(50% - 50vw)}
.o13-foot{padding:10px var(--edge) 0}
.o13-foot .st-hint{margin:0}
.o13 .wl-new{font:800 10.5px/1 var(--sans);font-style:normal;letter-spacing:.07em;text-transform:uppercase;background:#fff;color:var(--ink);padding:3px 6px;border-radius:4px;vertical-align:3px}

/* department tiles: big rounded 4:5 photos, the name on the photo, a round arrow so it reads as a choice */
.rail-dept .rail-t{--n:2.4}
@container (min-width:560px){.rail-dept .rail-t{--n:3.4}}
@container (min-width:820px){.rail-dept .rail-t{--n:4.4}}
@container (min-width:1100px){.rail-dept .rail-t{--n:6.3}}
@container (min-width:1500px){.rail-dept .rail-t{--n:7.3}}
.wc-dept .wc-a{gap:0;transition:transform var(--t-fast) var(--ease)}
.wc-dept .wc-art{aspect-ratio:4/5;border-radius:18px;background:#2a2a2e}
.wc-dept .wc-art::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.82));transition:background var(--t-fast)}
.wc-dn{position:absolute;left:14px;right:52px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:4px;color:#fff}
.wc-dt{font:800 clamp(16px,.9rem + .5cqi,20px)/1.1 var(--sans);font-stretch:104%;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.wc-dt .wl-new{background:#fff;color:#000;margin-left:4px;vertical-align:2px;white-space:nowrap}
.wc-dc{font:600 13px/1.2 var(--sans);color:rgba(255,255,255,.86)}
.wc-go{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);color:#000;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:background var(--t-fast),transform var(--t-fast)}
.wc-go svg{width:14px;height:14px}
.wc-dept .wc-a:hover{transform:translateY(-3px)}
.wc-dept .wc-a:hover .wc-go,.wc-dept .wc-a:focus-visible .wc-go{background:var(--y);transform:translateX(2px)}
.wc-dept .wc-a:hover .wc-art::after{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.88))}
.wc-dept .wc-a[aria-current] .wc-art{outline:3px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wc-dept .wc-a:hover{transform:none}}
/* "Pick a department" sits straight under the hero, closer than a normal row */
.wl-hero+.rail-dept,.wl-pre>.wl-hero+.rail{margin-top:30px}

/* department view hero: one slide, full width, the department photo; facts and the guide link under the buttons */
.wl-hero-one .wl-s{flex-basis:100%}
.wl-hero-one .wl-s-t{max-width:46rem}
.wl-hero-one .wl-hero-t .wl-new{font-size:14px;vertical-align:.6em;background:#fff;color:#000}
.wl-hero-m{margin:16px 0 0;font:600 14.5px/1.4 var(--sans);color:rgba(255,255,255,.86)}
.wl-hero-m a{color:#fff;text-decoration:underline;text-underline-offset:4px}
.wl-hero-one+.rail{margin-top:34px}
.wl-wrap-h{margin:0 0 14px;font:800 clamp(21px,1rem + .9cqi,27px)/1.12 var(--sans);font-stretch:104%;letter-spacing:-.02em}
.wl-app a.wl-btn-1,.o13 a.wl-btn-1{color:#000}
/* ===== r6 lane B (12 Nov 2026): Films to study page (/learn/watch-and-learn/films-to-study/): poster carousels by shelf,
   a filter bar (words and department pills), and the film dialogue. Option 13 tokens from .o13. ===== */
body.fts-page{background:#f5f5f7}
.fts-page .flow{padding-top:0}
.fts-page .flow>.o13.st-full.fts-row{padding-bottom:clamp(36px,4.4vw,56px)}
.fts-page .flow>.o13.st-full.fts-bar{margin-top:0!important}
.fts-page .fts-row[hidden],.fts-page li[data-fts][hidden]{display:none}
.fts-bar{position:sticky;top:0;z-index:5;background:rgba(245,245,247,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);margin:0 0 clamp(20px,3vw,32px)!important}
.fts-bar-in{max-width:var(--max,84rem);margin:0 auto;padding:12px var(--gut);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fts-q{flex:1 1 18rem;min-height:44px;border:1px solid var(--line2);border-radius:999px;background:#fff;padding:0 18px;font:400 16px/1 "Archivo",sans-serif;color:var(--ink)}
.fts-q:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 7px var(--y)}
.fts-pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1 1 100%;order:3;padding-bottom:2px;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent)}
.fts-pills::-webkit-scrollbar{display:none}
.fts-pill{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.1);font:600 14.5px/1 "Archivo",sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap}
.fts-pill[aria-pressed="true"]{background:var(--ink);color:#fff}
.fts-n{margin:0;font:600 13.5px/1.3 "Archivo",sans-serif;color:var(--ink2);white-space:nowrap}
.fts-none{max-width:var(--max,84rem);margin:0 auto 2rem;padding:28px var(--gut);font:600 18px/1.4 "Archivo",sans-serif;color:#4f4f55}
.fts-foot-in{max-width:var(--max,84rem);margin:0 auto;padding:clamp(20px,3vw,36px) var(--gut) 0;color:var(--ink2);font-size:16px}
.fts-foot-in>p{max-width:62ch;margin:0 0 18px}
.fts-list{background:#fff;border-radius:var(--r);box-shadow:var(--sh2);padding:0 22px}
.fts-list summary{min-height:56px;display:flex;align-items:center;font:700 17px/1.2 "Archivo",sans-serif;color:var(--ink);cursor:pointer}
.fts-list h3{font:700 19px/1.2 "Archivo",sans-serif;margin:1.4em 0 .5em;color:var(--ink)}
.fts-list ul{margin:0 0 1em;padding-left:1.1em;columns:2 32rem;column-gap:40px}
.fts-list li{break-inside:avoid;margin:0 0 .7em;font-size:15.5px;line-height:1.5}
.fts-list a{color:var(--ink)}
/* the dialogue */
.fts-dlg{width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r2);background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);overflow:hidden}
.fts-dlg::backdrop{background:rgba(10,10,12,.62);backdrop-filter:blur(3px)}
.fts-dlg-b{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);max-height:calc(100dvh - 24px);overflow:auto}
.fts-media{background:#111;padding:16px;display:flex;align-items:center}
.fts-pic{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#222}
.fts-pic img,.fts-pic iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.fts-pic .cn{position:absolute;width:22px;height:22px;border:2px solid #fff;pointer-events:none;opacity:.9}
.fts-pic .cn.tl{top:12px;left:12px;border-right:0;border-bottom:0}.fts-pic .cn.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.fts-pic .cn.bl{bottom:12px;left:12px;border-right:0;border-top:0}.fts-pic .cn.br{bottom:12px;right:12px;border-left:0;border-top:0}
.fts-pic:has(iframe) .cn{display:none}
.fts-tc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:#fff;font:800 clamp(24px,3vw,36px)/1.05 "FIF Display",Archivo,sans-serif;background:radial-gradient(circle at 30% 20%,#3a3a40,#111)}
.fts-in{padding:clamp(20px,3vw,32px);color:var(--ink)}
.fts-k{margin:0 0 6px;font:600 13px/1.3 "Archivo",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.fts-in h2{margin:0 0 6px;font:800 clamp(26px,2.6vw,34px)/1.02 "FIF Display",Archivo,sans-serif;letter-spacing:-.02em}
.fts-cr{margin:0 0 16px;font-size:15px;color:var(--ink2)}
.fts-study{background:#f5f5f7;border-radius:var(--r);padding:16px 18px;margin:0 0 16px}
.fts-study p{margin:0;font-size:17px;line-height:1.5}
.fts-study .fts-sk{font:700 13px/1.3 "Archivo",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);margin:0 0 6px}
.fts-in h3{font:700 16px/1.2 "Archivo",sans-serif;margin:0 0 6px}
.fts-where{list-style:none;margin:0 0 16px;padding:0;font-size:15px;line-height:1.6}
.fts-where a{color:var(--ink)}
.fts-wn{font-size:15px;color:var(--ink2)}
.fts-act{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.fts-act .wl-btn{min-height:46px;padding:0 18px;font-size:15px}
.fts-note{margin:0;font-size:13.5px;color:var(--ink2)}
.fts-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2);font:400 26px/1 Archivo,sans-serif;color:#1d1d1f;cursor:pointer}
.fts-x:focus-visible,.fts-pill:focus-visible{outline:3px solid #1d1d1f;outline-offset:2px;box-shadow:0 0 0 7px #ffe600}
@media (max-width:760px){
  .fts-dlg{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
  .fts-dlg-b{grid-template-columns:1fr;max-height:100dvh}
  .fts-media{padding:56px 0 0;background:#fff}
  .fts-pic{border-radius:0}
  .fts-n{order:4;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.fts-dlg::backdrop{backdrop-filter:none}}
/* r6 lane B (W5): learning-path cards, 16:9 (option 13 pcard). Paths and courses density: 3.2 per row on desktop, 1.15 on phones */
.rail-path .rail-t{--n:1.15}
@container (min-width:560px){.rail-path .rail-t{--n:2.2}}
@container (min-width:900px){.rail-path .rail-t{--n:3.2}}
@container (min-width:1500px){.rail-path .rail-t{--n:4.2}}
.wc-path .wc-a{background:var(--bg2);border-radius:var(--r);box-shadow:var(--sh2);overflow:hidden;gap:0}
.wc-path .wc-art{border-radius:0;box-shadow:none}
.wc-path .wc-b{padding:14px 16px 16px;gap:6px;flex:1}
.wc-pk2{display:flex;align-items:center;gap:7px;font:600 12.5px/1.3 "Archivo",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.wc-path .wc-pt2{font:800 21px/1.1 "FIF Display",Archivo,sans-serif;letter-spacing:-.01em}
.wc-ps{-webkit-line-clamp:2}
.wc-pm{font:400 13.5px/1.35 "Archivo",sans-serif;color:var(--ink2);margin-top:auto;padding-top:4px}
.wc-go2{font:700 14.5px/1.2 "Archivo",sans-serif;color:var(--ink)}
.wc-path .wc-a:hover .wc-go2{text-decoration:underline;text-underline-offset:3px}
.wc-path .wc-prog{left:0;right:0;bottom:0;height:4px;border-radius:0}
/* r6 lane B (W6): on phones the search collapses to a 44px search icon at the end of the section bar, so the hero sits
   60px higher; tapping it opens the full field (with its Search button) across the bar. */
@media (max-width:899px){
  .wl-bar{flex-wrap:nowrap}
  .wl-find{flex:0 0 44px;padding-bottom:0}
  .wl-find input{flex:0 0 44px;width:44px;padding:0;color:transparent;cursor:pointer;background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center/20px no-repeat}
  .wl-find input::placeholder{color:transparent}
  .wl-find .wl-btn{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wl-find:focus-within{position:absolute;left:var(--edge);right:var(--edge);top:4px;bottom:4px;z-index:3;background:rgba(245,245,247,.98)}
  .wl-find:focus-within input{flex:1 1 auto;width:auto;padding:0 16px 0 42px;color:var(--ink);cursor:text;background-position:13px center;background-size:18px}
  .wl-find:focus-within input::placeholder{color:var(--ink3)}
  .wl-find:focus-within .wl-btn{position:static;width:auto;height:auto;min-height:44px;padding:0 16px;clip:auto;overflow:visible}
}