/* public_html/assets/css/itop.css: itofficerprep.in's own stylesheet (owner Account B). Loads after prep-theme.css
(Account A, untouched) and brand.css. Sections:
1. Self-hosted fonts + metric-matched fallbacks (PK 29 Oct: no Google Fonts; aim CLS 0)
2. Sitewide fixes (PK 29 Oct): sentence-case headings, no coloured last word, no eyebrow labels, a clear disabled
"· soon" button, AA greys, body text >= 16px on phones
3. Homepage v4 (.itop-home): agriprep.in homepage family in violet/pink (PK brief 29 Oct), plus the "What's new" strip
(.wn) and the footer stats strip (.itop-fstats). The homepage alone keeps agriprep's uppercase headings with a
coloured second part (.itop-hh), PK 29 Oct; the sitewide sentence-case rule above is unchanged elsewhere
4. Inner pages in the homepage design language (body.itop-v4, set by $bodyClass): the theme's own markup
(.prep-hero, .prep-section, .prep-title , tables, steps, cards, FAQ) restyled, no markup or content change.
Default on every inner page since the rollout (header.php); the homepage opts out. Rules: docs/design/DESIGN_RULES.md
Mobile first. Motion (hero fade, ticker, pings) is off under prefers-reduced-motion. */
/* ── 1. Fonts ──────────────────────────────────────────────────────────────────────────────────────────────────
woff2 from Google Fonts (OFL), latin + latin-ext (latin-ext has ₹). Fallback metrics measured in Chromium against
Arial (Liberation Sans) on 29 Oct 2026: size-adjust = width ratio, ascent/descent = the web font's / size-adjust. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 800; font-display: swap;
src: url(/assets/fonts/outfit-400-800-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 800; font-display: swap;
src: url(/assets/fonts/outfit-400-800-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url(/assets/fonts/poppins-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url(/assets/fonts/poppins-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url(/assets/fonts/poppins-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url(/assets/fonts/poppins-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
src: url(/assets/fonts/poppins-800-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
src: url(/assets/fonts/poppins-800-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit Fallback'; font-weight: 400;
src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Liberation Sans'), local('Roboto');
size-adjust: 97.95%; ascent-override: 102.09%; descent-override: 26.54%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback'; font-weight: 700;
src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Liberation Sans Bold'), local('Roboto Bold');
size-adjust: 95.43%; ascent-override: 104.79%; descent-override: 27.24%; line-gap-override: 0%; }
@font-face { font-family: 'Poppins Fallback'; font-weight: 700 800;
src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Liberation Sans Bold'), local('Roboto Bold');
size-adjust: 106.79%; ascent-override: 98.32%; descent-override: 32.77%; line-gap-override: 0%; }
:root {
--prep-font-display: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
--prep-font-body: 'Outfit', 'Outfit Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* #64748B was 4.33:1 on the tint (#F5F3FF); slate-600 is 7.2:1 on it, 7.6:1 on white */
--prep-muted: #475569;
--itop-dark: #1E1B2E; /* hero only */
--itop-violet: #6D28D9;
--itop-pink: #DB2777;
--itop-grey: #CBD5E1; /* "qualifying" bars */
--itop-line: #E2E8F0;
}
/* ── 2. Sitewide fixes ─────────────────────────────────────────────────────────────────────────────────────── */
.prep-display { text-transform: none; letter-spacing: -.02em; line-height: 1.1;
font-size: clamp(2rem, 1.55rem + 2.1vw, 3.25rem); }
.prep-title { text-transform: none; letter-spacing: -.015em; line-height: 1.15;
font-size: clamp(1.625rem, 1.35rem + 1.3vw, 2.375rem); }
.prep-title em, .prep-display em,
.prep-section--dark .prep-title em, .prep-hero .prep-display em { font-style: normal; color: inherit; }
.prep-eyebrow { display: none; }
.prep-footer__heading, .prep-table thead th, .prep-exam-card__stage h4, .prep-stats dt, .prep-badge {
text-transform: none; letter-spacing: 0; }
.prep .prep-footer__heading { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.prep-footer__links .is-soon small, .prep-btn__soon { text-transform: none; letter-spacing: 0; font-size: .8125rem; font-weight: 700; }
.prep-table thead th, .prep-stats dt { font-size: .875rem; }
/* Disabled "soon" button: a clear dashed outline with readable text (was grey on grey, 4.32:1) */
.prep-btn:disabled, .prep-btn[aria-disabled="true"], .prep-btn.is-soon {
background: transparent !important; border: 1.5px dashed #94A3B8 !important; color: var(--prep-text) !important;
box-shadow: none !important; cursor: not-allowed; }
.prep-section--dark .prep-btn.is-soon, .prep-hero .prep-btn.is-soon, .itop-hero .prep-btn.is-soon {
background: transparent !important; border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
.prep-btn__soon-text { font-weight: 500; opacity: .85; }
/* Footer: brand + four link columns on one row on desktop (was 4 tracks for 5 columns, so the last one wrapped) */
@media (min-width: 1025px) { .prep-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }
@media (max-width: 640px) {
.prep-source, .prep-card__meta, .prep-hero__chips li, .prep-footer p, .prep-footer a, .prep-footer li { font-size: 1rem; }
}
/* ── 3. Homepage v4 ────────────────────────────────────────────────────────────────────────────────────────── */
.itop-home { --v: var(--itop-violet); --v9: #2E1065; --v8: #4C1D95; --v1: #EDE9FE; --v0: #F5F3FF; --p: var(--itop-pink);
--r-xl: 2rem; --r-2xl: 2.5rem; --shadow: 0 20px 50px -12px rgba(46,16,101,.18); background: #fff; }
.itop-home p, .itop-home li { font-size: 1rem; line-height: 1.6; }
.itop-home a:not([class]) { color: var(--v); text-decoration: underline; text-underline-offset: .2em; }
/* Headings: agriprep's heavy uppercase with a coloured second part */
.itop-home .itop-hh { margin: 0; font: 800 clamp(1.875rem, 1.35rem + 2.3vw, 3rem)/1.05 var(--prep-font-display); letter-spacing: -.03em;
text-transform: uppercase; color: var(--prep-ink); }
.itop-home .itop-hh span { color: var(--v); }
.itop-hh--center { text-align: center; }
.itop-home .itop-hh--sm { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); letter-spacing: -.02em; }
.itop-home .itop-hh--light, .itop-home .itop-hh--card { color: #fff; }
.itop-home .itop-hh--light span, .itop-home .itop-hh--card span { color: #F9A8D4; }
.itop-home .itop-hh--card { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height: 1; }
.itop-home .itop-subhead { margin: .625rem 0 0; color: var(--prep-muted); font-size: 1rem; }
.itop-home .itop-subhead--center { text-align: center; max-width: 40rem; margin: .875rem auto 0; }
.itop-badge { display: inline-block; padding: .0625rem .5rem; border-radius: 999px; background: #FCE7F3; color: #9D174D;
font: 700 .75rem/1.6 var(--prep-font-body); letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.itop-ping { position: relative; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--p); flex: none; }
.itop-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--p); animation: itop-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes itop-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.itop-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: 0 1.5rem;
border-radius: 1rem; font: 800 .875rem/1 var(--prep-font-display); letter-spacing: .06em; text-transform: uppercase;
text-decoration: none !important; }
.itop-btn--pink { background: var(--p); color: #fff !important; box-shadow: 0 12px 30px -8px rgba(219,39,119,.5); }
.itop-btn--pink:hover { background: #BE185D; }
.itop-btn--soon { border: 1.5px dashed rgba(255,255,255,.6); color: #fff; cursor: not-allowed; }
/* "What's new" strip (agriprep's headlines ticker) */
.wn { background: var(--v9, #2E1065); color: #F5F3FF; border-bottom: 1px solid #3B0F8C; }
.wn-in { max-width: 1400px; margin: 0 auto; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 0 0 12px; }
.wn-lbl { flex-shrink: 0; position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; font: 800 11px/1 var(--prep-font-display);
letter-spacing: .08em; text-transform: uppercase; color: #F9A8D4; padding-right: 10px; background: #2E1065; box-shadow: 12px 0 12px -4px #2E1065; }
.wn-dot { width: 8px; height: 8px; border-radius: 50%; background: #EC4899; animation: wn-pulse 1.8s infinite; }
@keyframes wn-pulse { 0% { box-shadow: 0 0 0 0 rgba(236,72,153,.65); } 70% { box-shadow: 0 0 0 8px rgba(236,72,153,0); } 100% { box-shadow: 0 0 0 0 rgba(236,72,153,0); } }
.wn-win { flex: 1; min-width: 0; height: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.wn-track { display: flex; width: max-content; height: 100%; animation: wn-marq var(--wn-dur, 40s) linear infinite; }
.wn:hover .wn-track, .wn:focus-within .wn-track, .wn.wn-paused .wn-track { animation-play-state: paused; }
@keyframes wn-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wn-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
.wn-list li { display: flex; align-items: center; height: 40px; white-space: nowrap; }
.wn-list li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #C4B5FD; opacity: .6; margin: 0 22px; }
.wn-list a { display: flex; align-items: center; gap: 8px; color: #F5F3FF; text-decoration: none; font-size: 14px; font-weight: 600; }
.wn-list a:hover .wn-t, .wn-list a:focus-visible .wn-t { text-decoration: underline; color: #fff; }
.wn-tag { flex-shrink: 0; font: 800 10px/1.4 var(--prep-font-display); letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: #F9A8D4; color: #500724; }
.wn-btn { flex-shrink: 0; width: 28px; height: 28px; margin-right: 10px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #DDD6FE; cursor: pointer; font-size: 11px; }
.wn-btn:hover, .wn-btn:focus-visible { background: rgba(255,255,255,.2); color: #fff; }
@media (max-width: 640px) { .wn-in { height: 38px; gap: 8px; padding-left: 10px; } .wn-win, .wn-list li { height: 38px; } .wn-lbl b { display: none; } .wn-list a { font-size: 13px; } }
@media print { .wn { display: none; } }
/* Hero: full-bleed photo, dark violet overlay, centred text, stat chips, quick-link pills */
.itop-hero { position: relative; overflow: hidden; isolation: isolate; background: #1E1B2E; color: #fff; text-align: center;
padding: 4.5rem 0 7rem; }
.itop-hero__bg, .itop-hero__bg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.itop-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(30,27,46,.82) 0%, rgba(46,16,101,.78) 55%, rgba(30,27,46,.92) 100%); }
.itop-hero__in > :not(h1) { animation: itop-fade .7s cubic-bezier(.34,1.56,.64,1) both; } /* the H1 never fades: it can be the LCP element */
.itop-hero__in > :nth-child(2) { animation-delay: .1s; } .itop-hero__in > :nth-child(3) { animation-delay: .2s; } .itop-hero__in > :nth-child(4) { animation-delay: .3s; }
@keyframes itop-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.itop-home .itop-hero__title { margin: 0 auto; max-width: 15ch; color: #fff; font: 800 clamp(2.375rem, 1.5rem + 4.4vw, 5rem)/1 var(--prep-font-display);
letter-spacing: -.04em; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.itop-hero__title span { display: block; background: linear-gradient(90deg, #C4B5FD, #F9A8D4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.itop-home .itop-hero__sub { margin: 1.5rem auto 0; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: rgba(255,255,255,.9); }
.itop-chipstats { list-style: none; margin: 2.5rem auto 0; padding: 0; max-width: 56rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.itop-home .itop-chipstats li { display: flex; flex-direction: column; gap: .375rem; padding: 1.125rem .75rem; border-radius: 1.5rem;
background: rgba(15,10,40,.62); border: 1px solid rgba(255,255,255,.14); } /* no backdrop-filter: costly paint on phones */
.itop-chipstats b { font: 800 clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem)/1 var(--prep-font-display); color: #fff; font-variant-numeric: tabular-nums; }
.itop-chipstats li.is-count b { color: #F9A8D4; }
.itop-chipstats span { font: 700 .75rem/1.3 var(--prep-font-display); letter-spacing: .08em; text-transform: uppercase; color: #DDD6FE; }
.itop-quick { margin: 2rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; max-width: 52rem; }
.itop-quick a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border-radius: 1rem; color: #fff;
font: 700 .8125rem/1 var(--prep-font-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.itop-quick a:hover { background: rgba(255,255,255,.2); }
.itop-quick a.is-primary { background: var(--p); border-color: var(--p); box-shadow: 0 12px 30px -8px rgba(219,39,119,.6); }
.itop-quick a.is-primary:hover { background: #BE185D; }
/* Main column overlaps the hero, as on agriprep */
.itop-main { position: relative; z-index: 2; margin-top: -4rem; }
.itop-main > section { margin-bottom: 3.5rem; }
/* Live timeline band */
.itop-tl { background: #fff; border: 1px solid var(--v1); border-radius: var(--r-xl); padding: 1.5rem; box-shadow: var(--shadow); }
.itop-tl__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
.itop-home .itop-tl__now { display: inline-flex; align-items: center; gap: .625rem; margin: 0; padding: .375rem .875rem; border-radius: 999px;
background: #FDF2F8; color: #9D174D; font-weight: 700; font-size: 1rem; }
.itop-tl__now a { color: #9D174D !important; }
.itop-tl__list { list-style: none; margin: 0; padding: 0; display: grid; }
.itop-home .itop-tl__list li { position: relative; display: grid; grid-template-columns: 2rem 1fr; column-gap: .875rem; padding-bottom: 1.25rem; }
.itop-tl__list li:last-child { padding-bottom: 0; }
.itop-tl__list li:not(:last-child)::after { content: ""; position: absolute; left: .9375rem; top: 2.125rem; bottom: .25rem; width: 2px; background: var(--itop-line); }
.itop-tl__list li.is-done::after { background: var(--v); }
.itop-tl__dot { grid-row: span 3; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem;
border: 2px solid #CBD5E1; background: #fff; color: #fff; }
.is-done .itop-tl__dot { background: var(--v); border-color: var(--v); }
.is-next .itop-tl__dot, .is-now .itop-tl__dot { border-color: var(--p); background: #fff; box-shadow: 0 0 0 5px #FCE7F3; }
.is-next .itop-tl__dot::after, .is-now .itop-tl__dot::after { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--p); }
.itop-tl__stage { font: 700 1.0625rem/2rem var(--prep-font-display); color: var(--prep-ink); }
.is-upcoming .itop-tl__stage { color: var(--prep-muted); font-weight: 600; }
.itop-tl__count { font: 800 1.5rem/1.1 var(--prep-font-display); color: var(--p); }
.itop-tl__when { font-size: 1rem; color: var(--prep-muted); }
.itop-home .itop-tl__foot { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--itop-line); font-size: 1rem; color: var(--prep-muted); }
.itop-tl__foot a { font-weight: 700; }
/* Question box + dark rank card */
.itop-duo { display: grid; gap: 1.5rem; background: #fff; border: 1px solid #F1F5F9; border-radius: var(--r-2xl); padding: 1.25rem; box-shadow: var(--shadow); }
.itop-quiz { padding: .5rem; }
.itop-home .itop-quiz__label { display: flex; align-items: center; gap: .625rem; margin: 0 0 1rem; font: 800 .8125rem/1.3 var(--prep-font-display);
letter-spacing: .08em; text-transform: uppercase; color: var(--v); }
.was-right .itop-quiz__label { color: #047857; } .was-wrong .itop-quiz__label { color: #B91C1C; }
.itop-home .itop-quiz__q { margin: 0 0 1.25rem; padding: 1.25rem 1.5rem; border-radius: 1.5rem; background: var(--v0); border: 1px solid var(--v1);
font: 700 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.4 var(--prep-font-body); color: var(--prep-ink); }
.itop-quiz__opts { display: grid; gap: .625rem; }
.itop-quiz__opts button { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; min-height: 3.25rem;
padding: .75rem 1rem; border: 1px solid #E2E8F0; border-radius: 1rem; background: #fff; text-align: left; cursor: pointer;
font: 600 1rem/1.4 var(--prep-font-body); color: var(--prep-text); transition: border-color .15s, background-color .15s; }
.itop-quiz__opts button:hover:not(:disabled) { border-color: var(--v); background: var(--v0); }
.itop-quiz__opts button:disabled { cursor: default; }
.itop-quiz__opts button i { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid #E2E8F0; display: grid; place-items: center;
font: 800 .8125rem/1 var(--prep-font-body); font-style: normal; }
.itop-quiz__opts .is-right { background: #047857; border-color: #047857; color: #fff; }
.itop-quiz__opts .is-wrong { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.itop-quiz__opts .is-reveal { background: #ECFDF5; border: 2px dashed #047857; color: #064E3B; }
.itop-quiz__opts .is-right i, .itop-quiz__opts .is-wrong i { border-color: #fff; }
.itop-quiz__opts .is-right i::after, .itop-quiz__opts .is-reveal i::after { content: "✓"; }
.itop-quiz__opts .is-wrong i::after { content: "×"; }
.itop-quiz__why { margin-top: 1rem; border-radius: 1rem; background: #F8FAFC; border: 1px solid #E2E8F0; padding: .75rem 1rem; }
.itop-quiz__why summary { cursor: pointer; font-weight: 700; color: var(--v); min-height: 2rem; display: flex; align-items: center; }
.itop-home .itop-quiz__why p { margin: .5rem 0 0; }
.itop-home .itop-quiz__note { margin: .875rem 0 0; font-size: 1rem; color: var(--prep-muted); }
.itop-rankcard { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 2rem 1.5rem; color: #fff;
background: linear-gradient(150deg, #4C1D95 0%, #2E1065 60%, #1E1B2E 100%); box-shadow: 0 20px 50px -12px rgba(46,16,101,.5); }
.itop-rankcard__bg { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 7rem; opacity: .08; }
.itop-home .itop-rankcard__lead { margin: 1.25rem 0 1.5rem; font-size: 1.0625rem; color: #EDE9FE; }
.itop-rankcard__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .75rem; }
.itop-home .itop-rankcard__list li { display: flex; align-items: center; gap: 1rem; padding: .875rem 1rem; border-radius: 1rem;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #EDE9FE; }
.itop-rankcard__list .n { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center;
font: 800 1rem/1 var(--prep-font-display); background: rgba(255,255,255,.1); color: #DDD6FE; }
.itop-rankcard__list .is-merit { border-color: rgba(249,168,212,.5); background: rgba(219,39,119,.16); color: #fff; }
.itop-rankcard__list .is-merit .n { background: var(--p); color: #fff; }
.itop-home .itop-rankcard__foot { margin: 0 0 1.5rem; font-size: 1rem; color: #DDD6FE; }
.itop-rankcard .itop-btn { width: 100%; }
/* Mock-test banner */
.itop-mock { position: relative; overflow: hidden; display: grid; gap: 2rem; align-items: center; border-radius: var(--r-2xl); padding: 2rem 1.5rem;
color: #fff; background: linear-gradient(135deg, #1E1B2E 0%, #2E1065 55%, #000 100%); box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); text-align: center; }
.itop-mock::before { content: ""; position: absolute; top: -6rem; right: -6rem; width: 24rem; height: 24rem; border-radius: 50%; background: rgba(219,39,119,.12); filter: blur(80px); }
.itop-mock > * { position: relative; }
.itop-home .itop-mock__text p { margin: 1rem auto 1.5rem; max-width: 36rem; color: #DDD6FE; }
.itop-mock__tiles { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; width: 100%; max-width: 26rem; }
.itop-home .itop-mock__tiles li { display: flex; flex-direction: column; gap: .5rem; padding: 1.125rem .5rem; border-radius: 1.5rem;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.itop-mock__tiles b { font: 800 clamp(1.625rem, 1.3rem + 1vw, 2rem)/1 var(--prep-font-display); color: #C4B5FD; }
.itop-mock__tiles li:nth-child(2) b { color: #F9A8D4; }
.itop-mock__tiles span { font: 700 .75rem/1 var(--prep-font-display); letter-spacing: .08em; text-transform: uppercase; color: #CBD5E1; }
/* How it works: art left, steps right */
.itop-how { padding: 2rem 0; }
.itop-how__grid { display: grid; gap: 2.5rem; align-items: center; margin-top: 2.5rem; }
.itop-how__art { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); border: 6px solid #fff; display: grid; place-items: center;
background: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px) 0 0 / 20px 20px, linear-gradient(135deg, #6D28D9, #DB2777);
box-shadow: 0 25px 50px -12px rgba(109,40,217,.45); }
.itop-how__art img { width: 32%; height: auto; filter: brightness(0) invert(1); opacity: .9; }
.itop-how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.itop-how__steps li { display: flex; gap: 1.25rem; }
.itop-how__steps .n { flex: none; width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; font: 800 1.125rem/1 var(--prep-font-display); }
.itop-home .itop-how__steps h3 { margin: .125rem 0 .25rem; font: 800 .9375rem/1.3 var(--prep-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--prep-ink); }
.itop-home .itop-how__steps p { margin: 0; color: var(--prep-muted); }
.t-violet .n { background: var(--v1); color: var(--v); } .t-pink .n { background: #FCE7F3; color: #BE185D; }
.t-sky .n { background: #E0F2FE; color: #0369A1; } .t-amber .n { background: #FEF3C7; color: #B45309; }
/* IT Professional Knowledge cards */
.itop-subjects__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2rem; }
.itop-viewall { flex: none; font-weight: 700; color: var(--v); text-decoration: none; border-bottom: 2px solid var(--v1); padding-bottom: .25rem; }
.itop-viewall:hover { border-color: var(--v); }
.itop-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .875rem; }
.itop-card { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem; border-radius: 1.75rem; text-decoration: none !important;
color: var(--prep-ink); background: var(--v0); border: 1px solid var(--v1); transition: transform .2s, box-shadow .2s; }
a.itop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.itop-card__icon { width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 1rem; display: grid; place-items: center; font-size: 1.25rem;
background: #fff; color: var(--v); box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.itop-home .itop-card h3 { margin: 0; font: 800 1rem/1.25 var(--prep-font-display); text-transform: uppercase; letter-spacing: -.01em; color: inherit; }
.itop-home .itop-card p { margin: 0 0 2.25rem; font-size: 1rem; color: var(--prep-muted); }
.itop-card__go { position: absolute; left: 1.25rem; bottom: 1rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
border: 2px solid currentColor; opacity: .35; font-size: .75rem; }
.itop-card.t-pink { background: #FDF2F8; border-color: #FCE7F3; } .itop-card.t-pink .itop-card__icon { color: #BE185D; }
.itop-card.t-sky { background: #F0F9FF; border-color: #E0F2FE; } .itop-card.t-sky .itop-card__icon { color: #0369A1; }
.itop-card.t-amber { background: #FFFBEB; border-color: #FEF3C7; } .itop-card.t-amber .itop-card__icon { color: #B45309; }
.itop-card.t-emerald { background: #ECFDF5; border-color: #D1FAE5; } .itop-card.t-emerald .itop-card__icon { color: #047857; }
.itop-card.is-featured { grid-column: 1 / -1; padding: 2rem 1.75rem; color: #fff; border: 0; overflow: hidden;
background: linear-gradient(135deg, #6D28D9, #4C1D95); box-shadow: var(--shadow); }
.itop-card.is-featured .itop-card__icon { width: 4rem; height: 4rem; font-size: 1.75rem; background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.itop-home .itop-card.is-featured h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.itop-home .itop-card.is-featured p { color: #EDE9FE; font-size: 1.0625rem; }
.itop-card.is-featured .itop-badge { background: #fff; color: var(--v); }
.itop-card.is-featured .itop-card__go { opacity: .7; left: 1.75rem; bottom: 1.5rem; }
.itop-card.is-all { background: #fff; border: 2px dashed #C4B5FD; color: var(--v); }
/* The core four: full-bleed grey band, centred cards */
.itop-four { padding: 4rem 0; background: #F8FAFC; border-block: 1px solid #F1F5F9; }
.itop-four__grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.itop-four__card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem;
border-radius: var(--r-2xl); background: #fff; border: 1px solid #F1F5F9; box-shadow: 0 10px 30px -10px rgba(15,23,42,.12);
text-decoration: none !important; color: var(--prep-ink); transition: box-shadow .2s, transform .2s; }
.itop-four__card:hover { box-shadow: 0 25px 50px -12px rgba(15,23,42,.2); transform: translateY(-2px); }
.itop-four__badge { position: absolute; top: 1.25rem; right: 1.25rem; padding: .25rem .625rem; border-radius: 999px; background: var(--v); color: #fff;
font: 800 .6875rem/1.2 var(--prep-font-display); letter-spacing: .08em; text-transform: uppercase; }
.itop-four__icon { width: 5rem; height: 5rem; margin-bottom: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: 2rem;
box-shadow: inset 0 2px 6px rgba(0,0,0,.06); }
.itop-four__card.t-violet .itop-four__icon { background: var(--v1); color: var(--v); }
.itop-four__card.t-pink .itop-four__icon { background: #FCE7F3; color: #BE185D; }
.itop-four__card.t-sky .itop-four__icon { background: #E0F2FE; color: #0369A1; }
.itop-four__card.t-amber .itop-four__icon { background: #FEF3C7; color: #B45309; }
.itop-home .itop-four__card h3 { margin: 0 0 .5rem; font: 800 1.25rem/1.2 var(--prep-font-display); text-transform: uppercase; color: var(--prep-ink); }
.itop-home .itop-four__marks { margin: 0 0 .5rem; font-weight: 700; color: var(--v); font-size: 1rem; }
.itop-home .itop-four__topics { margin: 0 0 1.5rem; color: var(--prep-muted); font-size: 1rem; }
.itop-four__go { margin-top: auto; padding: .5rem 1.25rem; border-radius: 999px; background: var(--v0); color: var(--v);
font: 800 .75rem/1.4 var(--prep-font-display); letter-spacing: .08em; text-transform: uppercase; }
/* FAQ: agriprep's rounded accordion on a soft violet panel */
.itop-faq .prep-section { background: #fff; }
.itop-faq .prep-section-head .prep-title { text-transform: uppercase; font-weight: 800; letter-spacing: -.03em; }
.itop-faq .prep-faq details { border-radius: 1.5rem; border: 1px solid #F1F5F9; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.itop-home .prep-faq details summary { font-size: 1.0625rem; }
/* Footer stats strip (real numbers only) */
.itop-fstats { list-style: none; margin: 0 0 2.5rem; padding: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
text-align: center; border-radius: 1.5rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.itop-fstats li { display: flex; flex-direction: column; gap: .375rem; }
.itop-fstats b { font: 800 2rem/1 var(--prep-font-display); color: #C4B5FD; }
.itop-fstats li:nth-child(even) b { color: #F9A8D4; }
.itop-fstats span { font: 700 .75rem/1.3 var(--prep-font-display); letter-spacing: .08em; text-transform: uppercase; color: #CBD5E1; }
/* Phones: the same content, packed tighter (PK 29 Oct: mobile trim; was 11,065 px at 390 px) */
@media (max-width: 640px) {
.itop-home .itop-tl__list li { padding-bottom: .75rem; }
.itop-how { padding: 0; }
.itop-how__art { display: none; }
.itop-how__grid { margin-top: 1.75rem; }
.itop-how__steps { gap: 1.25rem; }
.itop-cards { grid-template-columns: 1fr; gap: .5rem; }
.itop-card { flex-direction: row; align-items: center; gap: .875rem; padding: .625rem .875rem; min-height: 3.5rem; border-radius: 1.25rem; }
.itop-card__icon { width: 2.5rem; height: 2.5rem; margin: 0; flex: none; font-size: 1.0625rem; border-radius: .75rem; }
.itop-card h3 { flex: 1; min-width: 0; }
.itop-home .itop-card p { margin: 0; flex: none; text-align: right; }
.itop-home .itop-card p .itop-badge { display: block; margin-top: .125rem; }
.itop-card__go { display: none; }
.itop-home .itop-card.is-all p { display: none; }
.itop-subjects__head { flex-direction: column; align-items: flex-start; margin-bottom: 1.25rem; }
.itop-card.is-featured { flex-wrap: wrap; padding: 1.25rem; border-radius: 1.75rem; }
.itop-card.is-featured .itop-card__icon { width: 3rem; height: 3rem; font-size: 1.375rem; margin: 0; }
.itop-home .itop-card.is-featured h3 { font-size: 1.375rem; }
.itop-home .itop-card.is-featured p { flex-basis: 100%; text-align: left; }
.itop-home .itop-card.is-featured p .itop-badge { display: inline-block; margin: 0 0 0 .375rem; }
.itop-four { padding: 3rem 0; }
.itop-four__grid { margin-top: 1.75rem; gap: .875rem; }
.itop-four__card { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1rem; align-items: start; text-align: left; padding: 1.25rem; border-radius: 1.75rem; }
.itop-four__icon { grid-row: span 4; width: 3.5rem; height: 3.5rem; margin: 0; font-size: 1.375rem; }
.itop-home .itop-four__card h3 { margin: 0 0 .25rem; font-size: 1.0625rem; }
.itop-home .itop-four__topics { margin-bottom: .75rem; }
.itop-four__go { justify-self: start; padding: .375rem .875rem; }
.itop-four__badge { top: 1rem; right: 1rem; }
.itop-four__card.t-violet h3 { padding-right: 6.5rem; }
.prep-footer__grid { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
.prep-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 641px) {
.itop-chipstats { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.itop-tl { padding: 2rem 2.25rem; }
.itop-cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.itop-four__grid { grid-template-columns: repeat(2, 1fr); }
.itop-fstats { grid-template-columns: repeat(4, 1fr); }
.itop-duo { padding: 2rem; }
}
@media (min-width: 1025px) {
.itop-hero { padding: 7rem 0 10rem; }
.itop-main { margin-top: -5rem; }
.itop-main > section { margin-bottom: 5rem; }
.itop-tl__list { grid-template-columns: repeat(6, 1fr); }
.itop-home .itop-tl__list li { grid-template-columns: 1fr; row-gap: .375rem; padding: 0 1rem 0 0; }
.itop-tl__list li:not(:last-child)::after { left: 2.5rem; right: .5rem; top: .9375rem; bottom: auto; width: auto; height: 2px; }
.itop-tl__dot { grid-row: auto; }
.itop-duo { grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3rem; border-radius: 3rem; align-items: center; }
.itop-rankcard { padding: 2.5rem; }
.itop-mock { grid-template-columns: 1fr auto; text-align: left; padding: 3rem; border-radius: 3.5rem; }
.itop-home .itop-mock__text p { margin-left: 0; }
.itop-mock__tiles { width: 26rem; }
.itop-how__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
.itop-cards { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.itop-card { padding: 1.75rem; border-radius: 2.5rem; }
.itop-card__go { left: 1.75rem; bottom: 1.5rem; }
.itop-card.is-featured { grid-column: span 2; grid-row: span 2; padding: 3rem; border-radius: 3.5rem; }
.itop-card.is-featured .itop-card__icon { width: 5rem; height: 5rem; font-size: 2.25rem; margin-bottom: 2rem; }
.itop-card.is-featured .itop-card__go { left: 3rem; bottom: 3rem; width: 3rem; height: 3rem; }
.itop-four { padding: 6rem 0; }
.itop-four__grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
.wn-track { animation: none; } .wn-win { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .wn-copy, .wn-btn { display: none; } .wn-dot { animation: none; }
.itop-home *, .itop-home *::before, .itop-home *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* ── 4. Inner pages: homepage design language (body.itop-v4) ───────────────────────────────────────────────── */
.itop-v4 { --v: #6D28D9; --v1: #EDE9FE; --v0: #F5F3FF; --p: #DB2777; --shadow: 0 20px 50px -12px rgba(46,16,101,.18); }
.itop-v4 main p, .itop-v4 main li, .itop-v4 main td, .itop-v4 main th { font-size: 1rem; line-height: 1.6; }
/* Hero band: the homepage's dark violet with the code-grid dots and the faint brand mark */
.itop-v4 .prep-hero { isolation: isolate; background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.5px) 0 0 / 22px 22px,
linear-gradient(180deg, #1E1B2E 0%, #2E1065 70%, #1E1B2E 100%); }
.itop-v4 .prep-hero::after { content: ""; position: absolute; z-index: -1; right: -5rem; bottom: -7rem; width: 24rem; height: 24rem;
background: url(/assets/brand/itofficerprep/logo-mark.svg) center/contain no-repeat; opacity: .06; }
.itop-v4 .prep-hero--compact { padding: 3rem 0 3.5rem; }
.itop-v4 .prep-display, .itop-v4 .prep-hero--compact .prep-display { text-transform: uppercase; font: 800 clamp(2.25rem, 1.5rem + 3.4vw, 4rem)/1.02 var(--prep-font-display);
letter-spacing: -.04em; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.itop-v4 .prep-hero .prep-display em { background: linear-gradient(90deg, #C4B5FD, #F9A8D4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.itop-v4 .prep-hero .prep-lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: rgba(255,255,255,.9); max-width: 42rem; }
.itop-v4 .prep-hero__chips { gap: .625rem; margin-top: 1.75rem; }
.itop-v4 .prep-hero__chips li { padding: .625rem 1rem; border-radius: 1rem; background: rgba(15,10,40,.55); border: 1px solid rgba(255,255,255,.16);
font: 700 1rem/1.3 var(--prep-font-body); color: #fff; }
.itop-v4 .prep-hero a:not(.prep-btn) { color: #DDD6FE; }
.itop-v4 .prep-breadcrumb { color: #DDD6FE; }
/* On-page nav: the homepage's quick-link pills, on white */
.itop-v4 .prep-toc { padding: .875rem 0; background: #fff; border-bottom: 1px solid #F1F5F9; box-shadow: 0 8px 24px -16px rgba(46,16,101,.25); }
.itop-v4 .prep-toc ul { gap: .5rem; }
.itop-v4 .prep-toc a { min-height: 2.75rem; padding: 0 1.125rem; border-radius: 1rem; border: 1px solid var(--v1); background: var(--v0); color: var(--v);
font: 800 .8125rem/1 var(--prep-font-display); letter-spacing: .06em; text-transform: uppercase; }
.itop-v4 .prep-toc a:hover { background: var(--v); border-color: var(--v); color: #fff; }
/* Section bands: white, then the core-four grey; the related band is faint violet */
.itop-v4 .prep-section { padding: clamp(3.5rem, 2.75rem + 3vw, 5.5rem) 0; background: #F8FAFC; border-block: 1px solid #F1F5F9; }
.itop-v4 .prep-section--plain { background: #fff; border-block: 0; }
.itop-v4 .prep-section--tint { background: var(--v0); border-block: 0; }
.itop-v4 .prep-section-head { margin-bottom: 2rem; }
.itop-v4 .prep-title { text-transform: uppercase; font: 800 clamp(1.875rem, 1.35rem + 2.3vw, 3rem)/1.05 var(--prep-font-display); letter-spacing: -.03em; color: var(--prep-ink); }
.itop-v4 .prep-title em { color: var(--v); }
.itop-v4 .prep-section-head .prep-lead { margin-top: .875rem; font-size: 1.0625rem; color: var(--prep-muted); }
/* Tables: a white card like the timeline band */
.itop-v4 .prep-table-wrap { background: #fff; border: 1px solid var(--v1); border-radius: 1.5rem; padding: .25rem 1.25rem 1rem; box-shadow: var(--shadow); }
.itop-v4 .prep-table caption { padding: 1rem 0 .75rem; font: 800 .9375rem/1.3 var(--prep-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--prep-ink); }
.itop-v4 .prep-table thead th { background: var(--v0); color: var(--v); font: 800 .75rem/1.3 var(--prep-font-display); letter-spacing: .08em; }
.itop-v4 .prep-table thead th:first-child { border-radius: .75rem 0 0 .75rem; } .itop-v4 .prep-table thead th:last-child { border-radius: 0 .75rem .75rem 0; }
.itop-v4 .prep-table th, .itop-v4 .prep-table td { padding: .75rem .875rem; border-bottom-color: #F1F5F9; }
.itop-v4 .prep-table tbody th { font-weight: 700; color: var(--prep-ink); }
.itop-v4 .prep-table tfoot th, .itop-v4 .prep-table tfoot td { color: var(--v); font-weight: 800; }
/* Notes under a table: a soft callout; source lines stay small print */
.itop-v4 .prep-exam-card__note { margin: 0; padding: 1rem 1.25rem 1rem 2.5rem; border-radius: 1.25rem; background: #fff; border: 1px solid #F1F5F9; color: var(--prep-text); }
.itop-v4 p.prep-exam-card__note { padding-left: 1.25rem; }
.itop-v4 .prep-section:not(.prep-section--plain) .prep-exam-card__note { background: #fff; }
.itop-v4 .prep-section--plain .prep-exam-card__note { background: #F8FAFC; }
.itop-v4 .prep-exam-card__note li + li { margin-top: .375rem; }
/* Steps: the homepage "How it works" numbers, in cards */
.itop-v4 .prep-steps > li { padding: 1.5rem; border-radius: 1.75rem; border: 1px solid #F1F5F9; background: #fff; box-shadow: 0 10px 30px -10px rgba(15,23,42,.12); }
.itop-v4 .prep-steps > li::before { width: 3rem; height: 3rem; border-radius: 1rem; margin-bottom: 1rem; background: var(--v1); color: var(--v);
font: 800 1.125rem/1 var(--prep-font-display); box-shadow: none; }
.itop-v4 .prep-steps > li:nth-child(4n+2)::before { background: #FCE7F3; color: #BE185D; }
.itop-v4 .prep-steps > li:nth-child(4n+3)::before { background: #E0F2FE; color: #0369A1; }
.itop-v4 .prep-steps > li:nth-child(4n+4)::before { background: #FEF3C7; color: #B45309; }
.itop-v4 .prep-steps h3 { font: 800 .9375rem/1.3 var(--prep-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--prep-ink); }
.itop-v4 .prep-steps p { font-size: 1rem; }
/* Related pages: the homepage subject cards */
.itop-v4 .prep-card { border-radius: 1.75rem; border: 1px solid var(--v1); background: #fff; box-shadow: none; padding: 1.5rem; transition: transform .2s, box-shadow .2s; }
.itop-v4 .prep-card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.itop-v4 .prep-card__icon { width: 3rem; height: 3rem; border-radius: 1rem; background: var(--v0); color: var(--v); font-size: 1.25rem; box-shadow: none; }
.itop-v4 .prep-grid > :nth-child(5n+2) .prep-card__icon, .itop-v4 .prep-grid > .prep-card:nth-child(5n+2) .prep-card__icon { background: #FCE7F3; color: #BE185D; }
.itop-v4 .prep-grid > .prep-card:nth-child(5n+3) .prep-card__icon { background: #E0F2FE; color: #0369A1; }
.itop-v4 .prep-grid > .prep-card:nth-child(5n+4) .prep-card__icon { background: #FEF3C7; color: #B45309; }
.itop-v4 .prep-grid > .prep-card:nth-child(5n+5) .prep-card__icon { background: #ECFDF5; color: #047857; }
.itop-v4 .prep-card__title { font: 800 1.0625rem/1.25 var(--prep-font-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--prep-ink); }
.itop-v4 .prep-card--link .prep-card__title a:hover { color: var(--v); }
/* Hero callout (the cycle note on the 2026 pages): a light box on the dark hero, so its link is violet again */
.itop-v4 .prep-hero .prep-callout a { color: var(--v); }
/* Long-form text (about, legal pages, subject notes): homepage headings without markup changes. The s there have
no , so the colour sits in a short violet-to-pink bar above each heading instead of on a word */
.itop-v4 .prep-prose h2 { margin-top: 2.75rem; font: 800 clamp(1.375rem, 1.15rem + 1vw, 1.875rem)/1.15 var(--prep-font-display);
letter-spacing: -.02em; text-transform: uppercase; color: var(--prep-ink); }
.itop-v4 .prep-prose h2::before { content: ""; display: block; width: 3rem; height: .3125rem; margin-bottom: .875rem; border-radius: 1rem;
background: linear-gradient(90deg, var(--v), var(--p)); }
.itop-v4 .prep-prose > h2:first-child { margin-top: 0; }
.itop-v4 .prep-prose h3 { font: 800 1.0625rem/1.3 var(--prep-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--v); }
/* FAQ: as on the homepage */
.itop-v4 .prep-faq details { border-radius: 1.5rem; border-color: #F1F5F9; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.itop-v4 .prep-faq summary { font-size: 1.0625rem; }
.itop-v4 #faq.prep-section, .itop-v4 .prep-section#faq { background: #fff; border-block: 0; }
@media (max-width: 640px) {
.itop-v4 .prep-hero--compact { padding: 2.25rem 0 2.5rem; }
.itop-v4 .prep-table-wrap { padding: .25rem .875rem .75rem; border-radius: 1.25rem; }
.itop-v4 .prep-steps > li { padding: 1.25rem; }
}