/* Option 13 "Clean Cut plus" for department guides (/learn/departments/*) and learning paths (/learn/paths/*), r5, 12 Nov 2026.
   Riz: these pages looked different from the Watch and Learn carousels. The rows and cards now come from the same templates
   (kit/o13.js, styles in watch.css .o13); this sheet brings the rest of the page into the same system: soft grey ground,
   white rounded cards with soft shadows, the hero as a rounded photo card with corner frame marks, Archivo / FIF Display
   only (no monospace), yellow only for actions. Loaded only on these pages (base.njk), scoped to body.o13-page.
   Contrast: #1d1d1f on #f5f5f7 16:1; #4f4f55 on #fff 8.1:1; #636369 on #f5f5f7 5.4:1. */
body.o13-page{--o-bg:#f5f5f7;--o-ink:#1d1d1f;--o-ink2:#4f4f55;--o-ink3:#636369;--o-line:#d2d2d7;--o-r:14px;--o-r2:22px;--o-sh:0 4px 20px -10px rgba(0,0,0,.22);--o-sh2:0 8px 24px -12px rgba(0,0,0,.35);
  --o-gut:clamp(1.15rem,4vw,3rem);--o-edge:max(var(--o-gut),calc((100vw - var(--max,84rem))/2 + var(--o-gut)));--o-sans:"FIF Display","Archivo",Helvetica,Arial,sans-serif}
body.o13-page main{background:var(--o-bg);color:var(--o-ink)}
body.o13-page .kicker,body.o13-page .st-k,body.o13-page .st-tc,body.o13-page .st-hint,body.o13-page .page-updated,body.o13-page .st-fm,body.o13-page .pth-meta,body.o13-page .pth-now-k,body.o13-page .pth-lc,body.o13-page .pth-ln,body.o13-page .crumbs{font-family:"Archivo",Helvetica,Arial,sans-serif}
body.o13-page .kicker,body.o13-page .st-k{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* hero: a rounded photo card with corner frame marks (the Watch and Learn hero), not a full-bleed black band */
body.o13-page .st-hero{margin:22px var(--o-edge) 0;border-radius:var(--o-r2);min-height:clamp(440px,44vw,620px);box-shadow:0 20px 50px -24px rgba(0,0,0,.45);isolation:isolate}
body.o13-page .st-hero::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}
body.o13-page .st-hero::after{display:none}
body.o13-page .st-hero .st-shade{background:linear-gradient(80deg,rgba(0,0,0,.86),rgba(0,0,0,.5) 50%,rgba(0,0,0,.08) 85%)}
body.o13-page .st-hero-in{padding:clamp(28px,4.2vw,58px);max-width:52rem;margin:0}
body.o13-page .st-hero-h{font-family:var(--o-sans);font-weight:800;font-stretch:112%;letter-spacing:-.035em;line-height:.97;font-size:clamp(34px,1rem + 3.4vw,68px);max-width:18ch}
body.o13-page .st-hero-lead{font-size:clamp(17px,1rem + .35vw,21px);color:rgba(255,255,255,.88)}
body.o13-page .st-hero .kicker{color:rgba(255,255,255,.85)}
body.o13-page .st-hero-credit{font-family:"Archivo",sans-serif}
@media (max-width:640px){body.o13-page .st-hero{margin:12px 12px 0;min-height:480px}body.o13-page .st-hero::before{inset:12px}body.o13-page .st-hero-in{padding:22px 20px 24px}}

/* section tabs: the light sticky sub-bar used by Watch and Learn */
body.o13-page .dt-tabs{background:rgba(245,245,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--o-line);margin-top:18px}
body.o13-page .dt-tabs a{color:var(--o-ink);font-family:"Archivo",sans-serif;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
body.o13-page .dt-tabs a:hover,body.o13-page .dt-tabs a:focus-visible,body.o13-page .dt-tabs a[aria-current]{border-bottom-color:var(--o-ink)}

/* headings in the body: the Watch and Learn row heading */
body.o13-page .flow h2,body.o13-page .sec-h h2,body.o13-page .pth h2{font-family:var(--o-sans);font-weight:800;font-stretch:104%;letter-spacing:-.02em;color:var(--o-ink)}

/* career ladder: white rounded rungs, a dark number disc (yellow stays for actions) */
body.o13-page .dl-wrap{background:transparent}
body.o13-page .dl-wrap .st-k{color:var(--o-ink3)}
body.o13-page .dl-rung a{border:0;border-radius:var(--o-r);background:#fff;box-shadow:var(--o-sh);margin-right:0!important;transition:transform .16s,box-shadow .16s}
body.o13-page .dl-n{background:var(--o-ink);color:#fff;border-radius:50%}
body.o13-page .dl-rung a:hover,body.o13-page .dl-rung a:focus-visible{background:#fff;color:var(--o-ink);transform:translateY(-2px);box-shadow:var(--o-sh2)}
body.o13-page .dl-rung a:hover .dl-d,body.o13-page .dl-rung a:focus-visible .dl-d{color:var(--o-ink2)}
body.o13-page .dl-a{text-decoration:underline;text-underline-offset:4px}

/* "in detail" accordions: white rounded cards */
body.o13-page .st-more{background:#fff;border:0;border-radius:var(--o-r);box-shadow:var(--o-sh);padding:0;margin:10px 0;max-width:52rem}
body.o13-page .st-more summary{padding:16px 20px;min-height:44px;list-style-position:inside}
body.o13-page .st-more-b{padding:0 20px 18px}
body.o13-page .st-more table{font-size:15.5px}

/* who to know: the Find your people online card (white, rounded, soft shadow) */
body.o13-page .gs-rail{scrollbar-width:none;padding:6px 2px 16px}
body.o13-page .gs-card a{border:0;border-radius:18px;background:#fff;box-shadow:var(--o-sh);color:var(--o-ink);padding:18px;transition:box-shadow .16s,transform .16s}
body.o13-page .gs-card a:hover,body.o13-page .gs-card a:focus-visible{background:#fff;color:var(--o-ink);box-shadow:var(--o-sh2);transform:translateY(-2px)}
body.o13-page .gs-name{font-family:var(--o-sans);font-weight:800}

/* closing bands: rounded cards in the page, not full-bleed black and yellow bands */
body.o13-page .st-ctapair{margin:clamp(2rem,5vw,3.5rem) var(--o-edge);border-radius:var(--o-r2)}
body.o13-page .st-steps{background:transparent;color:var(--o-ink)}
body.o13-page .st-steps h2{color:var(--o-ink)}
body.o13-page .st-step{background:#fff;border:0;border-radius:var(--o-r);box-shadow:var(--o-sh);color:var(--o-ink)}
body.o13-page .st-step:hover,body.o13-page .st-step:focus-visible{background:#fff;box-shadow:var(--o-sh2)}
body.o13-page .st-step .st-k{color:var(--o-ink3)}
body.o13-page .ai-dept .st-k{color:var(--o-ink3)!important}
body.o13-page .ai-dept{background:#fff;border-radius:var(--o-r2);box-shadow:var(--o-sh);padding:clamp(22px,3vw,36px)}

/* learning path pages: the player as a rounded frame with corner marks; lesson list and boxes as white cards */
body.o13-page .pth{background:var(--o-bg)}
body.o13-page .pth-head h1{font-family:var(--o-sans);font-weight:800;font-stretch:112%;letter-spacing:-.035em;line-height:.97}
body.o13-page .pth-head .kicker{color:var(--o-ink3)}
body.o13-page .pth-frame{border-radius:var(--o-r2);overflow:hidden;box-shadow:var(--o-sh2);position:relative}
body.o13-page .pth-frame::before{content:"";position:absolute;inset:14px;pointer-events:none;z-index:3;opacity:.9;
  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}
body.o13-page .pth-side,body.o13-page .pth-out,body.o13-page .pth-further,body.o13-page .pth-check,body.o13-page .pth-certs{background:#fff;border:0;border-radius:var(--o-r2);box-shadow:var(--o-sh)}
body.o13-page .pth-out,body.o13-page .pth-further{padding:clamp(20px,2.6vw,30px);margin-top:28px}
body.o13-page .pth-l{border-radius:10px}
body.o13-page .pth-bar,body.o13-page .pth-bar span{border-radius:2px}
/* the More on this row sits inside the main column: rows run to the column edges, not the viewport */
body.o13-page .pth .o13.st-full{margin:28px 0 0!important;--edge:0px}
body.o13-page .pth .o13 .rail-t{padding-inline:2px;scroll-padding-inline:2px}
/* no slates on option 13 pages: the scene-number tags on section headings are off */
body.o13-page .sec-h h2::before,body.o13-page .st-ctapair h2::before,body.o13-page .st-car-top h2::before,body.o13-page .st-fr-head h2::before,body.o13-page .st-films>h2::before{content:none;display:none}
body.o13-page .st-ctapair h2,body.o13-page .st-ctapair p{color:#fff}
/* rows: space between consecutive rows matches Watch and Learn */
body.o13-page .flow-sec>.o13.st-full{padding-block:clamp(18px,2.4vw,28px)}
/* no monospace anywhere on these pages (option 13): every mono label set in Archivo */
body.o13-page :is(.kicker,.credit,.label,.chip,.tbl th,.st-k,.st-fl,.st-fm,.st-cap,.st-hint,.st-one-m,.st-pr-meta,.st-unit-n,.st-hero-credit,.pth-n,.pth-meta,.pth-now-k,.pth-now-c,.pth-mod h3,.pth-ln,.pth-lc,.pth-cost,.pth-certs-left,.pth-draft,.pth-qn,.pth-qfb,.page-updated,.ftr-h){font-family:"Archivo",Helvetica,Arial,sans-serif!important;letter-spacing:.02em}
body.o13-page :is(.pth-mod h3,.kicker,.st-k){letter-spacing:.1em}
body.o13-page .pth-cost,body.o13-page .pth-draft{border-radius:999px;padding:3px 9px}
body.o13-page .pth-check,body.o13-page .pth-certs{padding:clamp(20px,2.6vw,30px)}
body.o13-page .flow-sec>.sec-plain:has(>.sec-in>.sec-b>span[id]:only-child){padding:0!important}