/* acads site: shared styles for the vertical sites (acads.com/ias, /marksup, ...).
   Matches the v3.2 homepage: Inter, Notion greys, Notion blue buttons, teal acads logo.
   Each page sets its vertical on <body class="v-ias"> etc., which provides --c (colour), --s (tint), --t (text on tint). */

:root {
  --ink: rgba(0,0,0,.95);
  --text: rgba(0,0,0,.82);
  --muted: rgba(0,0,0,.54);
  --faint: rgba(0,0,0,.36);
  --hair: rgba(0,0,0,.08);
  --tile: #f6f5f4;
  --tile-2: #f9f9f8;
  --tile-h: #efeeec;
  --blue: #0075de;
  --blue-h: #005bab;
  --blue-s: #e6f3fe;
  --teal: #009999;
  --hl: #ffe4af;
  --hl-dot: #ffb110;
  --head: 'Avenir Next', 'Nunito Sans', Inter, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --wrap: 1204px;
  --ring: 0 0 0 1px rgba(0,0,0,.08);
  --lift: 0 0 0 1px rgba(0,0,0,.06), 0 12px 32px -8px rgba(0,0,0,.12);

  /* scene theme read by kit.css */
  --k-font: Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --k-num: var(--k-font);
  --k-ink: rgba(0,0,0,.95); --k-text: rgba(0,0,0,.85); --k-muted: rgba(0,0,0,.54); --k-faint: rgba(0,0,0,.36);
  --k-hair: rgba(0,0,0,.08); --k-bg: #fff; --k-card: #fff; --k-soft: #f1f1ef; --k-r: 10px; --k-ring: 0 0 0 1px rgba(0,0,0,.08);
}

/* vertical colours, from brand/BRAND.md (4e). kit.css scenes use the short ids. */
.v-ias, .v-ias .ks { --c: #2a9d99; --s: #e1f3f2; --t: #0a4d4b; }
.v-marksup, .v-mu { --c: #1aae39; --s: #e6f6e9; --t: #0f6220; }
.v-ifos { --c: #5e8a6e; --s: #ecf3ee; --t: #3a5c47; }
.v-micros, .v-mic { --c: #ef5b4a; --s: #fdecea; --t: #a3301f; }
.v-ai { --c: #097fe8; --s: #e6f3fe; --t: #005bab; }
.v-connect, .v-acc { --c: #9849e8; --s: #f3ebfc; --t: #562983; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 128px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: #fff; }
body { font: 400 16px/1.5 var(--k-font); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-h); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: #000; color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 12px; color: #fff; }

/* ---------- marks ---------- */
.mk { flex: none; display: grid; place-items: center; }
.mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tl svg, .logo svg, .lock small svg { display: block; }
.tl { flex: none; display: grid; place-items: center; border-radius: 25%;
  background: linear-gradient(45deg, color-mix(in oklch, var(--c) 82%, black), color-mix(in oklch, var(--c) 70%, white)); }
.tl svg { width: 62%; height: 62%; overflow: visible; }
.logo { display: flex; align-items: center; gap: 9px; color: var(--teal); flex: none; }
.logo:hover { color: var(--teal); }
.logo svg { width: 30px; height: 25px; }
.logo b { font: 600 22px var(--head); letter-spacing: -.035em; }

/* ---------- buttons ---------- */
.btn { height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px;
  font: 500 15px/1 var(--k-font); white-space: nowrap; transition: background .2s, color .2s, transform .2s var(--ease); }
.btn svg { width: 15px; height: 15px; }
.btn-p { background: var(--blue); color: #fff; }
.btn-p:hover { background: var(--blue-h); color: #fff; }
.btn-s { background: var(--blue-s); color: var(--blue-h); }
.btn-s:hover { background: #d3e9fc; color: var(--blue-h); }
.btn-g { background: var(--tile); color: var(--ink); }
.btn-g:hover { background: var(--tile-h); color: var(--ink); }
.btn-lg { height: 52px; padding: 0 24px; font-size: 17px; font-weight: 600; border-radius: 10px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 14px; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
.hdr-in { max-width: 1252px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 20px; }
.hdr-nav { display: flex; gap: 2px; margin: 0 auto; }
.hdr-nav a { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; font-size: 15px; font-weight: 500; color: rgba(0,0,0,.82); white-space: nowrap; }
.hdr-nav a:hover, .hdr-nav a[aria-current] { background: var(--tile); color: #000; }
.hdr-nav .mk { width: 18px; height: 18px; }
.hdr-act { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hdr-act .lnk { height: 36px; padding: 0 12px; display: flex; align-items: center; border-radius: 8px; font-size: 15px; font-weight: 500; color: rgba(0,0,0,.82); }
.hdr-act .lnk:hover { background: var(--tile); color: #000; }
.hdr-act .btn { height: 36px; padding: 0 14px; }
.menu-btn { display: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--tile); place-items: center; padding: 0; }
.menu-btn svg { width: 16px; height: 16px; }
.menu { display: none; border-top: 1px solid var(--hair); padding: 8px 16px 16px; max-height: calc(100vh - 64px); overflow: auto; }
.menu a { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; color: #000; }
.menu a:hover { background: var(--tile); color: #000; }
.menu .tl { width: 36px; height: 36px; }
.menu b { font: 600 16px var(--head); letter-spacing: -.02em; display: block; }
.menu small { font-size: 13px; color: var(--muted); }
.hdr.open .menu { display: block; }
@media (max-width: 1100px) { .hdr-nav { display: none; } .menu-btn { display: grid; } }
@media (max-width: 480px) { .hdr-act .lnk { display: none; } .hdr-in { padding: 0 16px; gap: 12px; } }

/* vertical bar under the header */
.vbar { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.vbar-in { max-width: 1252px; margin: 0 auto; padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 16px; }
.lock { display: flex; align-items: center; gap: 10px; color: #000; flex: none; }
.lock:hover { color: #000; }
.lock .tl { width: 30px; height: 30px; }
.lock b { font: 600 17px var(--head); letter-spacing: -.025em; display: block; line-height: 1.1; }
.lock small { display: flex; align-items: center; gap: 4px; font: 600 11px var(--head); color: var(--teal); }
.lock small svg { width: 12px; height: 10px; }
.vbar nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: 8px; }
.vbar nav::-webkit-scrollbar { display: none; }
.vbar nav a { padding: 6px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.vbar nav a:hover { background: var(--tile); color: #000; }
.vbar .btn { margin-left: auto; }
@media (max-width: 720px) { .vbar-in { padding: 0 16px; } .vbar nav { display: none; } }
@media (max-width: 480px) { .vbar .btn { display: none; } }

/* ---------- sections ---------- */
section { padding: 96px 0 0; }
.kick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--t); }
.kick i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.h2 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; font-weight: 700; letter-spacing: -.04em; margin-top: 12px; max-width: 760px; }
.lede { font-size: 18px; line-height: 1.5; color: var(--muted); margin-top: 14px; max-width: 640px; }
.mark-hl { position: relative; white-space: nowrap; }
.mark-hl::before { content: ''; position: absolute; z-index: -1; left: -.08em; right: -.1em; top: .14em; bottom: .02em; border-radius: .16em; background: var(--hl); transform: rotate(-1.2deg); }
.mark-hl { isolation: isolate; }
@media (max-width: 640px) { section { padding-top: 72px; } .wrap { padding: 0 16px; } }

/* ---------- hero ---------- */
.hero { padding: 64px 0 0; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--s); color: var(--t); font-size: 14px; font-weight: 500; }
.pill .tl { width: 24px; height: 24px; border-radius: 50%; }
.hero h1 { margin-top: 22px; font-size: clamp(46px, 6.6vw, 88px); line-height: .98; font-weight: 700; letter-spacing: -.055em; }
.hero h1 .dim { color: rgba(0,0,0,.28); }
.hero .lede { font-size: 20px; margin-top: 22px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; font-size: 14px; color: var(--muted); }
.trust span { display: flex; align-items: center; gap: 6px; }
.trust svg { width: 16px; height: 16px; color: var(--c); }
@media (max-width: 960px) { .hero-in { grid-template-columns: minmax(0, 1fr); } }

/* showcase: dotted grey stage, white app window playing one feature after another */
.stage { position: relative; border-radius: 24px; background: var(--tile); background-image: radial-gradient(rgba(0,0,0,.075) 1.1px, transparent 1.1px); background-size: 22px 22px; padding: 28px; }
.win { background: #fff; border-radius: 14px; box-shadow: var(--lift); overflow: hidden; }
.win-bar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--hair); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e6e5e3; }
.win-bar span { margin-left: 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-body { position: relative; height: 380px; }
.win-body .scene { position: absolute; inset: 0; transition: opacity .45s var(--ease); }
.win-body .scene.out { opacity: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tab { position: relative; overflow: hidden; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--ring); font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s, background .2s; }
.tab:hover { color: #000; }
.tab[aria-selected="true"] { color: var(--t); background: var(--s); box-shadow: none; }
.tab .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--c); }
.scap { margin-top: 12px; min-height: 44px; font-size: 15px; line-height: 22px; color: var(--muted); max-width: 560px; }
@media (max-width: 640px) { .stage { padding: 14px; border-radius: 18px; } .win-body { height: 340px; } }

/* ---------- facts strip ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 72px; }
.fact { border-radius: 16px; background: var(--tile-2); padding: 22px 22px 20px; }
.fact b { display: block; font-size: clamp(30px, 3.6vw, 42px); line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact span { display: block; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--muted); }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- feature bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.bc { grid-column: span 2; position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--tile-2); padding: 26px 26px 0; overflow: hidden; min-height: 520px; }
.bc.wide { grid-column: span 3; }
.bc.full { grid-column: span 6; min-height: 0; }
.bc > .k { font-size: 14px; color: var(--t); display: flex; align-items: center; gap: 8px; }
.bc > .k i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.bc > h3 { margin-top: 8px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }
.bc > p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--muted); }
.bc .panel { position: relative; margin-top: 24px; flex: 1; min-height: 320px; background: #fff; border-radius: 12px 12px 0 0; box-shadow: var(--ring); overflow: hidden; }
.bc .panel .kw { position: absolute; inset: 0; }
.bc .panel.pad { padding: 20px; }
@media (max-width: 1000px) { .bc, .bc.wide { grid-column: span 3; } }
@media (max-width: 680px) { .bento { grid-template-columns: minmax(0, 1fr); } .bc, .bc.wide, .bc.full { grid-column: auto; } .bc { min-height: 480px; padding: 22px 20px 0; } }

/* static panels used where there is no animated scene */
.stp { display: grid; gap: 10px; }
.stp li { list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; box-shadow: var(--ring); font-size: 15px; font-weight: 500; }
.stp li em { font-style: normal; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--s); color: var(--t); font-weight: 700; font-size: 14px; }
.stp li small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stp { padding: 0; margin: 0; }
.sort { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sort .row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; box-shadow: var(--ring); font-size: 14px; }
.sort .row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- courses ---------- */
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 1000px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cgrid { grid-template-columns: minmax(0, 1fr); } }
.cc { display: flex; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: var(--ring); padding: 22px; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.cc:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.cc.feat { box-shadow: 0 0 0 1.5px var(--c); }
.cc .top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: #e3e2e0; color: #32302c; white-space: nowrap; }
.tag.c { background: var(--s); color: var(--t); }
.tag.free { background: #dbeddb; color: #1c3829; }
.tag.y { background: #fdecc8; color: #402c1b; }
.cc h3 { margin-top: 14px; font-size: 19px; line-height: 25px; font-weight: 700; letter-spacing: -.015em; }
.cc p { margin-top: 8px; font-size: 14.5px; line-height: 21px; color: var(--muted); }
.cc ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.cc li { position: relative; padding-left: 22px; font-size: 14px; line-height: 20px; color: var(--text); }
.cc li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.cc .more { font-size: 13px; color: var(--muted); padding-left: 0; }
.cc .more::before { display: none; }
.cc .meta { margin-top: 14px; font-size: 13px; color: var(--muted); }
.cc .buy { margin-top: auto; padding-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.price b { font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price s { margin-left: 6px; font-size: 14px; color: var(--faint); }
.price em { display: block; font-style: normal; margin-top: 6px; font-size: 12px; font-weight: 600; color: #1c7a33; }
.price .ask { font-size: 15px; font-weight: 600; color: var(--text); }
.price .note { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); max-width: 180px; }

/* ---------- exam pattern ---------- */
.pat { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; }
@media (max-width: 800px) { .pat { grid-auto-flow: row; } }
.st { position: relative; border-radius: 16px; background: var(--tile-2); padding: 22px; }
.st .n { font-size: 13px; font-weight: 600; color: var(--muted); }
.st h3 { margin-top: 6px; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.015em; }
.st p { margin-top: 8px; font-size: 14.5px; line-height: 21px; color: var(--muted); }
.st .m { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
.st .m b { font-size: 36px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--t); font-variant-numeric: tabular-nums; }
.st .m span { font-size: 13px; color: var(--muted); }
.pat-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.exams { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 40px; }
.exc { border-radius: 16px; background: var(--tile-2); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.exc h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.exc p { font-size: 14.5px; line-height: 21px; color: var(--muted); }
.exc .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* ---------- proof ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-top: 40px; }
.qt { border-radius: 16px; background: var(--tile-2); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.qt blockquote { margin: 0; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.qt blockquote::before { content: '“'; } .qt blockquote::after { content: '”'; }
.qt .who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.qt .av { width: 40px; height: 40px; border-radius: 50%; background: var(--s); color: var(--t); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.qt .who b { display: block; font-size: 15px; font-weight: 600; }
.qt .who span { font-size: 13px; color: var(--muted); }
.qt .hi { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- steps (how it works) ---------- */
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 40px; counter-reset: h; }
.how > div { counter-increment: h; border-radius: 16px; background: var(--tile-2); padding: 22px; }
.how > div::before { content: counter(h); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--c); color: #fff; font: 700 15px var(--head); }
.how h3 { margin-top: 16px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.how p { margin-top: 6px; font-size: 14.5px; line-height: 21px; color: var(--muted); }

/* ---------- people (mentors) ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 40px; }
.pc { border-radius: 16px; background: var(--tile-2); padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.pc .av { width: 56px; height: 56px; border-radius: 50%; background: repeating-linear-gradient(45deg, var(--s), var(--s) 6px, #fff 6px, #fff 12px); box-shadow: inset 0 0 0 1.5px var(--c); margin-bottom: 12px; }
.pc b { font-size: 17px; font-weight: 700; }
.pc span { font-size: 14px; color: var(--muted); }
.pc .tag { align-self: flex-start; margin-top: 10px; }

/* ---------- faq ---------- */
.faq { margin-top: 40px; display: grid; gap: 8px; max-width: 860px; }
.faq details { border-radius: 12px; background: var(--tile-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 16.5px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { padding: 0 20px 20px; font-size: 15px; line-height: 23px; color: var(--muted); max-width: 720px; }

/* ---------- closing cta + other verticals ---------- */
.end { margin-top: 0; border-radius: 28px; background: var(--s); padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.end .tl { width: 96px; height: 96px; }
.end h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -.04em; color: var(--ink); }
.end p { margin-top: 10px; font-size: 17px; color: var(--t); }
.end .ctas { margin-top: 0; }
@media (max-width: 860px) { .end { grid-template-columns: minmax(0, 1fr); } .end .tl { width: 64px; height: 64px; } }
.others { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.oc { display: flex; flex-direction: column; gap: 12px; border-radius: 16px; background: var(--tile-2); padding: 18px; color: #000; transition: background .2s, transform .25s var(--ease); }
.oc:hover { background: var(--tile); color: #000; transform: translateY(-2px); }
.oc .tl { width: 40px; height: 40px; }
.oc b { font: 600 17px var(--head); letter-spacing: -.02em; }
.oc span { font-size: 13px; line-height: 18px; color: var(--muted); }
@media (max-width: 1000px) { .others { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.small-h { font-size: 15px; font-weight: 600; color: var(--muted); }

/* ---------- footer ---------- */
.ftr { margin-top: 120px; border-top: 1px solid var(--hair); padding: 56px 24px 40px; }
.ftr-in { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
@media (max-width: 800px) { .ftr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-in > div:first-child { grid-column: 1 / -1; } }
.ftr-in > div { display: flex; flex-direction: column; gap: 10px; }
.ftr-in b.h { font-size: 13px; font-weight: 600; color: rgba(0,0,0,.5); }
.ftr-in > div > a:not(.logo):not(.tel) { font-size: 14.5px; color: rgba(0,0,0,.85); }
.ftr-in > div > a:not(.logo):not(.tel):hover { color: #000; text-decoration: underline; }
.ftr .tel { font-size: 15px; font-weight: 600; color: #000; margin-top: 6px; }
.ftr .sub { font-size: 13.5px; line-height: 20px; color: rgba(0,0,0,.54); }
.soc { display: flex; gap: 6px; }
.soc a { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--tile); color: #000; }
.soc a:hover { background: var(--tile-h); color: #000; }
.soc svg { width: 16px; height: 16px; }
.legal { max-width: var(--wrap); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.06); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(0,0,0,.5); }
.legal nav { display: flex; gap: 16px; }
.legal a { color: rgba(0,0,0,.5); }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.sample { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ======================================================================
   acads IAS multi-page site (/ias, /ias/prelims, /ias/mains, /ias/aig).
   Class names start with "i-" so they never meet kit.css scene classes.
   ====================================================================== */
.ihdr .hdr-nav a { font-size: 15px; }
.ihdr .lock .tl { width: 32px; height: 32px; }
.imenu a { padding: 12px 8px; }
@media (max-width: 1100px) { .ihdr .hdr-nav { display: flex; } .ihdr .menu-btn { display: none; } }
@media (max-width: 760px) { .ihdr .hdr-nav { display: none; } .ihdr .menu-btn { display: grid; } }
.ftr .lock { color: #000; }

.i-tight { padding-top: 64px; }
.i-top { align-items: start; }
.i-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.i-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.i-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 1000px) { .i-grid3, .i-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .i-grid2, .i-grid3, .i-grid4 { grid-template-columns: minmax(0, 1fr); } }
.i-stack { display: grid; gap: 12px; }

.i-card { position: relative; border-radius: 16px; background: var(--tile-2); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--ink); }
.i-card > h3 { font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -.02em; }
.i-card > p { font-size: 15px; line-height: 23px; color: var(--muted); }
.i-card > .tag { align-self: flex-start; }
.i-feat { background: var(--s); }
.i-feat > p { color: var(--t); }
a.i-card { transition: background .2s, transform .25s var(--ease); }
a.i-card:hover { background: var(--tile); color: var(--ink); transform: translateY(-2px); }
.i-more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--blue); }
.i-buy { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.i-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.i-chips .tag { background: #fff; }
.i-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.i-list li { position: relative; padding-left: 22px; font-size: 15px; line-height: 22px; color: var(--text); }
.i-list li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.i-check li::before { left: 2px; top: 6px; width: 10px; height: 6px; border-radius: 0; background: none; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.i-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 640px) { .i-cols { grid-template-columns: minmax(0, 1fr); } }
.i-sub { margin: 48px 0 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.i-prose { margin-top: 20px; display: grid; gap: 14px; max-width: 620px; }
.i-prose p { font-size: 17px; line-height: 27px; color: var(--text); }

/* home: film + recommended */
.i-film { min-width: 0; }
.i-film-box { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--lift); aspect-ratio: 16 / 10.4; }
.i-film-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.i-film .scap { margin-top: 14px; min-height: 0; }
.i-recs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 1000px) { .i-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .i-recs { grid-template-columns: minmax(0, 1fr); } }
.i-rec { display: flex; flex-direction: column; gap: 10px; border-radius: 16px; background: var(--s); padding: 22px; color: var(--ink); transition: transform .25s var(--ease); }
.i-rec:hover { color: var(--ink); transform: translateY(-2px); }
.i-rec .tl { width: 40px; height: 40px; }
.i-by { font: 600 13px var(--head); color: var(--t); }
.i-rec h3 { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; }
.i-rec p { font-size: 14.5px; line-height: 21px; color: var(--t); }
.i-rec .i-more { color: var(--t); }
.i-q blockquote { margin: 0; font-size: 18px; line-height: 27px; font-weight: 500; }
.i-q blockquote::before { content: '“'; } .i-q blockquote::after { content: '”'; }
.i-q figcaption { font-size: 14px; color: var(--muted); }
.i-q figcaption b { color: var(--ink); }
.i-mini-tl { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: t; }
.i-mini-tl li { counter-increment: t; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; font-size: 14.5px; }
.i-mini-tl li::before { content: counter(t); grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 13px var(--head); }
.i-mini-tl b { font-weight: 600; }
.i-mini-tl span { color: var(--muted); font-size: 13.5px; }

/* prelims */
.i-quote { margin: 0; border-radius: 24px; background: var(--tile); padding: clamp(28px, 4vw, 48px); background-image: radial-gradient(rgba(0,0,0,.075) 1.1px, transparent 1.1px); background-size: 22px 22px; }
.i-quote blockquote { margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; font-weight: 700; letter-spacing: -.03em; }
.i-quote blockquote::before { content: '“'; color: var(--c); } .i-quote blockquote::after { content: '”'; color: var(--c); }
.i-band { border-radius: 28px; background: #0f2f2e; color: #fff; padding: clamp(32px, 5vw, 64px); display: grid; gap: 14px; }
.i-band-k { font-size: 14px; font-weight: 600; color: #7fd3cf; }
.i-band-h { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.05; font-weight: 700; letter-spacing: -.04em; max-width: 900px; }
.i-band-h b { color: #ffe4af; font-weight: 700; }
.i-band p:not(.i-band-h) { font-size: 17px; line-height: 26px; color: rgba(255,255,255,.75); max-width: 720px; }
.i-band small { font-size: 14px; color: rgba(255,255,255,.55); }
.i-ab { width: 100%; height: auto; }
.i-ab text { fill: var(--ink); font-family: var(--k-font); }
.i-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.i-2up div { background: #fff; border-radius: 12px; box-shadow: var(--ring); padding: 14px 16px; display: grid; gap: 4px; }
.i-2up b { font: 700 13px var(--head); color: var(--t); text-transform: uppercase; letter-spacing: .04em; }
.i-2up span { font-size: 15px; font-weight: 600; }
.i-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.i-steps li { counter-increment: s; position: relative; border-radius: 16px; background: var(--tile-2); padding: 22px 20px; }
.i-steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; font: 700 15px var(--head); margin-bottom: 16px; }
.i-steps li:not(:last-child)::after { content: ''; position: absolute; right: -9px; top: 36px; width: 8px; height: 8px; border-top: 2px solid var(--c); border-right: 2px solid var(--c); transform: rotate(45deg); z-index: 1; }
.i-steps h3 { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; }
.i-steps p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--muted); }
@media (max-width: 1000px) { .i-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .i-steps li::after { display: none; } }
@media (max-width: 560px) { .i-steps { grid-template-columns: minmax(0, 1fr); } }
.i-big { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--t); }
.i-curve { width: 100%; height: auto; }
.i-curve text { font-family: var(--k-font); }
.i-curve-p { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.4s var(--ease); }
.rv.in .i-curve-p, .i-card.in .i-curve-p { stroke-dashoffset: 0; }
.i-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
section .i-mods:first-of-type { margin-top: 40px; }
@media (max-width: 1000px) { .i-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .i-mods { grid-template-columns: minmax(0, 1fr); } }
.i-mod { border-radius: 16px; background: var(--tile-2); padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.i-mod > .tag { align-self: flex-start; }
.i-mod h3 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; }
.i-pg { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--t); background: var(--s); border-radius: 6px; padding: 2px 8px; }
.i-mod p { font-size: 14.5px; line-height: 22px; color: var(--muted); }
.i-more-d { margin-top: 4px; }
.i-more-d summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--blue); list-style: none; }
.i-more-d summary::-webkit-details-marker { display: none; }
.i-more-d summary::after { content: ' +'; }
.i-more-d[open] summary::after { content: ' −'; }
.i-more-d .i-list { margin-top: 10px; }
.i-more-d .i-list li { font-size: 14px; }
.i-tier { border-radius: 20px; background: #fff; box-shadow: var(--ring); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.i-tier.feat { box-shadow: 0 0 0 2px var(--c), var(--lift); }
.i-tier > .tag { align-self: flex-start; }
.i-tier h3 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }
.i-mantras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 1000px) { .i-mantras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .i-mantras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.i-mantra { border-radius: 20px; background: var(--c); color: #fff; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; min-height: 170px; justify-content: center; }
.i-mantra svg { width: 40px; height: 40px; }
.i-mantra span { font-size: 15px; line-height: 20px; font-weight: 600; }

/* mains */
.i-table { margin-top: 32px; border-radius: 16px; box-shadow: var(--ring); overflow-x: auto; }
.i-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.i-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--hair); background: var(--tile-2); }
.i-table td { padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.i-table tr:last-child td { border-bottom: 0; }
.i-empty { margin-top: 32px; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.i-tl { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: relative; counter-reset: t; }
.i-tl li { counter-increment: t; border-radius: 16px; background: var(--tile-2); padding: 24px; position: relative; }
.i-tl li::before { content: 'Tier ' counter(t); display: inline-block; font: 700 12px var(--head); color: #fff; background: var(--c); border-radius: 6px; padding: 3px 8px; }
.i-when { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--t); }
.i-tl h3 { margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.i-tl p { margin-top: 8px; font-size: 14.5px; line-height: 22px; color: var(--muted); }
@media (max-width: 860px) { .i-tl { grid-template-columns: minmax(0, 1fr); } }
.i-line { color: var(--t) !important; font-weight: 500; }
.i-mini-steps { margin: 4px 0 0; padding: 0 0 0 20px; display: grid; gap: 8px; }
.i-mini-steps li { font-size: 14.5px; line-height: 21px; color: var(--muted); }
.i-mini-steps li::marker { color: var(--c); font-weight: 700; }
.i-mini-steps b { color: var(--ink); font-weight: 600; }
.i-disc { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 15px; }
.i-disc b { color: var(--t); white-space: nowrap; }
.i-how1 { margin-top: 0; grid-template-columns: minmax(0, 1fr) !important; }

/* aig */
.i-why p { font-size: 19px; line-height: 29px; font-weight: 500; color: var(--ink); }
.i-num { font: 700 14px var(--head); color: var(--t); }
.i-vid { position: relative; display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; }
.i-vid-img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000 center / cover no-repeat; box-shadow: var(--ring); }
.i-vid-play { position: absolute; left: 50%; top: 0; aspect-ratio: 16 / 9; width: 100%; transform: translateX(-50%); display: grid; place-items: center; }
.i-vid-play::before { content: ''; width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.72); transition: transform .2s var(--ease); }
.i-vid-play::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.i-vid:hover .i-vid-play::before { transform: scale(1.08); }
.i-vid-t b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.i-vid-t small { font-size: 13px; color: var(--muted); }
.i-vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
.h2 + .i-card, .lede + .i-card { margin-top: 40px; }
.i-glance { background: var(--s); padding: 28px; }
.i-gl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.i-gl div { background: #fff; border-radius: 12px; box-shadow: var(--ring); padding: 18px; display: grid; gap: 6px; }
.i-gl b { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--t); }
.i-gl span { font-size: 14px; line-height: 19px; color: var(--muted); }

/* ======================================================================
   acads IFoS multi-page site (/ifos/...). Shares the i- components above.
   ====================================================================== */
@media (max-width: 1240px) { .ihdr-wide .hdr-nav { display: none; } .ihdr-wide .menu-btn { display: grid; } }
/* home hero: the promo film is the first thing on the page */
.i-fhero { padding-top: 48px; }
.i-fhero-in { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 48px; align-items: center; }
.i-fhero-t h1 { font-size: clamp(42px, 5vw, 72px); }
.i-fhero-t .lede { font-size: 18px; }
.i-fhero-film { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 30px 80px -24px rgba(58,92,71,.38), 0 10px 24px -12px rgba(0,0,0,.12); }
@media (max-width: 1100px) {
  .i-fhero { padding-top: 20px; }
  .i-fhero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .i-fhero-film { order: -1; border-radius: 16px; }
  .i-fhero-t h1 { margin-top: 18px; }
}
.i-fhero-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.i-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 760px) { .i-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.i-stat { border-radius: 16px; background: var(--tile-2); padding: 18px 20px; transition-delay: calc(var(--i) * 90ms); }
.i-stat b { display: block; font: 700 clamp(30px, 3.4vw, 40px)/1 var(--head); letter-spacing: -.04em; color: var(--t); }
.i-stat span { display: block; margin-top: 8px; font-size: 14px; line-height: 19px; color: var(--muted); }
.i-stat:first-child { background: var(--s); }
.i-stats-n { margin-top: 12px; }

/* subject cards: picture first */
.i-subjs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
@media (max-width: 1000px) { .i-subjs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .i-subjs { grid-template-columns: minmax(0, 1fr); } }
.i-subj { position: relative; display: flex; flex-direction: column; border-radius: 20px; background: var(--tile-2); padding: 8px; color: var(--ink); transition: opacity .6s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), background .2s; transition-delay: calc(var(--i, 0) * 70ms), 0s, 0s, 0s; }
.i-subj:hover { color: var(--ink); background: #fff; box-shadow: var(--lift); transform: translateY(-4px); }
.i-subj-t { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; }
.i-subj-t > .tag { align-self: flex-start; }
.i-subj h3 { font-size: 21px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.i-subj .i-by { font-size: 14.5px; color: var(--muted); }
.i-subj-go { position: absolute; right: 18px; bottom: 18px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--ring); color: var(--t); font-weight: 700; transition: transform .35s var(--ease), background .2s, color .2s; }
.i-subj:hover .i-subj-go { background: var(--c); color: #fff; transform: translateX(3px); }

/* illustrations (src/ifos_art.py). Resting state = final frame; animations run once the card is revealed. */
.i-ill { position: relative; border-radius: 14px; background: var(--s); aspect-ratio: 16 / 10; overflow: hidden; }
.i-ill-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.i-ill-svg text { font: 600 13px Inter, sans-serif; fill: var(--ink); text-anchor: middle; }
.i-ill-badge { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: var(--ring); font-size: 12.5px; font-weight: 700; color: var(--t); letter-spacing: -.005em; }
.i-ill .f-c { fill: var(--c); } .i-ill .f-c2 { fill: color-mix(in srgb, var(--c) 62%, #fff); } .i-ill .f-t { fill: var(--t); } .i-ill .f-s { fill: var(--s); } .i-ill .f-s2 { fill: color-mix(in srgb, var(--c) 22%, #fff); }
.i-ill .f-w { fill: #fff; } .i-ill .f-y { fill: #f5c451; } .i-ill .f-y2 { fill: #ffe4af; } .i-ill .f-tr { fill: #9b7b5c; } .i-ill .f-tr2 { fill: color-mix(in srgb, var(--c) 32%, #fff); }
.i-ill .f-g { fill: rgba(0,0,0,.3); } .i-ill .f-g2 { fill: rgba(0,0,0,.1); } .i-ill .f-ink { fill: #37352f; }
.i-ill .s-t { stroke: var(--t); } .i-ill .s-c { stroke: var(--c); } .i-ill .s-red { stroke: #e5484d; }
.i-ill .t-w { fill: #fff; } .i-ill .t-s { fill: var(--c); font-size: 15px; font-weight: 800; letter-spacing: .08em; } .i-ill .t-red { fill: #e5484d; font-size: 21px; font-weight: 800; letter-spacing: .1em; }
.i-ill-svg g, .i-ill-svg path, .i-ill-svg circle { transform-box: fill-box; }
@keyframes ill-grow { 0% { transform: scale(0); } 70% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes ill-drop { 0% { transform: translateY(-120px); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateY(4px); } 75% { transform: translateY(-3px); } 100% { transform: none; opacity: 1; } }
@keyframes ill-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes ill-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes ill-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ill-spin { to { transform: rotate(360deg); } }
@keyframes ill-rain { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
@keyframes ill-leaf { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-70px, 130px) rotate(220deg); opacity: 0; } }
@keyframes ill-fan { 0% { transform: rotate(0) translateY(10px); opacity: 0; } 100% { transform: rotate(var(--r)); opacity: 1; } }
@keyframes ill-stamp { 0% { transform: scale(2.4) rotate(-14deg); opacity: 0; } 60% { transform: scale(.94) rotate(-10deg); opacity: 1; } 100% { transform: rotate(-10deg); opacity: 1; } }
@keyframes ill-bub { 0%, 8% { transform: scale(0); opacity: 0; } 16%, 46% { transform: none; opacity: 1; } 54%, 100% { transform: scale(.6); opacity: 0; } }
.ill-tree, .ill-sprout { transform-origin: 50% 100%; }
.ill-sway { transform-origin: 50% 100%; }
.ill-book, .ill-brick { transform-origin: 50% 100%; }
.ill-chip, .ill-spark, .ill-stamp, .ill-bub { transform-origin: 50% 50%; }
.ill-paper { transform-origin: 50% 100%; transform: rotate(var(--r)); }
.ill-stamp { transform: rotate(-10deg); }
.ill-gear, .ill-gear2 { transform-origin: 50% 50%; }
.ill-leaf, .ill-drop { opacity: 0; }
.in .ill-tree, .in .ill-sprout { animation: ill-grow .9s var(--ease) both; animation-delay: var(--d); }
.in .ill-sway { animation: ill-sway 4s ease-in-out 1.2s infinite; }
.in .ill-book, .in .ill-brick { animation: ill-drop .9s var(--ease) both; animation-delay: var(--d); }
.in .ill-sun, .in .ill-glass, .in .ill-cand { animation: ill-float 3.6s ease-in-out infinite; }
.in .ill-leaf { animation: ill-leaf 5s ease-in 2s infinite; }
.in .ill-gear { animation: ill-spin 9s linear infinite; }
.in .ill-gear2 { animation: ill-spin 6s linear infinite reverse; }
.in .ill-cloud { animation: ill-float 4s ease-in-out infinite; }
.in .ill-drop { animation: ill-rain 1.6s ease-in infinite; animation-delay: var(--d); }
.in .ill-chip { animation: ill-pop .6s var(--ease) both; animation-delay: var(--d); }
.in .ill-spark { animation: ill-pop .6s var(--ease) both, ill-float 3s ease-in-out 2.6s infinite; animation-delay: var(--d), 2.6s; }
.in .ill-paper { animation: ill-fan .8s var(--ease) both; animation-delay: var(--d); }
.in .ill-stamp { animation: ill-stamp .7s var(--ease) .9s both; }
.in .ill-bub { animation: ill-bub 3.2s var(--ease) infinite; animation-delay: var(--d); }
.i-subj:hover .ill-sway { animation-duration: 1.6s; }
.i-subj:hover .ill-gear { animation-duration: 3s; }

/* store cards (IFoS courses: home top six and /ifos/courses). Clear edge: a hairline border plus a resting shadow; lifts on hover. */
.i-scs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
@media (max-width: 1000px) { .i-scs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .i-scs { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.i-sc { display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid rgba(0,0,0,.12); overflow: hidden; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px -6px rgba(0,0,0,.14), 0 18px 36px -18px rgba(0,0,0,.18);
  transition: opacity .6s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s; transition-delay: calc(var(--i, 0) * 70ms), 0s, 0s, 0s; }
.i-sc:hover { color: var(--ink); transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 45%, rgba(0,0,0,.12));
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 28px -10px rgba(0,0,0,.2), 0 32px 56px -24px rgba(0,0,0,.3); }
.i-sc > .i-ill { border-radius: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.i-sc-st { position: absolute; right: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12px; font-weight: 700; }
.i-sc-st.free { background: #1aae39; } .i-sc-st.soon { background: #fff; color: var(--t); box-shadow: var(--ring); }
.i-sc-b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.i-sc-b > small { font-size: 12.5px; font-weight: 600; color: var(--t); text-transform: uppercase; letter-spacing: .05em; }
.i-sc-b > h3 { font: 700 20px/1.2 Inter, sans-serif; letter-spacing: -.02em; }
.i-sc-meta, .i-sc-by { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.i-sc-by { color: var(--t); font-weight: 600; font-size: 13px; }
.i-sc-meta svg, .i-sc-by svg { flex: none; }
.i-sc-f { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(0,0,0,.12); }
.i-sc .pr { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .i-sc .pr b { font: 800 24px Inter, sans-serif; letter-spacing: -.03em; }
.i-sc .pr s { color: rgba(0,0,0,.4); font-size: 14px; } .i-sc .pr .ask { font-size: 17px; letter-spacing: -.01em; }
.i-sc .pr em { font-style: normal; font-size: 12px; font-weight: 700; color: #0f6220; background: #e6f6e9; padding: 2px 7px; border-radius: 6px; }
.i-sc-btn { display: flex; justify-content: center; align-items: center; gap: 8px; height: 44px; margin-top: 4px; border-radius: 12px; background: #0075de; color: #fff; font-weight: 600; font-size: 15px; transition: background .2s, gap .25s; }
.i-sc:hover .i-sc-btn { background: #005bab; gap: 14px; }
.i-sc:hover .ill-sway { animation-duration: 1.6s; }
.i-sc:hover .ill-gear { animation-duration: 3s; }
.i-ill .s-w { stroke: #fff; }
.i-sc-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 36px; text-align: center; }
.i-sc-more .btn { gap: 10px; } .i-sc-more > span { font-size: 14px; color: var(--muted); }
.i-sc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.i-sc-jump a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 2px rgba(0,0,0,.05); color: var(--ink); font-size: 14.5px; font-weight: 600; }
.i-sc-jump a:hover { border-color: rgba(0,0,0,.25); color: var(--ink); }
.i-sc-jump a span { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--tile-2); border-radius: 999px; padding: 1px 8px; }
.i-sc-sec { scroll-margin-top: 72px; }

/* course block with its picture (course pages) */
.i-tier-in { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.i-tier-in > .tag { align-self: flex-start; }
.i-tier-art { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.i-tier-art > .i-ill { position: sticky; top: 90px; aspect-ratio: 4 / 3.4; }
@media (max-width: 860px) { .i-tier-art { grid-template-columns: minmax(0, 1fr); gap: 22px; } .i-tier-art > .i-ill { position: relative; top: 0; aspect-ratio: 16 / 10; } }
.i-tier .i-chips .tag { transition: transform .5s var(--ease), opacity .5s var(--ease); transition-delay: calc(var(--i, 0) * 50ms + .2s); }
.i-tier.rv:not(.in) .i-chips .tag { opacity: 0; transform: translateY(8px) scale(.9); }
.i-tier .i-chips .tag:hover { background: var(--c); color: #fff; }

.i-big-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: b; }
.i-big-steps li { counter-increment: b; display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.i-big-steps li::before { content: counter(b); flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 16px var(--head); }

/* Pyramid of Marks (svg from ifos_art.pyramid_svg, as in the channel's post): levels rise bottom-up, apex drops, braces draw, IFoS levels pulse */
.i-pyr { gap: 14px; padding: 26px 20px 22px; }
.i-pyr > .tag { align-self: center; }
.i-pyr-svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes pm-rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pm-drop { 0% { transform: translateY(-40px) scale(.6); opacity: 0; } 70% { transform: translateY(4px); opacity: 1; } 100% { transform: none; } }
@keyframes pm-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 4% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes pm-fade { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes pm-pulse { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 6px 14px rgba(192,57,43,.35)); } }
.in .pm-l { animation: pm-rise .7s var(--ease) both; animation-delay: calc(var(--k) * .18s + .1s); }
.in .pm-l:is(#lv0, #lv1) { animation: pm-rise .7s var(--ease) both, pm-pulse 3s ease-in-out 2.2s infinite; animation-delay: calc(var(--k) * .18s + .1s), 2.2s; }
.in .pm-apex { animation: pm-drop .7s var(--ease) .85s both; }
.in .pm-br path { animation: pm-draw .6s var(--ease) both; } .in .pm-br.cse path { animation-delay: 1.3s; } .in .pm-br.ifos path { animation-delay: 1.6s; }
.in .pm-lab { animation: pm-fade .5s var(--ease) both; } .in .pm-lab.cse { animation-delay: 1.5s; } .in .pm-lab.ifos { animation-delay: 1.8s; }
@media (max-width: 560px) { .i-pyr { padding: 20px 10px 16px; } }

/* Priority Matrix: real axes; Q1 is stamped, Q2 and Q3 dim, Q4 lights up and pulls in PYQs */
.i-mx { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; margin-top: 32px; }
.i-mx-g { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'q2 q4' 'q1 q3'; gap: 12px; }
.i-mx-ax { display: flex; align-items: center; justify-content: space-around; font-size: 12px; font-weight: 600; color: var(--faint, rgba(0,0,0,.4)); text-transform: uppercase; letter-spacing: .05em; }
.i-mx-ax b { color: var(--ink); font-weight: 700; }
.i-mx-ax.y { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; }
.i-mx-ax.x { grid-column: 2; grid-row: 2; }
.i-mx-c { position: relative; overflow: hidden; border-radius: 18px; background: var(--tile-2); padding: 22px 22px 22px 70px; min-height: 160px; transition: opacity .5s, filter .5s; }
.i-mx-1 { grid-area: q1; } .i-mx-2 { grid-area: q2; } .i-mx-3 { grid-area: q3; } .i-mx-4 { grid-area: q4; }
.i-mx-n { position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--head); background: #fff; box-shadow: var(--ring); }
.i-mx-c small { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.i-mx-c b { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.i-mx-c p { margin-top: 6px; font-size: 14.5px; line-height: 21px; color: var(--muted); max-width: 46ch; }
.i-mx-4 { background: var(--s); box-shadow: inset 0 0 0 2px var(--c); } .i-mx-4 .i-mx-n { background: var(--c); color: #fff; box-shadow: none; } .i-mx-4 b { color: var(--t); }
.i-mx-1 b { color: #a3301f; }
.i-mx-stamp { position: absolute; right: 18px; top: 18px; padding: 4px 12px; border: 3px solid #e5484d; border-radius: 8px; color: #e5484d; font: 800 18px var(--head); font-style: normal; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-10deg); opacity: .9; }
.i-mx-pyq { position: absolute; right: 14px; top: 14px; display: flex; gap: 4px; font-style: normal; }
.i-mx-pyq span { padding: 3px 7px; border-radius: 6px; background: #fff; box-shadow: var(--ring); font-size: 10.5px; font-weight: 700; color: var(--t); letter-spacing: .04em; }
@keyframes mx-pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mx-stamp { 0% { transform: scale(2.2) rotate(-16deg); opacity: 0; } 60% { transform: scale(.92) rotate(-9deg); opacity: 1; } 100% { transform: rotate(-10deg); opacity: .9; } }
@keyframes mx-fly { from { transform: translate(-160px, 90px) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mx-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(94,138,110,.45); } 50% { box-shadow: 0 0 0 12px rgba(94,138,110,0); } }
.in .i-mx-c { animation: mx-pop .55s var(--ease) both; }
.in .i-mx-4 { animation: mx-pop .55s var(--ease) .1s both, mx-ring 2.4s ease-in-out 2.4s infinite; }
.in .i-mx-2 { animation: mx-pop .55s var(--ease) .25s both; }
.in .i-mx-3 { animation: mx-pop .55s var(--ease) .4s both; }
.in .i-mx-1 { animation-delay: .55s; }
.in .i-mx-stamp { animation: mx-stamp .6s var(--ease) 1.2s both; }
.in .i-mx-pyq span { animation: mx-fly .7s var(--ease) both; }
.in .i-mx-pyq span:nth-child(1) { animation-delay: 1.6s; } .in .i-mx-pyq span:nth-child(2) { animation-delay: 1.75s; } .in .i-mx-pyq span:nth-child(3) { animation-delay: 1.9s; }
@media (max-width: 640px) {
  .i-mx { grid-template-columns: minmax(0, 1fr); }
  .i-mx-ax { display: none; }
  .i-mx-g { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'q4' 'q3' 'q2' 'q1'; }
  .i-mx-c { padding-right: 18px; }
  .i-mx-pyq { position: static; margin-bottom: 8px; }
}
.i-res { border-radius: 16px; background: var(--tile-2); padding: 24px; min-width: 0; }
.i-res-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.i-res-h b { font-size: 30px; font-weight: 700; letter-spacing: -.035em; color: var(--t); }
.i-res-h small { font-size: 13px; color: var(--muted); }
.i-res-l { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
@media (max-width: 420px) { .i-res-l { grid-template-columns: minmax(0, 1fr); } }
.i-res-l li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.05); min-width: 0; }
.i-res-l li b { flex: none; width: 34px; font-size: 13px; font-weight: 700; color: var(--t); font-variant-numeric: tabular-nums; }
.i-res-l li span { min-width: 0; }
.i-res-more { border-bottom: 0 !important; font-weight: 600; color: var(--t); }
.i-dls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin-top: 32px; }
.i-dl { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: var(--ring); color: var(--ink); transition: box-shadow .2s, transform .25s var(--ease); }
.i-dl:hover { color: var(--ink); box-shadow: var(--lift); transform: translateY(-2px); }
.i-dl-ic { flex: none; width: 42px; height: 50px; border-radius: 6px 12px 6px 6px; background: var(--s); color: var(--t); display: grid; place-items: center; font: 700 11px var(--head); letter-spacing: .04em; }
.i-dl b { display: block; font-size: 15px; font-weight: 600; line-height: 20px; }
.i-dl small { font-size: 12.5px; color: var(--muted); }
.i-arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
section .i-arts { margin-top: 40px; }
.i-art-group + .i-art-group { margin-top: 48px; }
.i-art-group .i-arts { margin-top: 14px; }
@media (max-width: 1000px) { .i-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .i-arts { grid-template-columns: minmax(0, 1fr); } }
.i-art-c { display: flex; flex-direction: column; gap: 8px; border-radius: 16px; background: var(--tile-2); padding: 22px; color: var(--ink); transition: background .2s, transform .25s var(--ease); }
.i-art-c:hover { background: var(--tile); color: var(--ink); transform: translateY(-2px); }
.i-art-c > .tag { align-self: flex-start; }
.i-art-c h3 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; }
.i-art-c p { font-size: 14.5px; line-height: 21px; color: var(--muted); }
.i-art-c small { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--faint); }
.i-mns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 1000px) { .i-mns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .i-mns { grid-template-columns: minmax(0, 1fr); } }
.i-mn { border-radius: 16px; background: var(--tile-2); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.i-mn-k { font: 700 40px/1 var(--head); letter-spacing: -.03em; color: var(--t); }
.i-mn > .tag { align-self: flex-start; }
.i-mn-t { font-size: 17px; line-height: 25px; font-weight: 600; color: var(--ink); }
.i-mn p:last-child { font-size: 14px; line-height: 21px; color: var(--muted); }
.i-tier-p { font-size: 15px; line-height: 22px; color: var(--muted); }
.i-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.i-steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .i-steps3, .i-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .i-steps3, .i-steps4 { grid-template-columns: minmax(0, 1fr); } }
.i-qc { margin-top: 16px; font-size: 14px; color: var(--muted); } .i-qc b { color: var(--ink); }
.i-why .i-vid { margin-top: 4px; }
.i-article { padding-top: 56px; }
.i-art-wrap { max-width: 780px; }
.i-back { display: table; margin-bottom: 24px; font-size: 14px; font-weight: 500; color: var(--muted); }
.i-article h1 { margin-top: 12px; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; font-weight: 700; letter-spacing: -.04em; }
.i-art-body { max-width: none; margin-top: 32px; gap: 16px; }
.i-art-body h2 { margin-top: 16px; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; }
.i-art-body .i-list li, .i-art-body .i-ol li { font-size: 17px; line-height: 26px; }
.i-ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.i-ol li::marker { color: var(--t); font-weight: 700; }
.i-art-q { margin: 8px 0; padding: 18px 22px; border-radius: 14px; background: var(--s); color: var(--t); font-size: 19px; line-height: 28px; font-weight: 600; }
.i-art-body .i-pyr, .i-art-body .i-mx { margin-top: 8px; }
.i-art-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); }

/* images (generated WebP copies, see src/images.py) */
.i-img-a { display: block; border-radius: 12px; }
.i-img { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: var(--ring); }
.i-link .i-img, .i-tier .i-img { margin-bottom: 6px; }
.i-img-logo { max-width: 220px; box-shadow: none; background: transparent; }
.i-mn .i-img-a { margin-bottom: 6px; }
.i-wide { margin-top: 24px; }
.i-gal { columns: 3 260px; column-gap: 12px; margin-top: 32px; }
.i-gal figure { break-inside: avoid; margin: 0 0 12px; }
.i-gal figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.i-gal2 { columns: 2 280px; max-width: 900px; }
.i-shot .i-img { max-height: 640px; object-fit: contain; }

/* ======================================================================
   Colour (from the acads homepage): the six vertical colours plus the highlight yellow, used as tones.
   A tone class re-sets --c / --s / --t, so anything inside built on them takes that colour.
   ====================================================================== */
.tone-green { --c: #5e8a6e; --s: #ecf3ee; --t: #3a5c47; }
.tone-teal  { --c: #2a9d99; --s: #e1f3f2; --t: #0a4d4b; }
.tone-sky   { --c: #097fe8; --s: #e6f3fe; --t: #005bab; }
.tone-sun   { --c: #e8a530; --s: #fdf3dc; --t: #7a4a06; }
.tone-rose  { --c: #ef5b4a; --s: #fdecea; --t: #a3301f; }
.tone-lilac { --c: #9849e8; --s: #f3ebfc; --t: #562983; }
.tone-mint  { --c: #1aae39; --s: #e6f6e9; --t: #0f6220; }

/* IFoS: which sections are tinted panels, and in which tone */
.v-ifos #method, .v-ifos #sample, .v-ifos #lesson { --c: #5e8a6e; --s: #ecf3ee; --t: #3a5c47; }
.v-ifos #results-lists, .v-ifos #lists, .v-ifos #toppers { --c: #e8a530; --s: #fdf3dc; --t: #7a4a06; }
.v-ifos #exam, .v-ifos #pyqs, .v-ifos #how, .v-ifos #program { --c: #097fe8; --s: #e6f3fe; --t: #005bab; }
.v-ifos #mnemonics, .v-ifos #list, .v-ifos #formula, .v-ifos #wildfiles { --c: #9849e8; --s: #f3ebfc; --t: #562983; }
.v-ifos #messages, .v-ifos #differs { --c: #ef5b4a; --s: #fdecea; --t: #a3301f; }
:is(.v-ifos #method, .v-ifos #sample, .v-ifos #lesson, .v-ifos #results-lists, .v-ifos #lists, .v-ifos #toppers, .v-ifos #exam, .v-ifos #pyqs, .v-ifos #how, .v-ifos #program,
    .v-ifos #mnemonics, .v-ifos #list, .v-ifos #formula, .v-ifos #wildfiles, .v-ifos #messages, .v-ifos #differs) > .wrap {
  max-width: calc(var(--wrap) + 48px); background-color: var(--s); background-image: radial-gradient(color-mix(in srgb, var(--t) 16%, transparent) 1.1px, transparent 1.1px);
  background-size: 24px 24px; border-radius: 28px; padding: clamp(40px, 6vw, 72px) clamp(20px, 4.5vw, 56px); }
@media (max-width: 640px) { :is(.v-ifos #method, .v-ifos #sample, .v-ifos #lesson, .v-ifos #results-lists, .v-ifos #lists, .v-ifos #toppers, .v-ifos #exam, .v-ifos #pyqs, .v-ifos #how, .v-ifos #program,
    .v-ifos #mnemonics, .v-ifos #list, .v-ifos #formula, .v-ifos #wildfiles, .v-ifos #messages, .v-ifos #differs) > .wrap { margin: 0 12px; } }
.v-ifos :is(#method, #sample, #lesson, #results-lists, #lists, #toppers, #exam, #pyqs, #how, #program, #mnemonics, #list, #formula, #wildfiles, #messages, #differs)
  :is(.i-res, .qt, .st, .i-mn, .i-card, .i-art-c, .i-dl, .fact, .i-mx-c:not(.i-mx-4), .i-link, .i-tier:not(.feat)) { background: #fff; }

/* colour-coded pieces: stats, exam stages, quotes, articles, mnemonics, results */
.i-stat:nth-child(1) { background: #ecf3ee; } .i-stat:nth-child(1) b { color: #3a5c47; }
.i-stat:nth-child(2) { background: #fdf3dc; } .i-stat:nth-child(2) b { color: #7a4a06; }
.i-stat:nth-child(3) { background: #e6f3fe; } .i-stat:nth-child(3) b { color: #005bab; }
.i-stat:nth-child(4) { background: #f3ebfc; } .i-stat:nth-child(4) b { color: #562983; }
.v-ifos .pat .st:nth-child(3n+1) { --c: #097fe8; --s: #e6f3fe; --t: #005bab; }
.v-ifos .pat .st:nth-child(3n+2) { --c: #9849e8; --s: #f3ebfc; --t: #562983; }
.v-ifos .pat .st:nth-child(3n+3) { --c: #ef5b4a; --s: #fdecea; --t: #a3301f; }
.v-ifos .pat .st { box-shadow: inset 0 3px 0 var(--c); } .v-ifos .pat .st .n { color: var(--t); }
.v-ifos .quotes .qt:nth-child(4n+1) .av { background: #ecf3ee; color: #3a5c47; }
.v-ifos .quotes .qt:nth-child(4n+2) .av { background: #fdf3dc; color: #7a4a06; }
.v-ifos .quotes .qt:nth-child(4n+3) .av { background: #e6f3fe; color: #005bab; }
.v-ifos .quotes .qt:nth-child(4n+4) .av { background: #f3ebfc; color: #562983; }
.v-ifos .i-arts .i-art-c:nth-child(5n+1) { --c: #5e8a6e; --s: #ecf3ee; --t: #3a5c47; }
.v-ifos .i-arts .i-art-c:nth-child(5n+2) { --c: #097fe8; --s: #e6f3fe; --t: #005bab; }
.v-ifos .i-arts .i-art-c:nth-child(5n+3) { --c: #e8a530; --s: #fdf3dc; --t: #7a4a06; }
.v-ifos .i-arts .i-art-c:nth-child(5n+4) { --c: #9849e8; --s: #f3ebfc; --t: #562983; }
.v-ifos .i-arts .i-art-c:nth-child(5n+5) { --c: #ef5b4a; --s: #fdecea; --t: #a3301f; }
.v-ifos .i-art-c { box-shadow: inset 0 3px 0 var(--c); }
.v-ifos .i-art-c:hover { background: var(--s); }
.v-ifos .i-mns .i-mn:nth-child(3n+1) { --c: #ef5b4a; --s: #fdecea; --t: #a3301f; }
.v-ifos .i-mns .i-mn:nth-child(3n+2) { --c: #097fe8; --s: #e6f3fe; --t: #005bab; }
.v-ifos .i-mns .i-mn:nth-child(3n+3) { --c: #e8a530; --s: #fdf3dc; --t: #7a4a06; }
.v-ifos .i-res .i-res-h .tag.c { background: #fdf3dc; color: #7a4a06; }
.v-ifos .i-res-l li b { color: #a86a0a; }
.v-ifos .i-res-l li:first-child b::before { content: '★ '; color: #e8a530; }
.v-ifos .end { background: #fdf3dc; background-image: radial-gradient(rgba(122,74,6,.13) 1.1px, transparent 1.1px); background-size: 24px 24px; }
.v-ifos .end p { color: #7a4a06; }

/* matrix quadrants in colour: avoid = rose, skip = sun, don't worry = sky, focus = green */
.i-mx-1 { --qs: #fdecea; --qt: #a3301f; } .i-mx-2 { --qs: #fdf3dc; --qt: #7a4a06; } .i-mx-3 { --qs: #e6f3fe; --qt: #005bab; }
.i-mx-1, .i-mx-2, .i-mx-3 { background: var(--qs) !important; }
.i-mx-1 .i-mx-n, .i-mx-2 .i-mx-n, .i-mx-3 .i-mx-n { color: var(--qt); }
.i-mx-2 b, .i-mx-3 b { color: var(--qt); }
.i-mx-4 { background: var(--c) !important; box-shadow: 0 14px 34px -14px rgba(58,92,71,.55); }
.i-mx-4 b, .i-mx-4 small, .i-mx-4 p { color: #fff !important; } .i-mx-4 p, .i-mx-4 small { opacity: .88; }
.i-mx-4 .i-mx-n { background: #fff !important; color: var(--t) !important; }
.i-mx-1, .i-mx-2, .i-mx-3 { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--qt) 22%, transparent); }
.i-mx-1 .i-mx-n, .i-mx-2 .i-mx-n, .i-mx-3 .i-mx-n { background: var(--qt); color: #fff; box-shadow: none; }
.i-mx-1 p, .i-mx-2 p, .i-mx-3 p { color: color-mix(in srgb, var(--qt) 70%, #555); }
.i-mx-1 small, .i-mx-2 small, .i-mx-3 small { color: var(--qt); opacity: .75; }
.i-subj[class*="tone-"] { background: color-mix(in srgb, var(--s) 60%, #fff); }
.i-subj[class*="tone-"]:hover { background: #fff; }
.i-subj[class*="tone-"] .i-subj-go { color: var(--t); }
/* mnemonic cards: one frame size for every card image (DeViL's original has extra white above and below) */
.i-mn .i-img { width: 100%; aspect-ratio: 2.1; object-fit: cover; border-radius: 10px; }
.i-mn .i-img[src*="mn-devil"] { object-position: 50% 60%; }

/* ======================================================================
   micros (src/micros.py): the NANO page in the hero, ten-dot MICRO strips, the four levels, tinted panels. Classes start with mc-.
   NANOs 01 to 09 use the micros coral; NANO 10 (revision) uses its dark tone.
   ====================================================================== */
.v-micros #basics, .v-micros #start, .v-micros #spectrum, .v-micros #revision { --c: #ef5b4a; --s: #fdecea; --t: #a3301f; }
.v-micros #anatomy, .v-micros #principles { --c: #e8a530; --s: #fdf3dc; --t: #7a4a06; }
.v-micros #yield { --c: #097fe8; --s: #e6f3fe; --t: #005bab; }
.v-micros :is(#basics, #anatomy, #yield, #start, #spectrum, #principles, #revision) > .wrap {
  max-width: calc(var(--wrap) + 48px); background-color: var(--s); background-image: radial-gradient(color-mix(in srgb, var(--t) 16%, transparent) 1.1px, transparent 1.1px);
  background-size: 24px 24px; border-radius: 28px; padding: clamp(40px, 6vw, 72px) clamp(20px, 4.5vw, 56px); }
@media (max-width: 640px) { .v-micros :is(#basics, #anatomy, #yield, #start, #spectrum, #principles, #revision) > .wrap { margin: 0 12px; } }
.v-micros :is(#basics, #anatomy, #yield, #start, #spectrum, #principles, #revision) :is(.i-card, .i-stat, .mc-strip) { background: #fff; }
.v-micros .end { background: #fdecea; background-image: radial-gradient(rgba(163,48,31,.13) 1.1px, transparent 1.1px); background-size: 24px 24px; }
.v-micros .mc-band { background: #3a1410; } .v-micros .mc-band .i-band-k { color: #ffb4a8; } .v-micros .mc-band .ctas { margin-top: 10px; }

/* the ten NANOs as dots */
.mc-dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.mc-dots li { aspect-ratio: 1; max-width: 52px; border-radius: 50%; background: var(--c, #ef5b4a); color: #fff; display: grid; place-items: center; font: 700 13px var(--head);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.mc-dots li.rev { background: var(--t); }
.rv.in .mc-dots li, .rv.in.mc-dots li { animation: ill-pop .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.mc-dots-s { grid-template-columns: repeat(5, 18px); gap: 6px; }
.mc-dots-s li { width: 18px; font-size: 0; box-shadow: none; }
@media (max-width: 560px) { .mc-dots:not(.mc-dots-s) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .mc-dots li { justify-self: center; width: 100%; } }

/* hero: a page from NANO 01 */
.mc-nano { position: relative; margin: 0; border-radius: 20px; background: #fff; box-shadow: var(--lift); padding: 24px; display: grid; gap: 12px; min-width: 0; }
.mc-nano-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mc-nano-n { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mc-nano > h3 { font: 700 22px/1.2 var(--head); letter-spacing: -.02em; padding-right: 56px; }
.mc-nano > p { font-size: 14.5px; line-height: 21px; color: var(--text); }
.mc-pyq { border-radius: 12px; background: var(--tile-2); box-shadow: inset 3px 0 0 #097fe8; padding: 12px 14px; display: grid; gap: 4px; font-size: 13.5px; line-height: 19px; }
.mc-pyq small { font-size: 12px; font-weight: 700; color: #005bab; } .mc-pyq b { font-weight: 600; } .mc-pyq span { color: var(--muted); }
.mc-pyq .ok { color: #0f6220; font-weight: 600; } .mc-pyq .ok::after { content: ' ✓'; }
.mc-sticky { justify-self: start; background: #ffe4af; color: #5c3d00; border-radius: 4px; padding: 10px 14px; font-size: 14px; transform: rotate(-1.5deg); box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); }
.mc-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--text); }
.mc-check li { display: flex; gap: 8px; align-items: center; }
.mc-check li::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.25); }
.mc-check li.on::before { background: var(--c); box-shadow: none; }
.mc-timer { position: absolute; right: 18px; top: 52px; width: 56px; height: 56px; display: grid; place-items: center; }
.mc-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mc-timer circle { fill: none; stroke: var(--s); stroke-width: 4; }
.mc-timer .arc { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 0; }
.rv.in .mc-timer .arc { animation: mc-tick 25s linear infinite; }
@keyframes mc-tick { to { stroke-dashoffset: 113; } }
.mc-timer span { font: 700 11px var(--head); color: var(--t); }

/* MICRO and NANO */
.mc-word { overflow: hidden; padding: 32px; }
.mc-big { font: 800 clamp(48px, 7vw, 84px)/.9 var(--head); letter-spacing: -.05em; color: var(--c); }
.mc-word-n .mc-big { color: var(--t); }
.mc-strip { margin-top: 12px; border-radius: 16px; padding: 24px; display: grid; gap: 18px; }
.mc-strip-t { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 14px; color: var(--muted); }
.mc-strip-t b { font-size: 17px; color: var(--ink); margin-right: auto; }
.mc-strip-t span { display: inline-flex; align-items: center; gap: 6px; }
.mc-strip-t i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .mc-strip-t i.rev { background: var(--t); }

/* four levels: NANO, MICRO, subject, syllabus */
.mc-lvs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mc-lv { position: relative; border-radius: 16px; background: var(--tile-2); padding: 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 3px 0 var(--c); transition-delay: calc(var(--i) * 90ms); }
.mc-lv:nth-child(2) { --c: #ef5b4a; } .mc-lv:nth-child(3) { --c: #a3301f; } .mc-lv:nth-child(4) { --c: #3a1410; }
.mc-lv:not(:last-child)::after { content: '×10'; position: absolute; right: -16px; top: 50px; z-index: 1; width: 30px; height: 22px; border-radius: 11px; background: #fff; box-shadow: var(--ring); display: grid; place-items: center; font: 700 11px var(--head); color: var(--t); }
.mc-lv:nth-child(3)::after { content: '+'; }
.mc-lv-pic { height: 64px; display: flex; align-items: center; }
.mc-one { width: 48px; height: 48px; border-radius: 50%; background: #ef5b4a; box-shadow: 0 6px 16px -6px #ef5b4a; }
.mc-bars { display: flex; align-items: flex-end; gap: 4px; height: 52px; }
.mc-bars i { width: 10px; height: var(--h); border-radius: 3px; background: #a3301f; opacity: .85; }
.mc-subjs { display: grid; grid-template-columns: repeat(5, 18px); gap: 6px; }
.mc-subjs i { width: 18px; height: 18px; border-radius: 50%; }
.mc-lv-k { font: 800 13px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.mc-lv h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.mc-lv-t { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--t); background: var(--s); border-radius: 6px; padding: 2px 8px; }
.mc-lv p { font-size: 14.5px; line-height: 21px; color: var(--muted); }
@media (max-width: 1000px) { .mc-lvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-lv::after { display: none; } }
@media (max-width: 560px) { .mc-lvs { grid-template-columns: minmax(0, 1fr); } }

/* numbered parts */
.mc-pn { font: 800 30px/1 var(--head); letter-spacing: -.04em; color: var(--c); }

/* high-yield */
.mc-crit { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.mc-crit li { display: grid; gap: 2px; padding: 14px 16px 14px 44px; position: relative; border-radius: 12px; background: #fff; }
.mc-crit li::before { content: ''; position: absolute; left: 16px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.mc-crit b { font-size: 16px; } .mc-crit span { font-size: 14.5px; color: var(--muted); }
.mc-grs { display: grid; gap: 6px; margin-top: 6px; }
.mc-gr { display: grid; grid-template-columns: 64px repeat(13, minmax(0, 1fr)); gap: 3px; align-items: center; }
.mc-gr b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mc-gr i { height: 22px; border-radius: 4px; background: var(--tile); }
.mc-gr i.on { background: var(--c); }
.mc-gr.out i.on { background: #c5c3bf; } .mc-gr.out b { color: var(--faint); text-decoration: line-through; }
.rv.in .mc-gr i.on { animation: ill-pop .4s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }

/* when to start */
.mc-hand { margin-top: 20px; display: inline-block; background: #ffe4af; color: #5c3d00; padding: 8px 14px; border-radius: 4px; font-weight: 600; transform: rotate(-1.2deg); }
.mc-days ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.mc-days li { display: grid; grid-template-columns: 32px 52px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 13.5px; }
.mc-d { width: 32px; height: 32px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 11.5px var(--head); }
.rev > .mc-d, .mc-days li.rev .mc-d { background: var(--t); }
.mc-days li b { font-weight: 600; color: var(--text); }
.mc-days li i { height: 8px; width: var(--w); border-radius: 4px; background: var(--s); }
.mc-days li.rev i { background: color-mix(in srgb, var(--t) 30%, #fff); }
.mc-days li small { color: var(--muted); text-align: right; }
.rv.in .mc-days li i { animation: mc-grow .8s var(--ease) both; animation-delay: calc(var(--i) * 60ms); transform-origin: 0 50%; }
@keyframes mc-grow { from { transform: scaleX(0); } }

/* library and steps */
.mc-lib { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 40px; max-width: 820px; }
@media (max-width: 760px) { .mc-lib { grid-template-columns: minmax(0, 1fr); } }
.mc-ask { background: var(--s); } .mc-ask > p { color: var(--t); }
.mc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .mc-steps { grid-template-columns: minmax(0, 1fr); } .mc-steps li::after { display: none; } }
.mc-static { box-shadow: var(--lift); } .mc-static:hover { transform: none; }
.mc-hero-card { max-width: 400px; justify-self: center; width: 100%; }

/* why: the intent spectrum */
.mc-sps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
.mc-sps li { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center; border-radius: 16px; background: #fff; padding: 22px 24px; transition-delay: calc(var(--i) * 90ms); }
.mc-sps h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; } .mc-sps p { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--muted); }
.mc-gap { display: grid; gap: 6px; } .mc-gap b { font-size: 13px; color: var(--t); }
.mc-gap i { height: 10px; border-radius: 5px; background: var(--c); }
.mc-sp0 .mc-gap i { width: 100%; } .mc-sp1 .mc-gap i { width: 55%; } .mc-sp2 .mc-gap i { width: 8%; background: #1aae39; } .mc-sp2 .mc-gap b { color: #0f6220; }
.mc-sp2 { box-shadow: inset 0 0 0 2px #1aae39; }
@media (max-width: 640px) { .mc-sps li { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* the MICRO page: ten NANO rows */
.mc-rows { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 10px; }
.mc-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; border-radius: 16px; background: var(--tile-2); padding: 18px 20px; }
.mc-row .mc-d { width: 40px; height: 40px; font-size: 13px; }
.mc-row h3 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.mc-row h3 a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 3px; }
.mc-row .i-chips { margin-top: 10px; }
.mc-row.rev { background: var(--s); }
.mc-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); }
.mc-meta span { display: inline-flex; gap: 6px; align-items: center; }

/* the free NANO reader */
.mc-reader { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--lift); }
.mc-reader iframe { display: block; width: 100%; height: min(86vh, 980px); border: 0; }