.pge-fam{--pge-ui-p:#1b3beb;--pge-ui-ink:#0f172a;--pge-ui-mut:#64748b;--pge-ui-line:#e2e8f0;max-width:1080px;margin:0 auto;padding:18px 16px 56px;color:var(--pge-ui-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.pge-fam *{box-sizing:border-box;}
.pge-fam__crumbs{font-size:13px;color:var(--pge-ui-mut);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pge-fam__crumbs a{color:var(--pge-ui-p);text-decoration:none;}
.pge-fam__crumbs a:hover{text-decoration:underline;}

/* ── HERO ── */
.pge-fam__hero{position:relative;border-radius:28px;overflow:hidden;color:#fff;padding:44px 36px;margin-bottom:34px;
 background:linear-gradient(135deg,var(--pge-ui-p) 0%,color-mix(in srgb,var(--pge-ui-p) 55%,#000) 100%);}
.pge-fam__hero::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 360px at 88% -12%,rgba(255,255,255,.20),transparent 60%);pointer-events:none;}
.pge-fam__hero-in{position:relative;z-index:1;max-width:760px;}
.pge-fam__hero--stage{padding:38px 36px;}
.pge-fam__eyebrow{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.92;margin-bottom:10px;}
.pge-fam__title{font-size:clamp(32px,4.4vw,46px);line-height:1.04;font-weight:900;margin:0 0 12px;letter-spacing:-.02em;}
.pge-fam__title-sub{font-weight:600;opacity:.78;font-size:.62em;display:inline-block;}
.pge-fam__lead{font-size:17px;line-height:1.6;opacity:.95;margin:0 0 22px;max-width:620px;}
.pge-fam__stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;align-items:center;}
.pge-fam__stat{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:12px 18px;min-width:96px;}
.pge-fam__stat-n{display:block;font-size:26px;font-weight:850;line-height:1;}
.pge-fam__stat-l{display:block;font-size:12px;opacity:.85;margin-top:4px;}
.pge-fam__cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.pge-fam__cta-row--center{justify-content:center;}
.pge-fam__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;cursor:pointer;border:0;}
.pge-fam__btn--primary{background:#fff;color:var(--pge-ui-p);box-shadow:0 8px 22px rgba(0,0,0,.18);}
.pge-fam__btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.24);}
.pge-fam__btn--ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);}
.pge-fam__btn--ghost:hover{background:rgba(255,255,255,.2);}
.pge-fam__btn--ghost-dark{background:transparent;color:var(--pge-ui-p);border:1.5px solid var(--pge-ui-p);}
.pge-fam__btn--ghost-dark:hover{background:color-mix(in srgb,var(--pge-ui-p) 8%,#fff);}
.pge-fam__trust{list-style:none;display:flex;gap:18px;flex-wrap:wrap;margin:22px 0 0;padding:0;font-size:13px;opacity:.92;}
.pge-fam__trust li{white-space:nowrap;}

/* ── SECTIONS ── */
.pge-fam__section{margin:0 0 30px;}
.pge-fam__sec-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.pge-fam__sec-head h2{font-size:21px;font-weight:800;margin:0;letter-spacing:-.01em;}
.pge-fam__sec-head h2 a{color:var(--pge-ui-ink);text-decoration:none;}
.pge-fam__sec-head h2 a:hover{color:var(--pge-ui-p);}
.pge-fam__sec-count{font-size:13px;color:var(--pge-ui-mut);}
.pge-fam__sec-link{margin-left:auto;font-size:13px;font-weight:600;color:var(--pge-ui-p);text-decoration:none;}
.pge-fam__sec-link:hover{text-decoration:underline;}
.pge-fam__chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:#f1f5f9;color:#475569;text-transform:capitalize;}
.pge-fam__chip--hero{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);}

/* ── PAPER CARDS ── */
.pge-fam__papers{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:14px;}
.pge-fam__paper{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:18px;border:1.5px solid var(--pge-ui-line);border-radius:18px;background:#fff;text-decoration:none;transition:transform .14s,box-shadow .14s,border-color .14s;box-shadow:0 1px 2px rgba(0,0,0,.03);}
.pge-fam__paper:hover{transform:translateY(-3px);border-color:var(--pge-ui-p);box-shadow:0 12px 28px rgba(15,23,42,.10);}
.pge-fam__paper-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pge-fam__paper-no{font-size:11px;font-weight:800;color:var(--pge-ui-p);text-transform:uppercase;letter-spacing:.05em;}
.pge-fam__paper-ic{font-size:22px;line-height:1;}
.pge-fam__paper-title{font-size:17px;font-weight:800;color:var(--pge-ui-ink);line-height:1.3;letter-spacing:-.01em;}
.pge-fam__paper-meta{font-size:12.5px;color:var(--pge-ui-mut);line-height:1.5;}
.pge-fam__paper-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.pge-fam__meta-tag{font-size:11.5px;color:var(--pge-ui-mut);}
.pge-fam__start{font-size:13px;font-weight:700;color:var(--pge-ui-p);margin-left:auto;}
.pge-fam__pill{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;}
.pge-fam__pill--free{background:#dcfce7;color:#166534;}
.pge-fam__pill--prem{background:#fef3c7;color:#92400e;}

/* ── SCHEDULE (multi-day stages) ── */
.pge-fam__schedule{display:flex;flex-direction:column;gap:8px;margin-bottom:30px;}
.pge-fam__day{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--pge-ui-line);}
.pge-fam__day:first-child{border-top:0;}
.pge-fam__day-rail{display:flex;align-items:center;gap:10px;}
.pge-fam__day-dot{width:12px;height:12px;border-radius:50%;background:var(--pge-ui-p);box-shadow:0 0 0 4px color-mix(in srgb,var(--pge-ui-p) 18%,#fff);}
.pge-fam__day-label{font-size:15px;font-weight:800;color:var(--pge-ui-ink);}

/* ── GRADE SWITCHER ──
   Panels are hidden with [hidden] by the script, so with no JavaScript every
   panel stays visible and the page degrades to the stacked list it was. */
.pge-fam__picker{margin:0 0 34px;}
.pge-fam__picker-h{font-size:21px;font-weight:800;margin:0 0 14px;letter-spacing:-.01em;}
.pge-fam__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.pge-fam__tab{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:1.5px solid var(--pge-ui-line);border-radius:999px;background:#fff;
 font-size:14.5px;font-weight:700;color:var(--pge-ui-ink);text-decoration:none;cursor:pointer;transition:background .14s,border-color .14s,color .14s;}
.pge-fam__tab:hover{border-color:var(--pge-ui-p);color:var(--pge-ui-p);}
.pge-fam__tab.is-active{background:var(--pge-ui-p);border-color:var(--pge-ui-p);color:#fff;}
.pge-fam__tab:focus-visible{outline:2px solid var(--pge-ui-p);outline-offset:2px;}
.pge-fam__tab-n{font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:#f1f5f9;color:#475569;}
.pge-fam__tab.is-active .pge-fam__tab-n{background:rgba(255,255,255,.26);color:#fff;}
.pge-fam__panel{margin:0 0 22px;}
.pge-fam__panel[hidden]{display:none;}
.pge-fam__panel:focus-visible{outline:2px solid var(--pge-ui-p);outline-offset:6px;border-radius:12px;}
.pge-fam__panel-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:18px;font-weight:800;margin:0 0 14px;}
.pge-fam__panel-more{margin:14px 0 0;font-size:13.5px;}
.pge-fam__panel-more a{color:var(--pge-ui-p);font-weight:600;text-decoration:none;}
.pge-fam__panel-more a:hover{text-decoration:underline;}

/* ── FAQ ── */
.pge-fam__faq{margin:0 0 34px;}
.pge-fam__faq-h{font-size:22px;font-weight:800;margin:0 0 16px;letter-spacing:-.01em;}
.pge-fam__faq-item{border:1px solid var(--pge-ui-line);border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden;}
.pge-fam__faq-item summary{cursor:pointer;padding:15px 18px;font-size:15.5px;font-weight:700;color:var(--pge-ui-ink);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pge-fam__faq-item summary::-webkit-details-marker{display:none;}
.pge-fam__faq-item summary::after{content:"+";font-size:20px;font-weight:700;color:var(--pge-ui-p);flex:none;line-height:1;}
.pge-fam__faq-item[open] summary::after{content:"−";}
.pge-fam__faq-item summary:focus-visible{outline:2px solid var(--pge-ui-p);outline-offset:-2px;}
.pge-fam__faq-a{padding:0 18px 16px;font-size:14.5px;line-height:1.65;color:#334155;}

/* ── VALUE PROPS ── */
.pge-fam__value{margin:42px 0 34px;padding:30px;background:#f8fafc;border:1px solid var(--pge-ui-line);border-radius:18px;}
.pge-fam__value-h{text-align:center;font-size:22px;font-weight:800;margin:0 0 22px;}
.pge-fam__value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;}
.pge-fam__value-card{background:#fff;border:1.5px solid var(--pge-ui-line);border-radius:18px;padding:20px;transition:transform .14s,box-shadow .14s;}
.pge-fam__value-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.08);}
.pge-fam__value-ic{font-size:26px;display:block;margin-bottom:10px;}
.pge-fam__value-card h3{font-size:16px;font-weight:800;margin:0 0 6px;}
.pge-fam__value-card p{font-size:13.5px;color:var(--pge-ui-mut);line-height:1.55;margin:0;}

/* ── ABOUT ── */
.pge-fam__about{margin:0 0 34px;}
.pge-fam__about h2{font-size:21px;font-weight:800;margin:0 0 12px;}
.pge-fam__about-body{font-size:15.5px;line-height:1.7;color:#334155;}
.pge-fam__about-body p{margin:0 0 12px;}

/* ── FINAL CTA ── */
.pge-fam__final{text-align:center;padding:40px 28px;border-radius:20px;color:#fff;
 background:linear-gradient(135deg,color-mix(in srgb,var(--pge-ui-p) 90%,#000) 0%,var(--pge-ui-p) 100%);}
.pge-fam__final h2{font-size:25px;font-weight:850;margin:0 0 8px;letter-spacing:-.01em;}
.pge-fam__final p{font-size:15px;opacity:.92;margin:0 0 20px;}
.pge-fam__final .pge-fam__btn--ghost-dark{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5);}
.pge-fam__final .pge-fam__btn--ghost-dark:hover{background:rgba(255,255,255,.2);}

/* ══ CONTRAST GUARD ══
   The portal token sheet paints every h1-h4 with the portal ink !important
   (templates/public/_neu-tokens.php). On the two dark panels of this page
   that put near-black type on a saturated blue field. Inherit, not #fff:
   a pack may one day give the hero a light face, and inheriting follows it. */
body[class][class] .pge-fam__hero :is(h1,h2,h3,h4,h5,h6,p,li,span,div,strong,em,a:not(.pge-fam__btn)),
body[class][class] .pge-fam__final :is(h1,h2,h3,h4,h5,h6,p,li,span,div,strong,em,a:not(.pge-fam__btn)){color:inherit !important;-webkit-text-fill-color:currentColor;}
body[class][class] .pge-fam__hero .pge-fam__btn--primary,
body[class][class] .pge-fam__final .pge-fam__btn--primary{color:var(--pge-ui-p) !important;-webkit-text-fill-color:var(--pge-ui-p);}

/* ══ REGION ART ══
   Resolved from the family row's country_code + state_code, so this draws
   whichever region owns the exam — or nothing, on a family that has none. */
.pge-fam__hero--art .pge-fam__hero-in{max-width:min(660px,72%);}
.pge-fam__hero-art{position:absolute;z-index:0;right:-4%;top:50%;transform:translateY(-50%);
 height:150%;width:auto;max-width:52%;fill:rgba(255,255,255,.13);pointer-events:none;
 filter:drop-shadow(0 18px 40px rgba(0,0,0,.18));}
.pge-fam__region{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 14px 6px 8px;
 border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
 font-size:12.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;}
.pge-fam__region-ic{height:18px;width:auto;max-width:26px;fill:currentColor;opacity:.95;}

/* ══ AT A GLANCE ══ */
.pge-fam__glance{margin:-14px 0 30px;}
.pge-fam__tiles{list-style:none;margin:0;padding:0;display:grid;gap:12px;
 grid-template-columns:repeat(auto-fit,minmax(142px,1fr));}
.pge-fam__tile{position:relative;background:#fff;border:1.5px solid var(--pge-ui-line);border-radius:20px;
 padding:18px 16px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.03);
 transition:transform .18s cubic-bezier(.2,.8,.3,1.2),box-shadow .18s,border-color .18s;}
.pge-fam__tile:hover{transform:translateY(-4px) rotate(-.6deg);border-color:var(--pge-ui-p);box-shadow:0 16px 32px rgba(15,23,42,.10);}
.pge-fam__tile-ic{display:block;font-size:24px;line-height:1;margin-bottom:8px;}
.pge-fam__tile-n{display:block;font-size:clamp(26px,3.4vw,34px);font-weight:900;line-height:1;letter-spacing:-.03em;
 background:linear-gradient(135deg,var(--pge-ui-p),color-mix(in srgb,var(--pge-ui-p) 45%,#000));
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 font-variant-numeric:tabular-nums;}
.pge-fam__tile-l{display:block;margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--pge-ui-mut);}
.pge-fam__tile--ring .pge-fam__tile-n{font-size:22px;margin-top:-26px;}
.pge-fam__ring{display:block;width:62px;height:62px;margin:0 auto 2px;transform:rotate(-90deg);}
.pge-fam__ring-bg{fill:none;stroke:var(--pge-ui-line);stroke-width:4;}
.pge-fam__ring-fg{fill:none;stroke:var(--pge-ui-p);stroke-width:4;stroke-linecap:round;}

/* Reveal + count-up. Opt IN from the script, so a page whose JavaScript never
   runs is not left holding invisible tiles. */
.pge-fam__glance.is-in .pge-fam__tile{animation:pge-fam-pop .42s cubic-bezier(.2,.9,.3,1.3) backwards;}
.pge-fam__glance.is-in .pge-fam__tile:nth-child(2){animation-delay:.05s;}
.pge-fam__glance.is-in .pge-fam__tile:nth-child(3){animation-delay:.10s;}
.pge-fam__glance.is-in .pge-fam__tile:nth-child(4){animation-delay:.15s;}
.pge-fam__glance.is-in .pge-fam__tile:nth-child(5){animation-delay:.20s;}
.pge-fam__glance.is-in .pge-fam__tile:nth-child(6){animation-delay:.25s;}
@keyframes pge-fam-pop{from{opacity:0;transform:translateY(14px) scale(.94);}to{opacity:1;transform:none;}}

/* ══ COVERAGE GRID ══ */
.pge-fam__cover{margin:0 0 34px;padding:26px;background:#f8fafc;border:1.5px solid var(--pge-ui-line);border-radius:22px;}
.pge-fam__cover-h{font-size:21px;font-weight:850;margin:0 0 4px;letter-spacing:-.015em;}
.pge-fam__cover-sub{font-size:13.5px;color:var(--pge-ui-mut);margin:0 0 18px;}
.pge-fam__cover-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pge-fam__cover-t{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:14px;}
.pge-fam__cover-t th,.pge-fam__cover-t td{text-align:center;padding:8px 6px;}
.pge-fam__cover-t thead th{font-size:12px;font-weight:800;color:var(--pge-ui-mut);text-transform:uppercase;letter-spacing:.06em;padding-bottom:2px;}
.pge-fam__cover-t thead th abbr{text-decoration:none;border:0;}
.pge-fam__cover-corner{text-align:left !important;}
.pge-fam__cover-t tbody th{text-align:left;font-weight:800;white-space:nowrap;padding-left:14px;
 background:#fff;border-radius:14px 0 0 14px;border:1.5px solid var(--pge-ui-line);border-right:0;}
.pge-fam__cover-t tbody td{background:#fff;border-top:1.5px solid var(--pge-ui-line);border-bottom:1.5px solid var(--pge-ui-line);}
.pge-fam__cover-t tbody td:last-child{border-right:1.5px solid var(--pge-ui-line);border-radius:0 14px 14px 0;}
.pge-fam__cover-ic{margin-right:8px;font-size:17px;}
.pge-fam__dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--pge-ui-line);}
.pge-fam__cover-t td.is-on .pge-fam__dot{width:19px;height:19px;
 background:hsl(var(--pge-fam-hue,220) 80% 48%);
 box-shadow:0 0 0 5px hsl(var(--pge-fam-hue,220) 72% 45% / .16);}
.pge-fam__cover.is-in td.is-on .pge-fam__dot{animation:pge-fam-pop .4s cubic-bezier(.2,.9,.3,1.4) backwards;}
.pge-fam__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ══ SUBJECT ACCENT ON PAPER CARDS ══
   The hue is derived from the subject name (Exam_Family::subject_hue), so a
   subject this pack invented tomorrow is coloured too — no lookup table to
   fall out of date, and the same subject keeps the same colour everywhere. */
.pge-fam__paper::before{content:"";position:absolute;inset:0 0 auto;height:4px;
 background:hsl(var(--pge-fam-hue,220) 80% 48%);}
.pge-fam__paper:hover{border-color:hsl(var(--pge-fam-hue,220) 80% 48%);
 box-shadow:0 14px 30px hsl(var(--pge-fam-hue,220) 60% 35% / .18);}
.pge-fam__paper-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
 background:hsl(var(--pge-fam-hue,220) 80% 95%);font-size:20px;}
.pge-fam__paper-top{margin-top:2px;}
.pge-fam__start{transition:transform .14s;}
.pge-fam__paper:hover .pge-fam__start{transform:translateX(3px);}
.pge-fam__start--soon,.pge-fam__paper:hover .pge-fam__start--soon{color:var(--pge-ui-neu-ink-muted,#64748b);transform:none;}

@media (prefers-reduced-motion:reduce){
 .pge-fam__tile,.pge-fam__paper,.pge-fam__value-card,.pge-fam__start{transition:none !important;}
 .pge-fam__glance.is-in .pge-fam__tile,.pge-fam__cover.is-in td.is-on .pge-fam__dot{animation:none !important;}
 .pge-fam__tile:hover{transform:none;}
}

.pge-fam__empty{color:var(--pge-ui-mut);font-size:14.5px;padding:14px 0;}

@media (max-width:640px){
 .pge-fam__hero{padding:32px 22px;border-radius:18px;}
 .pge-fam__title{font-size:29px;}
 .pge-fam__lead{font-size:15.5px;}
 .pge-fam__papers{grid-template-columns:1fr;}
 .pge-fam__day{grid-template-columns:1fr;gap:10px;}
 .pge-fam__day-rail{padding-left:2px;}
 .pge-fam__btn{width:100%;}
 .pge-fam__cta-row{width:100%;}
 .pge-fam__tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:2px 16px;}
 .pge-fam__tabs::-webkit-scrollbar{display:none;}
 .pge-fam__tab{flex:none;}
 .pge-fam__picker-h,.pge-fam__faq-h{font-size:19px;}
 .pge-fam__trust{gap:10px;}
 .pge-fam__hero--art .pge-fam__hero-in{max-width:100%;}
 .pge-fam__hero-art{right:-18%;height:118%;max-width:74%;opacity:.7;}
 .pge-fam__tiles{grid-template-columns:repeat(2,1fr);gap:10px;}
 .pge-fam__tile{padding:14px 10px;border-radius:16px;}
 .pge-fam__cover{padding:20px 16px;border-radius:18px;}
 .pge-fam__cover-scroll{margin:0 -16px;padding:0 16px;
  /* The grid scrolls sideways on a phone; fade the right edge so it is
     visibly cut off rather than looking like the last column. */
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%);}
 /* An odd tile count leaves a lone card in the last row — let it span. */
 .pge-fam__tile:last-child:nth-child(odd){grid-column:span 2;}
 .pge-fam__trust li{white-space:normal;}
}
/* color-mix fallback for older browsers */
@supports not (background:color-mix(in srgb,red,blue)){
 .pge-fam__hero,.pge-fam__final{background:#1b3beb;}
 .pge-fam__day-dot{box-shadow:0 0 0 4px rgba(37,99,235,.18);}
}