/* Margdarshan — shared stylesheet. Edit this file once; every page updates automatically. */

/* ===================== TOKENS ===================== */
:root{
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hind',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --ink:#0F2A3D;
  --ink-soft:#16394F;

  /* ---------- Theme-aware surface tokens (light = default) ----------
     Header, hero, breadcrumb bar, footer and CTA bands use these so the
     whole page switches theme, not just the content area. */
  --bg-header:#FFFFFF;
  --bg-hero:#E7EEEA;
  --bg-crumb:#F0F4F2;
  --bg-footer:#E3EBE7;
  --bg-cta:linear-gradient(135deg,#FBEFD6,#F4E3C2);
  --on-ink:#1F3340;
  --on-ink-muted:#43575A;
  --on-ink-strong:#0F2A3D;
  --hl-rgb:15,42,61;
  --border-surface:rgba(15,42,61,.14);
  --link:#8A5208;
  --link-hover:#5E3704;
  --accent-on-surface:#8A5208;

  --paper:#F4F6F4;
  --surface:#FFFFFF;
  --line:#DCE3DF;
  --text:#16232B;
  --text-muted:#52625F;

  --gold:#C97F1E;
  --gold-strong:#96590A;
  --teal:#1F6F5C;
  --plum:#8B4B6B;
  --slate:#3D5A80;
  --rust:#C4432E;

  --radius-sm:9px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(15,42,61,.07);
  --shadow-md:0 10px 28px rgba(15,42,61,.09);
  --shadow-lg:0 24px 56px rgba(15,42,61,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --container:1180px;
  --header-h:72px;
  /* Height of the sticky .quicknav-bar (set exactly by scripts.html on
     load/resize; this is the fallback). Only counted while it's visible. */
  --quicknav-h:4.25rem;
  /* Distance every in-page anchor target stops below the top of the
     viewport, so headings never hide behind the sticky header. */
  --scroll-offset:calc(var(--header-h) + 1.5rem);

  /* ---------- Stream theme system — DISABLED ----------
     Previously, pages opted into a per-stream accent colour via
     <body data-stream="commerce|science|arts|diploma|iti">, each with its
     own --stream-primary/--stream-accent/--stream-soft/--stream-border.
     That made buttons, links, badges and active states look different
     colour from page to page, breaking one consistent brand identity.
     The tokens below are now the ONLY definition, site-wide, restoring
     the single original gold accent for every stream. The data-stream
     attribute can remain on pages (harmless) but no longer changes colour;
     any future [data-stream="x"] override block should NOT be re-added. */
  --stream-primary:var(--gold-strong);
  --stream-accent:var(--gold);
  --stream-soft:rgba(201,127,30,.10);
  --stream-border:rgba(201,127,30,.30);
}
/* data-stream="govt-exams" (govt-exams.html) intentionally has no override:
   like every other stream it uses the shared gold tokens above, light and dark. */
[data-theme="dark"]{
  --stream-primary:#F0B65A;
  --bg-header:#0F2A3D;
  --bg-hero:#0F2A3D;
  --bg-crumb:#0F2A3D;
  --bg-footer:#0F2A3D;
  --bg-cta:linear-gradient(135deg,#0F2A3D,#16394F);
  --on-ink:#EAF1EF;
  --on-ink-muted:#AFC3C2;
  --on-ink-strong:#FFFFFF;
  --hl-rgb:255,255,255;
  --border-surface:rgba(255,255,255,.14);
  --link:#F0B65A;
  --link-hover:#FFD08A;
  --accent-on-surface:#E8A33D;
  --paper:#0B1A22;
  --surface:#122633;
  --line:#1E3A46;
  --text:#E7EEEC;
  --text-muted:#94ACA7;
  --gold:#E8A33D;
  --teal:#3FA78D;
  --plum:#C87DA4;
  --slate:#7FA0C9;
  --rust:#E8674C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 10px 28px rgba(0,0,0,.4);
  --shadow-lg:0 24px 56px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .25s var(--ease),color .25s var(--ease);}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0;color:var(--text);}
p{margin:0;}
button{font-family:inherit;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;}
/* In-page anchor offset ("On this page" sidebar, quicknav, #hash links).
   A visible sticky .quicknav-bar stacks under the header, so its height
   is added too. It's hidden from 1200px up only when the sidebar replaced
   it (.has-sidebar-nav). */
section[id],h1[id],h2[id],h3[id],h4[id]{scroll-margin-top:var(--scroll-offset);}
:root:has(.quicknav-bar:not(.has-sidebar-nav)){--scroll-offset:calc(var(--header-h) + var(--quicknav-h) + 1.25rem);}
@media (max-width:1199.98px){
  :root:has(.quicknav-bar){--scroll-offset:calc(var(--header-h) + var(--quicknav-h) + 1.25rem);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:#1a1204;padding:.65rem 1.1rem;border-radius:0 0 var(--radius-sm) 0;z-index:1000;font-weight:600;}
.skip-link:focus{left:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem;}
@media (min-width:768px){.container{padding:0 2rem;}}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--stream-primary);font-weight:600;}
[data-theme="dark"] .eyebrow{color:var(--stream-accent);}
.section-head{max-width:640px;margin-bottom:2.5rem;}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-top:.6rem;}
.section-head p{color:var(--text-muted);margin-top:.8rem;font-size:1.05rem;}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.98rem;border:1px solid transparent;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--stream-accent);color:#241703;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--stream-primary);box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent;color:var(--on-ink);border-color:rgba(var(--hl-rgb),.35);}
.btn-ghost:hover{background:rgba(var(--hl-rgb),.1);}
/* ===================== PROGRESS BAR ===================== */
/* ===================== HEADER ===================== */
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:1rem;}
.logo{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--on-ink-strong);}
.logo svg{flex-shrink:0;}
.nav-links{display:none;align-items:center;gap:1.9rem;}
.nav-links a,.nav-links .drop-btn{color:var(--on-ink-muted);font-weight:600;font-size:.97rem;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.35rem;padding:.4rem 0;transition:color .15s;}
.nav-links a:hover,.nav-links .drop-btn:hover,.nav-links a:focus-visible,.nav-links .drop-btn[aria-expanded="true"]{color:var(--on-ink-strong);}
.drop-wrap{position:relative;}
/* Explore mega menu (desktop). Items come from _data/nav.yml:
   icon tile + bold label + one muted descriptor line. */
.dropdown-menu{position:absolute;top:calc(100% + 14px);left:-1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:1rem;z-index:950;}
.dropdown-menu[hidden]{display:none;}
.mega-menu{width:min(640px,calc(100vw - 2rem));}
.mega-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;}
.mega-col{display:flex;flex-direction:column;gap:.35rem;min-width:0;}
.mega-col + .mega-col{border-left:1px solid var(--line);padding-left:1rem;}
.mega-col ul{display:grid;gap:.15rem;}
.dropdown-menu .menu-label{margin:0;padding:.15rem .65rem .35rem;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);}
.nav-links .mega-item{display:flex;align-items:center;gap:.75rem;padding:.55rem .65rem;border-radius:var(--radius-sm);color:var(--text);font-size:inherit;font-weight:inherit;transition:background .15s var(--ease);}
.mega-item-icon,.msub-item-icon{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--stream-soft);color:var(--link);transition:background .15s var(--ease),color .15s var(--ease);}
.mega-item-text,.msub-item-text{display:flex;flex-direction:column;min-width:0;}
.mega-item-text strong{font-size:.95rem;font-weight:700;line-height:1.25;color:var(--text);}
.mega-item-text small{font-size:.8rem;font-weight:500;line-height:1.35;color:var(--text-muted);margin-top:.1rem;}
.nav-links .mega-item:hover,.nav-links .mega-item:focus-visible{background:var(--paper);color:var(--text);}
.nav-links .mega-item:hover .mega-item-icon,.nav-links .mega-item:focus-visible .mega-item-icon{background:var(--gold);color:#fff;}
.nav-links .mega-item:hover strong,.nav-links .mega-item:focus-visible strong{color:var(--link);}
.nav-links .mega-item[aria-current="page"]{background:var(--stream-soft);box-shadow:inset 3px 0 0 var(--gold);}
.nav-links .mega-item[aria-current="page"] strong{color:var(--link);}
.nav-links .mega-fit{display:block;margin-top:auto;padding:.75rem .85rem;border:1px dashed var(--stream-border);border-radius:var(--radius-sm);background:var(--stream-soft);color:var(--text);font-size:inherit;}
.mega-fit strong{display:block;font-size:.88rem;}
.mega-fit span{display:block;font-size:.82rem;color:var(--link);font-weight:600;margin-top:.1rem;}
.nav-links .mega-fit:hover,.nav-links .mega-fit:focus-visible{border-style:solid;color:var(--text);}
.drop-btn svg{transition:transform .2s var(--ease);}
.drop-btn[aria-expanded="true"] svg{transform:rotate(180deg);}

/* Mobile drawer: fills the viewport under the header and scrolls on its
   own; the page behind is scroll-locked (html.nav-locked) while it's open. */
html.nav-locked{overflow:hidden;}
.mobile-panel{display:none;position:absolute;top:100%;left:0;right:0;height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg-header);border-top:1px solid rgba(var(--hl-rgb),.08);box-shadow:var(--shadow-lg);}
.mobile-panel.is-open{display:block;}
.mobile-panel .container{padding:1rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.25rem;}
.mobile-panel a,.mobile-panel .drop-btn{color:var(--on-ink);font-weight:600;padding:.8rem .6rem;border-radius:var(--radius-sm);font-size:1.02rem;background:none;border:none;text-align:left;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-family:inherit;}
.mobile-panel a:hover,.mobile-panel .drop-btn:hover{background:rgba(var(--hl-rgb),.06);}
.mobile-panel .mobile-explore{background:rgba(var(--hl-rgb),.04);border:1px solid rgba(var(--hl-rgb),.1);}
.mobile-panel .mobile-explore[aria-expanded="true"]{color:var(--on-ink-strong);border-color:var(--stream-border);}
/* Accordion: rows animate 0fr -> 1fr; closed content is also hidden from
   focus/AT via visibility, so collapsed links can't be tabbed into. */
.mobile-sub{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .25s var(--ease),visibility 0s linear .25s;}
.mobile-sub.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .25s var(--ease),visibility 0s;}
.mobile-sub-inner{min-height:0;overflow:hidden;}
.mobile-sub .menu-label{margin:.9rem .2rem .5rem;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--on-ink-muted);}
.msub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;}
.msub-list{display:grid;gap:.5rem;padding-bottom:.6rem;}
.mobile-panel .msub-item{justify-content:flex-start;align-items:center;gap:.65rem;height:100%;padding:.65rem;font-size:inherit;border:1px solid rgba(var(--hl-rgb),.1);background:rgba(var(--hl-rgb),.03);}
.msub-item-icon{flex-basis:32px;height:32px;}
.msub-item-text strong{font-size:.93rem;line-height:1.25;color:var(--on-ink-strong);}
.msub-item-text small{font-size:.78rem;font-weight:500;line-height:1.3;color:var(--on-ink-muted);margin-top:.1rem;}
.mobile-panel .msub-item[aria-current="page"]{border-color:var(--gold);background:var(--stream-soft);}
@media (max-width:359px){.msub-grid{grid-template-columns:1fr;}}
.nav-actions{display:flex;align-items:center;gap:.4rem;}
.icon-btn{width:42px;height:42px;border-radius:999px;border:none;background:transparent;color:var(--on-ink-muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s;}
.icon-btn:hover{background:rgba(var(--hl-rgb),.1);color:var(--on-ink-strong);}
.icon-sun{display:none;}
[data-theme="dark"] .icon-moon{display:none;}
[data-theme="dark"] .icon-sun{display:block;}
.menu-toggle{display:grid;}
.menu-toggle .icon-close{display:none;}
.menu-toggle[aria-expanded="true"] .icon-open{display:none;}
.menu-toggle[aria-expanded="true"] .icon-close{display:grid;}
@media (min-width:1024px){
  .nav-links{display:flex;}
  .menu-toggle,.mobile-panel{display:none !important;}
}
/* ===================== HERO ===================== */
.hero{position:relative;background:var(--bg-hero);color:var(--on-ink);overflow:hidden;padding:4.5rem 0 3.5rem;}
.hero-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;}
.hero-inner{position:relative;display:grid;gap:2.5rem;}
.hero h1{color:var(--on-ink-strong);font-size:clamp(2.1rem,5.4vw,3.4rem);margin-top:.9rem;max-width:16ch;}
.hero-sub{margin-top:1.15rem;color:var(--on-ink-muted);font-size:1.1rem;max-width:46ch;line-height:1.65;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;}
.trust-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem;}
.trust-chip{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;color:var(--on-ink);background:rgba(var(--hl-rgb),.07);border:1px solid rgba(var(--hl-rgb),.14);border-radius:999px;padding:.5rem .9rem;}
.trust-chip svg{color:var(--gold);flex-shrink:0;}
/* Journey / roadmap */
.journey{display:grid;gap:1rem;position:relative;}
.journey-item{position:relative;display:flex;gap:1rem;background:rgba(var(--hl-rgb),.05);border:1px solid rgba(var(--hl-rgb),.12);border-radius:var(--radius-md);padding:1.1rem 1.2rem;}
.journey-node{flex-shrink:0;width:38px;height:38px;border-radius:999px;background:var(--gold);color:#241703;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.95rem;}
.journey-item h3{color:var(--on-ink-strong);font-size:1.02rem;font-family:var(--font-body);font-weight:700;}
.journey-item p{color:var(--on-ink-muted);font-size:.9rem;margin-top:.25rem;}
@media (min-width:1024px){
  .hero-inner{grid-template-columns:1.1fr 1fr;align-items:center;}
  .journey-list{grid-template-columns:1fr;position:relative;}
  .journey-list::before{content:"";position:absolute;left:19px;top:38px;bottom:38px;width:2px;background:repeating-linear-gradient(to bottom,rgba(232,163,61,.55) 0 6px,transparent 6px 12px);}
}
/* ===================== STREAMS ===================== */
.streams{padding:5rem 0;}
.stream-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;}
@media (min-width:640px){.stream-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1180px){.stream-grid{grid-template-columns:repeat(5,1fr);}}
.stream-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.stream-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.stream-icon{width:48px;height:48px;border-radius:var(--radius-sm);display:grid;place-items:center;color:#fff;}
.stream-card h3{font-size:1.15rem;}
.stream-card p{color:var(--text-muted);font-size:.92rem;flex-grow:1;}
.stream-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.stream-chips span{font-size:.74rem;font-weight:600;color:var(--text-muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.28rem .65rem;}
.stream-link{font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem;}
.stream-link svg{transition:transform .15s;}
.stream-card:hover .stream-link svg{transform:translateX(3px);}
.s-science .stream-icon{background:var(--teal);}
.s-commerce .stream-icon{background:var(--gold-strong);}
.s-arts .stream-icon{background:var(--plum);}
.s-diploma .stream-icon{background:var(--slate);}
.s-iti .stream-icon{background:var(--rust);}
.s-science .stream-link{color:var(--teal);}
.s-commerce .stream-link{color:var(--gold-strong);}
.s-arts .stream-link{color:var(--plum);}
.s-diploma .stream-link{color:var(--slate);}
.s-iti .stream-link{color:var(--rust);}
/* ===================== CAREER EXPLORER ===================== */
.explorer{padding:5rem 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.explorer-controls{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:2rem;}
.search-box{position:relative;max-width:420px;}
.search-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);}
.search-box input{width:100%;padding:.85rem 1rem .85rem 2.7rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text);font-size:.98rem;font-family:inherit;}
.search-box input:focus-visible{outline:3px solid var(--gold);}
.tabs{display:flex;flex-wrap:wrap;gap:.55rem;}
.tab-btn{padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text-muted);font-weight:600;font-size:.86rem;cursor:pointer;transition:all .15s;}
.tab-btn:hover{color:var(--text);}
.tab-btn[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink);}
.career-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem;}
.career-item a{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);height:100%;transition:border-color .15s,transform .15s;}
.career-item a:hover{border-color:var(--gold);transform:translateY(-2px);}
.career-item strong{font-size:.95rem;font-weight:700;}
.career-item span{font-size:.78rem;color:var(--text-muted);}
.career-item[hidden]{display:none;}
#noResults{text-align:center;color:var(--text-muted);padding:2.5rem 0;}
#noResults[hidden]{display:none;}
.explorer-count{font-size:.85rem;color:var(--text-muted);margin-top:1.2rem;font-family:var(--font-mono);}
/* ===================== WHY / FEATURES ===================== */
.why{padding:5rem 0;}
.feature-grid{display:grid;gap:1.3rem;grid-template-columns:1fr;}
@media (min-width:640px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.feature-grid{grid-template-columns:repeat(3,1fr);}}
.feature-card{padding:1.6rem;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);}
.feature-card .f-icon{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--paper);display:grid;place-items:center;color:var(--gold-strong);margin-bottom:1rem;}
[data-theme="dark"] .feature-card .f-icon{color:var(--gold);}
.feature-card h3{font-size:1.05rem;}
.feature-card p{color:var(--text-muted);font-size:.92rem;margin-top:.5rem;}
/* ===================== AFTER 10 BANNER ===================== */
.goals{padding:0 0 5rem;}
.after10{padding:0 0 5rem;}
.after10-card{background:var(--bg-cta);border-radius:var(--radius-lg);padding:2.6rem 2rem;display:grid;gap:1.5rem;color:var(--on-ink);position:relative;overflow:hidden;}
.after10-card h2{color:var(--on-ink-strong);font-size:clamp(1.5rem,3vw,2rem);max-width:26ch;}
.after10-card p{color:var(--on-ink-muted);margin-top:.7rem;max-width:52ch;}
@media (min-width:768px){.after10-card{grid-template-columns:1fr auto;align-items:center;padding:3rem;}}
/* ===================== FAQ ===================== */
.faq{padding:5rem 0;}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.3rem;background:none;border:none;text-align:left;font-weight:700;font-size:1rem;cursor:pointer;color:var(--text);}
.faq-q svg{flex-shrink:0;transition:transform .2s var(--ease);color:var(--text-muted);}
.faq-item[data-open="true"] .faq-q svg{transform:rotate(180deg);}
.faq-a{padding:0 1.3rem;color:var(--text-muted);font-size:.95rem;line-height:1.7;max-height:0;overflow:hidden;transition:max-height .25s var(--ease),padding .25s var(--ease);}
.faq-item[data-open="true"] .faq-a{padding:0 1.3rem 1.25rem;}
/* ===================== FOOTER ===================== */
.footer-top{display:grid;gap:2.4rem;grid-template-columns:1fr;padding-bottom:2.5rem;border-bottom:1px solid rgba(var(--hl-rgb),.1);}
@media (min-width:768px) and (max-width:1023px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (min-width:1024px){.footer-top{grid-template-columns:1.3fr repeat(4,1fr);}}
.footer-brand .logo{margin-bottom:.9rem;}
.footer-brand p{max-width:34ch;font-size:.9rem;line-height:1.7;}
.footer-col h4{color:var(--on-ink-strong);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-body);margin-bottom:1rem;}
.footer-col ul{display:grid;gap:.6rem;}
.footer-col a{font-size:.92rem;transition:color .15s;}
.footer-col a:hover{color:var(--on-ink-strong);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.6rem;font-size:.82rem;}
/* ===================== BACK TO TOP ===================== */
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
/* Reveal on scroll */
.reveal.is-visible{opacity:1;transform:translateY(0);}
ul,ol{margin:0;padding:0;list-style:none;}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line);}
.btn-outline:hover{background:var(--surface);box-shadow:var(--shadow-sm);}
.nav-links a[aria-current="page"]{color:var(--on-ink-strong);}
.mobile-panel a[aria-current="page"]{color:var(--gold);}
/* ===================== BREADCRUMB ===================== */
.breadcrumb{display:flex;align-items:center;gap:.5rem;padding:.85rem 0;font-size:.85rem;color:var(--on-ink-muted);flex-wrap:wrap;}
.breadcrumb a{color:var(--on-ink-muted);font-weight:600;}
.breadcrumb a:hover{color:var(--on-ink-strong);}
.breadcrumb span[aria-current]{color:var(--on-ink-strong);font-weight:600;}
.breadcrumb svg{color:var(--on-ink-muted);flex-shrink:0;}
/* ===================== PAGE HERO ===================== */
.page-hero{position:relative;background:var(--bg-hero);color:var(--on-ink);overflow:hidden;padding:3.2rem 0 3.5rem;}
.page-hero-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;}
.page-hero-inner{position:relative;max-width:760px;}
.page-hero h1{color:var(--on-ink-strong);font-size:clamp(2rem,4.6vw,3rem);margin-top:.9rem;}
.page-hero p{margin-top:1.1rem;color:var(--on-ink-muted);font-size:1.08rem;max-width:56ch;line-height:1.65;}
.page-hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.7rem;}
.trust-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem;}
/* ===================== GENERIC SECTIONS ===================== */
.block{padding:4.5rem 0;}
.block-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.prose{max-width:760px;color:var(--text-muted);font-size:1.03rem;line-height:1.75;display:grid;gap:1.1rem;}
.prose strong{color:var(--text);}
.subject-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem;}
.subject-chips span{font-size:.85rem;font-weight:600;color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;}
/* Eligibility cards */
@media (min-width:768px){.eligibility-grid{grid-template-columns:1fr 1fr;}}
.elig-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;}
.elig-card .e-icon{width:46px;height:46px;border-radius:var(--radius-sm);background:var(--paper);display:grid;place-items:center;color:var(--stream-primary);margin-bottom:1rem;}
[data-theme="dark"] .elig-card .e-icon{color:var(--stream-accent);}
.elig-card h3{font-size:1.15rem;margin-bottom:.9rem;}
.elig-card ul{display:grid;gap:.65rem;}
.elig-card li{display:flex;gap:.6rem;font-size:.94rem;color:var(--text-muted);}
.elig-card li svg{flex-shrink:0;margin-top:.2rem;color:var(--teal);}
/* NEW GROUP HEADING */
.career-group-heading{
  font-size:.78rem;
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold-strong);
  margin:3rem 0 1.1rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:.55rem;
}

.career-group-heading::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--gold);
  flex-shrink:0;
}

[data-theme="dark"] .career-group-heading{
  color:var(--gold);
}

.career-group-heading:first-of-type{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

/* Once scripts.html turns a heading into an accordion row, the rules in
   "COLLAPSIBLE CAREER GROUPS" further down restyle it; the styles above
   are only the no-JS fallback. */

@media (min-width:768px){
  .career-group-heading{
    margin-top:3.6rem;
    padding-top:2rem;
  }
}
/* Career grid (reused pattern) */
.career-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.85rem;}
.career-item a{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);height:100%;transition:border-color .15s,transform .15s;}
.career-item strong{font-size:.97rem;font-weight:700;}
.career-item span{font-size:.8rem;color:var(--text-muted);}
/* Journey / roadmap */
.journey-list{display:grid;gap:1rem;position:relative;}
.journey-item{position:relative;display:flex;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.2rem 1.3rem;}
.journey-item h3{font-size:1.02rem;font-family:var(--font-body);font-weight:700;}
.journey-item p{color:var(--text-muted);font-size:.92rem;margin-top:.25rem;}
@media (min-width:1024px){
  .journey-list{grid-template-columns:repeat(4,1fr);}
  .journey-list::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:repeating-linear-gradient(to right,var(--line) 0 8px,transparent 8px 16px);z-index:0;}
  .journey-item{flex-direction:column;position:relative;z-index:1;}
}
/* Pros & cons */
@media (min-width:768px){.proscons{grid-template-columns:1fr 1fr;}}
.pc-card{border-radius:var(--radius-lg);padding:1.8rem;border:1px solid var(--line);}
.pc-card.pros{background:rgba(31,111,92,.06);}
.pc-card.cons{background:rgba(196,67,46,.06);}
.pc-card h3{font-size:1.1rem;display:flex;align-items:center;gap:.5rem;}
.pc-card.pros h3{color:var(--teal);}
.pc-card.cons h3{color:var(--rust);}
.pc-card ul{margin-top:1rem;display:grid;gap:.7rem;}
.pc-card li{display:flex;gap:.6rem;font-size:.94rem;color:var(--text-muted);}
.pc-card li svg{flex-shrink:0;margin-top:.2rem;}
.pc-card.pros li svg{color:var(--teal);}
.pc-card.cons li svg{color:var(--rust);}
/* Related streams */
@media (min-width:768px){.related-grid{grid-template-columns:repeat(4,1fr);}}
.related-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.3rem;text-align:center;transition:transform .15s,box-shadow .15s;}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.related-card strong{display:block;font-size:1rem;margin-top:.3rem;}
.related-card span{font-size:.78rem;color:var(--text-muted);}
/* FAQ */
.faq-list{display:grid;gap:.7rem;max-width:760px;}

table{border-collapse:collapse;width:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}}
.section-head{max-width:680px;margin-bottom:2.3rem;}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-top:.6rem;}
.section-head p{color:var(--text-muted);margin-top:.75rem;font-size:1.02rem;}
.progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--stream-accent);width:0%;z-index:1100;transition:width .1s linear;}
.site-header{position:sticky;top:0;z-index:900;background:var(--bg-header);box-shadow:var(--shadow-sm);}
@media (min-width:1024px){.nav-links{display:flex;}.menu-toggle,.mobile-panel{display:none !important;}}
.breadcrumb-bar{background:var(--bg-crumb);border-top:1px solid rgba(var(--hl-rgb),.08);}
/* Page hero + quick facts */
.page-hero-inner{position:relative;max-width:780px;}
.page-hero .meta-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1rem;font-size:.85rem;color:var(--on-ink-muted);}
.page-hero .meta-row svg{color:var(--accent-on-surface);display:inline-block;vertical-align:-2px;}
.page-hero h1{color:var(--on-ink-strong);font-size:clamp(1.9rem,4.2vw,2.8rem);margin-top:.7rem;}
.page-hero p{margin-top:1rem;color:var(--on-ink-muted);font-size:1.06rem;max-width:58ch;line-height:1.65;}
.page-hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.5rem;}
.quickfacts{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr);margin-top:2rem;}
@media (min-width:768px){.quickfacts{grid-template-columns:repeat(4,1fr);}}
.qf-card{background:rgba(var(--hl-rgb),.06);border:1px solid rgba(var(--hl-rgb),.14);border-radius:var(--radius-md);padding:1rem 1.1rem;}
.qf-card span{display:block;font-size:.72rem;color:var(--on-ink-muted);text-transform:uppercase;letter-spacing:.05em;}
.qf-card strong{display:block;font-family:var(--font-mono);font-size:1.05rem;color:var(--on-ink-strong);margin-top:.35rem;}
/* Quick nav */
.quicknav{display:flex;gap:.5rem;overflow-x:auto;padding:.9rem 0;scrollbar-width:none;}
.quicknav::-webkit-scrollbar{display:none;}
.quicknav a{flex-shrink:0;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text-muted);font-weight:600;font-size:.83rem;white-space:nowrap;}
.quicknav a:hover{color:var(--text);border-color:var(--gold);}
.block{padding:4rem 0;}
.prose{max-width:760px;color:var(--text-muted);font-size:1.02rem;line-height:1.75;display:grid;gap:1.05rem;}
.prose ul{display:grid;gap:.6rem;margin-top:.3rem;}
.prose ul li{display:flex;gap:.6rem;}
.prose ul li svg{flex-shrink:0;margin-top:.25rem;color:var(--teal);}
.subject-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem;}
.eligibility-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;}
.elig-card h3{font-size:1.12rem;margin-bottom:.9rem;}
.journey-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));position:relative;}
.journey-item{position:relative;display:flex;flex-direction:column;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.2rem 1.3rem;z-index:1;}
.journey-node{flex-shrink:0;width:36px;height:36px;border-radius:999px;background:var(--gold);color:#241703;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.9rem;}
.journey-item h3{font-size:.98rem;font-family:var(--font-body);font-weight:700;}
.journey-item p{color:var(--text-muted);font-size:.88rem;}
@media (min-width:1024px){.journey-list::before{content:"";position:absolute;left:0;right:0;top:18px;height:2px;background:repeating-linear-gradient(to right,var(--line) 0 8px,transparent 8px 16px);z-index:0;}}
/* Tables — the single definition used by every page. Cells wrap (with a
   minimum width) so long text stays readable; .table-wrap scrolls
   sideways on narrow screens when a table is wider than the viewport. */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);margin-top:.5rem;}
.table-simple{width:100%;border-collapse:collapse;}
.table-simple th,.table-simple td{text-align:left;vertical-align:top;padding:.85rem 1.1rem;font-size:.9rem;border-bottom:1px solid var(--line);}
.table-simple th{background:var(--paper);color:var(--text-muted);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.table-simple td{min-width:7.5rem;line-height:1.5;}
.table-simple tr:last-child td{border-bottom:none;}
.table-simple tbody tr{transition:background .15s var(--ease);}
.table-simple tbody tr:hover{background:var(--stream-soft);}
.table-simple td a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.table-simple td a:hover,.table-simple td a:focus-visible{color:var(--link-hover);}
.table-note{font-size:.85rem;color:var(--text-muted);margin-top:.9rem;max-width:780px;}
.salary-cards{display:grid;gap:1.2rem;grid-template-columns:1fr;}
@media (min-width:640px){.salary-cards{grid-template-columns:repeat(3,1fr);}}
.salary-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;text-align:center;}
.salary-card span{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.salary-card strong{display:block;font-family:var(--font-mono);font-size:1.5rem;margin:.5rem 0;color:var(--gold-strong);}
[data-theme="dark"] .salary-card strong{color:var(--gold);}
.salary-card p{font-size:.85rem;color:var(--text-muted);}
.chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;}
.chip-grid .item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:.9rem 1rem;font-size:.9rem;color:var(--text-muted);transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.chip-grid .item strong{display:block;color:var(--text);font-size:.95rem;margin-bottom:.15rem;}
.proscons{display:grid;gap:1.4rem;grid-template-columns:1fr;}
.pc-card h3{font-size:1.08rem;display:flex;align-items:center;gap:.5rem;}
.pc-card li{display:flex;gap:.6rem;font-size:.93rem;color:var(--text-muted);}
.myth-grid{display:grid;gap:1rem;}
.myth-item{display:grid;gap:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.2rem 1.4rem;}
.myth-item .myth{font-weight:700;color:var(--rust);font-size:.92rem;display:flex;gap:.5rem;}
.myth-item .fact{color:var(--text-muted);font-size:.92rem;display:flex;gap:.5rem;}
.myth-item .fact strong{color:var(--teal);flex-shrink:0;}
.myth-item .myth strong{flex-shrink:0;}
.related-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);}
@media (min-width:768px){.related-grid{grid-template-columns:repeat(5,1fr);}}
.related-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.2rem;text-align:center;transition:transform .15s,box-shadow .15s;}
.related-card strong{display:block;font-size:.98rem;margin-top:.2rem;}
.related-card span{font-size:.76rem;color:var(--text-muted);}
.site-footer{background:var(--bg-footer);color:var(--on-ink-muted);padding:4rem 0 2rem;}
.back-to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:46px;height:46px;border-radius:999px;background:var(--ink);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:800;}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.section-head{max-width:700px;margin-bottom:2.3rem;}
.page-hero{position:relative;background:var(--bg-hero);color:var(--on-ink);overflow:hidden;padding:3rem 0 2.6rem;}
.page-hero-inner{position:relative;max-width:800px;}
.page-hero p{margin-top:1rem;color:var(--on-ink-muted);font-size:1.06rem;max-width:60ch;line-height:1.65;}
.quicknav-bar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:var(--header-h);z-index:80;}
.prose{max-width:780px;color:var(--text-muted);font-size:1.02rem;line-height:1.75;display:grid;gap:1.05rem;}
.note{display:flex;gap:.75rem;background:rgba(31,111,92,.07);border:1px solid rgba(31,111,92,.25);border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--text-muted);max-width:780px;}
.note svg{flex-shrink:0;color:var(--teal);margin-top:.15rem;}
.warn{display:flex;gap:.75rem;background:rgba(196,67,46,.07);border:1px solid rgba(196,67,46,.25);border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--text-muted);max-width:780px;}
.warn svg{flex-shrink:0;color:var(--rust);margin-top:.15rem;}
.journey-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));position:relative;}
.faq-list{display:grid;gap:.7rem;max-width:780px;}
.page-hero{position:relative;background:var(--bg-hero);color:var(--on-ink);overflow:hidden;padding:3.4rem 0 3rem;}
.page-hero h1{color:var(--on-ink-strong);font-size:clamp(2rem,4.4vw,2.9rem);margin-top:.8rem;}
.page-hero p{margin-top:1.05rem;color:var(--on-ink-muted);font-size:1.08rem;max-width:58ch;line-height:1.65;}
.page-hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem;}
.stats-strip{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr);margin-top:2.2rem;}
@media (min-width:768px){.stats-strip{grid-template-columns:repeat(4,1fr);}}
.stat-card{background:rgba(var(--hl-rgb),.06);border:1px solid rgba(var(--hl-rgb),.14);border-radius:var(--radius-md);padding:1rem 1.1rem;}
.stat-card span{display:block;font-size:.72rem;color:var(--on-ink-muted);text-transform:uppercase;letter-spacing:.05em;}
.stat-card strong{display:block;font-family:var(--font-mono);font-size:1.05rem;color:var(--on-ink-strong);margin-top:.35rem;}
.block{padding:4.2rem 0;}
.prose{max-width:780px;color:var(--text-muted);font-size:1.03rem;line-height:1.8;display:grid;gap:1.15rem;}
.prose ul{display:grid;gap:.65rem;margin-top:.3rem;}
.cta-card{background:var(--bg-cta);border-radius:var(--radius-lg);padding:2.6rem 2rem;display:grid;gap:1.5rem;color:var(--on-ink);position:relative;overflow:hidden;}
.cta-card h2{color:var(--on-ink-strong);font-size:clamp(1.5rem,3vw,2rem);max-width:26ch;}
.cta-card p{color:var(--on-ink-muted);margin-top:.7rem;max-width:52ch;}
@media (min-width:768px){.cta-card{grid-template-columns:1fr auto;align-items:center;padding:3rem;}}
.prose{max-width:780px;color:var(--text-muted);font-size:1.03rem;line-height:1.8;display:grid;gap:1.05rem;}
.contact-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;}
@media (min-width:768px){.contact-grid{grid-template-columns:1.1fr .9fr;align-items:start;}}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;}
.contact-card .c-icon{width:52px;height:52px;border-radius:var(--radius-sm);background:var(--paper);display:grid;place-items:center;color:var(--gold-strong);margin-bottom:1.2rem;}
[data-theme="dark"] .contact-card .c-icon{color:var(--gold);}
.contact-card h2{font-size:1.4rem;}
.contact-card p{color:var(--text-muted);margin-top:.7rem;font-size:.98rem;line-height:1.7;}
.email-pill{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;padding:.9rem 1.4rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-family:var(--font-mono);font-size:.98rem;font-weight:600;color:var(--text);transition:border-color .15s,transform .15s;}
.email-pill:hover{border-color:var(--gold);transform:translateY(-2px);}
.email-pill svg{color:var(--gold-strong);flex-shrink:0;}
[data-theme="dark"] .email-pill svg{color:var(--gold);}
.response-note{display:flex;gap:.6rem;margin-top:1.4rem;font-size:.86rem;color:var(--text-muted);}
.response-note svg{flex-shrink:0;color:var(--teal);margin-top:.15rem;}
.reason-list{display:grid;gap:.8rem;}
.reason-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.1rem 1.3rem;display:flex;gap:.9rem;align-items:flex-start;}
.reason-item svg{flex-shrink:0;color:var(--gold-strong);margin-top:.15rem;}
[data-theme="dark"] .reason-item svg{color:var(--gold);}
.reason-item strong{display:block;font-size:.95rem;color:var(--text);}
.reason-item span{font-size:.86rem;color:var(--text-muted);}
.page-hero h1{color:var(--on-ink-strong);font-size:clamp(1.9rem,4.2vw,2.7rem);margin-top:.8rem;}
.page-hero p{margin-top:1rem;color:var(--on-ink-muted);font-size:1.04rem;max-width:58ch;line-height:1.65;}
.updated-chip{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;font-size:.82rem;font-weight:600;color:var(--on-ink);background:rgba(var(--hl-rgb),.07);border:1px solid rgba(var(--hl-rgb),.14);border-radius:999px;padding:.5rem .9rem;}
.updated-chip svg{color:var(--gold);}
.block{padding:3.4rem 0;}
.legal-section h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin-bottom:1.1rem;}
.prose{max-width:800px;color:var(--text-muted);font-size:1.01rem;line-height:1.8;display:grid;gap:1.05rem;}
.prose a{color:var(--gold-strong);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
[data-theme="dark"] .prose a{color:var(--gold);}
.note{display:flex;gap:.75rem;background:rgba(31,111,92,.07);border:1px solid rgba(31,111,92,.25);border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--text-muted);max-width:800px;}
.warn{display:flex;gap:.75rem;background:rgba(196,67,46,.07);border:1px solid rgba(196,67,46,.25);border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--text-muted);max-width:800px;}
.cta-card{background:var(--bg-cta);border-radius:var(--radius-lg);padding:2.4rem 2rem;display:grid;gap:1.4rem;color:var(--on-ink);}
.cta-card h2{color:var(--on-ink-strong);font-size:clamp(1.4rem,2.8vw,1.8rem);max-width:26ch;}
.cta-card p{color:var(--on-ink-muted);margin-top:.6rem;max-width:52ch;}
@media (min-width:768px){.cta-card{grid-template-columns:1fr auto;align-items:center;padding:2.6rem;}}
.notfound-hero{position:relative;background:var(--bg-hero);color:var(--on-ink);overflow:hidden;padding:5rem 0 4rem;min-height:calc(100vh - 72px);display:flex;align-items:center;}
.notfound-bg{position:absolute;inset:0;opacity:.45;pointer-events:none;}
.notfound-inner{position:relative;max-width:640px;margin:0 auto;text-align:center;}
.notfound-code{font-family:var(--font-mono);font-size:clamp(4rem,14vw,7rem);font-weight:700;color:var(--accent-on-surface);line-height:1;letter-spacing:-.02em;}
.notfound-inner h1{color:var(--on-ink-strong);font-size:clamp(1.7rem,4vw,2.4rem);margin-top:1rem;}
.notfound-inner p{color:var(--on-ink-muted);font-size:1.05rem;margin-top:1rem;line-height:1.7;max-width:52ch;margin-left:auto;margin-right:auto;}
.notfound-ctas{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2rem;}
.notfound-links{margin-top:3rem;padding-top:2.5rem;border-top:1px solid rgba(var(--hl-rgb),.12);}
.notfound-links h2{color:var(--on-ink-strong);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);font-weight:600;margin-bottom:1.2rem;}
.link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;}
@media (min-width:640px){.link-grid{grid-template-columns:repeat(3,1fr);}}
.link-grid a{display:block;padding:.85rem 1rem;border-radius:var(--radius-md);background:rgba(var(--hl-rgb),.06);border:1px solid rgba(var(--hl-rgb),.14);color:var(--on-ink);font-weight:600;font-size:.9rem;transition:background .15s,transform .15s;}
.link-grid a:hover{background:rgba(var(--hl-rgb),.12);transform:translateY(-2px);}
.report-note{margin-top:2.5rem;font-size:.85rem;color:var(--on-ink-muted);}
.report-note a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* Scoped override: index.html's hero journey component uses a dark, semi-
   transparent variant of .journey-item/.journey-list/.journey-node, distinct
   from the light "roadmap" variant used on career pages. Both share class
   names by historical accident, so this scopes the hero's version by its
   .hero ancestor without needing any HTML changes. */
.hero .journey-list{display:grid;gap:1rem;position:relative;grid-template-columns:1fr;}
.hero .journey-item{position:relative;display:flex;flex-direction:row;gap:1rem;background:rgba(var(--hl-rgb),.05);border:1px solid rgba(var(--hl-rgb),.12);border-radius:var(--radius-md);padding:1.1rem 1.2rem;}
.hero .journey-node{width:38px;height:38px;font-size:.95rem;}
.hero .journey-item h3{color:var(--on-ink-strong);font-size:1.02rem;}
.hero .journey-item p{color:var(--on-ink-muted);font-size:.9rem;}
@media (min-width:1024px){
  .hero-inner{grid-template-columns:1.1fr 1fr;align-items:center;}
  .hero .journey-list::before{content:"";position:absolute;left:19px;top:38px;bottom:38px;width:2px;background:repeating-linear-gradient(to bottom,rgba(232,163,61,.55) 0 6px,transparent 6px 12px);}
}

/* Dark-mode contrast boost for tinted info/warning/pros/cons boxes.
   Their base rgba() tint is tuned for a light background; on dark surfaces
   the same alpha reads a little muddy, so we lift it slightly here. */
[data-theme="dark"] .note{background:rgba(63,167,141,.14);border-color:rgba(63,167,141,.35);}
[data-theme="dark"] .warn{background:rgba(232,103,76,.14);border-color:rgba(232,103,76,.35);}
[data-theme="dark"] .pc-card.pros{background:rgba(63,167,141,.12);}
[data-theme="dark"] .pc-card.cons{background:rgba(232,103,76,.12);}

/* ---------- Read More / Read Less for long plain-text prose blocks ----------
   Applied automatically by JS (see scripts.html) to .prose blocks that
   contain only <p> tags (no lists/tables), so no per-page HTML edits are
   needed. Height is measured at runtime from actual line-height, so it
   adapts to any font-size/viewport instead of using a fixed pixel cutoff. */
.prose.js-readmore{overflow:hidden;position:relative;transition:max-height .35s var(--ease);}
.prose.js-readmore.is-expanded{overflow:visible;}
.readmore-btn{display:inline-flex;align-items:center;gap:.35rem;margin-top:.75rem;padding:.45rem .9rem;font-family:var(--font-body);font-size:.88rem;font-weight:600;color:var(--teal);background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease);}
.readmore-btn:hover,.readmore-btn:focus-visible{background:rgba(31,111,92,.08);border-color:var(--teal);}
.readmore-btn svg{transition:transform .25s var(--ease);}
.readmore-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
[data-theme="dark"] .readmore-btn{color:#5FC9AE;border-color:var(--line);}
[data-theme="dark"] .readmore-btn:hover,[data-theme="dark"] .readmore-btn:focus-visible{background:rgba(95,201,174,.12);}

/* ---------- Career-page identity accents ----------
   These box models (button, eligibility card, subject chips, simple
   table header, prose links) previously had 5 near-duplicate per-stream
   colour blocks. Since --stream-primary/--stream-accent/--stream-soft/
   --stream-border now resolve to the same global gold token everywhere
   (see the stream theme system note near :root), one shared block covers
   every stream identically — this also fixes a leftover inconsistency
   where each stream's dark-mode .btn-primary:hover text colour was still
   hardcoded to that stream's old individual brand colour. */
[data-stream] .btn-primary{color:#fff;}
[data-theme="dark"][data-stream] .btn-primary:hover{color:#241703;}
[data-stream] .elig-card{border-color:var(--stream-border);}
[data-stream] .subject-chips span{border-color:var(--stream-border);color:var(--stream-primary);}
[data-theme="dark"][data-stream] .subject-chips span{color:var(--stream-accent);}
[data-stream] .table-simple th{background:var(--stream-soft);color:var(--stream-primary);}
[data-theme="dark"][data-stream] .table-simple th{color:var(--stream-accent);}
[data-stream] .prose a{color:var(--stream-primary);}
[data-theme="dark"][data-stream] .prose a{color:var(--stream-accent);}

/* ---------- Site search (header button + overlay) ----------
   _includes/career-search.html, opened from .search-trigger in the header
   on every page. Centred command-palette panel: input, category chips,
   ranked results (keyboard navigable), footer hints. */
.search-trigger{display:inline-flex;align-items:center;gap:.5rem;height:42px;padding:0 .55rem 0 .9rem;border-radius:999px;border:1px solid var(--border-surface);background:rgba(var(--hl-rgb),.04);color:var(--on-ink-muted);font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.search-trigger:hover{background:rgba(var(--hl-rgb),.09);color:var(--on-ink-strong);border-color:rgba(var(--hl-rgb),.24);}
.search-trigger:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.search-trigger-text{min-width:4.5rem;text-align:left;}
.search-trigger-kbd,.search-kbd,.search-hints kbd{font-family:var(--font-mono);font-size:.7rem;font-weight:600;line-height:1;padding:.28rem .42rem;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--text-muted);}
.search-trigger-kbd{border-color:var(--border-surface);background:transparent;color:inherit;}
@media (max-width:1199px){
  .search-trigger{width:42px;padding:0;justify-content:center;border-color:transparent;background:transparent;}
  .search-trigger-text,.search-trigger-kbd{display:none;}
}

.search-overlay{position:fixed;inset:0;z-index:950;visibility:hidden;display:flex;justify-content:center;align-items:flex-start;padding:max(4vh,1rem) 1rem 1rem;}
.search-overlay[data-open="true"]{visibility:visible;}
.search-overlay-backdrop{position:absolute;inset:0;background:rgba(11,26,34,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .2s var(--ease);}
.search-overlay[data-open="true"] .search-overlay-backdrop{opacity:1;}
.search-panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:720px;max-height:min(84vh,760px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-10px) scale(.985);opacity:0;transition:transform .2s var(--ease),opacity .2s var(--ease);}
.search-overlay[data-open="true"] .search-panel{transform:none;opacity:1;}

/* Header rows sit above the scrolling results: solid surface, own stacking
   layer, never shrink. The results list (.search-body) is the only scroller
   and paints inside its own box (contain:paint), so rows can't bleed up
   under the input or chips — including in Safari, which can paint
   composited scroll content outside a clipped, rounded parent. */
.search-head{position:relative;z-index:2;flex-shrink:0;display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem .9rem 1.2rem;background:var(--surface);border-bottom:1px solid var(--line);}
.search-head-icon{flex-shrink:0;color:var(--gold-strong);}
[data-theme="dark"] .search-head-icon{color:var(--gold);}
.search-head input{flex:1;min-width:0;border:none;background:transparent;color:var(--text);font:inherit;font-size:1.08rem;padding:.45rem 0;}
.search-head input:focus{outline:none;}
.search-head input::placeholder{color:var(--text-muted);opacity:.85;}
.search-head input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
.search-close{flex-shrink:0;width:36px;height:36px;border-radius:999px;border:none;background:var(--paper);color:var(--text);display:grid;place-items:center;cursor:pointer;}
.search-close:hover{background:var(--line);}
@media (min-width:640px){.search-close{display:none;}}
@media (max-width:639px){.search-kbd{display:none;}}

.search-cats{position:relative;z-index:2;flex-shrink:0;display:flex;gap:.45rem;padding:.75rem 3rem .75rem 1.2rem;background:var(--surface);box-shadow:0 6px 10px -8px rgba(11,26,34,.35);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent);}
.search-cats::-webkit-scrollbar{display:none;}
.search-cat{flex-shrink:0;padding:.38rem .85rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text-muted);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.search-cat:hover{color:var(--text);border-color:var(--text-muted);}
.search-cat[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
[data-theme="dark"] .search-cat[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#241703;}

.search-body{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;contain:paint;isolation:isolate;padding:.75rem .6rem .8rem;}
.search-label{margin:.7rem .6rem .5rem;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.search-chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:0 .6rem .4rem;}
.search-chip{padding:.42rem .8rem;border-radius:var(--radius-sm);border:1px dashed var(--line);background:transparent;color:var(--text);font:inherit;font-size:.86rem;cursor:pointer;}
.search-chip:hover{border-style:solid;border-color:var(--gold);background:var(--stream-soft);}
.search-start{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.5rem;padding:0 .6rem .3rem;}
.search-start a{display:flex;flex-direction:column;gap:.1rem;padding:.75rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);color:var(--text);transition:border-color .15s;}
.search-start a:hover{border-color:var(--gold);}
.search-start strong{font-size:.92rem;}
.search-start span{font-size:.78rem;color:var(--text-muted);}

.search-label-row{display:flex;align-items:center;justify-content:space-between;}
.search-recent-clear{margin:.7rem .6rem .5rem;padding:0;border:none;background:none;color:var(--text-muted);font:inherit;font-size:.78rem;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.search-recent-clear:hover{color:var(--text);}
.search-recent-list{display:grid;gap:2px;padding:0 .2rem .3rem;}
.search-recent-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:var(--radius-sm);color:var(--text);font-size:.92rem;}
.search-recent-item svg{flex-shrink:0;color:var(--text-muted);}
.search-recent-item:hover,.search-recent-item:focus-visible{background:var(--paper);}

.mobile-search{display:flex;align-items:center;gap:.6rem;width:100%;margin:.2rem 0 .6rem;padding:.75rem 1rem;border-radius:999px;border:1px solid var(--border-surface);background:rgba(var(--hl-rgb),.05);color:var(--on-ink-muted);font:inherit;font-size:.95rem;text-align:left;cursor:pointer;}
.mobile-search:hover{color:var(--on-ink-strong);}

.search-results{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.search-result{display:flex;align-items:center;gap:.85rem;padding:.7rem .75rem;border-radius:var(--radius-sm);color:var(--text);}
.search-result > svg{flex-shrink:0;margin-left:auto;color:var(--text-muted);opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s;}
.search-result:hover,.search-result[aria-selected="true"]{background:var(--paper);}
.search-result[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--gold);}
.search-result:hover > svg,.search-result[aria-selected="true"] > svg{opacity:1;transform:none;}
.search-result-main{display:flex;flex-direction:column;min-width:0;}
.search-result-main strong{font-size:.97rem;font-weight:600;line-height:1.3;}
.search-result-main span{font-size:.82rem;color:var(--text-muted);line-height:1.35;}
.search-result mark{background:rgba(201,127,30,.22);color:inherit;border-radius:3px;padding:0 1px;}
.search-result-cat{flex-shrink:0;width:7.6rem;font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.25;color:var(--cat,var(--text-muted));}
.search-result-cat[data-c="guides"],.search-result-cat[data-c="commerce"]{--cat:var(--gold-strong);}
.search-result-cat[data-c="exams"],.search-result-cat[data-c="coaching"]{--cat:var(--rust);}
.search-result-cat[data-c="engineering-science"],.search-result-cat[data-c="technology"]{--cat:var(--slate);}
.search-result-cat[data-c="medical"],.search-result-cat[data-c="colleges"]{--cat:var(--teal);}
.search-result-cat[data-c="arts"]{--cat:var(--plum);}
.search-result-cat[data-c="govt"]{--cat:var(--ink-soft);}
[data-theme="dark"] .search-result-cat[data-c="guides"],[data-theme="dark"] .search-result-cat[data-c="commerce"]{--cat:var(--gold);}
[data-theme="dark"] .search-result-cat[data-c="govt"]{--cat:var(--on-ink-muted);}
@media (max-width:639px){
  .search-result{flex-wrap:wrap;gap:.15rem .6rem;}
  .search-result-cat{width:auto;flex-basis:100%;}
  .search-result > svg{display:none;}
}
.search-status,.search-empty{padding:1.4rem 1rem;color:var(--text-muted);font-size:.92rem;}
.search-empty p{margin:0 0 .4rem;}
.search-empty strong{color:var(--text);}

.search-foot{position:relative;z-index:2;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.2rem;border-top:1px solid var(--line);background:var(--paper);font-size:.78rem;color:var(--text-muted);}
.search-count{font-family:var(--font-mono);}
.search-hints{display:inline-flex;align-items:center;gap:.3rem;}
.search-hints kbd{padding:.18rem .36rem;}
@media (max-width:639px){
  .search-overlay{padding:0;}
  .search-panel{max-width:none;max-height:100%;height:100%;border-radius:0;border:none;}
  .search-hints{display:none;}
}
@media (prefers-reduced-motion:reduce){.search-panel,.search-overlay-backdrop{transition:none;}}

/* ---------- Homepage: Explore by Goal ----------
   Reuses .feature-grid layout and existing card/border/radius tokens; no
   new grid system duplicated. */
.goal-card{padding:1.5rem 1.4rem;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
a.goal-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.goal-card h3{margin:0;font-size:1.05rem;}
.goal-card p{margin:0;color:var(--text-muted);font-size:.92rem;}
.goal-card .goal-link{margin-top:.2rem;font-weight:600;font-size:.88rem;color:var(--gold-strong);}
[data-theme="dark"] .goal-card .goal-link{color:var(--gold);}
.goal-card.is-soon{background:var(--paper);border-style:dashed;cursor:default;}
.soon-badge{display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;}

/* ---------- Official Source link ----------
   Small, reusable citation-style link for placing next to a factual claim
   (salary, fees, eligibility, governing body, exam details, etc.) when a
   genuine official source exists. Plain text link + icon, no heavy badge.
   Intentionally has no relationship to .prose/.table-note/Read More, tables,
   FAQs, myth/fact or pros/cons — safe to drop in anywhere without affecting
   them. */
.source-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.82rem;font-weight:600;color:var(--text-muted);text-decoration:none;border-bottom:1px dashed var(--line);padding-bottom:1px;}
.source-link:hover,.source-link:focus-visible{color:var(--stream-primary);border-bottom-color:var(--stream-border);}
.source-link svg{flex-shrink:0;opacity:.75;}


/* ---------- Section visual (career-page illustration) ----------
   Reusable pattern for a single, purposeful illustration inside a career
   page. Self-contained gradient card (not tied to --surface/--paper), so
   it reads correctly in both light and dark mode without extra rules.
   Not used decoratively on every section — only where a visual genuinely
   helps. Local SVG assets only; no stock photos. */
.section-visual{margin:1.6rem 0 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);}
.section-visual img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover;}

/* ---------- Typography & spacing readability pass ----------
   Additive refinements layered on top of the rules already above: later
   declarations of equal specificity win the cascade, so every existing
   .prose/.block/.section-head variant across page templates is unified
   in one place instead of editing each one individually. Desktop stays
   compact (small text-width tweak only); mobile gets tighter section
   padding and a calibrated paragraph size/line-height so pages read
   easier without needing extra scrolling. Cards, tables, FAQs and
   roadmaps use their own classes and are not touched by this. */
.prose{max-width:700px;}
@media (max-width:767px){
  h1,h2,h3,h4{line-height:1.28;}
  .block{padding:2.75rem 0;}
  .section-head{margin-bottom:1.6rem;}
  .section-head p{margin-top:.6rem;}
  .prose{font-size:1.05rem;line-height:1.68;gap:1rem;}
}

/* ---------- Internal navigation links (exam/college cross-links) ----------
   Distinct from .source-link (used only for official external sources).
   Reusable sitewide for "Explore JEE Main", "Explore B.Tech Colleges" style
   contextual links inside body content, and for the small exam-name link
   inside a dark page-hero meta-row. */
.cx-link{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;font-size:.88rem;font-weight:700;color:var(--stream-primary);text-decoration:none;border-bottom:1px solid var(--stream-border);}
.cx-link:hover,.cx-link:focus-visible{color:var(--stream-accent);border-bottom-color:var(--stream-accent);}
.page-hero .meta-row a{color:var(--link);text-decoration:underline;font-weight:600;}
.page-hero .meta-row a:hover,.page-hero .meta-row a:focus-visible{color:var(--link-hover);}

/* ==========================================================================
   GLOBAL EXAM-LINK STYLE
   Makes a genuine internal link to an exam page (JEE Main, JEE Advanced,
   NEET-UG, CUET-UG, etc.) visually distinguishable from ordinary body text,
   without touching links that already have their own component style
   (.cx-link, .related-card, .source-link, header/footer/breadcrumb nav).
   New exam pages just need to be added to this selector list once.
   ========================================================================== */
a[href="jee-main.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta),
a[href="jee-advanced.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta),
a[href="neet-ug.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta),
a[href="cuet-ug.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta),
a[href="icar-aieea.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta){
  color:var(--text);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--stream-primary);
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
}
a[href="jee-main.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta):hover,
a[href="jee-advanced.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta):hover,
a[href="neet-ug.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta):hover,
a[href="cuet-ug.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta):hover,
a[href="icar-aieea.html"]:not(.cx-link):not(.related-card):not(.source-link):not(.hub-cta):hover{
  color:var(--stream-primary);
  text-decoration-color:var(--stream-accent);
}

/* ==========================================================================
   "ON THIS PAGE" / TOPIC NAVIGATION
   Auto-generated by scripts.html from the page's own headings when a page
   has enough of them to be worth navigating. No per-page markup required.
   Architecture: scripts.html wraps main's existing content in
   .page-nav-content and adds .page-nav as a sibling inside .page-nav-layout,
   which becomes a real two-column CSS grid from 1200px up (content stays
   left and is the same width as before down to that point; the nav column
   is a narrow ~16rem sticky panel that can never overlap content because
   it's a grid column, not a floating box). Below 1200px, the grid
   collapses back to a single column and a compact mobile toggle (inserted
   right after the page's hero) is used instead — the pre-existing compact
   mobile pattern, unchanged in behaviour.
   ========================================================================== */
.page-nav-layout{display:block;}
@media (min-width:1200px){
  .page-nav-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 16rem;
    gap:2.5rem;
    align-items:start;
    max-width:calc(var(--container) + 16rem + 2.5rem);
    margin:0 auto;
    padding:0 1.25rem;
  }
  .page-nav-content{min-width:0;}
}
@media (min-width:1200px) and (max-width:1799.98px){
  .page-nav-layout{grid-template-columns:minmax(0,1fr) 14rem;gap:1.75rem;}
}

.page-nav{
  display:none;
  width:100%;
  max-height:calc(100vh - var(--scroll-offset) - 1.5rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:1rem 1rem 1rem .9rem;
  font-size:.83rem;
  box-shadow:var(--shadow-sm);
}
@media (min-width:1200px){
  .page-nav{
    display:block;
    position:sticky;
    top:var(--scroll-offset);
  }
}
.page-nav h2{
  margin:0 0 .7rem;
  padding-left:.15rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--text-muted);
  font-weight:600;
}
/* One continuous rail; the active item paints its own segment of it. */
.page-nav ol{list-style:none;margin:0;padding:0;counter-reset:pagenav;border-left:2px solid var(--line);}
.page-nav li{counter-increment:pagenav;margin:0;}
.page-nav a{
  display:flex;
  gap:.45rem;
  align-items:baseline;
  padding:.36rem .5rem .36rem .75rem;
  margin-left:-2px;
  color:var(--text-muted);
  text-decoration:none;
  line-height:1.35;
  font-size:.82rem;
  border-left:2px solid transparent;
  border-radius:0 6px 6px 0;
  transition:color .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease);
}
.page-nav a::before{
  content:counter(pagenav, decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  color:var(--text-muted);
  opacity:.75;
  flex-shrink:0;
}
.page-nav a:hover,.page-nav a:focus-visible{color:var(--text);border-left-color:var(--stream-border);}
.page-nav a.is-active{color:var(--text);font-weight:700;border-left-color:var(--gold);background:var(--stream-soft);}
.page-nav a.is-active::before{color:var(--link);opacity:1;}

.page-nav-mobile{display:none;}
@media (max-width:1199.98px){
  .page-nav-mobile{display:block;margin:0 0 1.5rem;}
}
@media (min-width:1200px){
  .page-nav-mobile{display:none !important;}
  .quicknav-bar.has-sidebar-nav{display:none;}
}
.page-nav-mobile-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:.7rem 1rem;
  font-family:inherit;
  font-size:.88rem;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
}
.page-nav-mobile-toggle:hover,.page-nav-mobile-toggle:focus-visible{border-color:var(--gold-strong);}
.page-nav-mobile-toggle svg{transition:transform .18s ease;flex-shrink:0;}
.page-nav-mobile-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.page-nav-mobile-panel{
  display:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  padding:.6rem 1rem .8rem;
  font-size:.88rem;
}
.page-nav-mobile-panel.is-open{display:block;}
.page-nav-mobile-panel ol{list-style:none;margin:0;padding:0;counter-reset:pagenavm;}
.page-nav-mobile-panel li{counter-increment:pagenavm;}
.page-nav-mobile-panel a{display:flex;gap:.5rem;padding:.4rem 0;color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--line);}
.page-nav-mobile-panel li:last-child a{border-bottom:none;}
.page-nav-mobile-panel a::before{content:counter(pagenavm)".";font-weight:700;color:var(--link);flex-shrink:0;}
.page-nav-mobile-panel a.is-active{color:var(--text);font-weight:700;box-shadow:inset 3px 0 0 var(--gold);padding-left:.6rem;}
/* Scroll-spy state on the sticky quicknav chips (set by scripts.html) */
.quicknav a.is-active{color:var(--text);border-color:var(--gold-strong);background:var(--surface);}

/* ==========================================================================
   COLLAPSIBLE CAREER GROUPS — accordion bars (stream hub pages)
   Built by scripts.html from plain markup on the page:
     <h3 class="career-group-heading" data-icon="finance">Title</h3>
     <ul class="career-grid">…career-item links…</ul>
   Each heading + list becomes one full-width bar (.career-group): number
   badge, icon, title, count and chevron. Click to slide the list open,
   click again to slide it closed. Collapsed lists stay in the DOM
   (grid-template-rows 0fr, not display:none) so every career link remains
   crawlable; visibility:hidden keeps them out of the tab order while closed.
   ========================================================================== */
.career-groups{display:grid;gap:.6rem;}
.career-group{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.career-group.is-open{border-color:var(--stream-border);box-shadow:var(--shadow-sm);}

/* Bar layout — phone: count sits under the title so the title gets the full width */
.career-group-head{
  position:relative;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"num icon title chev" "num icon count chev";
  align-items:center;
  column-gap:.7rem;
  row-gap:.1rem;
  padding:.8rem .9rem;
  cursor:pointer;
  transition:background .18s var(--ease);
}
.career-group-head:hover{background:var(--stream-soft);}
.career-group-num{grid-area:num;font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--gold-strong);background:var(--stream-soft);border:1px solid var(--stream-border);border-radius:999px;min-width:2.1rem;padding:.18rem .4rem;text-align:center;}
.career-group-icon{grid-area:icon;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--stream-soft);border:1px solid var(--stream-border);display:grid;place-items:center;color:var(--gold-strong);}
.career-group-head .career-group-heading{grid-area:title;align-self:end;min-width:0;margin:0;padding:0;border:0;font-family:var(--font-display);font-size:.98rem;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--text);scroll-margin-top:calc(var(--scroll-offset) + 1rem);}
.career-group-head .career-group-heading::before{content:none;}
.career-group-count{grid-area:count;align-self:start;font-size:.76rem;font-weight:600;color:var(--text-muted);white-space:nowrap;}
.career-group-chevron{grid-area:chev;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;color:var(--text-muted);transition:transform .32s var(--ease),color .18s,background .18s;}
.career-group.is-open .career-group-chevron{transform:rotate(180deg);color:var(--gold-strong);background:var(--stream-soft);}

/* Bar layout — tablet/desktop: everything on one line */
@media (min-width:640px){
  .career-group-head{
    grid-template-columns:auto auto minmax(0,1fr) auto auto;
    grid-template-areas:"num icon title count chev";
    column-gap:.9rem;
    padding:.95rem 1.25rem;
  }
  .career-group-icon{width:38px;height:38px;}
  .career-group-head .career-group-heading{align-self:center;font-size:1.08rem;}
  .career-group-count{align-self:center;font-size:.8rem;}
}

/* The real <button> lives inside the <h3>; stretch it over the whole bar so any click toggles */
.career-group-toggle{all:unset;cursor:pointer;display:block;}
.career-group-toggle::after{content:"";position:absolute;inset:0;}
.career-group-toggle:focus-visible{outline:none;}
.career-group-toggle:focus-visible::after{outline:3px solid var(--gold);outline-offset:-3px;border-radius:var(--radius-md);}

/* Smooth slide-down / slide-up */
.career-group-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease);}
.career-group.is-open .career-group-panel{grid-template-rows:1fr;}
.career-group-inner{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .32s;}
.career-group.is-open .career-group-inner{visibility:visible;transition-delay:0s;}
.career-group-inner > .career-grid{padding:.9rem .9rem 1rem;border-top:1px solid var(--line);}
@media (min-width:640px){.career-group-inner > .career-grid{padding:1.1rem 1.25rem 1.3rem;}}

/* Career items inside a bar */
.career-group .career-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;}
@media (min-width:640px){.career-group .career-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;}}
.career-group .career-item a{gap:.2rem;padding:.8rem .85rem;}
@media (min-width:640px){.career-group .career-item a{padding:.95rem 1.05rem;}}
.career-group .career-item a:hover{border-color:var(--gold);box-shadow:var(--shadow-sm);}
.career-group .career-item strong{font-size:.92rem;line-height:1.3;}
.career-group .career-item span{font-size:.78rem;line-height:1.4;}
.career-group .career-item .career-cta{display:inline-flex;align-items:center;gap:.3rem;margin-top:auto;padding-top:.55rem;font-size:.78rem;font-weight:700;color:var(--gold-strong);}
.career-group .career-item .career-cta svg{transition:transform .15s var(--ease);}
.career-group .career-item a:hover .career-cta svg{transform:translateX(3px);}
.career-compare-note{margin-top:1.6rem;font-size:.92rem;color:var(--text-muted);}

[data-theme="dark"] .career-group-num,
[data-theme="dark"] .career-group-icon,
[data-theme="dark"] .career-group.is-open .career-group-chevron,
[data-theme="dark"] .career-group .career-item .career-cta{color:var(--gold);}


/* ==========================================================================
   ENTRANCE EXAM CARD
   Reusable component for career pages: highlights a specific relevant exam
   with a short explanation and two clear actions (the exam guide, and
   coaching for it where that destination exists). Distinct from the plain
   .cx-link CTA (used for college-directory links) so a page can show both
   without visual redundancy. Multiple exams on one career page = multiple
   .exam-card items inside the same .exam-card-grid.
   ========================================================================== */
.exam-card-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.4rem 0;}
@media (min-width:640px){.exam-card-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}}
.exam-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;}
.exam-card h3{margin:0;font-size:1.05rem;}
.exam-card p{margin:0;font-size:.9rem;color:var(--text-muted);flex-grow:1;line-height:1.55;}
.exam-card-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem;}
.btn-exam-primary,.btn-exam-secondary{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.5rem 1.1rem;font-size:.85rem;font-weight:700;text-decoration:none;white-space:nowrap;}
.btn-exam-primary{background:var(--gold-strong);color:#fff;}
.btn-exam-primary:hover,.btn-exam-primary:focus-visible{background:var(--gold);}
.btn-exam-secondary{background:var(--stream-soft);color:var(--stream-primary);border:1px solid var(--stream-border);}
.btn-exam-secondary:hover,.btn-exam-secondary:focus-visible{background:var(--stream-border);}

/* Sub-heading inside a .block section (government exam guides): separates
   several tables / grids that share one h2 section, e.g. "Tier 1" and
   "Tier 2" under "Exam pattern". */
.block-subhead{margin:2.2rem 0 .8rem;font-size:1.1rem;}
.section-head + .block-subhead{margin-top:.2rem;}
.block-subhead + .table-wrap{margin-top:0;}

/* ==========================================================================
   VISUAL CARD COMPONENTS — site-wide (exam guides, stream and goal hubs)
   .card-grid      responsive grid wrapper for any of the cards below
   .info-card      icon + title + short text (rules, roles, syllabus areas)
   .feature-card   larger card with a gold top accent; holds a numbered
                   kicker, title, stat badges, step lists or a table.
                   Scoped to .card-grid so the older homepage/about
                   .feature-card (inside .feature-grid) is untouched.
   .stat-badge     compact label/value pill (questions, marks, time…)
   .highlight-box  tinted callout with a left accent bar (quick answers)
   All colours come from the shared tokens, so light/dark both work.
   ========================================================================== */
.card-grid{display:grid;gap:1rem;grid-template-columns:1fr;}
@media (min-width:640px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1000px){.card-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.card-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}}
.card-grid + .card-grid,.card-grid + .table-note{margin-top:1rem;}

.info-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
/* Shared hover for every small content card, old (.chip-grid .item) and new (.info-card). */
.info-card:hover,.chip-grid .item:hover{border-color:var(--stream-border);box-shadow:var(--shadow-sm);}
.info-card-head{display:flex;align-items:center;gap:.65rem;}
.info-card-icon{flex-shrink:0;width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--stream-soft);border:1px solid var(--stream-border);color:var(--gold-strong);}
.info-card h3,.info-card h4{margin:0;font-size:.98rem;line-height:1.3;}
.info-card p{margin:0;font-size:.9rem;line-height:1.55;color:var(--text-muted);}
.info-card .subject-chips{margin:.2rem 0 0;gap:.35rem;}
.info-card .subject-chips span{font-size:.76rem;padding:.25rem .6rem;}

.card-grid .feature-card{position:relative;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--radius-md);padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;min-width:0;}
.card-grid .feature-card-kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-strong);}
.card-grid .feature-card-num{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .35rem;border-radius:999px;background:var(--stream-soft);border:1px solid var(--stream-border);font-size:.72rem;}
.card-grid .feature-card h3,.card-grid .feature-card h4{margin:0;font-size:1.05rem;line-height:1.3;}
.card-grid .feature-card p{margin:0;font-size:.9rem;line-height:1.55;color:var(--text-muted);}
.card-grid .feature-card .table-wrap{margin-top:.2rem;}
.card-grid .feature-card .table-note{margin:.2rem 0 0;}
.card-grid .feature-steps{margin:0;padding:0;list-style:none;display:grid;gap:.55rem;counter-reset:fstep;}
.card-grid .feature-steps li{position:relative;padding-left:2rem;font-size:.9rem;line-height:1.5;color:var(--text);counter-increment:fstep;}
.card-grid .feature-steps li::before{content:counter(fstep);position:absolute;left:0;top:.05rem;width:1.4rem;height:1.4rem;border-radius:999px;display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem;font-weight:700;background:var(--stream-soft);border:1px solid var(--stream-border);color:var(--gold-strong);}
.card-grid .feature-card.span-all{grid-column:1 / -1;}

.stat-badges{display:flex;flex-wrap:wrap;gap:.5rem;}
.section-head + .stat-badges{margin:0 0 1.4rem;}
.stat-badge{display:inline-flex;flex-direction:column;gap:.1rem;padding:.45rem .75rem;border-radius:var(--radius-sm);background:var(--stream-soft);border:1px solid var(--stream-border);min-width:5.5rem;}
.stat-badge span{font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.stat-badge strong{font-family:var(--font-mono);font-size:.92rem;line-height:1.25;color:var(--gold-strong);}
.stat-badge.is-tag{flex-direction:row;align-items:center;min-width:0;padding:.25rem .65rem;border-radius:999px;font-size:.72rem;font-weight:700;color:var(--gold-strong);}

.highlight-box{background:var(--stream-soft);border:1px solid var(--stream-border);border-left:4px solid var(--gold);border-radius:var(--radius-md);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;}
.highlight-box h3,.highlight-box h4{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1rem;line-height:1.3;}
.highlight-box h3 svg,.highlight-box h4 svg{flex-shrink:0;color:var(--gold-strong);}
.highlight-box p{margin:0;font-size:.92rem;line-height:1.55;color:var(--text);}
.highlight-box ul{margin:0;padding-left:1.15rem;display:grid;gap:.35rem;font-size:.92rem;line-height:1.5;color:var(--text);}
.highlight-box ul li{list-style:disc;}

[data-theme="dark"] .info-card-icon,
[data-theme="dark"] .card-grid .feature-card-kicker,
[data-theme="dark"] .card-grid .feature-steps li::before,
[data-theme="dark"] .stat-badge strong,
[data-theme="dark"] .stat-badge.is-tag,
[data-theme="dark"] .highlight-box h3 svg,[data-theme="dark"] .highlight-box h4 svg{color:var(--gold);}

/* .chip-links — pill-shaped links (jump links, backup careers).
   .fit-y / .fit-p / .fit-n — stream-fit status on a .stat-badge.is-tag. */
.chip-links{display:flex;flex-wrap:wrap;gap:.45rem;}
.chip-links a{display:inline-flex;align-items:center;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--stream-border);background:var(--surface);font-size:.82rem;font-weight:600;color:var(--text);text-decoration:none;transition:border-color .15s var(--ease),background .15s var(--ease);}
.chip-links a:hover,.chip-links a:focus-visible{border-color:var(--gold);background:var(--stream-soft);}
.highlight-box .chip-links{margin-top:.3rem;}
.block-subhead + .chip-links,.block-subhead + .highlight-box{margin-top:0;}
.chip-links + .highlight-box,.stat-badges + .highlight-box{margin-top:1.4rem;}
.stat-badge.fit-y{color:var(--teal);border-color:var(--teal);background:transparent;}
.stat-badge.fit-p{color:var(--gold-strong);}
.stat-badge.fit-n{color:var(--rust);border-color:var(--rust);background:transparent;}
[data-theme="dark"] .stat-badge.fit-y{color:var(--teal);}
[data-theme="dark"] .stat-badge.fit-n{color:var(--rust);}

/* ==========================================================================
   CAREER FIT QUIZ (career-fit.html)
   Small reusable component set for a client-side, no-backend guidance
   quiz: pill-style option chips (checkbox/radio, same visual language as
   .tab-btn), a results grid, and a "why this matched" chip list. All
   scoring runs in the browser from a small in-page data array — nothing
   is submitted anywhere, and every result links to a real, already-
   existing career page (never invented).
   ========================================================================== */
.fit-step{margin-bottom:2.2rem;}
.fit-step:last-child{margin-bottom:0;}
.fit-step-label{display:block;font-weight:700;font-size:1rem;margin-bottom:.3rem;}
.fit-step-hint{font-size:.85rem;color:var(--text-muted);margin:0 0 .9rem;}
.fit-options{display:flex;flex-wrap:wrap;gap:.6rem;}
.fit-option{position:relative;}
.fit-option input{position:absolute;opacity:0;width:1px;height:1px;}
.fit-option label{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--text-muted);font-weight:600;font-size:.88rem;
  cursor:pointer;transition:all .15s;
}
.fit-option input:checked + label{background:var(--ink);color:#fff;border-color:var(--ink);}
.fit-option input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px;}
.fit-option label:hover{border-color:var(--gold-strong);}

.fit-submit-row{display:flex;justify-content:center;margin-top:1.2rem;}
.btn-fit-submit{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--gold-strong);color:#fff;
  border:none;border-radius:999px;padding:.9rem 2rem;font-size:.98rem;font-weight:700;
  cursor:pointer;font-family:inherit;
}
.btn-fit-submit:hover,.btn-fit-submit:focus-visible{background:var(--gold);}

.fit-results{display:none;}
.fit-results.is-visible{display:block;}
.fit-results-empty{display:none;padding:1.2rem 1.4rem;border:1px dashed var(--line);border-radius:var(--radius-md);background:var(--paper);color:var(--text-muted);font-size:.92rem;}
.fit-results-empty.is-visible{display:block;}
.fit-result-grid{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:1rem;}
@media (min-width:720px){.fit-result-grid{grid-template-columns:repeat(2,1fr);}}
.fit-result-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;}
.fit-result-rank{display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;}
.fit-result-card h3{margin:0;font-size:1.08rem;}
.fit-result-card .fit-stream{font-size:.78rem;color:var(--text-muted);font-weight:600;}
.fit-result-why{font-size:.86rem;color:var(--text-muted);line-height:1.5;margin:0;}
.fit-result-why strong{color:var(--text);}
.fit-result-card a.fit-explore{align-self:flex-start;margin-top:.2rem;font-size:.85rem;font-weight:700;color:var(--stream-primary);text-decoration:underline;}

/* ==========================================================================
   SITE-WIDE UX CONSISTENCY LAYER
   Theme-aware link states, focus ring, and the CTA hierarchy.
   CTA hierarchy (use <a> for navigation, <button> only for actions):
     Primary    .btn.btn-primary / .btn-exam-primary  — one per section
     Secondary  .btn.btn-ghost  / .btn-exam-secondary — alternative route
     Tertiary   .cx-link                              — inline "go deeper" text link
     External   .source-link                          — official external source
   ========================================================================== */
a:visited{color:inherit;}
.prose a,.prose a:visited{color:var(--link);}
.prose a:hover,.prose a:focus-visible{color:var(--link-hover);}
[data-theme="dark"] .prose a,[data-theme="dark"][data-stream] .prose a{color:var(--link);}
[data-stream] .prose a{color:var(--link);}
.cx-link,.cx-link:visited{color:var(--link);border-bottom-color:currentColor;}
.cx-link:hover,.cx-link:focus-visible{color:var(--link-hover);border-bottom-color:currentColor;}
.source-link,.source-link:visited{color:var(--text-muted);}
.source-link:hover,.source-link:focus-visible{color:var(--link);border-bottom-style:solid;border-bottom-color:currentColor;}
.eyebrow,[data-theme="dark"] .eyebrow{color:var(--accent-on-surface);}
.page-hero .meta-row a:visited{color:var(--link);}

/* Keyboard focus: one visible ring, readable on light and dark surfaces */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent-on-surface);outline-offset:2px;border-radius:6px;
}
.site-footer a:focus-visible,.hero a:focus-visible,.page-hero a:focus-visible{outline-color:var(--accent-on-surface);}

/* Header / footer / breadcrumb links: readable in every state, both themes */
.nav-links a:hover,.nav-links a:focus-visible,.breadcrumb a:hover,.breadcrumb a:focus-visible,.footer-col a:hover,.footer-col a:focus-visible{color:var(--on-ink-strong);text-decoration:underline;text-underline-offset:3px;}
.footer-col a,.breadcrumb a{color:var(--on-ink-muted);}
.footer-col a:visited,.breadcrumb a:visited,.nav-links a:visited{color:var(--on-ink-muted);}
.nav-links a[aria-current="page"]{color:var(--on-ink-strong);box-shadow:inset 0 -2px 0 var(--accent-on-surface);}

/* Secondary CTA: clearly a button in both themes */
.btn-ghost{border-color:rgba(var(--hl-rgb),.45);}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--accent-on-surface);background:rgba(var(--hl-rgb),.08);color:var(--on-ink-strong);}
.btn{min-height:44px;justify-content:center;}
.btn-primary:hover,.btn-primary:focus-visible,[data-stream] .btn-primary:hover{background:var(--stream-primary);color:#fff;}
[data-theme="dark"] .btn-primary:hover,[data-theme="dark"] .btn-primary:focus-visible,[data-theme="dark"][data-stream] .btn-primary:hover{background:#F0B65A;color:#241703;}

/* Destination cards must look (and behave) clickable */
a.related-card,a.cx-card,a.cx-college-card,a.goal-card,a.stream-link{cursor:pointer;color:inherit;}
a.related-card:hover,a.related-card:focus-visible,a.cx-card:hover,a.cx-card:focus-visible,a.goal-card:hover,a.goal-card:focus-visible{
  border-color:var(--accent-on-surface);box-shadow:var(--shadow-md);transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){a.related-card:hover,a.cx-card:hover,a.goal-card:hover,.btn:hover{transform:none;}}

/* Button text must never inherit link colours (global exam-link rule, stream rules) */
.btn-primary,[data-stream] .btn-primary{color:#241703;}
.btn-primary:hover,.btn-primary:focus-visible,[data-stream] .btn-primary:hover{color:#fff;}
[data-theme="dark"] .btn-primary:hover,[data-theme="dark"] .btn-primary:focus-visible,[data-theme="dark"][data-stream] .btn-primary:hover{color:#241703;}
a.btn-exam-primary,a.btn-exam-primary:visited{color:#fff !important;text-decoration:none !important;}
a.btn-exam-primary:hover,a.btn-exam-primary:focus-visible{background:#6F4107;color:#fff !important;}
[data-theme="dark"] a.btn-exam-primary:hover,[data-theme="dark"] a.btn-exam-primary:focus-visible{background:var(--gold);color:#241703 !important;}
a.btn-exam-secondary,a.btn-exam-secondary:visited{color:var(--link) !important;text-decoration:none !important;}
.btn-fit-submit:hover,.btn-fit-submit:focus-visible{background:#6F4107;color:#fff;}
[data-theme="dark"] .btn-fit-submit:hover,[data-theme="dark"] .btn-fit-submit:focus-visible{background:var(--gold);color:#241703;}
[data-theme="dark"] .s-commerce .stream-link{color:var(--gold);}

/* Long unbroken strings (emails, "B.A/B.Sc") must wrap instead of widening grid tracks on phones */
main li,main p,main h2,main h3,.email-pill,.elig-card,.contact-card{overflow-wrap:anywhere;}
[class*="grid"]>*,.container>*{min-width:0;}

/* ==========================================================================
   PAGE COMPONENTS
   Formerly per-page <style> blocks and _includes/discovery-styles.html:
     .cx-*                        college / coaching finder pages
     .examx-*                     exam pages (JEE, NEET, CUET) + colleges-btech
     .goalx-*, .pathflow, .decision-*   after-12th.html
     .self-*                      after-10th.html
   Kept at the end of this file so they cascade exactly as they did when they
   were inlined after this stylesheet.
   ========================================================================== */

/* Shared surface card: every card-like component starts from this */
.cx-card,.cx-college-card,.examx-card,.examx-qf,.goalx-card,.decision-card,.self-item,.pathflow-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);}

/* Shared responsive grids */
.cx-grid,.goalx-grid{display:grid;gap:1.1rem;grid-template-columns:1fr;}
@media (min-width:640px){.cx-grid,.goalx-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.cx-grid,.goalx-grid{grid-template-columns:repeat(3,1fr);}}
.examx-grid,.decision-grid{display:grid;gap:1rem;grid-template-columns:1fr;}
@media (min-width:640px){.examx-grid,.decision-grid{grid-template-columns:repeat(2,1fr);}}
.self-grid{display:grid;gap:.9rem;grid-template-columns:1fr;}
@media (min-width:640px){.self-grid{grid-template-columns:repeat(2,1fr);}}

/* Shared pill-link row */
.examx-links,.goalx-links{display:flex;flex-wrap:wrap;gap:.5rem;}
.examx-links{margin-top:1rem;}
.examx-links a,.goalx-links a{font-size:.85rem;font-weight:600;color:var(--stream-primary);background:var(--stream-soft);border:1px solid var(--stream-border);border-radius:999px;padding:.35rem .8rem;text-decoration:none;}
.examx-links a:hover,.examx-links a:focus-visible,.goalx-links a:hover,.goalx-links a:focus-visible{background:var(--stream-border);}

/* Finder pages (colleges-*, coaching-*) */
.cx-stream-grid{display:grid;gap:1.2rem;grid-template-columns:1fr;}
@media (min-width:640px){.cx-stream-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.cx-stream-grid{grid-template-columns:repeat(5,1fr);}}
.cx-card{padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;}
.cx-card h3{margin:0;font-size:1rem;}
.cx-card p{margin:0;font-size:.88rem;color:var(--text-muted);}
.cx-card .cx-cta{font-size:.85rem;font-weight:700;color:var(--stream-primary);}
.cx-card.is-soon{background:var(--paper);border-style:dashed;}
.cx-soon-badge{display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.2rem .55rem;}
.cx-college-card{padding:1.2rem 1.3rem;}
.cx-college-card h3{margin:0 0 .3rem;font-size:1rem;}
.cx-college-card .cx-tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--stream-primary);background:var(--stream-soft);border:1px solid var(--stream-border);border-radius:999px;padding:.15rem .55rem;margin-bottom:.5rem;}
.cx-college-card p{margin:.4rem 0 0;font-size:.88rem;color:var(--text-muted);}

/* Exam pages */
.examx-card{padding:1.1rem 1.3rem;}
.examx-card h3{margin:0 0 .4rem;font-size:1rem;}
.examx-card p{margin:0;font-size:.9rem;color:var(--text-muted);}
.examx-quickfacts{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr);margin-top:1.4rem;}
@media (min-width:640px){.examx-quickfacts{grid-template-columns:repeat(4,1fr);}}
.examx-qf{padding:.9rem 1rem;text-align:center;}
.examx-qf span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.3rem;}
.examx-qf strong{font-size:.92rem;}

/* After 12th: goals, path flow, decision cards */
.goalx-card{padding:1.3rem 1.4rem;}
.goalx-card h3{margin:0 0 .4rem;font-size:1.05rem;}
.goalx-card p{margin:0 0 .8rem;font-size:.9rem;color:var(--text-muted);}
.pathflow{display:flex;flex-direction:column;gap:0;max-width:480px;margin:0 auto;}
.pathflow-step{padding:.9rem 1.2rem;text-align:center;font-weight:600;font-size:.94rem;}
.pathflow-arrow{text-align:center;color:var(--text-muted);font-size:1.1rem;padding:.15rem 0;}
.decision-card{padding:1.2rem 1.3rem;}
.decision-card p{margin:0 0 .7rem;font-size:.92rem;color:var(--text-muted);}
.decision-card a{font-weight:700;font-size:.9rem;color:var(--stream-primary);}

/* After 10th: self-check list */
.self-item{padding:1.1rem 1.3rem;display:flex;gap:.8rem;align-items:flex-start;}
.self-item svg{flex-shrink:0;color:var(--gold-strong);margin-top:.15rem;}
[data-theme="dark"] .self-item svg{color:var(--gold);}
.self-item p{font-size:.94rem;color:var(--text-muted);}
.self-item strong{color:var(--text);}

/* Spacing utilities for one-off gaps (replaces inline style="margin-top:…").
   !important keeps the precedence the inline style had. */
.mt-md{margin-top:1rem !important;}
.mt-lg{margin-top:1.5rem !important;}
.mt-0{margin-top:0 !important;}
.mt-sm{margin-top:.5rem !important;}
.mt-xl{margin-top:2.2rem !important;}
.mb-lg{margin-bottom:1.4rem !important;}
.text-center{text-align:center;}
/* Compact section heading used inside a card/column (contact page). */
.section-head.compact{margin-bottom:1.2rem;}
.section-head.compact h2{font-size:1.3rem;margin-top:.5rem;}

/* ==========================================================================
   SALARY RANKING COLLAPSE (stream hubs: #ranking)
   Top 5 rows visible by default; .rank-toggle (JS in _includes/scripts.html)
   adds .is-expanded to reveal the rest with a short fade-in.
   ========================================================================== */
.rank-collapse:not(.is-expanded) tbody tr:nth-child(n+6){display:none;}
.rank-collapse.is-expanded tbody tr:nth-child(n+6){animation:fxIn .35s var(--ease) both;}
@keyframes fxIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.rank-toggle{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:44px;margin-top:.75rem;padding:.7rem 1.2rem;border:1px dashed var(--stream-border);border-radius:var(--radius-md);background:var(--stream-soft);color:var(--link);font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease);}
.rank-toggle:hover,.rank-toggle:focus-visible{background:var(--surface);border-style:solid;border-color:var(--accent-on-surface);}
.rank-toggle svg{transition:transform .25s var(--ease);flex-shrink:0;}
.rank-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){.rank-collapse.is-expanded tbody tr{animation:none;}.rank-toggle svg{transition:none;}}

/* ==========================================================================
   HUB CTAs (career-page hero, _includes/hub-ctas.html)
   Required entrance exam + "Find coaching" / "Explore colleges" cards.
   ========================================================================== */
.hub-ctas{margin-top:1.4rem;}
.hub-ctas-exam{margin:0 0 .8rem;font-size:.95rem;color:var(--on-ink);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;}
.hub-ctas-exam>span:first-child{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-muted);background:rgba(var(--hl-rgb),.07);border:1px solid var(--border-surface);border-radius:999px;padding:.2rem .6rem;}
.hub-ctas-exam strong{font-weight:700;}
.hub-ctas-exam em{font-style:normal;color:var(--on-ink-muted);font-size:.88rem;}
.hub-cta-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));}
a.hub-cta,a.hub-cta:visited{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--stream-accent);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);color:var(--text);text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);}
a.hub-cta:hover,a.hub-cta:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent-on-surface);}
.hub-cta-icon{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--stream-soft);color:var(--stream-primary);}
.hub-cta-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1;}
.hub-cta-text strong{font-size:1rem;line-height:1.3;}
.hub-cta-text span{font-size:.84rem;color:var(--text-muted);}
.hub-cta-arrow{flex-shrink:0;color:var(--stream-primary);transition:transform .18s var(--ease);}
a.hub-cta:hover .hub-cta-arrow{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){a.hub-cta:hover,a.hub-cta:hover .hub-cta-arrow{transform:none;}}

/* ==========================================================================
   COACHING & COLLEGE FINDER (_includes/finder.html, JS in discovery-search)
   ========================================================================== */
.fx-controls{display:grid;gap:1.1rem;grid-template-columns:1fr;padding:1.2rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:1rem;}
@media (min-width:768px){.fx-controls{grid-template-columns:minmax(220px,300px) 1fr;align-items:start;}.fx-controls .fx-step:only-child{grid-column:1/-1;}}
.fx-label{display:flex;align-items:center;gap:.5rem;margin:0 0 .55rem;font-weight:700;font-size:.92rem;color:var(--text);}
.fx-num{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--stream-accent);color:#241703;font-family:var(--font-mono);font-size:.75rem;font-weight:600;}
.fx-select{width:100%;min-height:44px;padding:.6rem 2.4rem .6rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394ACA7' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center;color:var(--text);font:inherit;font-size:.95rem;font-weight:600;appearance:none;-webkit-appearance:none;cursor:pointer;}
.fx-pills{display:flex;flex-wrap:wrap;gap:.5rem;}
.fx-pill{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .95rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--text);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease);}
.fx-pill:hover{border-color:var(--stream-border);background:var(--stream-soft);}
.fx-pill[aria-pressed="true"]{background:var(--stream-accent);border-color:var(--stream-accent);color:#241703;}
.fx-pill[hidden]{display:none;}
.fx-pill-count{font-family:var(--font-mono);font-size:.72rem;padding:.05rem .4rem;border-radius:999px;background:rgba(var(--hl-rgb),.08);}
.fx-pill[aria-pressed="true"] .fx-pill-count{background:rgba(255,255,255,.45);}
.fx-count{margin:0 0 1rem;font-size:.88rem;font-weight:600;color:var(--text-muted);}
.fx-card{display:flex;flex-direction:column;gap:.55rem;box-shadow:var(--shadow-sm);transition:box-shadow .18s var(--ease);}
.fx-card:hover{box-shadow:var(--shadow-md);}
.fx-card[hidden]{display:none;}
.fx-card.fx-in{animation:fxIn .3s var(--ease) both;}
.fx-card.is-featured{border:2px solid var(--stream-accent);}
.cx-college-card.fx-card h3{margin:0;font-size:1.02rem;line-height:1.35;}
.cx-college-card.fx-card p{margin:0;}
.fx-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;}
.cx-college-card .fx-card-top .cx-tag{margin-bottom:0;}
.cx-college-card .fx-own-private{color:var(--slate);background:rgba(61,90,128,.10);border-color:rgba(61,90,128,.30);}
.cx-college-card .fx-own-deemed{color:var(--plum);background:rgba(139,75,107,.10);border-color:rgba(139,75,107,.30);}
.fx-subtag{font-size:.72rem;font-weight:600;color:var(--text-muted);border:1px solid var(--line);border-radius:999px;padding:.12rem .5rem;}
.fx-featured{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#241703;background:var(--gold);border-radius:999px;padding:.18rem .55rem;}
.fx-loc{display:inline-flex;align-items:center;gap:.25rem;margin-left:auto;font-size:.78rem;font-weight:600;color:var(--text-muted);}
.fx-facts{margin:.2rem 0 0;display:grid;gap:.55rem;}
.fx-facts>div{display:grid;gap:.25rem;}
.fx-facts dt{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.fx-facts dd{margin:0;font-size:.88rem;color:var(--text);line-height:1.5;}
.fx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;}
.fx-chips li{font-size:.78rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);}
.fx-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.6rem;}
.fx-actions .btn-exam-primary,.fx-actions .btn-exam-secondary{min-height:44px;white-space:normal;}
.fx-more[open]{flex-basis:100%;}
.fx-more summary{list-style:none;cursor:pointer;display:inline-flex;}
.fx-more summary::-webkit-details-marker{display:none;}
.fx-more-body{margin-top:.6rem;padding:.8rem .9rem;border-radius:var(--radius-sm);background:var(--paper);border:1px solid var(--line);font-size:.85rem;color:var(--text-muted);}
.fx-more-body p{margin:0 0 .4rem;font-size:.85rem;}
.fx-more-body ul{margin:0;padding-left:1.1rem;display:grid;gap:.2rem;}
@media (prefers-reduced-motion:reduce){.fx-card.fx-in{animation:none;}}

/* ==========================================================================
   CONTENT LINKS — one treatment for every inline link inside running text
   (prose, hero intro, notes, table cells and notes, FAQ answers, callouts):
   link colour + always-visible soft underline that firms up on hover, so no
   link ever reads as plain text. Classed links (cards, chips, buttons) keep
   their own component styles.
   ========================================================================== */
main :is(.prose, .page-hero-inner > p, .note, .table-note, .career-compare-note, .faq-a, .highlight-box, .feature-card, .elig-card, .table-simple td, .callout) a:not([class]),
main :is(.prose, .page-hero-inner > p, .note, .table-note, .career-compare-note, .faq-a, .highlight-box, .feature-card, .elig-card, .table-simple td, .callout) a:not([class]):visited{
  color:var(--link);
  font-weight:600;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset:3px;
  transition:color .15s var(--ease),text-decoration-color .15s var(--ease);
}
main :is(.prose, .page-hero-inner > p, .note, .table-note, .career-compare-note, .faq-a, .highlight-box, .feature-card, .elig-card, .table-simple td, .callout) a:not([class]):is(:hover, :focus-visible){
  color:var(--link-hover);
  text-decoration-color:currentColor;
  text-decoration-thickness:2px;
}

/* ==========================================================================
   TABLES — zebra rows, sticky-feel header, and a right-edge fade hint while
   a wide table still has content to scroll to (pure CSS scroll shadows).
   ========================================================================== */
.table-wrap{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(var(--hl-rgb),.16), transparent) left center / .9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(var(--hl-rgb),.16), transparent) right center / .9rem 100% no-repeat scroll,
    var(--surface);
}
.table-simple{background:transparent;}
.table-simple tbody tr:nth-child(even){background:color-mix(in srgb, var(--paper) 70%, transparent);}
.table-simple tbody tr:hover{background:var(--stream-soft);}
.table-simple th{line-height:1.35;}
.table-simple td{color:var(--text);}