/* Caveat app pages (app.caveatacademic.com): the legacy builder classes restyled onto the Observatory system (design/SYSTEM.md).
   Loaded after ui/caveat.css on every app page; the shared header and footer come from ui/caveat.js (CaveatUI.mount({site:'app'})).
   Legacy token names stay defined with the brand values so page-level CSS keeps working. Rules that must win over a page's own
   later <style> block are written with a leading `body`, which adds one element of specificity and nothing more. Class names that
   mean different things on different pages are qualified by element (div.cta is a card, a.cta is a button; div.wk is a card,
   table.wk a table). */

:root{--c:#2E4BF0;--ci:#1F35C0;--n:#101828;--m:#5B6478;--l:#E1E5EE;--s:#E6EAFE;--bg:#F6F7FB;--fo:#9DB0FF;
--d:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;--t:Manrope,"Avenir Next","Segoe UI",system-ui,sans-serif;
--paper:0 1px 2px rgba(16,24,40,.06),0 12px 32px rgba(16,24,40,.08);--paper-hi:0 2px 4px rgba(16,24,40,.06),0 20px 44px rgba(16,24,40,.12);
--ring:0 0 0 1px var(--c),0 0 0 4px var(--s);--mark:conic-gradient(var(--c) 0 270deg,var(--s) 270deg 360deg)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--cv-hdr-h,72px) + 16px)}
body{margin:0;padding-top:var(--cv-hdr-h,72px);background:var(--bg);color:var(--n);font-family:var(--t);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.wrap){max-width:760px;margin:0 auto;padding:32px 18px 72px}
h1,h2,h3,h4{font-family:var(--d);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(32px,2.2vw + 20px,48px);line-height:1.08;margin:10px 0 14px}
h2{font-size:clamp(26px,1.2vw + 18px,34px);line-height:1.15;margin:40px 0 12px}
h3{font-size:clamp(19px,.4vw + 16px,22px);line-height:1.25;margin:24px 0 8px}
h4{font-size:17px;line-height:1.3;margin:18px 0 6px}
[id]{scroll-margin-top:calc(var(--cv-hdr-h,72px) + 16px)}
.lead{font-size:clamp(17px,.3vw + 16px,19px);line-height:1.5;color:var(--m);margin:0 0 16px;max-width:62ch}
.meta{font-size:13.5px;color:var(--m);display:flex;gap:14px;flex-wrap:wrap}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:0 0 8px}
a{color:var(--ci)}
a:hover{color:var(--c)}
b,strong{font-weight:700}
img,video{max-width:100%}
.num{font-family:var(--d);font-variant-numeric:tabular-nums}
.fine{font-size:13px;color:var(--m);border-top:1px solid var(--l);padding-top:16px;margin-top:30px;line-height:1.5}
@media (max-width:759px){body{font-size:16px}.lead{font-size:17px}}

/* ---------- the shell on app pages ---------- */
html.cv-app .brand{display:none!important}
.brand{font-family:var(--d);font-weight:700;font-size:18px;color:var(--ci);text-decoration:none;letter-spacing:-.01em}
.crumb{font-size:13.5px;color:var(--m);margin:0 0 4px;line-height:1.45}
.crumb a{color:var(--ci);text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
/* .k: a quiet sentence-case label with the quarter-ring mark drawn in ::before (no uppercase, no blue caps) */
.k{display:inline-flex;align-items:center;gap:8px;font-family:var(--t);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--m);line-height:1.3;max-width:100%}
div.k::before,p.k::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--mark);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.4px),#000 calc(100% - 2.6px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.4px),#000 calc(100% - 2.6px))}
.k+h1,.k+h2{margin-top:10px}
/* the header stays above sticky bars and below a page's own modal (z-index 100) */
html.cv-app .cv-hdr{z-index:90}
/* sticky elements in page CSS sit under the fixed header */
body .ppw{top:var(--cv-hdr-h,72px)}
body .side{top:calc(var(--cv-hdr-h,72px) + 16px)}
body .bar{top:calc(var(--cv-hdr-h,72px) + env(safe-area-inset-top,0px))}
/* the header search input must not pick up a page's form rules */
.cv-hdr .cv-search input[type=search],.cv-sheet .cv-search input[type=search]{flex:1;min-width:0;width:auto;max-width:none;height:100%;min-height:0;margin:0;border:0;background:none;padding:0 12px 0 38px;font:500 14px var(--t);color:inherit;outline:0;box-shadow:none;border-radius:999px}
.cv-sheet .cv-search input[type=search]{font-size:16px;padding-left:44px}

/* ---------- paper surfaces: white, soft shadow, radius 20, no gray border ---------- */
body .toc,body .steps,body .tw,body div.cta,body .do,body .pn>a,body .ch>a,body .ch>div,body .ctl,body .unit,body .card,body .gc,body .hc,body .fc,body .sq,body .rc,body article.it,body .idea,body .pq,body .q,body .pt,body ol.ls a,body .cx-c,body .gp>div,body div.wk,body div.hw,body .al a,body .br a,body div.ex,body .path,body .rk-p,body .rk-doc,body .offer,body article.opt,body .tier.lt,body .model,body .fbk,body .rub .r{background:#fff;border:0;box-shadow:var(--paper);border-radius:20px}
body .card,body .ctl,body .do,body div.cta,body .toc,body .rk-doc{padding:22px 24px}
body .unit,body .gc,body .hc,body .fc,body .sq,body .rc,body article.it,body .idea,body .pq,body .cx-c,body .gp>div,body div.wk,body div.hw,body .al a,body .br a,body .rk-p,body .offer,body article.opt{padding:18px 20px}
body .steps,body .path{padding:0;overflow:hidden}
body .tw{padding:0;overflow-x:auto}
body div.ex{padding:16px 20px;border-left:0}
body .q{padding:16px 18px}
body .pn>a{padding:16px 18px}
body .ch>a,body .ch>div{padding:18px 20px}
body .pt{padding:6px 20px}
body ol.ls a{padding:14px 16px}
body .ch>a,body .gc,body .hc,body .al a,body .cx-c,body .pn>a,body .br a{transition:transform .15s ease-out,box-shadow .15s ease-out}
body .ch>a:hover,body .gc:hover,body .hc:hover,body .al a:hover,body .cx-c:hover,body .pn>a:hover,body .br a:hover{border-color:transparent;box-shadow:var(--paper-hi);transform:translateY(-2px)}
body .br a.on{background:var(--n);color:#fff;box-shadow:none}
div.cta{margin:18px 0}
div.cta p{margin:0 0 12px;font-size:16px}
.toc{margin:24px 0}
.toc b{display:block;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--n)}
.toc ol{margin:10px 0 0;padding-left:22px;font-size:15.5px}
.toc li{margin:0 0 6px}
.toc a{text-decoration:none;font-weight:600}
.do{margin:40px 0 18px}
body .do h2{margin:0 0 10px;font-size:24px}
body .do ul{margin:0;padding:0;list-style:none}
body .do li{position:relative;padding-left:32px}
body .do li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;border:0;background:var(--mark);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.4px),#000 calc(100% - 2.6px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.4px),#000 calc(100% - 2.6px))}
.box{background:var(--s);border-radius:20px;padding:20px 24px;margin:22px 0}
.box b.t{display:block;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ci);margin-bottom:6px}
.box p{margin:0;font-size:16.5px}
.box p+p{margin-top:10px}
/* .note is an aside: paper, muted text, no accent bar */
body div.note,body p.note{border:0;border-left:0;background:#fff;box-shadow:var(--paper);border-radius:16px;padding:14px 18px;margin:20px 0;font-size:15.5px;line-height:1.5;color:var(--m)}
body .note a{color:var(--ci)}
body .tip{background:var(--s);color:var(--n);border-radius:14px;padding:12px 16px;margin:14px 0}
.steps{list-style:none;margin:8px 0 20px}
.steps li{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:14px 20px;border-top:1px solid var(--l);margin:0;font-size:16px}
.steps li:first-child{border-top:0}
.steps .w{font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ci);padding-top:2px}
@media (max-width:560px){.steps li{grid-template-columns:1fr;gap:2px}}
/* tables */
.tw{margin:10px 0 20px}
:where(table){border-collapse:collapse;width:100%;font-size:15px}
:where(th,td){text-align:left;padding:11px 14px;border-top:1px solid var(--l);vertical-align:top}
:where(th){background:var(--bg);font-size:13px;letter-spacing:0;text-transform:none;color:var(--m);font-weight:700;border-top:0}
/* chapter and card grids */
.ch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}
.ch a,.ch div{display:block;text-decoration:none;color:var(--n)}
.ch .n{font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ci)}
.ch b{display:block;font-family:var(--d);font-weight:700;letter-spacing:-.01em;font-size:18px;line-height:1.25;margin:6px 0}
.ch span{font-size:14.5px;color:var(--m)}
.ch div{opacity:.6}
.ch div .n{color:var(--m)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0}
.pn>a{text-decoration:none;color:var(--n)}
.pn>a span{display:block;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--m);font-weight:600}
.pn>a b{font-family:var(--d);font-weight:700;font-size:17px;letter-spacing:-.01em}
.pn .nx{text-align:right}
@media (max-width:620px){.ch{grid-template-columns:1fr}.pn{grid-template-columns:1fr}.pn .nx{text-align:left}}
.gl{display:grid;gap:14px}
body .gc h3,body .hc h3,body .fc h3,body .cx-c h3,body .idea h3,body .sq h2,body .unit h3,body .al a b,body .gp>div b,body article.it b{font-family:var(--d);font-weight:700;letter-spacing:-.01em}
body .gc h3,body .hc h3,body .cx-c h3,body .idea h3{font-size:18px;line-height:1.25;margin:0}
body .unit h3{font-size:20px;margin:0 0 4px}
body .unit li .nm,body ol.ls .nm{background:var(--s);color:var(--ci);font-family:var(--d);font-weight:700}
/* small labels on cards: sentence case, no caps */
body .gc .tg,body .cx-c .tg,body .fc .tg,body .hw .wk,body .cx-lab,body div.ex .lab,body .lab,body .chips .lab,body .sh,body .ctl>b:first-child,body .path .g{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none}
body .gc .tg,body .cx-c .tg,body .fc .tg,body .hw .wk{color:var(--ci)}
body .lab,body .ctl>b:first-child,body .sh,body .cx-lab,body .chips .lab{font-size:14.5px;color:var(--n)}
body .ctl>b:first-child{display:block;margin-bottom:10px}
body .cx-lab{margin:12px 0 0}
body div.ex b.t{font-family:var(--d);font-weight:700;font-size:17px;letter-spacing:-.01em}

/* ---------- buttons: pills ---------- */
body .btn,body a.cta,body .bt,body .btnp,body .go,body .af button,body .idea button,body .cx-c .ac .b,body article.it .act a.go,body .rk-b.pr,body .tool i,body .btn2,body .bt.ghost,body .bt.g,body .cx-c .ac .d,body article.it.free .act a.go,body .tools button,body .tools a.b2,body .rk-b,body .say{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-family:var(--t);font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;border:0;text-align:center;transition:transform .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out}
body .btn,body a.cta,body .bt,body .btnp,body .go,body .af button,body .cx-c .ac .b,body article.it .act a.go,body .rk-b.pr{background:var(--c);color:#fff!important}
body .btn:hover,body a.cta:hover,body .bt:hover,body .btnp:hover,body .go:hover,body .af button:hover,body .cx-c .ac .b:hover,body article.it .act a.go:hover,body .rk-b.pr:hover{background:var(--ci);transform:translateY(-1px)}
body .btn2,body .bt.ghost,body .bt.g,body .cx-c .ac .d,body article.it.free .act a.go,body .tools button,body .tools a.b2,body .rk-b,body .idea button,body .say,body .tool i{background:#fff;color:var(--n)!important;box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px var(--l) inset}
body .btn2:hover,body .bt.ghost:hover,body .bt.g:hover,body .cx-c .ac .d:hover,body .tools button:hover,body .tools a.b2:hover,body .rk-b:hover,body .idea button:hover,body .say:hover{background:var(--bg);transform:translateY(-1px)}
body .tool i{color:var(--ci)!important;box-shadow:none;font-style:normal;white-space:nowrap}
body .say{min-height:32px;padding:0 12px;font-size:13px;margin-left:6px}
body .rk-b,body .tools button,body .tools a.b2{min-height:42px;padding:0 16px;font-size:14.5px}
body .cx-c .ac a,body .cx-c .ac button{min-height:40px;padding:0 16px;font-size:14px}
body .idea button[disabled]{background:var(--c);color:#fff!important;box-shadow:none;cursor:default}
body .bt[disabled],body .btn[aria-disabled=true]{opacity:.55;cursor:default;transform:none}
body .qrow .bt{border-radius:999px}
.row2{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;align-items:center}
/* selectable chips */
body .seg button,body .cx-f button,body .tt button,body .rk-tabs button,body .chips button,body .sc button,body .ch button,body .fo button,body .gnav a,body .chip,body .sbt button,body nav.jump a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;border:0;border-radius:999px;background:#fff;color:var(--n);box-shadow:0 0 0 1px var(--l) inset;font-family:var(--t);font-weight:600;font-size:14.5px;line-height:1.2;cursor:pointer;text-decoration:none;transition:background-color .15s,box-shadow .15s,color .15s}
body .seg button:hover,body .cx-f button:hover,body .tt button:hover,body .rk-tabs button:hover,body .chips button:hover,body .sc button:hover,body .ch button:hover,body .fo button:hover,body .gnav a:hover,body .chip:hover,body .sbt button:hover,body nav.jump a:hover{box-shadow:0 0 0 1px var(--c) inset;color:var(--ci)}
body .seg button[aria-pressed=true],body .cx-f button[aria-pressed=true],body .tt button[aria-selected=true],body .rk-tabs button[aria-selected=true],body .chips button[aria-pressed=true],body .sc button[aria-pressed=true],body .ch button[aria-pressed=true],body .fo button[aria-pressed=true],body .gnav a[aria-current],body .sbt button[aria-pressed=true]{background:var(--c);color:#fff;box-shadow:none}
body .chip[aria-pressed=true],body .chip[aria-checked=true]{background:var(--s);color:var(--ci);box-shadow:0 0 0 1px var(--c) inset}
/* quiz answers keep their meaning colors; the shape is new */
body .q button,body .pq button{border:1px solid var(--l);border-radius:14px;font-family:inherit}
body .q button.r,body .pq button.y{border-color:#12B76A;background:#ECFDF3}
body .q button.x{border-color:#F79009;background:#FFF8EB}
body .pq button.n{border-color:#F04438;background:#FEF3F2}
body .q .ex{box-shadow:none;background:none;padding:0;border-radius:0}
/* badges */
body .pill,body .tag,body article.it .tags span.k{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--s);color:var(--ci);font-size:12.5px;font-weight:700;padding:4px 10px;line-height:1.3;white-space:nowrap}
body .pill.ok{background:#ECFDF3;color:#067647}
body .pill.wa{background:#FFFAEB;color:#B54708}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
/* progress */
.prog{height:10px;background:var(--l);border-radius:999px;overflow:hidden;margin:14px 0 4px}
.prog i{display:block;height:100%;background:var(--c);border-radius:999px;transition:width .3s}

/* ---------- results, messages ---------- */
body .res{border-radius:18px;padding:16px 20px;margin:14px 0;font-size:16px;border:0}
body .res b{display:block;font-family:var(--d);font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:2px}
body .res.info,body .info{background:var(--s);color:var(--ci)}
body .msg{border:0;border-radius:14px;padding:12px 16px;font-size:15.5px;margin:14px 0}
body .msg.ok{background:#EAF7EE;color:#14532D}
body .msg.err{background:#FEF3F2;color:#912018}
body .msg.info{background:var(--s);color:var(--ci)}

/* ---------- forms ---------- */
.wrap :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=submit],[type=button],[type=color]),select,textarea){font-family:inherit;font-size:16px;color:var(--n);background:#fff;border:1.5px solid var(--l);border-radius:12px;padding:10px 12px;max-width:100%;transition:border-color .15s,box-shadow .15s}
.wrap :where(input,select,textarea):focus-visible{outline:0;border-color:var(--c);box-shadow:var(--ring)}
.wrap :where(input[type=checkbox],input[type=radio]){accent-color:var(--c)}
.wrap :where(label.f,label.lb,.fld>span){display:block;font-weight:700;font-size:14px;margin:10px 0 4px}
body .cx-search{border:1.5px solid var(--l);border-radius:999px;padding:11px 18px;min-height:48px;font-size:16px;background:#fff}
body .cx-search:focus-visible{border-color:var(--c);box-shadow:var(--ring)}
body .cx-bar{border-bottom:0;padding:12px 0 6px}

/* ---------- dark cards keep ink; their gold accents become white ---------- */
body .tool{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--n);color:#fff;border-radius:22px;padding:22px 24px;margin:18px 0;text-decoration:none}
body .tool b{display:block;font-family:var(--d);font-weight:700;font-size:19px;letter-spacing:-.01em}
body .tool span{color:rgba(255,255,255,.75);font-size:15px}
body .cta.dk{background:var(--n);color:#fff}
body .cta.dk p{color:rgba(255,255,255,.75)}
body .cta.dk>a,body .gpk>a,body .tier>a,body .price a.btn,body .acad-pass>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:var(--ci);font-weight:700;text-decoration:none}
body .gpk .alt a,body .lvl a,body .fv a,body .tier .alt a{background:none;color:#fff;padding:0;min-height:0;display:inline;text-decoration:underline;text-underline-offset:3px;border-radius:0}
body .gpk b,body .tier b,body .fv b,body .lvl b,body .price h2,body .pro b{font-family:var(--d);font-weight:700;letter-spacing:-.01em}
body .tier .pr,body .price .big{font-family:var(--d);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- display-font leftovers on pages not yet redesigned ---------- */
body .big,body .pc .amt b,body .pbar .pa b,body .lc .pr,body .ask label.big,body .get,body .cert h2,body .cert .nmx,body .opt .p,body #w-clock,body .shh b,body .vc h3,body .fl,body .count b,body a[href="classroom-studio.html"][style]>b[style]{font-family:var(--d)!important;font-weight:700;letter-spacing:-.02em}
body .get small,body .opt .u,body .grp h2 span{font-family:var(--t);letter-spacing:0;text-transform:none}
body .card.big,body .opt.big{border:0}
body article.opt:target{box-shadow:var(--paper),0 0 0 2px var(--c)}
body .xl{border:0;border-left:0;background:#fff;box-shadow:var(--paper);border-radius:20px;padding:16px 20px}
body .cert{background:#fff;border:3px double var(--ci);border-radius:20px;padding:36px 28px;text-align:center}
body .cert .k{display:flex;justify-content:center}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){body .btn,body .bt,body .btnp,body .btn2,body .chip,body .ch>a,body .gc,body .hc,body .al a,body .cx-c,body .pn>a,body .br a,.prog i{transition:none!important;transform:none!important}}

/* ---------- print: the shell goes away, each page's own print rules stay ---------- */
@media print{
.cv-hdr,.cv-foot,.cv-sheet,.cv-header,.cv-footer{display:none!important}
body{padding-top:0!important;background:#fff}
.tool,div.cta,.pn,.brand,.crumb{display:none}
body .toc,body .steps,body .tw,body .ctl,body .unit,body .card,body .gc,body .q,body div.note,body .rk-p,body .rk-doc{box-shadow:none;border:1px solid var(--l)}
}