:root {
  --navy: #0F2147;
  --navy-m: #1a3460;
  --navy-l: #2d5099;
  --gold: #C9A227;
  --gold-l: #e8bf55;
  --gold-pale: #FDF6E3;
  --teal: #0CB8C4;
  --teal-l: #3dd0d9;
  --teal-d: #097a82;
  --teal-pale: #E0F9FA;
  --violet: #7C3AED;
  --coral: #FF6B4A;
  --green: #16A34A;
  --white: #ffffff;
  --off: #F5F8FF;
  --text: #0F2147;
  --muted: #5a6a8a;
  --light: #8a9ab8;
  --border: rgba(15,33,71,.1);
  --border-m: rgba(15,33,71,.16);
  --cs: 0 2px 20px rgba(15,33,71,.07), 0 1px 4px rgba(15,33,71,.05);
  --hs: 0 8px 40px rgba(15,33,71,.12), 0 2px 8px rgba(15,33,71,.06);
  --gold-shadow: 0 6px 28px rgba(201,162,39,.35);
  --teal-shadow: 0 6px 28px rgba(12,184,196,.3);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

body {
  --page-bg-1: #071526;
  --page-bg-2: #0b2744;
  --page-bg-3: #0a3a48;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(12,184,196,.22), transparent 55%),
    radial-gradient(ellipse 60% 45% at 88% 20%, rgba(30,77,156,.28), transparent 50%),
    linear-gradient(160deg, var(--page-bg-1) 0%, var(--page-bg-2) 48%, var(--page-bg-3) 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px 20px;
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  animation: orbFloat 14s ease-in-out infinite;
}
.ambient-orb-a {
  width: 280px;
  height: 280px;
  background: rgba(12, 184, 196, 0.35);
  top: -60px;
  left: -40px;
}
.ambient-orb-b {
  width: 340px;
  height: 340px;
  background: rgba(30, 77, 156, 0.4);
  right: -80px;
  top: 20%;
  animation-delay: -4s;
}
.ambient-orb-c {
  width: 220px;
  height: 220px;
  background: rgba(15, 159, 138, 0.28);
  bottom: 8%;
  left: 35%;
  animation-delay: -7s;
}
.ambient-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  opacity: 0.5;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -22px) scale(1.08); }
}

body.quiz-mode {
  height: 100vh;
  padding: 14px;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 5%, rgba(12,184,196,.08) 0, transparent 33%),
    radial-gradient(circle at 8% 20%, rgba(12,184,196,.06) 0, transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #F5F8FF 45%, #EEF5FF 100%);
}
body.quiz-mode .ambient { display: none; }

.app {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 28px;
  max-width: 760px;
  width: 100%;
  padding: 36px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255,255,255,.08) inset;
  align-self: flex-start;
  animation: appEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes appEnter {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

body.quiz-mode .app {
  max-width: min(1700px, 96vw);
  width: 96vw;
  height: calc(100vh - 28px);
  max-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  align-self: center;
  overflow: hidden;
}

/* ---- Header ---- */
.app-header {
  text-align: center;
  margin-bottom: 30px;
}
body.quiz-mode .app-header { display: none; }
.app-logo {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(12, 184, 196, 0.2),
    0 14px 36px rgba(15,33,71,.28);
  margin-bottom: 12px;
  animation:
    logoPop 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both,
    logoPulse 3.2s ease-in-out 1s infinite;
}
.app-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(12, 184, 196, 0.12);
  color: var(--teal-d);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: fadeUp 0.5s ease 0.14s both;
}
.app-header h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  color: var(--navy);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.3px;
  animation: fadeUp 0.55s ease 0.2s both;
}
.subtitle {
  color: var(--muted);
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  animation: fadeUp 0.55s ease 0.28s both;
}

@keyframes logoPop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(12,184,196,.2), 0 14px 36px rgba(15,33,71,.28); }
  50% { box-shadow: 0 0 0 8px rgba(12,184,196,.12), 0 18px 40px rgba(15,33,71,.32); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---- Screens ---- */
.screen { display: none; }
.screen.active { display: block; }

/* ---- Programme tabs ---- */
.program-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}

.program-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 14px;
  border: 1px solid var(--border);
  background: var(--off);
  border-radius: 18px;
  cursor: pointer;
  transition: 0.25s ease;
  box-shadow: var(--cs);
}
.program-tab:hover { transform: translateY(-3px); box-shadow: var(--hs); }
.program-tab.active {
  border-color: var(--gold);
  background: var(--navy);
  box-shadow: 0 16px 35px rgba(15,33,71,.32);
}
.program-tab.active .tab-icon,
.program-tab.active .tab-label,
.program-tab.active .tab-desc { color: #fff; }
.program-tab.active .tab-label { color: var(--gold); }

.tab-icon  { font-size: 2.1rem; }
.tab-label { font-size: 1rem; font-weight: 800; color: var(--navy); }
.tab-desc  { font-size: 0.78rem; color: var(--muted); text-align: center; font-weight: 600; }

/* ---- Grade grid ---- */
.grade-heading {
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: fadeUp 0.5s ease 0.32s both;
}
.grade-heading-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.grade-sub {
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
  animation: fadeUp 0.5s ease 0.38s both;
}

.grade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}
/* Center the lone Grade 12 card in the last row */
.grade-grid > .grade-card:last-child { grid-column: 2; }

/* Grade-select screen: full-viewport panel + large grade cards */
body.select-mode {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
}
body.select-mode .app {
  align-self: stretch;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;
  padding: clamp(20px, 3vh, 40px) clamp(24px, 4vw, 64px) 20px;
  box-shadow: none;
}
body.select-mode .app-header {
  margin-bottom: clamp(8px, 1.5vh, 20px);
  flex-shrink: 0;
}
body.select-mode .app-logo {
  width: 84px;
  height: 84px;
  margin-bottom: 14px;
}
body.select-mode .brand-eyebrow {
  font-size: 0.82rem;
  padding: 6px 16px;
}
body.select-mode .app-header h1 {
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
}
body.select-mode .subtitle {
  font-size: clamp(0.92rem, 1.3vw, 1.08rem);
}
body.select-mode #grade-select.screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body.select-mode .grade-heading {
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  margin-bottom: 8px;
  flex-shrink: 0;
}
body.select-mode .grade-heading-kicker { font-size: 0.8rem; }
body.select-mode .grade-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  margin-bottom: 8px;
  flex-shrink: 0;
}
body.select-mode .grade-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(16px, 2.2vw, 32px);
  width: min(1320px, 100%);
  margin: 18px auto 0;
  flex: 1 1 auto;
  align-content: center;
}
body.select-mode .grade-card {
  aspect-ratio: auto;
  min-height: clamp(170px, 22vh, 280px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(22px, 2.8vh, 40px) clamp(14px, 1.6vw, 28px);
  border-radius: 24px;
}
body.select-mode .gc-num { font-size: clamp(2.5rem, 5.2vw, 4.2rem); }
body.select-mode .gc-grade { font-size: clamp(0.92rem, 1.5vw, 1.14rem); }
body.select-mode .gc-phase { font-size: clamp(1.08rem, 1.9vw, 1.42rem); margin-top: 8px; }
body.select-mode .gc-focus {
  font-size: clamp(0.84rem, 1.25vw, 1.02rem);
  margin-top: 10px;
  padding: 6px 14px;
}
body.select-mode .enrol-note {
  margin-top: auto;
  padding-top: 18px;
  text-align: center;
  font-size: 0.94rem;
  flex-shrink: 0;
}

.grade-card {
  --grade-accent: var(--teal-d);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border: 1px solid rgba(15, 33, 71, 0.1);
  border-radius: 18px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  box-shadow: 0 8px 24px rgba(15, 33, 71, 0.08);
  animation: gradeCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--card-delay, 0ms);
}
.grade-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grade-accent);
  transform: scaleX(0.35);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.grade-card[data-grade="6"] { --grade-accent: #0A8A94; }
.grade-card[data-grade="7"] { --grade-accent: #1E4D9C; }
.grade-card[data-grade="8"] { --grade-accent: #0CB8C4; }
.grade-card[data-grade="9"] { --grade-accent: #2D5099; }
.grade-card[data-grade="10"] { --grade-accent: #097A82; }
.grade-card[data-grade="11"] { --grade-accent: #3D5AFE; }
.grade-card[data-grade="12"] { --grade-accent: #0F9F8A; }

.gc-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(145deg, var(--grade-accent), var(--navy));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.gc-glow::after {
  content: "";
  position: absolute;
  top: 0;
  left: -55%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-16deg);
}
.gc-num,
.gc-grade,
.gc-phase,
.gc-focus {
  position: relative;
  z-index: 1;
}

.grade-card:hover:not(.disabled),
.grade-card:focus-visible:not(.disabled) {
  transform: translateY(-8px) scale(1.03);
  background: var(--navy);
  border-color: transparent;
  box-shadow:
    0 20px 44px rgba(7, 21, 38, 0.4),
    0 0 0 3px color-mix(in srgb, var(--grade-accent) 45%, transparent);
  outline: none;
}
.grade-card:hover:not(.disabled)::before,
.grade-card:focus-visible:not(.disabled)::before {
  transform: scaleX(1);
  background: var(--teal-l);
}
.grade-card:hover:not(.disabled) .gc-glow,
.grade-card:focus-visible:not(.disabled) .gc-glow {
  opacity: 1;
}
.grade-card:hover:not(.disabled) .gc-glow::after,
.grade-card:focus-visible:not(.disabled) .gc-glow::after {
  animation: gradeShine 0.85s ease forwards;
}
.grade-card:hover:not(.disabled) .gc-num,
.grade-card:focus-visible:not(.disabled) .gc-num {
  color: var(--teal-l);
  transform: scale(1.08);
}
.grade-card:hover:not(.disabled) .gc-grade,
.grade-card:hover:not(.disabled) .gc-phase,
.grade-card:hover:not(.disabled) .gc-focus,
.grade-card:focus-visible:not(.disabled) .gc-grade,
.grade-card:focus-visible:not(.disabled) .gc-phase,
.grade-card:focus-visible:not(.disabled) .gc-focus { color: #fff; }
.grade-card:hover:not(.disabled) .gc-focus,
.grade-card:focus-visible:not(.disabled) .gc-focus {
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
}
.grade-card:hover:not(.disabled) .gc-price { color: var(--teal-l); }
.grade-card.disabled { opacity: 0.4; cursor: not-allowed; animation: none; }

@keyframes gradeCardIn {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes gradeShine {
  from { left: -55%; }
  to { left: 130%; }
}

.gc-num {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--grade-accent);
  line-height: 1;
  transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.gc-grade {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  transition: color 0.3s ease;
}
.gc-phase {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--navy);
  margin-top: 6px;
  transition: color 0.3s ease;
}
.gc-focus {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 33, 71, 0.05);
  transition: color 0.3s ease, background 0.3s ease;
}
.gc-price { font-size: 0.78rem; font-weight: 800; color: var(--gold); margin-top: 6px; }

.enrol-note { margin-top: 22px; font-size: 0.82rem; color: var(--muted); text-align: center; font-weight: 500; animation: fadeUp 0.5s ease 0.7s both; }
.enrol-note strong { color: var(--navy); }

@media (max-width: 900px) {
  body.select-mode .app-logo {
    width: 72px;
    height: 72px;
  }
  body.select-mode .grade-card {
    min-height: clamp(150px, 18vh, 220px);
  }
}
@media (max-width: 520px) {
  body.select-mode {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  body.select-mode .app {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    padding: 22px 16px 18px;
  }
  body.select-mode .grade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: none;
  }
  body.select-mode .grade-card {
    min-height: 150px;
  }
  body.select-mode .gc-num { font-size: 2.2rem; }
  .grade-grid > .grade-card:last-child {
    grid-column: 1 / -1;
    width: min(220px, 48%);
    justify-self: center;
  }
}

/* ---- Quiz ---- */
body.quiz-mode #quiz.screen.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
body.quiz-mode .quiz-top,
body.quiz-mode .quiz-meta,
body.quiz-mode .progress-bar,
body.quiz-mode .quiz-nav { flex-shrink: 0; }
body.quiz-mode #question-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.quiz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.quiz-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.quiz-phase { font-size: 0.84rem; color: var(--muted); font-weight: 600; }
.btn-exit {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--cs);
  transition: 0.18s ease;
}
.btn-exit:hover { background: #FDECEA; border-color: #E7A9A2; color: #C0392B; transform: translateY(-1px); }

.progress-bar {
  background: var(--off);
  border-radius: 999px;
  height: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.progress-fill {
  background: linear-gradient(90deg, var(--navy), var(--teal));
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width 0.3s;
}

.question-card h2 { color: var(--navy); margin-bottom: 8px; font-size: 1rem; font-weight: 800; flex-shrink: 0; }
.question-image {
  width: 100%;
  max-width: 100%;
  max-height: 30vh;
  object-fit: contain;
  border-radius: 14px;
  margin: 0 auto 10px;
  display: block;
  box-shadow: var(--cs);
  flex-shrink: 0;
}
body.quiz-mode .question-image {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
}
.question-card .prompt {
  white-space: pre-line;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.5;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.options { display: grid; gap: 8px; }
.option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(12,184,196,.45);
  background: var(--white);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: 0.18s ease;
  color: var(--text);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(12,184,196,.16), 0 2px 8px rgba(15,33,71,.06);
}
/* Shining sweep across each option */
.option-btn::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 55px;
  left: -90px;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: opt-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.options .option-btn:nth-child(2)::after { animation-delay: 0.35s; }
.options .option-btn:nth-child(3)::after { animation-delay: 0.7s; }
.options .option-btn:nth-child(4)::after { animation-delay: 1.05s; }
.options .option-btn:nth-child(5)::after { animation-delay: 1.4s; }
@keyframes opt-shine {
  0%   { left: -90px; }
  55%  { left: 115%; }
  100% { left: 115%; }
}
@media (prefers-reduced-motion: reduce) { .option-btn::after { animation: none; display: none; } }
.option-btn:hover {
  border-color: var(--teal);
  transform: translateX(2px);
  box-shadow: 0 0 20px rgba(12,184,196,.45), 0 4px 12px rgba(15,33,71,.10);
}
.option-btn.selected {
  border-color: var(--gold);
  background: var(--gold-pale);
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 20px rgba(201,162,39,.5);
  font-weight: 700;
}
.option-key {
  background: var(--navy);
  color: var(--gold);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 800;
}

.quiz-nav { display: flex; justify-content: space-between; margin-top: 14px; }
body.quiz-mode .btn { padding: 10px 22px; font-size: 0.88rem; }

.btn {
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  background: var(--navy);
  color: var(--gold);
  box-shadow: 0 14px 30px rgba(15,33,71,.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(15,33,71,.38); }
.btn-primary:disabled { background: #d7dceb; color: #9aa3bd; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--off); color: var(--navy); border: 1px solid var(--border); }
.btn-secondary:hover { transform: translateY(-2px); }
.btn-download { background: var(--gold); color: var(--navy); box-shadow: 0 14px 30px rgba(201,162,39,.35); }
.btn-download:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(201,162,39,.45); }
.btn-download:disabled { background: #ead9a0; color: #8a7a45; box-shadow: none; cursor: wait; transform: none; }

/* ---- Results ---- */
.results-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.results-header h2 { margin: 0; color: var(--navy); font-weight: 800; }
.results-sub { font-size: 0.86rem; color: #2a3854; margin-bottom: 14px; font-weight: 700; }

.result-block { margin-bottom: 18px; }
.result-block h3 {
  margin-bottom: 16px;
  background: linear-gradient(90deg, #0A1834 0%, var(--navy-m) 65%, #14507a 110%);
  color: var(--gold-l);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 13px 18px;
  border-radius: 10px;
  border-left: 5px solid var(--teal);
  box-shadow: 0 4px 14px rgba(15,33,71,.22);
}

.result-actions { margin-top: 12px; }

/* Personality Type (Grade 12) */
.personality-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--navy), var(--navy-m));
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: var(--hs);
}
.personality-code {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--gold);
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.personality-title { color: var(--gold); font-size: 0.96rem; font-weight: 800; margin-bottom: 6px; line-height: 1.4; }
.personality-orientation { color: #ffffff; font-size: 0.9rem; font-weight: 600; line-height: 1.55; margin: 0; }

.personality-matches {
  margin-top: 10px;
  background: linear-gradient(160deg, #FDF6E3 0%, #fffdf6 55%, #E0F9FA 130%);
  border: 2px solid rgba(201,162,39,.45);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 0 18px rgba(201,162,39,.20), 0 6px 18px rgba(15,33,71,.08);
}
.pm-label {
  background: linear-gradient(90deg, #0A1834 0%, var(--navy-m) 65%, #14507a 110%);
  color: var(--gold-l);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 800;
  padding: 13px 18px;
  border-radius: 10px;
  border-left: 5px solid var(--teal);
  box-shadow: 0 4px 14px rgba(15,33,71,.22);
  margin-bottom: 16px;
}
.pm-profile { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 12px; }
.pm-photo {
  width: 280px;
  height: 280px;
  max-width: 70vw;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(12,184,196,.45), 0 0 34px rgba(12,184,196,.35), 0 14px 34px rgba(15,33,71,.28);
  flex-shrink: 0;
}
.pm-name {
  background: linear-gradient(90deg, #0A1834, var(--navy-m) 70%, #14507a 120%);
  color: var(--gold);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  padding: 12px 30px;
  border-radius: 999px;
  border: 1px solid rgba(12,184,196,.5);
  box-shadow: 0 6px 16px rgba(15,33,71,.3);
}
.pm-traits-label {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}
.pm-traits { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pm-trait {
  background: #fff;
  border: 1px solid rgba(201,162,39,.35);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 15px;
  border-radius: 12px;
  text-align: left;
}

/* Orientation Split graph (Grade 12) */
.orientation-graph {
  margin-top: 14px;
  background: linear-gradient(160deg, #F5F8FF 0%, #ffffff 55%, #E0F9FA 140%);
  border: 2px solid rgba(12,184,196,.45);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 0 16px rgba(12,184,196,.18), 0 6px 18px rgba(15,33,71,.08);
}
.og-label {
  background: linear-gradient(90deg, #0A1834 0%, var(--navy-m) 65%, #14507a 110%);
  color: var(--gold-l);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  padding: 13px 18px;
  border-radius: 10px;
  border-left: 5px solid var(--teal);
  box-shadow: 0 4px 14px rgba(15,33,71,.22);
  margin-bottom: 16px;
}

/* Expanded personality explanation + case study */
.ptype-expanded {
  margin-top: 14px;
  background: #fff;
  border: 2px solid rgba(12,184,196,.4);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 0 14px rgba(12,184,196,.16), 0 5px 16px rgba(15,33,71,.08);
  break-inside: avoid;
  page-break-inside: avoid;
}
.ptype-exp-title {
  background: linear-gradient(90deg, #0A1834 0%, var(--navy-m) 65%, #14507a 110%);
  color: var(--gold-l);
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 16px;
  border-radius: 9px;
  border-left: 5px solid var(--teal);
  margin-bottom: 16px;
}
.ptype-expanded p {
  color: #14213d;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.9;
  margin: 0 0 14px;
}
.case-study {
  margin-top: 4px;
  background: linear-gradient(160deg, #FDF6E3 0%, #fffdf6 60%, #E0F9FA 140%);
  border: 2px solid rgba(201,162,39,.5);
  border-radius: 14px;
  padding: 16px 18px;
}
.cs-title {
  color: var(--navy);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.case-study p { margin: 0; line-height: 1.9; }

/* Orientation split explanations */
.og-details { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.og-detail {
  background: #fff;
  border: 1px solid var(--border-m);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--cs);
  break-inside: avoid;
  page-break-inside: avoid;
}
.og-detail.og-c-violet { border-left: 5px solid var(--violet); }
.og-detail.og-c-navy { border-left: 5px solid var(--navy); }
.og-detail.og-c-teal { border-left: 5px solid var(--teal); }
.og-detail.og-c-gold { border-left: 5px solid var(--gold); }
.og-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.og-detail p {
  color: #14213d;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.85;
  margin: 0 0 8px;
}
.og-detail .og-example { color: var(--teal-d); font-weight: 700; margin-bottom: 0; }

/* Reasoning-score explanation + interest chart guide */
.apt-detail {
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--border-m);
  border-left: 5px solid var(--teal);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--cs);
  break-inside: avoid;
  page-break-inside: avoid;
}
.apt-detail p {
  color: #14213d;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.9;
  margin: 0 0 10px;
}
.apt-detail .apt-example { color: var(--teal-d); font-weight: 700; margin-bottom: 0; }
.chart-guide {
  color: #14213d;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.85;
  margin: 0 0 16px;
}

/* ---- Grade 9 comprehensive report ---- */
.sinfo-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(10,24,52,.72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sinfo-card { background: #fff; border-radius: 22px; padding: 30px 32px; width: 100%; max-width: 430px; box-shadow: 0 24px 70px rgba(0,0,0,.4); border-top: 5px solid var(--teal); }
#grade-select.tc-locked { pointer-events: none; opacity: .45; filter: blur(1px); }
.sinfo-title { font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.sinfo-sub { color: var(--muted); font-size: .88rem; font-weight: 600; margin: 6px 0 18px; }
.sinfo-l { display: block; font-size: .78rem; font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; }
.sinfo-in { width: 100%; border: 1.5px solid var(--border-m); border-radius: 12px; padding: 12px 14px; font-size: .95rem; font-weight: 600; color: var(--text); outline: none; }
.sinfo-in:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12,184,196,.18); }
.sinfo-btn { width: 100%; margin-top: 20px; justify-content: center; }

.g9-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g9-info { background: #fff; border: 1px solid var(--border-m); border-left: 5px solid var(--teal); border-radius: 14px; padding: 14px 18px; box-shadow: var(--cs); }
.g9-info-l { font-size: .72rem; font-weight: 800; color: var(--teal-d); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.g9-info-v { font-size: 1.02rem; font-weight: 800; color: var(--navy); }

.g9-exec { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g9-exec-card { background: #fff; border: 2px solid rgba(12,184,196,.4); border-radius: 16px; padding: 16px 18px; box-shadow: 0 0 12px rgba(12,184,196,.14); break-inside: avoid; page-break-inside: avoid; }
.g9-exec-t { font-weight: 800; color: var(--navy); font-size: .95rem; margin-bottom: 10px; }
.g9-exec-card p { color: #14213d; font-weight: 600; font-size: .9rem; line-height: 1.8; margin: 0; }
.g9-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g9-chip { background: var(--gold-pale); border: 1px solid rgba(201,162,39,.45); color: var(--navy); font-weight: 700; font-size: .84rem; padding: 7px 13px; border-radius: 999px; }

.g9-bars { display: flex; flex-direction: column; gap: 13px; }
.g9-bar-row { display: grid; grid-template-columns: 200px 1fr 52px; align-items: center; gap: 12px; break-inside: avoid; page-break-inside: avoid; }
.g9-bar-label { font-size: .9rem; font-weight: 700; color: var(--navy); }
.g9-bar-track { background: var(--off); border-radius: 999px; height: 16px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(15,33,71,.15); }
.g9-bar-fill { height: 100%; border-radius: inherit; }
.g9-bar-fill.g9-teal { background: linear-gradient(90deg, var(--navy), var(--teal)); }
.g9-bar-fill.g9-violet { background: linear-gradient(90deg, var(--navy), var(--violet)); }
.g9-bar-fill.g9-gold { background: linear-gradient(90deg, var(--navy-m), var(--gold)); }
.g9-bar-pct { font-weight: 800; color: var(--navy); font-size: .92rem; text-align: right; }

.g9-block { background: #fff; border: 1px solid var(--border-m); border-left: 5px solid var(--teal); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--cs); break-inside: avoid; page-break-inside: avoid; }
.g9-block-t { font-weight: 800; color: var(--teal-d); font-size: .95rem; margin-bottom: 9px; }
.g9-block p { color: #14213d; font-weight: 600; font-size: .9rem; line-height: 1.85; margin: 0; }
.g9-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.g9-points li { position: relative; padding-left: 22px; color: #14213d; font-weight: 600; font-size: .9rem; line-height: 1.7; }
.g9-points li::before { content: "✦"; position: absolute; left: 0; color: var(--teal-d); font-weight: 700; }

.g9-worlds { display: flex; flex-direction: column; gap: 14px; }
.g9-world { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 2px solid rgba(12,184,196,.4); border-radius: 16px; padding: 16px 18px; box-shadow: 0 0 12px rgba(12,184,196,.14); break-inside: avoid; page-break-inside: avoid; }
.g9-world-rank { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--navy), #14507a); color: var(--gold-l); font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; }
.g9-world-name { font-weight: 800; color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
.g9-world-pct { background: var(--teal-pale); color: var(--teal-d); font-size: .76rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-left: 8px; }
.g9-world p { color: #14213d; font-weight: 600; font-size: .88rem; line-height: 1.7; margin: 0; }
.g9-career-world { margin-left: auto; background: var(--off); color: var(--muted); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }

.g9-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g9-tip { background: #fff; border: 1px solid var(--border-m); border-top: 4px solid var(--gold); border-radius: 14px; padding: 15px 17px; box-shadow: var(--cs); break-inside: avoid; page-break-inside: avoid; }
.g9-tip-t { font-weight: 800; color: var(--navy); font-size: .92rem; margin-bottom: 9px; }
.g9-tip p { color: #14213d; font-weight: 600; font-size: .87rem; line-height: 1.75; margin: 0; }

.g9-goals { display: flex; flex-direction: column; gap: 12px; }
.g9-goal { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--border-m); border-radius: 14px; padding: 13px 16px; box-shadow: var(--cs); break-inside: avoid; page-break-inside: avoid; }
.g9-goal-n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #0A1834; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.g9-goal p { color: #14213d; font-weight: 700; font-size: .9rem; margin: 0; line-height: 1.6; }

/* Numbered section chips (Canva-style 01, 02, …) */
.sec-num {
  display: inline-block;
  background: var(--gold);
  color: #0A1834;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 3px 9px;
  border-radius: 7px;
  margin-right: 12px;
  letter-spacing: 0.02em;
}
.og-bar {
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: inset 0 2px 5px rgba(15,33,71,.25);
}
.og-seg { height: 100%; transition: width 0.6s; }
.og-seg.og-violet { background: var(--violet); }
.og-seg.og-navy { background: var(--navy); }
.og-seg.og-teal { background: var(--teal); }
.og-seg.og-gold { background: var(--gold); }

.og-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.og-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border-m);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--cs);
}
.og-item strong { color: var(--navy); font-weight: 800; font-size: 1.25rem; margin-left: auto; }
.og-item-label { font-weight: 700; }
.og-item.og-c-violet { border-left: 5px solid var(--violet); }
.og-item.og-c-navy { border-left: 5px solid var(--navy); }
.og-item.og-c-teal { border-left: 5px solid var(--teal); }
.og-item.og-c-gold { border-left: 5px solid var(--gold); }
.og-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.og-dot.og-violet { background: var(--violet); }
.og-dot.og-navy { background: var(--navy); }
.og-dot.og-teal { background: var(--teal); }
.og-dot.og-gold { background: var(--gold); }

/* Mode badge */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
}
.mode-badge.free { background: rgba(22,163,74,.12); color: var(--green); }
.mode-badge.paid { background: var(--gold-pale); color: #8a6b00; }

/* Aptitude */
.aptitude-score { font-size: 1rem; color: var(--text); font-weight: 700; }
.pct-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 800;
  margin-left: 8px;
}

/* Bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 9px; padding-right: 18px; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 40px; align-items: center; gap: 10px; }
.bar-label { font-size: 0.85rem; color: var(--navy); font-weight: 700; }
.bar-track { background: var(--off); border-radius: 999px; height: 14px; overflow: hidden; }
.bar-fill { background: linear-gradient(90deg, var(--navy), var(--teal)); height: 100%; width: 0%; border-radius: inherit; transition: width 0.6s; }
.bar-count { font-weight: 800; color: var(--navy); text-align: right; font-size: 0.9rem; }

/* ---- Free: Digital Talent Card ---- */
.deliverable-card { border-radius: 24px; overflow: hidden; }

.talent-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--hs);
}
.tc-header {
  background: var(--navy);
  color: #fff;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tc-header .tc-icon { font-size: 2.1rem; }
.tc-title { font-size: 1.08rem; font-weight: 800; color: var(--gold); }
.tc-grade { font-size: 0.82rem; opacity: 0.88; margin-top: 3px; font-weight: 600; color: #fff; }
.tc-deliverable {
  background: var(--teal-pale);
  padding: 12px 24px;
  font-size: 0.86rem;
  color: var(--teal-d);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.tc-top3 { padding: 18px 24px 10px; background: #fff; }
.tc-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--light); margin-bottom: 12px; font-weight: 700; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.tc-tag {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.tc-tag.rank-1 { background: var(--gold-pale); color: #8a6b00; border: 1px solid var(--gold); }
.tc-tag.rank-2 { background: #f0f2fa; color: #4a5377; border: 1px solid #c7cee8; }
.tc-tag.rank-3 { background: var(--teal-pale); color: var(--teal-d); border: 1px solid rgba(12,184,196,.3); }
.tc-rec {
  padding: 14px 24px;
  font-size: 0.89rem;
  color: var(--muted);
  line-height: 1.65;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  background: #fff;
}
.tc-upgrade {
  background: var(--gold-pale);
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.tc-upgrade strong { color: #8a6b00; }

/* ---- Paid report ---- */
.paid-report {
  border: 2px solid rgba(12,184,196,.5);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(250,252,255,.72) 0%, rgba(240,246,255,.72) 60%, rgba(233,250,251,.72) 130%);
  box-shadow: 0 0 18px rgba(12,184,196,.18), 0 8px 24px rgba(15,33,71,.10);
}

/* Futuristic blueprint grid across the whole report document */
#results {
  background:
    repeating-linear-gradient(0deg, rgba(12,184,196,.04) 0, rgba(12,184,196,.04) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(12,184,196,.04) 0, rgba(12,184,196,.04) 1px, transparent 1px, transparent 42px),
    linear-gradient(160deg, #FBFDFF 0%, #F4F9FF 100%);
  border-radius: 20px;
}

.paid-report-header {
  background: var(--navy);
  color: #fff;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.paid-report-title { font-size: 1.02rem; font-weight: 800; line-height: 1.45; color: var(--gold); }
.paid-report-price { font-size: 1.15rem; font-weight: 800; white-space: nowrap; color: #fff; }
.paid-tag {
  display: inline-block;
  background: rgba(201,162,39,.25);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 7px;
  vertical-align: middle;
}
.pages-badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 7px;
  vertical-align: middle;
}

.paid-section { padding: 18px 24px; border-top: 1px solid rgba(201,162,39,.25); background: #fff; }
.paid-section:first-of-type { border-top: none; }
.paid-section h4 {
  background: linear-gradient(90deg, #0A1834 0%, var(--navy-m) 65%, #14507a 110%);
  color: var(--gold-l);
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 13px 18px;
  border-radius: 10px;
  border-left: 5px solid var(--teal);
  box-shadow: 0 4px 14px rgba(15,33,71,.22);
}

.includes-list { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.includes-list li { font-size: 0.88rem; color: var(--muted); display: flex; gap: 9px; font-weight: 500; }

/* ---- Multi-tier packages (Grade 12) ---- */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tier-grid-single { grid-template-columns: 1fr; }
.tier-grid-single .tier-card { max-width: 480px; margin: 0 auto; width: 100%; }

.promo-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 2px solid rgba(12,184,196,.45);
  box-shadow: 0 0 16px rgba(12,184,196,.22), 0 6px 18px rgba(15,33,71,.12);
  break-inside: avoid;
  page-break-inside: avoid;
}
.promo-only { padding: 10px 14px; }
.promo-only .promo-img { max-width: 88%; margin: 0 auto; }
.tier-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.tier-card:first-child { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .tier-grid { grid-template-columns: 1fr; }
  .tier-card:first-child { grid-column: auto; }
}
.tier-card.tier-elite { border: 2px solid var(--gold); box-shadow: var(--gold-shadow); }
.tier-name {
  background: var(--navy);
  color: var(--gold-l);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 12px 16px;
}
.tier-card.tier-elite .tier-name { background: linear-gradient(135deg, var(--navy), #1a3460); }
.tier-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  padding: 12px 16px 4px;
}
.tier-card.tier-elite .tier-price { color: #8a6b00; }
.tier-includes { padding: 6px 16px 16px; list-style: none; display: grid; gap: 7px; }
.tier-includes li { font-size: 0.88rem; color: #14213d; font-weight: 600; }

.profile-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.profile-table th { background: var(--navy); color: var(--gold); padding: 10px 14px; text-align: left; font-weight: 700; }
.profile-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: #14213d; font-weight: 700; }
.profile-table tr:nth-child(even) td { background: var(--off); }

.insight-card {
  background: #fff;
  border: 2px solid rgba(12,184,196,.55);
  border-radius: 16px;
  padding: 0;
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(12,184,196,.22), 0 6px 18px rgba(15,33,71,.10);
}

/* Full-page designed cover — shown only inside the downloaded PDF */
.pdf-only { display: none; }
.pdf-cover-page {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  height: 960px;
  background:
    radial-gradient(circle at 85% 12%, rgba(12,184,196,.28) 0, transparent 34%),
    radial-gradient(circle at 10% 88%, rgba(124,58,237,.25) 0, transparent 36%),
    linear-gradient(150deg, #0A1834 0%, var(--navy) 45%, #14507a 90%, #0CB8C4 175%);
  border-radius: 20px;
  border: 1px solid rgba(12,184,196,.5);
  border-bottom: 6px solid var(--gold);
}
.cv-ring { position: absolute; border-radius: 50%; }
.cv-ring-1 { width: 380px; height: 380px; border: 2px solid rgba(201,162,39,.35); top: -110px; right: -90px; }
.cv-ring-2 { width: 260px; height: 260px; border: 2px solid rgba(12,184,196,.4); top: -50px; right: 20px; }
.cv-ring-3 { width: 320px; height: 320px; border: 2px solid rgba(124,58,237,.3); bottom: -120px; left: -80px; }
.cv-logo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  padding: 8px;
  box-shadow: 0 0 0 6px rgba(201,162,39,.5), 0 0 40px rgba(12,184,196,.45);
  margin-bottom: 28px;
}
.pdf-cover-title {
  font-family: 'DM Serif Display', Georgia, serif;
  color: var(--gold-l);
  font-size: 2.6rem;
  letter-spacing: 0.1em;
  line-height: 1.15;
}
.cv-divider {
  width: 170px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  margin: 18px auto;
}
.pdf-cover-sub { color: #ffffff; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; }
.cv-grade-pill {
  margin-top: 26px;
  display: inline-block;
  background: rgba(12,184,196,.16);
  border: 2px solid var(--teal);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  padding: 12px 34px;
  border-radius: 999px;
}
.cv-footer { position: absolute; bottom: 34px; left: 0; right: 0; }
.pdf-cover-mission { color: var(--teal-l); font-weight: 700; font-size: 0.92rem; }
.cv-tagline { color: rgba(255,255,255,.75); font-weight: 600; font-size: 0.8rem; margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase; }

/* PDF pagination: each section / trait on its own page, no mid-element splits */
.pdf-break, .pdf-newpage { break-before: page; page-break-before: always; }
.insight-card, .career-card, .personality-card, .personality-matches, .orientation-graph {
  break-inside: avoid; page-break-inside: avoid;
}
.insight-title {
  background: linear-gradient(90deg, var(--teal-d) 0%, var(--teal) 55%, var(--violet) 140%);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 18px;
  margin-bottom: 0;
}
.insight-detail { color: #14213d; line-height: 1.65; font-size: 0.9rem; font-weight: 600; }
.insight-points { margin: 0; padding: 16px 18px; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.insight-points li {
  position: relative;
  padding-left: 24px;
  color: #14213d;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.55;
}
.insight-points li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal-d);
  font-weight: 700;
}

.career-grid { display: flex; flex-direction: column; gap: 18px; }
.career-card {
  background: #fff;
  border: 2px solid rgba(12,184,196,.35);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 0 12px rgba(12,184,196,.15), 0 4px 14px rgba(15,33,71,.08);
}
.career-cat { font-weight: 800; font-size: 0.95rem; color: var(--navy); margin-bottom: 12px; }
.career-list { display: flex; flex-direction: column; gap: 10px; }
.career-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #14213d;
  font-weight: 700;
}
.career-ico {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  background: var(--off);
  border-radius: 50%;
  flex-shrink: 0;
}

.subject-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.subject-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--teal-pale);
  color: var(--teal-d);
  border: 1px solid rgba(12,184,196,.25);
  border-radius: 999px;
  padding: 9px 18px 9px 12px;
  font-size: 0.9rem;
  font-weight: 700;
}
.subj-icon {
  font-size: 1.4rem;
  line-height: 1;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--cs);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .app { padding: 24px 18px; }
  .grade-grid { grid-template-columns: repeat(2, 1fr); }
  .grade-grid > .grade-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
  .bar-row { grid-template-columns: 130px 1fr 32px; }
}

/* ---- Two-column question layout (image left, options right) ---- */
.q-split { display: flex; gap: 28px; align-items: center; }
.q-image-col { flex: 1 1 68%; min-width: 0; }
.q-options-col { flex: 1 1 32%; min-width: 0; }
.q-options-col .options { display: flex; flex-direction: column; gap: 12px; }
.q-split .option-btn { padding: 15px 18px; font-size: 0.98rem; }

/* Full-screen fit: split + columns fill the available height */
body.quiz-mode .q-split {
  width: 100%;
  max-height: 100%;
  align-items: center;
}
body.quiz-mode .q-image-col {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.quiz-mode .q-options-col {
  min-height: 0;
  display: flex;
  align-items: center;
}
body.quiz-mode .q-options-col .options {
  width: 100%;
  max-height: 100%;
  justify-content: center;
  gap: 16px;
}
body.quiz-mode .q-split .option-btn { padding: 18px 20px; font-size: 1rem; }

/* ===== clickable in-image option hotspots ===== */
.q-hotspot .q-image-col { flex: 1 1 100%; }
.q-img-wrap { position: relative; display: inline-block; line-height: 0; }
.q-img-wrap .question-image { margin: 0; }
.opt-hot { position: absolute; margin: 0; padding: 0; border: 2.5px solid transparent; border-radius: 14px;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .12s, background .12s, box-shadow .12s; }
/* Neutral "selected" state — gold, matching the app's option buttons. NOT green/tick, which would imply a correct answer. */
.opt-hot:hover { border-color: rgba(91, 33, 182, .55); background: rgba(91, 33, 182, .10); }
.opt-hot.sel { border-color: #5B21B6; background: rgba(91, 33, 182, .24);
  box-shadow: inset 0 0 0 3px #5B21B6, 0 0 0 3px rgba(91, 33, 182, .40); }

/* Tall / square windows (side-by-side kept): give the image more width so it fills bigger */
@media (min-width: 821px) and (max-aspect-ratio: 27/20) {
  body.quiz-mode .q-image-col { flex: 1 1 76%; }
  body.quiz-mode .q-options-col { flex: 1 1 24%; }
}

@media (max-width: 820px) {
  body.quiz-mode { height: auto; overflow: visible; padding: 20px 14px; align-items: flex-start; }
  body.quiz-mode .app { height: auto; max-height: none; overflow: visible; width: 96vw; }
  body.quiz-mode #quiz.screen.active { display: block; height: auto; }
  body.quiz-mode #question-card { display: block; overflow: visible; }
  .q-split { flex-direction: column; gap: 20px; align-items: stretch; }
  .q-image-col, .q-options-col { flex: 1 1 auto; width: 100%; }
  body.quiz-mode .question-image { width: 100%; max-height: none; }
}


/* ---- Motion & polish ---- */
.q-animate { animation: q-fade 0.32s cubic-bezier(.2,.6,.2,1); }
@keyframes q-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.confetti-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -16px; width: 9px; height: 14px; opacity: 0.92;
  animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-12vh) rotate(0deg); }
  100% { transform: translateY(112vh) rotate(760deg); }
}
@media (prefers-reduced-motion: reduce) {
  .q-animate { animation: none; }
  .confetti-wrap { display: none; }
}

/* ---- Print / PDF fallback (when html2pdf unavailable) ---- */
@media print {
  body * { visibility: hidden; }
  #results, #results * { visibility: visible; }
  #results { position: absolute; left: 0; top: 0; width: 100%; }
  .result-actions { display: none !important; }
  .app-header, .program-tabs { display: none !important; }
}

/* ================================================================
   GRADE 9 INFOGRAPHIC REPORT — 12 landscape A4 slides
   ================================================================ */
body.g9-report .app { max-width: 1080px; }
#results.g9-mode { background: #fff; padding: 0; }
#results.g9-mode #paid-report { border: none; border-radius: 0; background: none; box-shadow: none; }
#results.g9-mode #paid-report-content { padding: 0; }
#results.g9-mode .promo-only { margin-top: 20px; text-align: center; }

.g9-page {
  position: relative; width: 100%; aspect-ratio: 1.4143; overflow: hidden;
  background: #fff; color: #12265A; display: flex; flex-direction: column;
  padding: 16px 22px 0; margin: 0 0 18px; border: 1px solid #E2E8F5; box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.g9-pdf .g9-page { margin: 0; border: none; }

/* ---- chrome ---- */
.g9p-top { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.g9p-badge { background: #12265A; color: #fff; border-radius: 9px; padding: 5px 10px 4px; text-align: center; line-height: 1; }
.g9p-badge b { display: block; font-size: 21px; font-weight: 800; }
.g9p-badge span { font-size: 7.5px; font-weight: 700; letter-spacing: 1.5px; }
.g9p-logo { height: 38px; width: auto; }
.g9p-brand-name { font-size: 19px; font-weight: 800; letter-spacing: .6px; color: #12265A; line-height: 1.05; }
.g9p-brand-tag { font-size: 9.5px; font-weight: 700; color: #12265A; }
.g9p-brand-tag em { font-style: normal; color: #F97316; }
.g9p-hero { margin-left: auto; width: 305px; height: 46px; border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(115deg, #0F2147 5%, #1E4FD8 55%, #0CB8C4 100%); flex: 0 0 auto; }
.g9p-hero i { position: absolute; border: 1.5px solid rgba(255,255,255,.28); border-radius: 50%; }
.g9p-hero .g9h-r1 { width: 90px; height: 90px; right: 26px; top: -30px; }
.g9p-hero .g9h-r2 { width: 150px; height: 150px; right: -8px; top: -60px; }
.g9p-hero b { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; }
.g9p-hero span { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #F5B301; font-size: 19px; }

.g9p-title { font-size: 40px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; line-height: 1.03; margin-top: 11px; color: #12265A; }
.g9p-title .blu { color: #1E4FD8; }
.g9p-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #3A4C7F; margin-top: 4px; }
.g9p-accent { width: 80px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #F97316, #F5B301); margin: 7px 0 11px; flex: 0 0 auto; }

.g9p-body { flex: 1 1 auto; min-height: 0; display: grid; gap: 10px; align-content: stretch; }

/* ---- footer banner ---- */
.g9p-foot { margin: 12px -22px 0; padding: 10px 22px; background: linear-gradient(90deg, #0A173B, #152C66);
  color: #fff; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; flex: 0 0 auto; }
.g9p-foot > span:last-child { display: flex; align-items: center; gap: 8px; width: 100%; flex-wrap: wrap; }
.g9p-foot .g9f-star { color: #F5B301; font-size: 16px; flex: 0 0 auto; }
.g9p-foot .gold { color: #F5B301; }
.g9p-foot .g9f-r { margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: none; letter-spacing: .2px; opacity: .92; text-align: right; }

/* ---- cards ---- */
.g9c { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.g9c-h { padding: 6px 10px; color: #fff; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.g9c-b { padding: 8px 10px; font-size: 9.8px; line-height: 1.5; flex: 1 1 auto; min-height: 0; color: #22315E; }
.g9c-b p { margin: 0 0 4px; }
.hc-green  { background: linear-gradient(90deg, #15803D, #16A34A); }
.hc-blue   { background: linear-gradient(90deg, #1E4FD8, #2E7BE4); }
.hc-purple { background: linear-gradient(90deg, #6D28D9, #8B5CF6); }
.hc-orange { background: linear-gradient(90deg, #EA580C, #F97316); }
.hc-navy   { background: linear-gradient(90deg, #0F2147, #1A3A8F); }
.hc-teal   { background: linear-gradient(90deg, #0891B2, #0CB8C4); }
.hc-red    { background: linear-gradient(90deg, #B91C1C, #DC2626); }
.hc-pink   { background: linear-gradient(90deg, #BE185D, #EC4899); }
.hc-gold   { background: linear-gradient(90deg, #B45309, #D99A06); }
.g9-lite { background: #F8FAFF; }
.g9-lite-gold  { background: #FFFBEB; border-color: #F2E2B3; }
.g9-lite-green { background: #F0FDF4; border-color: #BFE8CC; }
.g9-lite-blue  { background: #EFF6FF; border-color: #C4D8F7; }
.g9-span2 { grid-column: span 2; }
.g9-center { text-align: center; }
.g9-center-flex { justify-content: center; }
.g9-cap { font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #12265A; margin: 0 0 5px; }
.g9-lead { font-size: 10.5px; margin: 0 0 6px; }
.g9-note { font-size: 8.6px; color: #5A6A8E; margin-top: 6px; }

/* rows with numbered circles / icons */
.g9num-row { display: flex; gap: 7px; align-items: flex-start; padding: 4px 0; border-bottom: 1px dashed #E4EAF6; }
.g9num-row:last-child { border-bottom: none; }
.g9num-row i { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800;
  font-style: normal; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.g9num-row b { font-size: 10px; display: block; }
.g9num-row p { font-size: 8.8px; margin: 1px 0 0; color: #44557F; }
.g9tr { display: flex; gap: 7px; align-items: flex-start; padding: 3.5px 0; border-bottom: 1px dashed #E4EAF6; }
.g9tr:last-child { border-bottom: none; }
.g9tr i { font-style: normal; font-size: 12px; margin-top: 1px; }
.g9tr b { font-size: 9.8px; color: #6D28D9; display: block; }
.g9tr p { font-size: 8.7px; margin: 1px 0 0; color: #44557F; }
.g9ico-row { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; }
.g9ico-row i { font-style: normal; font-size: 9.5px; margin-top: 1px; }
.g9ico-row p { margin: 0; font-size: 9.2px; }

/* gauge */
.g9g { position: relative; margin: 4px auto 0; }
.g9g svg { display: block; margin: 0 auto; }
.g9g-pct { font-size: 21px; font-weight: 800; color: #12265A; line-height: 1.1; }
.g9g-band { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; }
.g9-goldbox { background: #FFFBEB; border: 1px solid #F2E2B3; border-radius: 8px; padding: 6px 8px; font-size: 8.5px;
  text-align: left; margin-top: 6px; color: #6B4E0B; }
.g9-goldbox b { display: block; color: #B45309; font-size: 8.5px; letter-spacing: .6px; }

/* mini chips */
.g9-minis-wrap { display: flex; align-items: center; }
.g9-minis { display: flex; flex-wrap: wrap; gap: 6px; }
.g9-mini { background: #F1F5FD; border: 1px solid #DFE7F5; border-radius: 8px; padding: 4px 8px; font-size: 8.8px; font-weight: 700; color: #22315E; }
.g9-mini-red { background: #FEF2F2; border-color: #F5C6C6; color: #991B1B; }
.g9-mini-teal { background: #ECFEFF; border-color: #BAE8ED; color: #0E7490; }
.g9-theme { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
  letter-spacing: .6px; color: #0E7490; text-transform: uppercase; text-align: center; }

/* talent / subject segmented rows */
.g9t-row { display: grid; grid-template-columns: 18px 128px 1fr 40px; gap: 7px; align-items: center; padding: 4.5px 0; }
.g9t-row i { font-style: normal; font-size: 12px; text-align: center; }
.g9t-row b { font-size: 9.6px; font-weight: 800; }
.g9t-row em { font-style: normal; font-size: 11.5px; font-weight: 800; text-align: right; }
.g9t-bar { display: flex; gap: 2.5px; }
.g9t-seg { flex: 1 1 auto; height: 9px; border-radius: 2.5px; background: #E9EEF8; }
.g9-leg { display: flex; flex-wrap: wrap; gap: 9px; font-size: 8px; font-weight: 700; color: #44557F; margin-top: 7px; }
.g9-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }

/* donuts */
.g9d { position: relative; border-radius: 50%; margin: 2px auto; flex: 0 0 auto; }
.g9d svg { display: block; }
.g9d-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 1; }

/* interests */
.g9-int-wrap { display: flex; flex-direction: column; }
.g9-int-list { margin-top: 4px; }
.g9-int { display: grid; grid-template-columns: 16px 1fr 36px; gap: 6px; align-items: center; padding: 2.5px 0; border-bottom: 1px dashed #E4EAF6; }
.g9-int:last-child { border-bottom: none; }
.g9-int i { font-style: normal; font-size: 10.5px; }
.g9-int b { font-size: 9px; }
.g9-int em { font-style: normal; font-size: 10.5px; font-weight: 800; text-align: right; }

/* blend */
.g9-blend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; font-size: 9.3px; font-weight: 800; }
.g9-blend span { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 92px; text-align: center; }
.g9-blend span i { font-style: normal; font-size: 15px; }
.g9-blend em { font-style: normal; font-size: 14px; font-weight: 800; color: #B45309; }
.g9-blend-star { color: #B45309; }

/* tip boxes */
.g9-tipbox { background: linear-gradient(90deg, #0F2147, #1A3A8F); color: #fff; border-radius: 8px; padding: 6px 9px;
  font-size: 8.8px; margin-top: 7px; }
.g9-tipbox b { color: #F5B301; letter-spacing: .5px; }
.g9-greenbox { background: #F0FDF4; border: 1px solid #BFE8CC; color: #14532D; border-radius: 8px; padding: 6px 9px;
  font-size: 8.8px; margin-top: 7px; }
.g9-callout { background: #F3F0FF; border: 1px solid #DCD3F8; color: #4C1D95; border-radius: 8px; padding: 6px 9px;
  font-size: 9px; font-weight: 700; margin-top: 7px; }

/* modality bars */
.g9-mod-wrap { display: flex; gap: 12px; align-items: center; }
.g9-mods { flex: 1 1 auto; min-width: 0; }
.g9m-row { display: grid; grid-template-columns: 15px 74px 1fr 32px; gap: 6px; align-items: center; padding: 3.5px 0; }
.g9m-row i { font-style: normal; font-size: 10.5px; }
.g9m-row b { font-size: 8.8px; font-weight: 800; }
.g9m-row em { font-style: normal; font-size: 10px; font-weight: 800; text-align: right; }
.g9m-track { height: 8px; border-radius: 4px; background: #E9EEF8; overflow: hidden; }
.g9m-track div { height: 100%; border-radius: 4px; }

/* multiple intelligence */
.g9mi { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed #E4EAF6; }
.g9mi:last-child { border-bottom: none; }
.g9mi i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; font-style: normal; font-size: 13px;
  display: flex; align-items: center; justify-content: center; }
.g9mi b { font-size: 10px; display: block; }
.g9mi b em { font-style: normal; font-weight: 800; }
.g9mi p { font-size: 8.6px; margin: 1px 0 0; color: #44557F; }
.g9mi-col { border: 1.5px solid #DFE7F5; border-radius: 11px; padding: 4px 10px; }
.g9mi-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.g9-medals-t { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; color: #12265A; background: #12265A; color: #fff;
  border-radius: 999px; padding: 4px 14px; }
.g9-medals { display: flex; gap: 8px; }
.g9-medal { border: 1.5px solid #DFE7F5; border-radius: 9px; padding: 5px 9px; display: flex; gap: 6px; align-items: center; }
.g9-medal i { font-style: normal; font-size: 14px; }
.g9-medal b { font-size: 8.6px; display: block; line-height: 1.2; }
.g9-medal em { font-style: normal; font-size: 10px; font-weight: 800; color: #1E4FD8; }

/* future worlds */
.g9w-ring { position: relative; margin: 4px auto; }
.g9w-ring svg { display: block; }
.g9w-ring b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #12265A; z-index: 1; line-height: 1; }
.g9w-ring b span { font-size: 7.6px; letter-spacing: 1px; margin-top: 2px; color: #5A6A8E; }
.g9w-name { font-size: 13px; font-weight: 800; color: #12265A; margin: 2px 0 3px; }
.g9w-why { font-size: 8.8px; color: #44557F; margin: 0 0 6px; }

/* career exploration */
.g9cc .g9c-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; }
.g9cc-ico { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid; font-style: normal; font-size: 14px;
  display: flex; align-items: center; justify-content: center; }
.g9cc-name { font-size: 10px; font-weight: 800; text-align: center; line-height: 1.25; }
.g9cc-world { font-size: 7.8px; font-weight: 700; color: #5A6A8E; background: #F1F5FD; border-radius: 999px; padding: 2px 8px; text-align: center; }

/* growth plan */
.g9gl .g9c-b { display: flex; gap: 9px; align-items: center; }
.g9gl-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-style: normal; font-size: 13px;
  font-weight: 800; display: flex; align-items: center; justify-content: center; }
.g9gl p { margin: 0; font-size: 9.6px; font-weight: 600; }

/* cover */
.g9b-cover { grid-template-columns: 1.6fr 1fr; }
.g9cv-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.g9cv-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.g9chip { text-align: center; border: 1.5px solid #E4EAF6; border-radius: 10px; padding: 8px 3px 7px; }
.g9chip i { display: flex; width: 30px; height: 30px; margin: 0 auto 4px; border-radius: 50%; font-style: normal;
  font-size: 14px; align-items: center; justify-content: center; }
.g9chip b { display: block; font-size: 8.6px; font-weight: 800; letter-spacing: .3px; }
.g9chip span { display: block; font-size: 7.6px; font-weight: 600; color: #44557F; }
.g9prof { flex: 1 1 auto; min-height: 0; background: linear-gradient(120deg, #0F2147, #1A3A8F); border-radius: 14px;
  padding: 14px 16px; display: flex; gap: 14px; align-items: center; color: #fff; }
.g9prof-av { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; font-size: 26px; }
.g9prof-rows { flex: 1 1 auto; min-width: 0; }
.g9pr { display: grid; grid-template-columns: 118px 8px 1fr; gap: 4px; align-items: baseline;
  padding: 3.5px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.g9pr:last-child { border-bottom: none; }
.g9pr span { font-size: 8.6px; font-weight: 800; letter-spacing: .6px; color: #9FB2DC; }
.g9pr em { font-style: normal; color: #9FB2DC; }
.g9pr b { font-size: 10.5px; font-weight: 700; color: #fff; }
.g9cv-hero { position: relative; border-radius: 16px; overflow: hidden; min-height: 0;
  background: linear-gradient(160deg, #0F2147 0%, #1E4FD8 55%, #0CB8C4 115%); }
.g9cv-hero i { position: absolute; border: 1.5px solid rgba(255,255,255,.22); border-radius: 50%; }
.g9cv-hero .g9h-r1 { width: 130px; height: 130px; right: -22px; top: -30px; }
.g9cv-hero .g9h-r2 { width: 210px; height: 210px; right: -62px; top: -70px; }
.g9cv-hero .g9h-r3 { width: 190px; height: 190px; left: -60px; bottom: -70px; }
.g9cv-comp { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 64px; }
.g9cv-pill { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); background: #F5B301; color: #12265A;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.g9cv-tag { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(255,255,255,.85);
  font-size: 8.6px; font-weight: 700; letter-spacing: .6px; }

/* per-page grids */
.g9b-exec { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr auto; }
.g9b-exec > .g9c > .g9c-b { display: flex; flex-direction: column; justify-content: center; }
.g9b-exec > .g9c.g9-span4 > .g9c-b { justify-content: flex-start; }
.g9b-dna { grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr auto; }
.g9b-learn { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1.6fr 1fr; }
.g9b-mi { grid-template-columns: 1fr .9fr 1fr; }
.g9b-acad { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr auto; }
.g9b-acad .g9-lite:nth-child(3) { grid-column: 1; }
.g9b-worlds { grid-template-columns: repeat(3, 1fr); }
.g9b-careers { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.g9b-tips { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.g9b-teach { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.g9b-goals { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.g9b-acad { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 1fr auto; }
.g9b-acad .g9c:nth-child(1) { grid-row: 1; grid-column: 1; }
.g9b-acad .g9c:nth-child(2) { grid-row: 1; grid-column: 2 / -1; }

/* mobile: let slides flow naturally */
/* Mobile: let slides flow naturally ON SCREEN — but NEVER during PDF capture.
   The exporter adds .g9-pdf to #results; excluding it forces the correct desktop
   landscape layout in the PDF even when the student is on a phone (<700px). */
@media (max-width: 700px) {
  #results:not(.g9-pdf) .g9-page { aspect-ratio: auto; }
  #results:not(.g9-pdf) .g9p-body { display: flex; flex-direction: column; }
  #results:not(.g9-pdf) .g9p-title { font-size: 26px; }
  #results:not(.g9-pdf) .g9p-hero { display: none; }
  #results:not(.g9-pdf) .g9b-cover, #results:not(.g9-pdf) .g9cv-chips { display: flex; flex-wrap: wrap; }
}

/* fuller type on list-heavy pages */
.g9b-tips .g9c-b, .g9b-teach .g9c-b { font-size: 11px; line-height: 1.6; }
.g9b-tips .g9ico-row, .g9b-teach .g9ico-row { padding: 5px 0; }
.g9b-tips .g9ico-row p, .g9b-teach .g9ico-row p { font-size: 10.8px; }
.g9gl p { font-size: 11px; }
.g9gl .g9c-b { padding: 12px 14px; }
.g9b-worlds .g9c-b { padding: 12px; }
.g9w-name { font-size: 14.5px; }
.g9w-why { font-size: 9.6px; }
.g9d-ico { font-size: 24px; }

/* PDF capture mode: tighten tall sections so each fits one A4 page (prevents blank sliver pages) */
#results.pdf-render .profile-table th, #results.pdf-render .profile-table td { padding: 6px 12px; font-size: .82rem; }
#results.pdf-render .paid-section { padding: 14px 20px; }
#results.pdf-render .orientation-graph { padding: 14px 16px; margin-top: 10px; }
#results.pdf-render .og-label { padding: 10px 14px; margin-bottom: 10px; }
#results.pdf-render .og-details { gap: 9px; margin-top: 12px; }
#results.pdf-render .og-detail { padding: 10px 12px; }
#results.pdf-render .og-detail p { margin: 3px 0; font-size: .8rem; line-height: 1.5; }
#results.pdf-render .ptype-expanded { padding: 14px 18px; }
#results.pdf-render .ptype-expanded p { margin: 6px 0; }
#results.pdf-render .case-study { padding: 10px 14px; }
#results.pdf-render .insight-card { margin-bottom: 10px; }

/* ===== Grade 9 slides: pages 6-12 (v2 format) ===== */
.g9-colstack { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.g9b-acad2 { grid-template-columns: 1fr 1.75fr; grid-template-rows: 1fr auto; }
.g9sb { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed #E4EAF6; }
.g9sb:last-child { border-bottom: none; }
.g9sb i { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid; font-style: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.g9sb b { font-size: 10px; display: block; }
.g9sb p { font-size: 8.6px; margin: 1px 0 0; color: #44557F; }
.g9ab { display: grid; grid-template-columns: 30px 128px 1fr 52px; gap: 9px; align-items: center; padding: 8.5px 0; border-bottom: 1px dashed #EDF1F9; }
.g9ab:last-child { border-bottom: none; }
.g9ab i { width: 28px; height: 28px; border-radius: 8px; font-style: normal; font-size: 14px; color: #fff; display: flex; align-items: center; justify-content: center; }
.g9ab b { font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.g9ab-track { height: 12px; border-radius: 6px; background: #E9EEF8; overflow: hidden; }
.g9ab-track div { height: 100%; border-radius: 6px; }
.g9ab em { font-style: normal; font-size: 16px; font-weight: 800; text-align: right; }
.g9-keyband { grid-column: 1 / -1; border: 1.5px solid #CBE8D2; background: #F6FBF7; border-radius: 11px; display: flex; align-items: center; gap: 10px; padding: 8px 13px; font-size: 10.5px; }
.g9-keyband i { font-style: normal; font-size: 15px; }
.g9-keyband p { margin: 0; }
.g9-keypill { background: #15803D; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .6px; border-radius: 7px; padding: 4px 10px; white-space: nowrap; }
.g9-keyart { margin-left: auto; font-size: 15px; }
.g9-why { font-weight: 700; color: #12265A; }

.g9b-worlds2 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr auto; }
.g9wx-head { display: flex; align-items: center; gap: 7px; padding: 7px 9px; }
.g9wx-head i { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.g9wx-head b { font-size: 11px; font-weight: 800; line-height: 1.15; }
.g9wx-head em { margin-left: auto; font-style: normal; font-size: 8.4px; font-weight: 800; color: #5A6A8E; white-space: nowrap; }
.g9wx-img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top; display: block; }
.g9wx-desc { display: flex; gap: 8px; align-items: flex-start; padding: 8px 9px; }
.g9wx-desc i { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid; font-style: normal; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.g9wx-desc p { margin: 0; font-size: 9.2px; font-weight: 600; }

.g9b-car { grid-template-rows: auto 1fr auto; gap: 8px; }
.g9b-car8 { grid-template-rows: auto auto 1fr; gap: 8px; }
.g9-carintro { border: 1.5px solid #D9CBF5; background: #FAF7FF; border-radius: 11px; display: flex; gap: 9px; align-items: center; padding: 6px 12px; }
.g9-carintro i { font-style: normal; font-size: 15px; }
.g9-carintro b { font-size: 10.5px; }
.g9-carintro p { margin: 0; font-size: 8.8px; color: #44557F; }
.g9-carband { background: linear-gradient(90deg, #0F2147, #1A3A8F); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; border-radius: 9px; padding: 7px 12px; text-align: center; }
.g9-carband span { color: #F5B301; }
.g9-cargrid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
.g9car { border: 1.5px solid #DFE7F5; border-radius: 10px; padding: 7px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; min-height: 0; }
.g9car-top { display: flex; align-items: center; gap: 6px; }
.g9car-n { width: 16px; height: 16px; border-radius: 5px; color: #fff; font-style: normal; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.g9car-ico { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid; font-style: normal; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.g9car b { font-size: 9.2px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.g9car p { margin: 0; font-size: 7.9px; color: #44557F; line-height: 1.35; }

.g9b-tips2 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1.45fr auto; }
.g9b-tips2 .g9ico-row { padding: 4px 0; }
.g9b-tips2 .g9ico-row p { font-size: 9.6px; }
.g9-resc { grid-column: 1 / 4; }
.g9-res { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: start; }
.g9-resi { text-align: center; }
.g9-resi i { font-style: normal; font-size: 15px; display: block; }
.g9-resi b { font-size: 8.8px; display: block; margin: 2px 0 1px; color: #BE185D; }
.g9-resi p { margin: 0; font-size: 7.8px; color: #44557F; line-height: 1.35; }

.g9b-pers { grid-template-columns: 1fr 1.75fr 1fr; }
.g9-str { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 9px; }
.g9st { text-align: center; }
.g9st i { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid; font-style: normal; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.g9st b { display: block; font-size: 8.8px; font-weight: 800; text-transform: uppercase; margin-top: 2px; line-height: 1.15; }
.g9st p { margin: 1px 0 0; font-size: 7.7px; color: #44557F; line-height: 1.3; }
.g9-stars { display: block; color: #F5B301; font-size: 10px; letter-spacing: 1px; }
.g9-stars i { font-style: normal; color: #DCE3F0; }
.g9-lsh { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.g9-lshi { display: flex; gap: 5px; align-items: flex-start; }
.g9-lshi i { font-style: normal; font-size: 9px; margin-top: 1px; }
.g9-lshi p { margin: 0; font-size: 8.6px; }

.g9-choose { border: 1.5px solid #DFE7F5; border-radius: 11px; padding: 8px 12px; display: grid; grid-template-columns: repeat(5, 1fr) 1.15fr; gap: 9px; align-items: start; }
.g9-choose-t { grid-column: 1 / -1; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #fff; background: #1E4FD8; border-radius: 7px; padding: 4px 10px; justify-self: start; }
.g9-chi { text-align: left; }
.g9-chi i { font-style: normal; font-size: 14px; display: block; }
.g9-chi b { font-size: 8.8px; display: block; margin: 2px 0 1px; color: #12265A; text-transform: uppercase; }
.g9-chi p { margin: 0; font-size: 7.8px; color: #44557F; line-height: 1.35; }
.g9-chrem { background: #FFFBEB; border: 1px solid #F2E2B3; border-radius: 8px; padding: 6px 8px; }
.g9-chrem b { font-size: 8.6px; color: #B45309; display: block; }
.g9-chrem p { margin: 2px 0 0; font-size: 7.9px; color: #6B4E0B; }

.g9b-final { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr auto; }
.g9ap { display: flex; gap: 7px; align-items: flex-start; padding: 4.5px 0; border-bottom: 1px dashed #E4EAF6; }
.g9ap:last-child { border-bottom: none; }
.g9ap-n { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.g9ap-i { font-style: normal; font-size: 12px; margin-top: 1px; }
.g9ap b { font-size: 9.6px; text-transform: uppercase; display: block; }
.g9ap p { margin: 1px 0 0; font-size: 8.4px; color: #44557F; }
.g9-quote { background: #FFFBEB; border: 1px solid #F2E2B3; border-radius: 9px; padding: 8px 10px; font-size: 10px; font-weight: 700; color: #6B4E0B; margin-top: 8px; }
.g9-quote span { display: block; font-size: 8.4px; margin-top: 3px; color: #B45309; }
.g9-finrow { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; }
.g9-nums { display: flex; gap: 12px; justify-content: space-between; margin-top: 4px; }
.g9-nums span { font-size: 7.8px; font-weight: 700; color: #14532D; text-align: center; }
.g9-nums b { display: block; font-size: 17px; font-weight: 800; color: #15803D; }

/* ===== Grade 9 slides: BOLD & BRIGHT pass ===== */
.g9-page { color: #0E1E4E; }
.g9p-sub { color: #24356B; font-weight: 800; }
.g9p-brand-tag { font-weight: 800; }

/* cards: tinted gradient, stronger borders, soft colored shadow */
.g9c { border-width: 2px; border-color: #C4D2EE; border-radius: 13px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
  box-shadow: 0 4px 12px rgba(15, 33, 71, .09); }
.g9c-h { font-size: 12px; letter-spacing: .7px; text-shadow: 0 1px 2px rgba(0,0,0,.22);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.18); }
.g9c-b { color: #0B1838; font-weight: 700; }
.g9c-b p { color: #0B1838; font-weight: 700; }

/* text-heavy pages (parent/teacher/personality/final): heavier, higher-contrast copy */
.g9b-tips6 .g9c-b, .g9b-tips6 .g9c-b p,
.g9b-pers2 .g9c-b p, .g9b-pers2 .g9tr p,
.g9b-final3 .g9c-b p, .g9b-final3 .g9ap p, .g9b-final3 .g9ico-row p,
.g9b-tips6 .g9ico-row p { font-weight: 800; color: #0B1838; }

/* brighter, bolder body text everywhere */
.g9sb p, .g9tr p, .g9num-row p, .g9mi p, .g9st p, .g9ap p, .g9car p,
.g9-resi p, .g9-chi p, .g9wx-desc p, .g9-int b, .g9-note { color: #0E1C46; font-weight: 700; }
.g9ico-row p, .g9-lshi p { font-weight: 700; color: #0E1C46; }
.g9tr b { font-size: 10.2px; }
.g9num-row b, .g9mi b, .g9ap b, .g9sb b { font-size: 10.4px; font-weight: 800; }
.g9t-row b, .g9m-row b, .g9ab b { color: #0E1E4E; }
.g9t-row em, .g9m-row em, .g9ab em, .g9-int em { font-weight: 800; }
.g9-cap { color: #0E1E4E; letter-spacing: .9px; }
.g9-lead { font-weight: 800; color: #0E1C46; }
.g9-why { font-weight: 800; }

/* chips: colored, punchy */
.g9-mini { background: linear-gradient(180deg, #EEF4FF, #E3EDFE); border-color: #B9CDF2;
  color: #14245A; font-weight: 800; box-shadow: 0 2px 5px rgba(30, 79, 216, .10); }
.g9-mini-red { background: linear-gradient(180deg, #FEF2F2, #FDE4E4); border-color: #F0B9B9; color: #8E1616; }
.g9-mini-teal { background: linear-gradient(180deg, #ECFEFF, #D9F8FB); border-color: #9FDCE4; color: #0A5B6B; }

/* highlight boxes: stronger tints + accents */
.g9-lite-gold  { background: linear-gradient(180deg, #FFFBEB, #FDF3D0); border-color: #E8CE86; box-shadow: 0 4px 12px rgba(197, 148, 16, .13); }
.g9-lite-green { background: linear-gradient(180deg, #F0FDF4, #DEF7E5); border-color: #9ED9B0; box-shadow: 0 4px 12px rgba(22, 163, 74, .13); }
.g9-lite-blue  { background: linear-gradient(180deg, #EFF6FF, #DDEBFE); border-color: #A9C8F5; box-shadow: 0 4px 12px rgba(30, 79, 216, .13); }
.g9-lite-gold .g9c-b p, .g9-lite-green .g9c-b p, .g9-lite-blue .g9c-b p { font-weight: 700; }
.g9-goldbox { background: linear-gradient(180deg, #FFF8E1, #FCEEBF); border: 1.5px solid #E4C878; color: #5C430A;
  font-weight: 700; box-shadow: 0 3px 8px rgba(197, 148, 16, .15); }
.g9-goldbox b { color: #8F5E00; }
.g9-greenbox { background: linear-gradient(180deg, #F0FDF4, #DCF5E3); border: 1.5px solid #A4DCB5; color: #0F4A24; font-weight: 700; }
.g9-callout { background: linear-gradient(180deg, #F5F1FF, #E9E0FC); border: 1.5px solid #C8B5F0; color: #3D1490; font-weight: 800; }
.g9-tipbox { box-shadow: 0 4px 10px rgba(15, 33, 71, .28); font-weight: 600; }
.g9-tipbox b { text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.g9-quote { background: linear-gradient(180deg, #FFF8E1, #FCEEBF); border: 1.5px solid #E4C878; color: #5C430A; font-weight: 800; }
.g9-chrem { background: linear-gradient(180deg, #FFF8E1, #FCEEBF); border-color: #E4C878; }
.g9-chrem p { color: #5C430A; font-weight: 700; }

/* bands: richer */
.g9-keyband { background: linear-gradient(90deg, #F0FBF3, #E2F6E8); border-width: 2px; border-color: #A4DCB5;
  box-shadow: 0 3px 10px rgba(22, 163, 74, .12); font-weight: 700; color: #123B22; }
.g9-keyband p { color: #123B22; font-weight: 700; }
.g9-keypill { box-shadow: 0 2px 6px rgba(21, 128, 61, .35); }
.g9-carband { box-shadow: 0 4px 12px rgba(15, 33, 71, .30); font-size: 11.5px; letter-spacing: .8px; }
.g9-carintro { background: linear-gradient(90deg, #FAF7FF, #F0E9FE); border-width: 2px; border-color: #C8B5F0;
  box-shadow: 0 3px 10px rgba(109, 40, 217, .12); }
.g9-carintro b { color: #4C1D95; font-size: 11px; }
.g9-carintro p { font-weight: 700; color: #4B3B7E; }

/* career / strength / world cards pop */
.g9car { border-width: 2px; background: linear-gradient(180deg, #FFFFFF, #F6FAFF);
  box-shadow: 0 3px 9px rgba(15, 33, 71, .08); }
.g9car b { font-size: 9.4px; }
.g9car-ico, .g9cc-ico, .g9st i, .g9wx-desc i, .g9sb i { border-width: 2px; box-shadow: 0 2px 6px rgba(15, 33, 71, .12); }
.g9wx-head b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; }
.g9wx-head em { color: #24356B; font-weight: 800; }
.g9-stars { font-size: 11px; text-shadow: 0 1px 2px rgba(197, 148, 16, .35); }
.g9-medal { border-width: 2px; background: linear-gradient(180deg, #FFFFFF, #F6FAFF); box-shadow: 0 3px 8px rgba(15, 33, 71, .10); }
.g9-medal b { font-weight: 800; }
.g9chip { border-width: 2px; box-shadow: 0 3px 8px rgba(15, 33, 71, .08); background: linear-gradient(180deg, #FFFFFF, #F7FAFF); }
.g9chip span { font-weight: 700; color: #24356B; }

/* profile card + hero: glow */
.g9prof { box-shadow: 0 8px 22px rgba(10, 23, 59, .35); }
.g9pr b { font-weight: 800; }
.g9cv-hero { box-shadow: 0 8px 22px rgba(10, 23, 59, .30); }
.g9p-foot { box-shadow: 0 -3px 12px rgba(10, 23, 59, .18); font-size: 13.5px; letter-spacing: .6px; }
.g9p-foot .g9f-r { font-weight: 800; opacity: 1; color: #DCE6FA; }

/* bar numbers bigger + bolder */
.g9ab em { font-size: 17px; }
.g9t-row em { font-size: 12px; }
.g9g-pct { font-size: 23px; }
.g9g-band { font-size: 11.5px; letter-spacing: .7px; }

/* ===== Grade 9 slides: mockup-exact hero artwork ===== */
.g9p-heroimg { position: absolute; top: 0; right: 0; width: 42%; height: 140px;
  object-fit: cover; object-position: center; display: block; z-index: 1;
  border-bottom-left-radius: 84px; border-left: 5px solid #2E7BE4; border-bottom: 5px solid #1E4FD8;
  box-shadow: -8px 8px 18px rgba(10, 23, 59, .20); }
.g9p-headzone { position: relative; z-index: 2; min-height: 182px; flex: 0 0 auto; }
.g9p-headzone-cover { min-height: 0; }
.g9p-headzone .g9p-title { max-width: 55%; font-size: 44px; }
.g9p-headzone-cover .g9p-title { max-width: 60%; }
.g9p-headzone .g9p-sub { max-width: 54%; }
.g9-pdf .g9p-heroimg { box-shadow: none; }

.g9cv-heroframe { position: relative; min-height: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(10, 23, 59, .30); }
.g9cv-heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.g9cv-heroframe .g9cv-pill { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: #F5B301; color: #12265A; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  border-radius: 999px; padding: 6px 14px; white-space: nowrap; box-shadow: 0 4px 10px rgba(10,23,59,.35); }

/* ===== Grade 9 slides: SCALE-UP pass to match mockup density ===== */
.g9c-h { font-size: 13px; padding: 8px 12px; }
.g9c-b { font-size: 12px; padding: 10px 12px; line-height: 1.5; }
.g9-cap { font-size: 11px; }
.g9-lead { font-size: 13px; }
.g9-note { font-size: 10.5px; }

/* icon / numbered rows */
.g9num-row { padding: 8px 0; gap: 10px; }
.g9num-row i { width: 24px; height: 24px; font-size: 13px; }
.g9num-row b { font-size: 13px; }
.g9num-row p { font-size: 11px; }
.g9tr { padding: 7.5px 0; gap: 10px; }
.g9tr i { font-size: 19px; }
.g9tr b { font-size: 12.5px; }
.g9tr p { font-size: 10.8px; }
.g9ico-row { padding: 5.5px 0; gap: 8px; }
.g9ico-row i { font-size: 12px; }
.g9ico-row p { font-size: 11.5px; }

/* talent / subject rows */
.g9t-row { grid-template-columns: 30px 160px 1fr 56px; gap: 9px; padding: 8.5px 0; }
.g9t-row i { font-size: 19px; }
.g9t-row b { font-size: 12.5px; }
.g9t-row em { font-size: 17px; }
.g9t-seg { height: 13px; }
.g9-leg { font-size: 10px; gap: 12px; margin-top: 10px; }
.g9-leg i { width: 11px; height: 11px; }

/* academic bars */
.g9ab { grid-template-columns: 42px 168px 1fr 68px; gap: 11px; padding: 12.5px 0; }
.g9ab i { width: 38px; height: 38px; border-radius: 10px; font-size: 19px; }
.g9ab b { font-size: 14px; }
.g9ab-track { height: 17px; border-radius: 9px; }
.g9ab em { font-size: 22px; }
.g9sb { padding: 9px 0; gap: 10px; }
.g9sb i { width: 34px; height: 34px; font-size: 17px; border-radius: 9px; }
.g9sb b { font-size: 12.5px; }
.g9sb p { font-size: 10.8px; }

/* modality + interest */
.g9m-row { grid-template-columns: 22px 96px 1fr 42px; padding: 6.5px 0; }
.g9m-row i { font-size: 14px; }
.g9m-row b { font-size: 11px; }
.g9m-row em { font-size: 13px; }
.g9m-track { height: 11px; }
.g9-int { grid-template-columns: 26px 1fr 52px; padding: 6.5px 0; }
.g9-int i { font-size: 16px; }
.g9-int b { font-size: 11.5px; }
.g9-int em { font-size: 15px; }
.g9d-ico { font-size: 40px; }

/* MI page */
.g9mi { padding: 9px 0; gap: 10px; }
.g9mi i { width: 38px; height: 38px; border-radius: 10px; font-size: 19px; }
.g9mi b { font-size: 13px; }
.g9mi p { font-size: 10.8px; }
.g9-medals-t { font-size: 11.5px; padding: 6px 18px; }
.g9-medal { padding: 8px 14px; gap: 8px; }
.g9-medal i { font-size: 24px; }
.g9-medal b { font-size: 10.5px; }
.g9-medal em { font-size: 14px; }

/* gauge + potential */
.g9g-pct { font-size: 30px; }
.g9g-band { font-size: 13.5px; }
.g9-goldbox { font-size: 10.5px; padding: 9px 11px; }
.g9-goldbox b { font-size: 10.5px; }
.g9-greenbox, .g9-tipbox { font-size: 11px; padding: 9px 12px; }
.g9-callout { font-size: 11.5px; padding: 9px 12px; }

/* chips */
.g9-mini { font-size: 11px; padding: 7px 12px; border-radius: 10px; }
.g9-theme { font-size: 19px; }

/* key band */
.g9-keyband { font-size: 12.5px; padding: 11px 16px; }
.g9-keyband i { font-size: 20px; }
.g9-keypill { font-size: 11px; padding: 6px 13px; }
.g9-keyart { font-size: 24px; }
.g9-why { font-size: 11.5px; }

/* worlds */
.g9wx-head { padding: 9px 11px; }
.g9wx-head i { width: 24px; height: 24px; font-size: 13px; }
.g9wx-head b { font-size: 13px; }
.g9wx-head em { font-size: 10px; }
.g9wx-desc { padding: 10px 11px; gap: 9px; }
.g9wx-desc i { width: 30px; height: 30px; font-size: 14px; }
.g9wx-desc p { font-size: 11.2px; }

/* careers */
.g9-carintro { padding: 9px 14px; }
.g9-carintro i { font-size: 20px; }
.g9-carintro b { font-size: 13px; }
.g9-carintro p { font-size: 11px; }
.g9-carband { font-size: 13px; padding: 9px 14px; }
.g9car { padding: 9px 10px; gap: 4px; }
.g9car-n { width: 20px; height: 20px; font-size: 11px; }
.g9car-ico { width: 34px; height: 34px; font-size: 16px; }
.g9car b { font-size: 11px; }
.g9car p { font-size: 9.8px; }

/* dev tips */
.g9b-tips2 .g9ico-row { padding: 6.5px 0; }
.g9b-tips2 .g9ico-row p { font-size: 11.8px; }
.g9-resi i { font-size: 21px; }
.g9-resi b { font-size: 11px; }
.g9-resi p { font-size: 9.8px; }

/* personality overview */
.g9st i { width: 40px; height: 40px; font-size: 19px; }
.g9st b { font-size: 10.8px; }
.g9st p { font-size: 9.6px; }
.g9-stars { font-size: 13px; }
.g9-lshi i { font-size: 11px; }
.g9-lshi p { font-size: 11px; }

/* choose path + final page */
.g9-chi i { font-size: 20px; }
.g9-chi b { font-size: 10.8px; }
.g9-chi p { font-size: 9.8px; }
.g9-chrem b { font-size: 10.5px; }
.g9-chrem p { font-size: 9.8px; }
.g9ap { padding: 7px 0; gap: 9px; }
.g9ap-n { width: 21px; height: 21px; font-size: 12px; }
.g9ap-i { font-size: 16px; }
.g9ap b { font-size: 11.5px; }
.g9ap p { font-size: 10.2px; }
.g9-quote { font-size: 12px; }
.g9-quote span { font-size: 10px; }
.g9-nums b { font-size: 22px; }
.g9-nums span { font-size: 9.5px; }

/* footer */
.g9p-foot { font-size: 14px; padding: 11px 22px; }
.g9p-foot .g9f-r { font-size: 10.5px; }
.g9p-foot .g9f-star { font-size: 18px; }

/* ===== COVER page: match mockup ===== */
.g9p-headzone-cover .g9p-sub { text-transform: none; font-size: 16.5px; font-weight: 700; letter-spacing: 0;
  max-width: 56%; line-height: 1.35; color: #16265C; }
.g9cv-chips { gap: 0; }
.g9chip { border: none; box-shadow: none; background: none; border-radius: 0; padding: 4px 6px;
  border-right: 1.5px solid #D9E2F2; }
.g9chip:last-child { border-right: none; }
.g9chip i { width: 46px; height: 46px; font-size: 21px; margin-bottom: 6px; box-shadow: 0 3px 8px rgba(15,33,71,.16); }
.g9chip b { font-size: 11px; }
.g9chip span { font-size: 9.5px; }
.g9prof { padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(115deg, #12265A 0%, #1A3A8F 55%, #2453C6 120%); }
.g9prof-av { width: 62px; height: 62px; font-size: 30px; border-radius: 16px; }
.g9pr { grid-template-columns: 150px 10px 1fr; padding: 7px 0; }
.g9pr span { font-size: 11px; }
.g9pr b { font-size: 13.5px; }

/* ===== Grade 9 slides: REBALANCE pass (prevent in-card clipping) ===== */
.g9p-headzone { min-height: 160px; }
.g9p-headzone .g9p-title { font-size: 39px; }
.g9p-accent { margin: 6px 0 9px; }
.g9p-logo { height: 34px; }
.g9p-badge b { font-size: 19px; }
.g9p-body { gap: 9px; }

.g9t-row { padding: 6.5px 0; }
.g9ab { padding: 9px 0; }
.g9ab i { width: 34px; height: 34px; font-size: 17px; }
.g9ab em { font-size: 20px; }
.g9ab-track { height: 15px; }
.g9sb { padding: 7px 0; }
.g9sb i { width: 30px; height: 30px; font-size: 15px; }
.g9tr { padding: 6px 0; }
.g9mi { padding: 7px 0; }
.g9num-row { padding: 6.5px 0; }
.g9ico-row { padding: 4.5px 0; }
.g9-leg { margin-top: 8px; font-size: 9.5px; }
.g9-int { padding: 5px 0; }
.g9-note { font-size: 9.5px; margin-top: 5px; }

/* bottom lite rows: slightly smaller so top cards get room */
.g9-lite .g9c-b { font-size: 11px; padding: 9px 11px; }
.g9-lite .g9c-b p { font-size: 11px; }
.g9-blend span i { font-size: 20px; }
.g9-blend { gap: 6px; font-size: 10.5px; }
.g9-keyband { padding: 9px 14px; font-size: 11.5px; }
.g9-keyband p { font-size: 11.5px; }

/* clip-fix trims */
.g9b-dna .g9t-row { padding: 5.5px 0; }
.g9b-dna .g9ico-row { padding: 3.5px 0; }
.g9b-dna .g9ico-row p { font-size: 10.8px; }
.g9b-dna .g9-lead { font-size: 12px; margin-bottom: 4px; }
.g9b-dna .g9-tipbox { margin-top: 5px; padding: 7px 10px; font-size: 10px; }
.g9-int { padding: 3.5px 0; }
.g9-int b { font-size: 10.8px; }
.g9b-dna .g9-lite .g9c-b { font-size: 10.5px; padding: 8px 10px; }
.g9b-dna .g9-lite .g9c-b p { font-size: 10.5px; }
.g9m-row { padding: 5px 0; }
.g9-callout { padding: 7px 10px; font-size: 10.5px; margin-top: 5px; }
.g9ap { padding: 5px 0; }
.g9ap p { font-size: 9.9px; }
.g9ap b { font-size: 11px; }

/* clip-fix round 2: page 3 density + shorter header everywhere */
.g9p-headzone { min-height: 150px; }
.g9b-dna .g9t-row { padding: 3.5px 0; grid-template-columns: 26px 150px 1fr 48px; }
.g9b-dna .g9t-row b { font-size: 11.5px; }
.g9b-dna .g9t-row em { font-size: 15px; }
.g9b-dna .g9t-seg { height: 11px; }
.g9b-dna .g9-leg { margin-top: 5px; font-size: 8.8px; gap: 9px; }
.g9b-dna .g9ico-row { padding: 2.5px 0; }
.g9b-dna .g9ico-row p { font-size: 10.2px; }
.g9b-dna .g9-cap { font-size: 10px; margin-bottom: 3px; }
.g9b-dna .g9c-b { padding: 8px 11px; }
.g9-int { padding: 2.5px 0; }
.g9-int em { font-size: 13px; }
.g9-int-wrap .g9d { margin: 0 auto 2px; }

/* clip-fix round 3: final page-3 trims */
.g9b-dna .g9t-row { padding: 3px 0; }
.g9b-dna .g9t-seg { height: 10px; }
.g9b-dna .g9-tipbox { padding: 6px 9px; font-size: 9.5px; margin-top: 4px; }
.g9-int { padding: 2px 0; }
.g9-int b { font-size: 10.2px; }
.g9-int i { font-size: 14px; }

/* ===== 15-page layout grids (max 200 words/page) ===== */
.g9b-dna2 { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr auto; }
.g9-literow { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; }
.g9b-dna2 .g9t-row { padding: 8px 0; grid-template-columns: 32px 170px 1fr 56px; }
.g9b-dna2 .g9t-row b { font-size: 13px; }
.g9b-dna2 .g9t-row em { font-size: 17px; }
.g9b-dna2 .g9t-seg { height: 13px; }
.g9b-dna2 .g9-leg { margin-top: 10px; font-size: 10px; }
.g9b-dna2 .g9-int { padding: 5.5px 0; }
.g9b-dna2 .g9-int b { font-size: 11.5px; }
.g9b-dna2 .g9-int em { font-size: 15px; }
.g9b-learn2 { grid-template-columns: 1.2fr 1fr; }
.g9b-learn2 .g9m-row { padding: 9px 0; grid-template-columns: 26px 110px 1fr 48px; }
.g9b-learn2 .g9m-row b { font-size: 12px; }
.g9b-learn2 .g9m-row em { font-size: 14px; }
.g9b-learn2 .g9m-track { height: 13px; }
.g9b-learn2 .g9ico-row { padding: 9px 0; }
.g9b-learn2 .g9ico-row p { font-size: 12.5px; }
.g9b-learn2 .g9-callout { font-size: 12px; padding: 10px 13px; margin-top: 12px; }
.g9b-learn2 .g9-tipbox { font-size: 12px; padding: 11px 13px; margin-top: 12px; }
.g9b-study { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr auto; }
.g9-resc2 { grid-column: 2 / -1; }
.g9b-study .g9ico-row { padding: 8px 0; }
.g9b-study .g9ico-row p { font-size: 12.5px; }
.g9b-study .g9-mini { font-size: 12px; padding: 9px 14px; }
.g9b-study .g9-greenbox { font-size: 12px; padding: 10px 13px; margin-top: 10px; }
.g9b-tips4 { grid-template-columns: repeat(4, 1fr); }
.g9b-tips4 .g9ico-row { padding: 10px 0; }
.g9b-tips4 .g9ico-row p { font-size: 12.5px; }
.g9b-pers2 { grid-template-columns: 1.25fr 1fr; }
.g9b-pers2 .g9tr { padding: 11px 0; }
.g9b-pers2 .g9tr i { font-size: 23px; }
.g9b-pers2 .g9tr b { font-size: 14px; }
.g9b-pers2 .g9tr p { font-size: 12px; }
.g9b-pers2 .g9-goldbox { font-size: 11.5px; padding: 10px 13px; }
.g9b-strength { grid-template-columns: 1.7fr 1fr; }
.g9b-strength .g9-str { gap: 14px 12px; align-content: center; }
.g9b-strength .g9st i { width: 46px; height: 46px; font-size: 22px; }
.g9b-strength .g9st b { font-size: 12px; }
.g9b-strength .g9st p { font-size: 10.5px; }
.g9b-strength .g9-stars { font-size: 15px; }
.g9b-strength .g9ico-row { padding: 9px 0; }
.g9b-strength .g9ico-row p { font-size: 12.5px; }
.g9b-plan { grid-template-columns: 1.55fr 1fr; }
.g9b-plan .g9ap { padding: 11px 0; }
.g9b-plan .g9ap-n { width: 26px; height: 26px; font-size: 14px; }
.g9b-plan .g9ap-i { font-size: 20px; }
.g9b-plan .g9ap b { font-size: 13.5px; }
.g9b-plan .g9ap p { font-size: 11.8px; }
.g9b-plan .g9-quote { font-size: 14px; margin-top: 0; }
.g9b-plan .g9-quote span { font-size: 11px; }
.g9b-plan .g9-lite .g9c-b { display: flex; flex-direction: column; justify-content: center; font-size: 12px; }
.g9b-plan .g9-lite .g9c-b p { font-size: 12px; }
.g9b-final3 { grid-template-columns: 1.15fr 1.15fr 1fr; }
.g9b-final3 .g9ap { padding: 9.5px 0; }
.g9b-final3 .g9ap b { font-size: 12.5px; }
.g9b-final3 .g9ap p { font-size: 11px; }
.g9b-final3 .g9ico-row p { font-size: 12px; }
.g9b-final3 .g9-lite .g9c-b { font-size: 11.5px; }
.g9b-final3 .g9-lite .g9c-b p { font-size: 11.5px; }
.g9b-final3 .g9-nums b { font-size: 24px; }
.g9b-final3 .g9-nums span { font-size: 10px; }

/* 15-page fixes: page 3 trims + page 5 grid rework */
.g9b-dna2 .g9t-row { padding: 5.5px 0; }
.g9b-dna2 .g9t-seg { height: 12px; }
.g9b-dna2 .g9-leg { margin-top: 7px; }
.g9b-dna2 .g9-int { padding: 3.5px 0; }
.g9b-study { grid-template-rows: 1fr 1fr; }
.g9b-study .g9c:first-child { grid-row: 1 / -1; }
.g9-resc2 { grid-column: 3; grid-row: 2; }
.g9b-study .g9ico-row { padding: 7px 0; }
.g9b-study .g9ico-row p { font-size: 12px; }
.g9-resc2 .g9-res { display: flex; flex-direction: column; gap: 5px; }
.g9-resc2 .g9-resi { display: grid; grid-template-columns: 26px 104px 1fr; gap: 6px; align-items: center; text-align: left; }
.g9-resc2 .g9-resi i { font-size: 15px; display: inline; }
.g9-resc2 .g9-resi b { font-size: 10.2px; margin: 0; }
.g9-resc2 .g9-resi p { font-size: 8.8px; }
.g9-choose { grid-template-columns: repeat(5, 1fr); }

/* final trims */
.g9b-dna2 .g9-int { padding: 2.5px 0; }
.g9b-study .g9-mini { font-size: 11.5px; padding: 7px 12px; }

.g9g img { display: block; margin: 0 auto; }

/* ===== School Edition (18-page) additions ===== */
.g9-span4 { grid-column: 1 / -1; }
.g9-summary { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800;
  color: #0E7490; text-align: center; letter-spacing: .2px; }
.g9b-dna3 { grid-template-columns: 1.05fr 1.25fr; grid-template-rows: 1fr auto; }
.g9-radar-wrap { display: flex; align-items: center; justify-content: center; }
.g9b-dna3 .g9t-row { padding: 6.5px 0; grid-template-columns: 30px 160px 1fr 52px; }
.g9b-dna3 .g9t-row b { font-size: 12.5px; }
.g9b-dna3 .g9t-row em { font-size: 16px; }
.g9b-dna3 .g9t-seg { height: 12px; }
.g9b-dna3 .g9-leg { margin-top: 8px; font-size: 9.5px; }
.g9b-learn3 { grid-template-columns: 1.3fr 1fr 1fr; }
.g9b-learn3 .g9m-row { padding: 7px 0; grid-template-columns: 24px 100px 1fr 44px; }
.g9b-learn3 .g9m-row b { font-size: 11px; }
.g9b-learn3 .g9m-row em { font-size: 13px; }
.g9b-learn3 .g9m-track { height: 12px; }
/* chip row removed (word budget) -> the 3 remaining cards get the space back:
   fill it with SIZE + spacing, never extra words (page must stay <=200w) */
.g9b-learn3 .g9ico-row { padding: 9px 0; }
.g9b-learn3 .g9-callout { font-size: 12px; padding: 10px 12px; margin-top: 10px; }
.g9b-learn3 .g9-tipbox { font-size: 11.5px; padding: 10px 12px; margin-top: 10px; }
.g9b-tips6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.g9b-tips6 .g9ico-row { padding: 6px 0; }
.g9b-tips6 .g9ico-row p { font-size: 11.5px; }
.g9b-tips6 .g9c-b p { font-size: 11.5px; }
.g9car-str { font-size: 8.2px; font-weight: 800; color: #5A6A8E; background: #F1F5FD; border: 1px solid #DFE7F5;
  border-radius: 999px; padding: 2.5px 8px; }
.g9wx-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 9px 8px; }
.g9wx-tags .g9-mini { font-size: 8.6px; padding: 4px 8px; }
.g9-obsline { border-bottom: 1.5px dashed #B9C6E0; height: 26px; }
.g9b-goals3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr auto; }
.g9b-goals3 .g9gl .g9c-b { display: flex; gap: 10px; align-items: center; padding: 12px 14px; }
.g9b-goals3 .g9gl-n { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; color: #fff; font-style: normal;
  font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.g9b-goals3 .g9gl p { margin: 0; font-size: 11.8px; font-weight: 700; }
.g9-growquote { grid-column: 1 / -1; background: linear-gradient(90deg, #FFFBEB, #FCEEBF); border-color: #E4C878; }
.g9-growquote p { color: #6B4E0B; font-weight: 800; font-size: 12px; font-style: italic; }
.g9-growquote i { font-size: 22px; }

/* ===== Text-question panel (questions without images) — designed card look ===== */
.q-text-panel {
  position: relative; width: 100%; height: 100%; min-height: 320px;
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(150deg, #0F2147 0%, #1A3A8F 60%, #14507A 115%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 8% 9%; box-shadow: 0 18px 44px rgba(10, 23, 59, .35);
}
.q-text-panel i { position: absolute; border: 2px solid rgba(255,255,255,.10); border-radius: 50%; }
.q-text-panel .qt-r1 { width: 260px; height: 260px; right: -70px; top: -70px; }
.q-text-panel .qt-r2 { width: 360px; height: 360px; left: -120px; bottom: -140px; }
.qt-kicker {
  color: var(--gold-l, #E8C766); font-size: clamp(0.8rem, 1.4vw, 1rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 18px;
}
.qt-prompt {
  color: #fff; font-size: clamp(1.25rem, 2.3vw, 1.9rem); font-weight: 800;
  line-height: 1.5; white-space: pre-line; text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.qt-hint {
  margin-top: 22px; color: rgba(255,255,255,.75); font-size: clamp(0.75rem, 1.1vw, 0.9rem);
  font-weight: 700; letter-spacing: .04em;
  border-left: 4px solid var(--teal, #0CB8C4); padding-left: 12px;
}

/* ===== Question alignment: text-panel and options share equal height, centered ===== */
body.quiz-mode .q-split:has(.q-text-panel) { align-items: stretch; }
body.quiz-mode .q-split:has(.q-text-panel) .q-image-col { align-items: stretch; }
body.quiz-mode .q-split:has(.q-text-panel) .q-options-col { align-items: stretch; }
body.quiz-mode .q-split:has(.q-text-panel) .q-options-col .options { height: 100%; justify-content: center; }
.q-text-panel { height: 100%; }
@media (max-width: 820px) {
  .q-text-panel { min-height: 240px; height: auto; }
}

/* ================================================================
   GRADE 10 SLIDES — "Discover • Develop • Direction" design system
   ================================================================ */
.g10-page { padding: 14px 22px 0; }
.g10p-top { display: flex; align-items: flex-start; gap: 14px; flex: 0 0 auto; }
.g10p-badge { background: #0E1E4E; color: #fff; border-radius: 0 0 14px 14px; padding: 8px 13px 10px; text-align: center; line-height: 1; margin-top: -14px; }
.g10p-badge span { display: block; font-size: 8px; font-weight: 800; letter-spacing: 1.5px; }
.g10p-badge b { display: block; font-size: 26px; font-weight: 800; margin-top: 3px; }
.g10p-titlebox { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.g10p-title { font-size: 34px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; line-height: 1.02; color: #0E1E4E; }
.g10p-title .c-blue, .c-blue { color: #1E4FD8; }
.c-green { color: #16A34A; } .c-purple { color: #7C3AED; } .c-teal2 { color: #0CB8C4; } .c-green2 { color: #4ADE80; } .c-gold2 { color: #D99A06; } .c-lblue { color: #4DA3FF; }
.g10p-sub { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #24356B; margin-top: 4px; }
.g10p-rainbow { width: 190px; height: 4.5px; border-radius: 3px; margin-top: 7px;
  background: linear-gradient(90deg, #F5B301 0 22%, #16A34A 22% 44%, #1E4FD8 44% 66%, #0CB8C4 66% 84%, #7C3AED 84% 100%); }
.g10p-logo { height: 54px; width: auto; flex: 0 0 auto; }
.g10p-body { margin-top: 10px; }
.g10p-foot { justify-content: flex-start; }
.g10p-foot .g10p-web { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: .2px; color: #DCE6FA; white-space: nowrap; }

/* cover */
.g10-cover { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr auto auto; gap: 12px 16px; padding: 18px 22px 0; }
.g10cv-left { display: flex; flex-direction: column; min-height: 0; }
.g10cv-logo { height: 64px; width: auto; align-self: flex-start; }
.g10cv-title { font-size: 40px; font-weight: 800; line-height: 1.04; color: #0E1E4E; margin-top: 12px; text-transform: uppercase; }
.g10cv-title span { color: #1E4FD8; }
.g10cv-tag { font-size: 13.5px; font-weight: 800; letter-spacing: .5px; color: #24356B; margin: 9px 0 12px; }
.g10cv-prof { flex: 1 1 auto; min-height: 0; padding: 14px 18px; align-items: center; }
.g10cv-heroframe { grid-row: 1; grid-column: 2; position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 22px rgba(10,23,59,.30); min-height: 0; }
.g10cv-heroframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.g10cv-shield { position: absolute; top: 0; right: 16px; background: #0E1E4E; color: #F5B301; font-size: 15px; font-weight: 800;
  letter-spacing: .8px; padding: 12px 14px 14px; border-radius: 0 0 12px 12px; text-align: center; border: 2px solid #F5B301; border-top: none; }
.g10cv-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.g10cv-chip { display: flex; align-items: center; gap: 8px; border: 1.5px solid #DFE7F5; border-radius: 11px; padding: 8px 10px;
  background: linear-gradient(180deg, #fff, #F6FAFF); box-shadow: 0 3px 8px rgba(15,33,71,.07); }
.g10cv-chip i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 14px; color: #fff;
  display: flex; align-items: center; justify-content: center; }
.g10cv-chip b { display: block; font-size: 8.6px; letter-spacing: .3px; color: #0E1E4E; }
.g10cv-chip span { display: block; font-size: 8.6px; font-weight: 800; color: #1E4FD8; }

/* navy hero panel */
.g10-panel { position: relative; border-radius: 16px; overflow: hidden; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #081430 0%, #10305E 55%, #0C4A6E 115%); padding: 16px 16px 14px; color: #fff;
  box-shadow: 0 8px 22px rgba(10,23,59,.30); }
.g10-panel-t { font-size: 21px; font-weight: 800; line-height: 1.12; text-transform: uppercase; letter-spacing: .3px; position: relative; z-index: 2; }
.g10-panel-img { position: absolute; right: 0; bottom: 0; width: 62%; height: auto; max-height: 78%; object-fit: contain; object-position: bottom right; opacity: .95; }
.g10-panel-row { position: relative; z-index: 2; max-width: 55%; padding: 5px 0; }
.g10-panel-row p { color: #EAF1FF; font-size: 10.5px; font-weight: 700; }
.g10-panel-row i { font-size: 11px; }
.g10-panel .g10-panel-row:first-of-type { margin-top: 10px; }
.g10-panel-pill { position: relative; z-index: 2; margin-top: auto; align-self: flex-start; background: #1E4FD8; color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; border-radius: 8px; padding: 7px 11px; }

/* exec */
.g10b-exec { grid-template-columns: 1fr 1.05fr 1.05fr; grid-template-rows: auto 1fr auto; }
.g10-execprof { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.g10-av { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 30px;
  display: flex; align-items: center; justify-content: center; margin: 4px auto 6px; border: 2.5px solid rgba(255,255,255,.35); }
.g10-traits { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.g10-trait { border: 1.5px solid #DFE7F5; border-radius: 11px; text-align: center; padding: 9px 6px;
  background: linear-gradient(180deg, #fff, #F6FAFF); box-shadow: 0 3px 8px rgba(15,33,71,.07); }
.g10-trait i { display: flex; width: 36px; height: 36px; margin: 0 auto 5px; border-radius: 50%; color: #fff;
  font-style: normal; font-size: 16px; align-items: center; justify-content: center; }
.g10-trait b { display: block; font-size: 9.6px; letter-spacing: .2px; line-height: 1.2; }
.g10-trait span { display: block; font-size: 8.2px; font-weight: 700; color: #44557F; margin-top: 2px; }
.g10-span2a { grid-column: 1 / 2; }
.g10-ready { font-size: 12px; font-weight: 800; color: #0E1E4E; margin: 6px 0 0; line-height: 1.35; }
.g10-ai .g9c-b { text-align: center; font-size: 11.5px; }
.g10-ai .g9c-b p { font-size: 11.5px; }

/* dna */
.g10b-dna { grid-template-columns: 1.1fr 1.3fr; grid-template-rows: 1fr auto; }
.g10-dnagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; align-content: center; }
.g10-dnastat { display: flex; gap: 8px; align-items: center; border: 1.5px solid #E4EAF6; border-radius: 10px; padding: 6px 9px;
  background: linear-gradient(180deg, #fff, #F8FBFF); }
.g10-dnastat i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-style: normal; font-size: 14px;
  display: flex; align-items: center; justify-content: center; }
.g10-dnastat b { display: block; font-size: 10px; color: #0E1E4E; line-height: 1.15; }
.g10-dnastat em { font-style: normal; font-size: 14.5px; font-weight: 800; margin-right: 5px; }
.g10-dnastat span { font-size: 7.6px; font-weight: 800; letter-spacing: .5px; color: #5A6A8E; }
.g10-combo { grid-column: 1; background: linear-gradient(120deg, #0A173B, #152C66); border-radius: 12px; padding: 12px 16px; color: #fff; }
.g10-combo b { font-size: 14.5px; letter-spacing: .3px; }
.g10-edge { grid-column: 2; }
.g10-edge p b { font-size: 13px; color: #12265A; }

/* learning */
.g10b-learn { grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr auto; }
.g10-prefrow { grid-column: 1 / -1; display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 9px; align-items: stretch; }
.g10-prefhead { writing-mode: vertical-rl; transform: rotate(180deg); background: #7C3AED; color: #fff; border-radius: 9px;
  font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 8px 5px; text-align: center; }
.g10-pref { border: 1.5px solid #DFE7F5; border-radius: 11px; padding: 8px 9px; text-align: center;
  background: linear-gradient(180deg, #fff, #F6FAFF); }
.g10-pref i { display: flex; width: 30px; height: 30px; margin: 0 auto 4px; border-radius: 50%; color: #fff; font-style: normal;
  font-size: 14px; align-items: center; justify-content: center; }
.g10-pref b { display: block; font-size: 9.4px; color: #0E1E4E; }
.g10-pref span { display: block; font-size: 8px; font-weight: 700; color: #44557F; margin-top: 2px; }

/* mi */
.g10b-mi { grid-template-columns: 1fr 1.15fr 1.1fr; }
.g10-miwheel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; }

/* academic */
.g10b-acad { grid-template-columns: 1fr 1.9fr; grid-template-rows: 1fr auto; }
.g10-subgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; align-content: center; }
.g10-sub { border: 1.5px solid #E4EAF6; border-radius: 11px; padding: 9px 8px 8px; text-align: center;
  background: linear-gradient(180deg, #fff, #F8FBFF); box-shadow: 0 3px 8px rgba(15,33,71,.06); }
.g10-sub i { display: flex; width: 34px; height: 34px; margin: 0 auto 5px; border-radius: 50%; color: #fff; font-style: normal;
  font-size: 16px; align-items: center; justify-content: center; }
.g10-sub b { display: block; font-size: 9.6px; color: #0E1E4E; line-height: 1.2; }
.g10-sub em { display: block; font-style: normal; font-size: 17px; font-weight: 800; margin-top: 2px; }
.g10-sub span { display: block; font-size: 8.2px; font-weight: 800; letter-spacing: .5px; color: #5A6A8E; margin-bottom: 4px; }
.g10-subtrack { height: 6px; border-radius: 3px; background: #E9EEF8; overflow: hidden; }
.g10-subtrack div { height: 100%; border-radius: 3px; }
.g10-acadband { grid-column: 1 / -1; display: flex; gap: 10px; }

/* worlds & careers */
.g10b-worlds { grid-template-columns: 1fr 1fr 1fr 1.15fr; grid-template-rows: 1fr auto; }
.g10-cexplore { grid-row: 1; grid-column: 4; }
.g10-cexplore .g9ico-row { padding: 4.5px 0; }
.g10-cexplore .g9ico-row p { font-size: 10.5px; font-weight: 700; }
.g10-golden { background: linear-gradient(90deg, #FFF8E1, #FCEEBF); border: 1.5px solid #E4C878; border-radius: 9px;
  padding: 7px 10px; font-size: 9.5px; font-weight: 800; color: #6B4E0B; margin-top: 7px; }
.g10-limitless { grid-column: 1 / -1; background: linear-gradient(90deg, #0A173B, #152C66); border-radius: 12px;
  padding: 10px 16px; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g10-limitless b { font-size: 13px; letter-spacing: .3px; }
.g10-lchip { margin-left: auto; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 5px 12px; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.g10-lchip ~ .g10-lchip { margin-left: 0; }
.g10b-fit { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr auto; }
.g10-fitworlds { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g10-fitw { display: flex; gap: 9px; align-items: center; border: 2px solid; border-radius: 11px; padding: 8px 11px;
  background: linear-gradient(180deg, #fff, #F6FAFF); }
.g10-fitw i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-style: normal; font-size: 13px;
  font-weight: 800; display: flex; align-items: center; justify-content: center; }
.g10-fitw b { display: block; font-size: 11px; line-height: 1.15; }
.g10-fitw span { font-size: 9px; font-weight: 800; color: #5A6A8E; }
.g10-span3f { grid-column: 1 / -1; }
.g10-morec { grid-column: 1 / -1; }
.g10-morec-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px 14px; }
.g10-morec-grid .g9ico-row p { font-size: 10px; font-weight: 700; }
.g10b-path { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr auto auto; }
/* world poster fills the leftover column height (matches mockup); careers list sizes to content */
.g10b-path > .g9c > .g9c-b { flex: 0 0 auto; }
.g10b-path > .g9c > .g9wx-img { min-height: 70px; }
.g10-pathtag { font-size: 9px; font-weight: 800; letter-spacing: .4px; margin-top: 6px; }
.g10-edgecard { grid-column: 1 / -1; }
.g10-edgecard .g9c-b { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 12px; }
.g10b-streams { grid-template-columns: auto 2.3fr 1fr; }
.g10-streamintro { writing-mode: vertical-rl; transform: rotate(180deg); background: linear-gradient(340deg, #081430, #10305E);
  color: #fff; border-radius: 12px; padding: 14px 8px; text-align: center; }
.g10-streamintro b { font-size: 13px; letter-spacing: 1px; }
.g10-streamintro p { font-size: 8.5px; font-weight: 700; color: #B9CCF2; margin: 6px 0 0; }
.g10-streamgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.g10-stream { display: flex; gap: 7px; align-items: center; padding: 3.5px 0; border-bottom: 1px dashed #E4EAF6; }
.g10-stream i { font-style: normal; font-size: 13px; }
.g10-stream b { display: block; font-size: 9.8px; color: #0E1E4E; line-height: 1.15; }
.g10-stream span { font-size: 8px; font-weight: 700; color: #44557F; }
.g10-howx .g9ico-row { padding: 6px 0; }
.g10-howx .g9ico-row p { font-size: 10.5px; }
.g10b-skills { grid-template-columns: .85fr 1.55fr 1fr; }
.g10-hnote { margin-left: auto; font-size: 8px; letter-spacing: .3px; opacity: .85; }
.g10-skillgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 9px; align-content: center; }
.g10-skill { display: flex; gap: 7px; align-items: center; border: 1.5px solid #E4EAF6; border-radius: 9px; padding: 5px 8px; }
.g10-skill-top { border-color: #F5B301; background: #FFFBEB; }
.g10-skill i { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; color: #fff; font-style: normal; font-size: 12px;
  display: flex; align-items: center; justify-content: center; }
.g10-skill b { display: block; font-size: 9.2px; color: #0E1E4E; line-height: 1.15; }
.g10-skill span { font-size: 7.8px; font-weight: 700; color: #44557F; }
.g10b-plan { grid-template-columns: .9fr 1.25fr 1.1fr; }
.g10b-explore { grid-template-columns: .95fr 1.2fr 1fr; grid-template-rows: 1fr auto; }
.g10b-explore .g10-panel { grid-row: 1 / -1; }
.g10b-explore .g10-limitless { grid-column: 2 / -1; }
.g10-morew { display: grid; grid-template-columns: 1fr; gap: 0; }
.g10-morew .g9ico-row { padding: 3.5px 0; }
.g10-morew .g9ico-row p { font-size: 10px; font-weight: 700; }
.g10b-guide { grid-template-columns: .95fr 1.25fr 1.05fr; }
.g10b-guide .g9ap { padding: 8px 0; }
.g10b-guide .g9ap b { font-size: 12px; }
.g10b-guide .g9ap p { font-size: 10.5px; }

.g10-cover .g9p-foot { grid-column: 1 / -1; }
.g10-page .g9p-foot { margin-top: 10px; }

/* g10 polish */
.g10-morec-grid { align-content: center; gap: 12px 18px; }
.g10-morec-grid .g9ico-row { padding: 6px 0; }
.g10-morec-grid .g9ico-row p { font-size: 11.5px; font-weight: 800; }
.g10-morec-grid .g9ico-row i { font-size: 15px; }

/* ===================================================================
   Grade 11 — AI Career Intelligence Report (gold + navy luxury)
   =================================================================== */
.g11-page { color: #0E1E4E; padding: 14px 22px 0; }
.g11-page .gold, .g11p-title b { color: #C9A227; }

/* ---- chrome ---- */
.g11p-chrome { position: relative; flex: 0 0 auto; padding-right: 31%; min-height: 148px; }
.g11p-badge { position: absolute; left: -22px; top: -14px; background: linear-gradient(160deg, #0A1633, #16295C);
  color: #fff; border-radius: 0 0 16px 0; border: 2px solid #C9A227; border-top: none; border-left: none;
  padding: 8px 14px 9px; text-align: center; line-height: 1; z-index: 3; }
.g11p-badge b { display: block; font-size: 24px; font-weight: 800; color: #F5D061; }
.g11p-badge span { display: block; font-size: 8px; font-weight: 800; letter-spacing: 1.6px; margin-top: 3px; }
.g11p-head { display: flex; align-items: center; gap: 12px; padding-left: 46px; }
.g11p-logo { height: 42px; width: auto; }
.g11p-ghead { border-left: 2px solid #C9A227; padding-left: 12px; line-height: 1.1; }
.g11p-ghead b { display: block; font-size: 19px; font-weight: 800; color: #0E1E4E; letter-spacing: .3px; }
.g11p-ghead span { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: 1.1px; color: #8A6A00; margin-top: 3px; }
.g11p-titlezone { margin-top: 8px; }
.g11p-title { font-size: 33px; font-weight: 800; text-transform: uppercase; line-height: 1.02; color: #0E1E4E; letter-spacing: .3px; }
.g11p-title b { font-weight: 800; }
.g11p-div { display: flex; align-items: center; gap: 8px; margin: 6px 0 5px; max-width: 420px; }
.g11p-div i { flex: 1 1 auto; height: 2px; background: linear-gradient(90deg, #C9A227, #F5D061); border-radius: 2px; }
.g11p-div em { color: #C9A227; font-style: normal; font-size: 11px; }
.g11p-sub { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #24356B; }
.g11p-hero { position: absolute; top: -14px; right: -22px; width: 30.5%; height: 172px; border-radius: 0 0 0 64px;
  overflow: hidden; border-left: 3px solid #C9A227; border-bottom: 3px solid #C9A227; z-index: 2;
  box-shadow: 0 6px 18px rgba(10, 22, 51, .25); }
.g11p-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g11p-hbadge { position: absolute; right: 8px; bottom: 8px; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #16295C, #0A1633); border: 2.5px solid #F5D061;
  color: #fff; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 8.6px; font-weight: 800; line-height: 1.35; letter-spacing: .4px; padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.g11p-body { margin-top: 10px; }

/* ---- footer: 5 section tabs ---- */
.g11p-foot { background: linear-gradient(90deg, #0A1633, #16295C); padding: 7px 22px; }
.g11-tabs { display: flex; width: 100%; gap: 8px; }
.g11-tab { flex: 1 1 0; display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, .16); opacity: .78; min-width: 0; }
.g11-tab i { font-size: 13px; font-style: normal; flex: 0 0 auto; }
.g11-tab b { display: block; font-size: 8.6px; letter-spacing: .8px; color: #F5D061; line-height: 1.15; }
.g11-tab span { display: block; font-size: 7.6px; font-weight: 700; letter-spacing: .4px; color: #DCE6FA; line-height: 1.15; white-space: nowrap; }
.g11-tab.on { border-color: #F5D061; background: rgba(245, 208, 97, .14); opacity: 1;
  box-shadow: 0 0 0 1px rgba(245, 208, 97, .35) inset; }
.g11p-msgfoot { font-size: 13.5px; }

/* ---- shared bits ---- */
.g11-combo { background: linear-gradient(90deg, #0A1633, #1A3A8F); border-radius: 11px; color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 9px 16px; min-height: 0; }
.g11-combo span { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #F5D061; flex: 0 0 auto;
  border-right: 1.5px solid rgba(245, 208, 97, .4); padding-right: 12px; }
.g11-combo b { font-size: 13.5px; font-weight: 800; letter-spacing: .4px; }
.g11-combo b em { font-style: normal; color: #F5D061; }
.g11-span2 { grid-column: 1 / -1; }
.g11-navybanner { grid-column: 1 / -1; background: linear-gradient(90deg, #0A1633, #16295C); border: 1.5px solid #C9A227;
  border-radius: 11px; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; text-transform: uppercase; }
.g11-navybanner b { color: #F5D061; }
.g11-navybanner em { font-style: normal; color: #F5D061; }
.g11-pbar { display: flex; align-items: center; gap: 8px; padding: 4.5px 0; }
.g11-pbar i { font-style: normal; font-size: 13px; flex: 0 0 auto; }
.g11-pbar span { flex: 0 0 148px; font-size: 10.6px; font-weight: 800; color: #16265C; }
.g11-pbar b { flex: 0 0 auto; font-size: 11.5px; color: #0E1E4E; }
.g11-ptrack { flex: 1 1 auto; height: 9px; border-radius: 6px; background: #E3EAF7; overflow: hidden; }
.g11-ptrack div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #C9A227, #F5D061); }

/* ---- cover ---- */
.g11-cover { padding: 0; }
.g11cv-main { flex: 1 1 auto; min-height: 0; display: flex; }
.g11cv-left { flex: 1 1 auto; min-width: 0; padding: 22px 18px 10px 26px; display: flex; flex-direction: column; }
.g11cv-logo { height: 58px; width: auto; align-self: flex-start; }
.g11cv-grade { font-size: 44px; font-weight: 800; color: #0E1E4E; line-height: 1; margin-top: 10px; letter-spacing: .5px; }
.g11cv-talent { font-size: 46px; font-weight: 800; line-height: 1.02; letter-spacing: 1px; color: #C9A227; }
.g11cv-compass { font-size: 46px; font-weight: 800; color: #0E1E4E; line-height: 1.02; letter-spacing: 1px; }
.g11cv-rule { max-width: 330px; margin: 8px 0; }
.g11cv-air { font-size: 15px; font-weight: 800; letter-spacing: 1.4px; color: #0E1E4E; }
.g11cv-info { margin-top: 12px; background: linear-gradient(160deg, #0A1633, #16295C); border: 2px solid #C9A227;
  border-radius: 14px; padding: 12px 16px; color: #fff; }
.g11cv-row { display: flex; align-items: center; gap: 9px; padding: 4.5px 0; font-size: 11px; }
.g11cv-row i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: #C9A227; display: flex;
  align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.g11cv-row span { flex: 0 0 118px; font-weight: 800; letter-spacing: .5px; color: #F5D061; font-size: 9.6px; }
.g11cv-row em { font-style: normal; color: #8FA3D0; }
.g11cv-row b { font-weight: 800; font-size: 11px; letter-spacing: .3px; }
.g11cv-tag { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.g11cv-tag i { font-style: normal; font-size: 22px; }
.g11cv-tag div { border-left: 3px solid #C9A227; padding-left: 10px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .4px; color: #24356B; line-height: 1.45; }
.g11cv-tag span { color: #B8860B; }
.g11cv-heroframe { flex: 0 0 42%; position: relative; border-left: 4px solid #C9A227; border-radius: 74px 0 0 0;
  overflow: hidden; box-shadow: -8px 0 24px rgba(10, 22, 51, .22); }
.g11cv-heroframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.g11cv-strip { flex: 0 0 auto; background: linear-gradient(90deg, #0A1633, #16295C); border-top: 3px solid #C9A227;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 20px; }
.g11cv-chip { display: flex; align-items: center; gap: 8px; color: #fff; min-width: 0; }
.g11cv-chip i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #F5D061;
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.g11cv-chip b { display: block; font-size: 9px; letter-spacing: .6px; color: #F5D061; line-height: 1.2; }
.g11cv-chip span { display: block; font-size: 8.4px; font-weight: 700; letter-spacing: .4px; color: #DCE6FA; line-height: 1.2; }

/* ---- p2 exec ---- */
.g11b-exec { grid-template-columns: 1.45fr 1fr; grid-template-rows: auto 1fr; }
.g11-navyrow { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.g11-nc { background: linear-gradient(165deg, #0A1633, #16295C); border: 1.5px solid #C9A227; border-radius: 12px;
  color: #fff; text-align: center; padding: 9px 8px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 0; }
.g11-nc i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #F5D061;
  display: flex; align-items: center; justify-content: center; font-size: 15px; }
.g11-nc b { font-size: 9.4px; letter-spacing: .7px; color: #F5D061; }
.g11-nc em { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .3px; }
.g11-nc span { font-size: 8.6px; font-weight: 600; color: #C9D4EE; line-height: 1.35; }
.g11-nc .g11-nc-list { font-size: 9.2px; font-weight: 800; color: #fff; text-align: left; line-height: 1.5; }
.g11-nc .g11-stars { color: #F5D061; font-size: 15px; letter-spacing: 2px; }
.g11-strengthband { border: 2px solid #E3D9B0; border-radius: 12px; background: linear-gradient(180deg, #FFFDF4, #FDF6DE);
  padding: 8px 12px 9px; display: flex; flex-direction: column; min-height: 0; }
.g11-goldkicker { align-self: flex-start; background: linear-gradient(90deg, #B8860B, #C9A227); color: #fff;
  font-size: 9.6px; font-weight: 800; letter-spacing: 1px; border-radius: 20px; padding: 4px 14px; }
.g11-strengthrow { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.g11-schip { text-align: center; border-right: 1.5px solid #EADFB8; padding: 4px 4px 0; min-width: 0; }
.g11-schip:last-child { border-right: none; }
.g11-schip i { font-style: normal; font-size: 19px; display: block; }
.g11-schip b { display: block; font-size: 9.6px; font-weight: 800; letter-spacing: .5px; color: #0E1E4E; margin-top: 3px; }
.g11-schip span { display: block; font-size: 8.2px; font-weight: 600; color: #4A5A8A; line-height: 1.3; margin-top: 2px; }
.g11-potential { border: 2px solid #C4D2EE; border-radius: 12px; background: #fff; padding: 0 12px 8px; min-height: 0; }
.g11-pot-h { margin: 0 -12px 6px; background: linear-gradient(90deg, #0F2147, #1A3A8F); color: #fff; font-size: 10.5px;
  font-weight: 800; letter-spacing: .8px; padding: 6px 12px; border-radius: 10px 10px 0 0; }
.g11-potential .g11-pbar span { flex-basis: 128px; font-size: 9.8px; }

/* ---- p3 identity ---- */
.g11b-identity { grid-template-columns: 1.12fr 1fr 1fr; }
.g11-idcard { background: linear-gradient(165deg, #0A1633, #16295C); border: 2px solid #C9A227; border-radius: 13px;
  color: #fff; padding: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 0; }
.g11-id-kicker { font-size: 9.6px; font-weight: 800; letter-spacing: 2px; color: #C9D4EE; }
.g11-id-name { font-size: 20px; font-weight: 800; letter-spacing: .5px; line-height: 1.1; margin-top: 5px; color: #F5D061; }
.g11-id-line { font-size: 10.2px; font-weight: 600; color: #DCE6FA; line-height: 1.45; margin-top: 6px; }
.g11-id-code { margin-top: 10px; border: 1.5px solid rgba(245, 208, 97, .5); border-radius: 11px; padding: 8px 14px; width: 88%; }
.g11-id-code span { display: block; font-size: 8px; font-weight: 800; letter-spacing: 1.4px; color: #C9D4EE; }
.g11-id-code b { display: block; font-size: 25px; font-weight: 800; color: #fff; letter-spacing: 2px; margin-top: 2px; }
.g11-id-code em { display: block; font-style: normal; font-size: 8.8px; font-weight: 700; color: #F5D061; margin-top: 3px; }
.g11-id-title { margin-top: auto; background: linear-gradient(90deg, #B8860B, #C9A227); border-radius: 20px;
  font-size: 9.8px; font-weight: 800; letter-spacing: .8px; padding: 6px 14px; }
.g11-idsay { margin-top: 8px; background: linear-gradient(90deg, #0A1633, #16295C); border-radius: 10px; color: #F5D061;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-align: center; padding: 9px 10px; line-height: 1.5; }
.g11-drivers .g9-mini { display: block; margin: 3px 0; }

/* ---- p4 persona ---- */
.g11b-persona { grid-template-columns: 1.15fr 1.2fr 1fr; }
.g11-pt-title { font-size: 15px; font-weight: 800; color: #0E1E4E; letter-spacing: .5px; }
.g11-pt-orient { font-size: 10.6px; line-height: 1.55; color: #24356B; margin: 6px 0 8px; font-weight: 600; }

/* ---- p5 mi ---- */
.g11b-mi { grid-template-columns: 1.15fr 1fr; }
.g11-miwheel { border: 2px solid #C4D2EE; border-radius: 13px; background: linear-gradient(180deg, #fff, #F6FAFF);
  display: flex; flex-direction: column; align-items: center; padding: 10px; min-height: 0; }

/* ---- p6 dna ---- */
.g11b-dna { grid-template-columns: 1fr 1.35fr; grid-template-rows: 1fr auto; }
.g11b-dna > .g9c { grid-row: 1; }
.g11-dnagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; min-height: 0; }
.g11-dnastat { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; align-items: center;
  gap: 8px; padding: 5px 9px; min-width: 0; }
.g11-dnastat i { font-style: normal; width: 27px; height: 27px; border-radius: 8px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.g11-dnastat b { display: block; font-size: 9.8px; font-weight: 800; color: #16265C; line-height: 1.15; }
.g11-dnastat em { font-style: normal; font-size: 12px; font-weight: 800; margin-right: 5px; }
.g11-dnastat span { font-size: 7.8px; font-weight: 800; letter-spacing: .5px; color: #64748B; }

/* ---- p7 learn ---- */
.g11b-learn { grid-template-columns: 1fr 1.2fr 1.05fr; }
.g11-stylecard { background: linear-gradient(165deg, #0A1633, #16295C); border: 2px solid #C9A227; border-radius: 13px;
  color: #fff; padding: 13px 14px; display: flex; flex-direction: column; min-height: 0; }
.g11-style-k { font-size: 9.6px; font-weight: 800; letter-spacing: 2px; color: #C9D4EE; }
.g11-style-n { font-size: 21px; font-weight: 800; color: #F5D061; letter-spacing: .5px; line-height: 1.08; margin: 4px 0 8px; }
.g11-stylecard .g9ico-row p { color: #EAF0FF; font-weight: 700; }
.g11-style-pill { margin-top: auto; background: linear-gradient(90deg, #B8860B, #C9A227); border-radius: 20px;
  color: #fff; font-size: 9.8px; font-weight: 800; letter-spacing: .7px; text-align: center; padding: 6px 10px; }

/* ---- p8 riasec ---- */
.g11b-riasec { grid-template-columns: 1.3fr 1fr 1.05fr; }
.g11-rbar { display: flex; align-items: center; gap: 8px; padding: 4.5px 0; }
.g11-rbar b { width: 22px; height: 22px; border-radius: 6px; color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 11.5px; flex: 0 0 auto; }
.g11-rbar span { flex: 0 0 96px; font-size: 10.2px; font-weight: 800; color: #16265C; }
.g11-rbar em { font-style: normal; flex: 0 0 auto; font-size: 11px; font-weight: 800; }
.g11-hybrid { background: linear-gradient(165deg, #0A1633, #16295C); border: 2px solid #C9A227; border-radius: 13px;
  color: #fff; text-align: center; padding: 13px 12px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 0; }
.g11-hyb-k { font-size: 9px; font-weight: 800; letter-spacing: 1.8px; color: #C9D4EE; }
.g11-hyb-code { font-size: 42px; font-weight: 800; color: #F5D061; line-height: 1.05; letter-spacing: 2px; }
.g11-hyb-code span { color: #fff; }
.g11-hyb-t { font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-top: 3px; }
.g11-hybrid p { font-size: 9.4px; font-weight: 600; color: #DCE6FA; line-height: 1.5; margin: 7px 0 0; }

/* ---- p9 subjects ---- */
.g11b-subjects { grid-template-rows: 1fr auto; }
.g11-subgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; min-height: 0; }
.g11-sub { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; text-align: center; padding: 8px 7px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; box-shadow: 0 3px 8px rgba(15,33,71,.07); }
.g11-sub i { font-style: normal; width: 30px; height: 30px; border-radius: 9px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 15px; }
.g11-sub b { font-size: 9.8px; font-weight: 800; color: #16265C; line-height: 1.15; }
.g11-sub em { font-style: normal; font-size: 14.5px; font-weight: 800; }
.g11-sub span { font-size: 7.6px; font-weight: 800; letter-spacing: .5px; color: #64748B; }
.g11-sub .g10-subtrack { width: 88%; }
.g11-subband { display: flex; gap: 9px; min-height: 0; }

/* ---- p10 aptitude ---- */
.g11b-apt { grid-template-rows: 1fr auto; }
.g11-aptgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; min-height: 0; }
.g11-aptc { border: 1.5px solid #DFE7F5; border-radius: 11px; background: linear-gradient(180deg, #fff, #F8FBFF);
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 5px; text-align: center;
  min-width: 0; box-shadow: 0 3px 8px rgba(15,33,71,.07); }
.g11-aptc i { font-style: normal; font-size: 15px; }
.g11-aptc b { font-size: 9.4px; font-weight: 800; color: #16265C; line-height: 1.1; }
.g11-aptc span { font-size: 7.8px; font-weight: 600; color: #4A5A8A; line-height: 1.3; }
.g11-aptband { display: flex; gap: 9px; min-height: 0; }

/* ---- p11 skills ---- */
.g11b-skills { grid-template-columns: 1.7fr 1fr; }
.g11-readiness { background: linear-gradient(165deg, #0A1633, #16295C); border: 2px solid #C9A227; border-radius: 13px;
  color: #fff; text-align: center; padding: 12px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; min-height: 0; }
.g11-ready-t { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: #F5D061; }
.g11-readiness p { font-size: 10px; font-weight: 600; color: #DCE6FA; margin: 0; line-height: 1.5; }
.g11-readiness .g11-style-pill { margin-top: 4px; }
.g11-ready-ring { background: #fff; border-radius: 50%; padding: 7px; }

/* ---- p12 action ---- */
.g11b-action { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr auto; }

/* ---- p13-15 worlds ---- */
.g11b-world { grid-template-columns: 1.05fr 1.15fr 1fr; }
.g11-worldcard { border: 2.5px solid; border-radius: 13px; background: #fff; overflow: hidden; display: flex;
  flex-direction: column; align-items: center; text-align: center; padding-bottom: 9px; min-height: 0;
  box-shadow: 0 4px 12px rgba(15,33,71,.10); }
/* square crop wrapper: shows the TOP 75% of the 3:4 poster so its baked bottom title is
   cropped out (the card prints the world name itself right below — no duplicate).
   html2canvas ignores object-position, so crop via overflow + oversized img instead. */
.g11-wc-imgwrap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; flex: 0 0 auto; }
.g11-wc-imgwrap img { position: absolute; top: 0; left: 0; width: 100%; height: 133.34%; display: block; }
.g11-world-name { font-size: 14.5px; font-weight: 800; letter-spacing: .3px; line-height: 1.1; margin: 8px 6px 4px; }
.g11-world-match { margin: 2px 0; }
.g11-world-tag { font-size: 9.6px; font-weight: 800; letter-spacing: .5px; color: #8A6A00; }

/* ---- p16 careers ---- */
.g11b-careers { grid-template-rows: 1fr auto; }
.g11-cargrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); gap: 7px; min-height: 0; }
.g11-car { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; align-items: center;
  gap: 8px; padding: 4px 10px; min-width: 0; box-shadow: 0 2px 6px rgba(15,33,71,.06); }
.g11-car > b { font-size: 13px; font-weight: 800; color: #C9A227; flex: 0 0 auto; }
.g11-car i { font-style: normal; font-size: 15px; flex: 0 0 auto; }
.g11-car em { display: block; font-style: normal; font-size: 10.2px; font-weight: 800; color: #16265C; line-height: 1.15; }
.g11-car span { display: block; font-size: 7.8px; font-weight: 700; color: #8A6A00; letter-spacing: .3px; }

/* ---- p17 courses ---- */
.g11b-courses { grid-template-rows: 1fr auto; }
.g11-coursegrid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); gap: 7px; min-height: 0; }
.g11-course { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; align-items: center;
  gap: 10px; padding: 4px 12px; min-width: 0; position: relative; }
.g11-course i { font-style: normal; width: 28px; height: 28px; border-radius: 9px; background: #EEF3FC; display: flex;
  align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.g11-course b { display: block; font-size: 10.6px; font-weight: 800; color: #16265C; line-height: 1.15; }
.g11-course span { display: block; font-size: 8.6px; font-weight: 600; color: #4A5A8A; }
.g11-course em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal;
  background: linear-gradient(90deg, #B8860B, #C9A227); color: #fff; font-size: 7.8px; font-weight: 800;
  letter-spacing: .5px; border-radius: 12px; padding: 3px 8px; }
.g11-course.fit { border-color: #C9A227; background: linear-gradient(180deg, #FFFDF4, #FDF6DE); }
.g11-course.fit i { background: #F5E8BC; }
/* A best-fit card now carries real course names, which run long. Keep them
   clear of the absolutely-positioned ★ BEST FIT badge and cap them at two
   lines so a 60-character degree title cannot push the card out of the grid. */
.g11-course.fit > div { padding-right: 60px; }
.g11-course span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

/* ---- p18 exams ---- */
.g11b-exams { grid-template-rows: auto 1fr auto; }
.g11-examsteps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.g11-estep { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; gap: 7px;
  align-items: flex-start; padding: 6px 8px; min-width: 0; }
.g11-estep b { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(160deg, #B8860B, #C9A227);
  color: #fff; font-size: 10.5px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.g11-estep em { display: block; font-style: normal; font-size: 8.8px; font-weight: 800; color: #0E1E4E; letter-spacing: .3px; }
.g11-estep span { display: block; font-size: 7.9px; font-weight: 600; color: #4A5A8A; line-height: 1.3; margin-top: 1px; }
.g11-examgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 0; }
.g11-exam { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; text-align: center; padding: 8px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; min-width: 0; }
.g11-exam i { font-style: normal; font-size: 17px; }
.g11-exam b { font-size: 10.2px; font-weight: 800; color: #0E1E4E; letter-spacing: .5px; }
.g11-exam span { font-size: 9px; font-weight: 700; color: #24356B; }
.g11-exam em { font-style: normal; background: linear-gradient(90deg, #B8860B, #C9A227); color: #fff;
  font-size: 7.8px; font-weight: 800; letter-spacing: .5px; border-radius: 12px; padding: 2.5px 9px; margin-top: 2px; }
.g11-exam.focus { border: 2px solid #C9A227; background: linear-gradient(180deg, #FFFDF4, #FDF6DE);
  box-shadow: 0 4px 10px rgba(201, 162, 39, .18); }

/* ---- p19 gap ---- */
.g11b-gap { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr auto; }
.g11-gapwrap { padding: 6px 10px; }
.g11-gaptable { width: 100%; border-collapse: collapse; }
.g11-gaptable th { background: #EEF3FC; color: #0E1E4E; font-size: 8.6px; letter-spacing: .7px; padding: 5px 7px; text-align: left; }
.g11-gaptable td { font-size: 9.8px; font-weight: 700; color: #16265C; padding: 4.5px 7px; border-bottom: 1px solid #E7EDF9; }
.g11-gaptable td span { color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .4px; border-radius: 10px; padding: 2.5px 8px; }
.g11-gapside { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.g11-gap-ring { background: linear-gradient(165deg, #0A1633, #16295C); border: 2px solid #C9A227; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; color: #F5D061;
  font-size: 10px; font-weight: 800; letter-spacing: .8px; text-align: left; }
.g11-gap-ring b { max-width: 110px; line-height: 1.4; }
.g11-gap-ring .g9ring, .g11-gap-ring svg { background: #fff; border-radius: 50%; }
.g11-roadmap3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g11-road { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; align-items: center;
  gap: 8px; padding: 6px 11px; min-width: 0; }
.g11-road i { font-style: normal; font-size: 15px; }
.g11-road b { font-size: 9.4px; font-weight: 800; color: #8A6A00; letter-spacing: .5px; flex: 0 0 auto; }
.g11-road span { font-size: 8.8px; font-weight: 600; color: #24356B; line-height: 1.3; }

/* ---- p20 year ---- */
.g11b-year { grid-template-rows: 1fr auto; }
.g11-monthgrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px; min-height: 0; }
.g11-month { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; align-items: center;
  gap: 7px; padding: 4px 9px; min-width: 0; box-shadow: 0 2px 6px rgba(15,33,71,.06); }
.g11-month > b { font-size: 8.6px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #0A1633, #16295C);
  border-radius: 7px; padding: 3px 5px; flex: 0 0 auto; }
.g11-month i { font-style: normal; font-size: 13px; flex: 0 0 auto; }
.g11-month em { display: block; font-style: normal; font-size: 9.4px; font-weight: 800; color: #16265C; line-height: 1.15; }
.g11-month span { display: block; font-size: 7.9px; font-weight: 600; color: #4A5A8A; line-height: 1.25; }

/* ---- p21 projects ---- */
.g11b-projects { grid-template-rows: 1fr auto; }
.g11-projgrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px; min-height: 0; }
.g11-proj { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; padding: 6px 9px; min-width: 0; }
.g11-proj i { font-style: normal; font-size: 13px; margin-right: 5px; }
.g11-proj b { font-size: 9.6px; font-weight: 800; color: #0E1E4E; }
.g11-proj span { display: block; font-size: 8.4px; font-weight: 600; color: #24356B; line-height: 1.35; margin-top: 2px; }
.g11-proj.fit { border-color: #C9A227; background: linear-gradient(180deg, #FFFDF4, #FDF6DE); }

/* ---- p22 clubs ---- */
.g11b-clubs { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr auto; }
.g11-whyrow { grid-column: 1 / -1; background: linear-gradient(90deg, #7A1D1D, #B91C1C); border-radius: 11px;
  color: #fff; display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-wrap: wrap; }
.g11-whyrow b { font-size: 10.5px; letter-spacing: .8px; flex: 0 0 auto; }
.g11-whyrow span { font-size: 9.4px; font-weight: 800; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px; padding: 3.5px 10px; }

/* ---- p23 checklist ---- */
.g11b-check { grid-template-rows: 1fr auto; }
.g11-checkgrid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; gap: 7px; min-height: 0; }
.g11-check { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; }
.g11-check > b { color: #fff; font-size: 8.4px; font-weight: 800; letter-spacing: .4px; padding: 5px 8px; line-height: 1.2; }
.g11-check span { display: flex; align-items: center; gap: 6px; font-size: 8.6px; font-weight: 700; color: #24356B;
  padding: 3.5px 8px 0; line-height: 1.25; }
.g11-check span i { width: 9px; height: 9px; border: 1.5px solid #94A6CC; border-radius: 2.5px; flex: 0 0 auto; }

/* ---- p24 parents ---- */
.g11b-parent { grid-template-rows: 1fr auto; }
.g11-parentgrid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; gap: 7px; min-height: 0; }
.g11-parent { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; }
.g11-parent > b { color: #fff; font-size: 8.2px; font-weight: 800; letter-spacing: .3px; padding: 5px 8px; line-height: 1.25; }
.g11-parent span { font-size: 8.8px; font-weight: 700; color: #24356B; padding: 5px 9px; line-height: 1.4; }

/* ---- p25 blueprint ---- */
.g11b-blueprint { grid-template-rows: 1fr auto auto; }
.g11-bpgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; min-height: 0; }
.g11-bp { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; text-align: center; padding: 9px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.g11-bp i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 14px; }
.g11-bp b { font-size: 8.8px; font-weight: 800; letter-spacing: .4px; color: #0E1E4E; line-height: 1.2; }
.g11-bp span { font-size: 8px; font-weight: 600; color: #4A5A8A; line-height: 1.35; }
.g11-flowband { background: linear-gradient(180deg, #FFFDF4, #FDF6DE); border: 2px solid #E3D9B0; border-radius: 11px;
  padding: 7px 12px; text-align: center; }
.g11-flowband > b { font-size: 9.4px; font-weight: 800; letter-spacing: 1px; color: #8A6A00; }
.g11-flow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.g11-flow span { background: #0E1E4E; color: #fff; font-size: 8.8px; font-weight: 800; letter-spacing: .3px;
  border-radius: 14px; padding: 4px 11px; }
.g11-flow em { color: #C9A227; font-style: normal; font-weight: 800; }
.g11-remember { font-size: 13px; }

/* ---- p26 commitment ---- */
.g11b-commit { grid-template-rows: auto 1fr auto auto; }
.g11-pledgehead { background: linear-gradient(90deg, #0A1633, #16295C); border-radius: 10px; color: #F5D061;
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-align: center; padding: 7px; }
.g11-pledges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; min-height: 0; }
.g11-pledge { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; text-align: center; padding: 8px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.g11-pledge i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 14px; }
.g11-pledge b { font-size: 8.6px; font-weight: 800; letter-spacing: .3px; line-height: 1.2; }
.g11-pledge span { font-size: 7.9px; font-weight: 600; color: #4A5A8A; line-height: 1.3; }
.g11-commitband { display: flex; gap: 9px; align-items: stretch; }
.g11-own { flex: 1.1; background: linear-gradient(165deg, #0A1633, #16295C); border: 1.5px solid #C9A227;
  border-radius: 11px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .4px; line-height: 1.5;
  display: flex; align-items: center; padding: 8px 12px; }
.g11-own span { color: #F5D061; }
.g11-commitlist { flex: 1.6; border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; padding: 7px 11px;
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; align-content: center; }
.g11-commitlist b { flex: 0 0 100%; font-size: 9px; letter-spacing: .8px; color: #8A6A00; }
.g11-commitlist span { font-size: 8.8px; font-weight: 700; color: #16265C; }
.g11-sigbox { flex: 1; border: 1.5px solid #C9A227; border-radius: 11px; background: linear-gradient(180deg, #FFFDF4, #FDF6DE);
  padding: 7px 11px; display: flex; flex-direction: column; }
.g11-sigbox b { font-size: 8.8px; letter-spacing: .8px; color: #8A6A00; }
.g11-sigbox i { flex: 1 1 auto; border-bottom: 2px solid #0E1E4E; margin: 0 2px; }
.g11-sigbox span { font-size: 8.8px; font-weight: 700; color: #24356B; margin-top: 5px; }

/* ---- p27 certificate ---- */
.g11-cert { padding: 16px 26px 18px; background: #FDF9EC; }
.g11cert-frame { flex: 1 1 auto; min-height: 0; border: 3px solid #C9A227; outline: 1.5px solid #E3D9B0;
  outline-offset: 5px; border-radius: 14px; background: #fff; display: flex; flex-direction: column;
  align-items: center; padding: 12px 26px 14px; text-align: center; box-shadow: 0 8px 26px rgba(138, 106, 0, .14); }
.g11cert-head { width: 100%; display: flex; align-items: center; gap: 12px; }
.g11cert-head img { height: 38px; width: auto; }
.g11cert-gr { border-left: 2px solid #C9A227; padding-left: 11px; text-align: left; line-height: 1.15; }
.g11cert-gr b { display: block; font-size: 14px; font-weight: 800; color: #0E1E4E; }
.g11cert-gr span { display: block; font-size: 7.6px; font-weight: 800; letter-spacing: 1px; color: #8A6A00; }
.g11cert-seal { margin-left: auto; font-size: 34px; }
.g11cert-title { font-size: 40px; font-weight: 800; letter-spacing: 3px; line-height: 1.05; margin-top: 4px; color: #C9A227; text-shadow: 0 2px 0 rgba(138, 106, 0, .25); }
.g11cert-of { font-size: 12.5px; font-weight: 800; letter-spacing: 4px; color: #0E1E4E; margin-top: 2px; }
.g11cert-band { margin-top: 8px; background: linear-gradient(90deg, #0A1633, #16295C); color: #F5D061; font-size: 9.4px;
  font-weight: 800; letter-spacing: 2px; border-radius: 16px; padding: 4.5px 20px; }
.g11cert-name { font-family: "DM Serif Display", serif; font-size: 27px; color: #0E1E4E; margin-top: 7px;
  border-bottom: 2px solid #C9A227; padding: 0 34px 3px; min-width: 45%; }
.g11cert-text { font-size: 10.2px; font-weight: 600; color: #24356B; line-height: 1.55; max-width: 74%; margin: 8px 0 0; }
.g11cert-marks { display: flex; gap: 10px; width: 100%; justify-content: center; margin-top: 10px; }
.g11cert-mark { flex: 0 1 128px; border: 1.5px solid #E3D9B0; border-radius: 10px; background: linear-gradient(180deg, #FFFDF4, #FDF6DE);
  padding: 6px 4px; text-align: center; }
.g11cert-mark i { font-style: normal; font-size: 15px; display: block; }
.g11cert-mark b { display: block; font-size: 8px; font-weight: 800; letter-spacing: .6px; color: #8A6A00; margin-top: 2px; }
.g11cert-mark span { display: block; font-size: 7.6px; font-weight: 800; letter-spacing: .5px; color: #0E1E4E; }
.g11cert-sigs { display: flex; align-items: flex-end; gap: 22px; width: 88%; margin-top: auto; padding-top: 10px; }
.g11cert-sig { flex: 1; }
.g11cert-sig i { display: block; border-bottom: 2px solid #0E1E4E; height: 20px; margin-bottom: 4px; }
.g11cert-sig b { font-size: 8.2px; font-weight: 800; letter-spacing: .8px; color: #24356B; }
.g11cert-date { flex: 0 0 auto; text-align: center; }
.g11cert-date span { display: block; font-size: 7.8px; font-weight: 800; letter-spacing: 1px; color: #8A6A00; }
.g11cert-date b { display: block; font-size: 11px; font-weight: 800; color: #0E1E4E; margin-top: 3px; }
.g11cert-foot { margin-top: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: #0E1E4E; }
.g11cert-foot span { color: #C9A227; }

/* ---- p28 founder ---- */
.g11f-chrome { padding-right: 0; min-height: 0; }
.g11b-founder { grid-template-columns: 1.05fr 1fr; }
.g11f-beliefs { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g11f-belief { flex: 1; border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; display: flex;
  align-items: center; gap: 10px; padding: 6px 11px; min-height: 0; }
.g11f-belief i { font-style: normal; width: 34px; height: 34px; border-radius: 10px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.g11f-belief b { display: block; font-size: 11.5px; font-weight: 800; color: #0E1E4E; letter-spacing: .3px; }
.g11f-belief span { display: block; font-size: 9.6px; font-weight: 600; color: #24356B; line-height: 1.4; margin-top: 1px; }
.g11f-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g11f-photo { flex: 1 1 auto; min-height: 0; border: 2.5px solid #C9A227; border-radius: 13px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(10, 22, 51, .18); position: relative; }
.g11f-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.g11f-quote { background: linear-gradient(165deg, #0A1633, #16295C); border-radius: 11px; color: #fff; font-size: 10.2px;
  font-weight: 700; letter-spacing: .3px; line-height: 1.55; padding: 9px 13px; text-align: center; }
.g11f-quote b { color: #F5D061; }
.g11f-quote em { font-style: normal; color: #F5D061; }
.g11f-sig { text-align: center; line-height: 1.25; }
.g11f-sig b { display: block; font-family: "DM Serif Display", serif; font-size: 16px; color: #0E1E4E; }
.g11f-sig span { display: block; font-size: 9.4px; font-weight: 800; color: #B45309; }
.g11f-sig em { display: block; font-style: normal; font-size: 8.6px; font-weight: 700; color: #4A5A8A; }
.g11f-foot { justify-content: center; }
.g11-journey { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; flex-wrap: wrap; }
.g11-journey span { font-size: 9.6px; font-weight: 800; letter-spacing: .4px; color: #fff; }
.g11-journey em { color: #F5D061; font-style: normal; }

/* PDF capture: keep g11 grids inside forced page heights */
.g9-pdf .g11p-hero { box-shadow: none; }
.g9-pdf .g11-cover, .g9-pdf .g11-cert { break-inside: avoid; }

/* ===== g11 balance pass — distribute card interiors, fill the sheet ===== */
.g11-nc, .g11-bp, .g11-pledge, .g11-aptc, .g11-sub { justify-content: space-evenly; }
.g11-proj { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.g11-check span { flex: 1 1 auto; }
.g11-parent span { flex: 1 1 auto; display: flex; align-items: center; }
.g11b-clubs .g9c-b, .g11b-identity .g9c-b, .g11b-persona .g9c-b, .g11b-mi .g9c-b,
.g11b-learn .g9c-b, .g11b-riasec .g9c-b, .g11b-world .g9c-b, .g11b-action .g9c-b {
  display: flex; flex-direction: column; justify-content: space-evenly; }
.g11-stylecard, .g11-hybrid, .g11-miwheel, .g11-idcard { justify-content: space-evenly; }
.g11-style-pill, .g11-id-title { margin-top: 0; }
.g11-cargrid, .g11-monthgrid { grid-template-rows: none; align-content: space-evenly; }
.g11-strengthrow { align-items: center; }
.g11-potential { display: flex; flex-direction: column; }
.g11-potential .g11-pbar { flex: 1 1 auto; }
.g11-skillsc .g10-skillgrid { align-content: space-evenly; }
.g11-gapwrap { display: flex; flex-direction: column; justify-content: center; }
.g11-exam { justify-content: space-evenly; }
.g11-exam i { font-size: 24px; }
.g11-exam b { font-size: 12px; }
.g11-exam span { font-size: 10px; }
.g11-car > b { font-size: 15px; }
.g11-car i { font-size: 18px; }
.g11-car em { font-size: 11.4px; }
.g11-car span { font-size: 8.8px; }
.g11-month i { font-size: 16px; }
.g11-month em { font-size: 10.6px; }
.g11-month span { font-size: 8.8px; }
.g11-proj i { font-size: 15px; }
.g11-proj b { font-size: 10.6px; }
.g11-proj span { font-size: 9.4px; }
.g11-check span { font-size: 9.6px; }
.g11-check > b { font-size: 9px; }
.g11-parent > b { font-size: 8.8px; }
.g11-parent span { font-size: 9.8px; padding: 5px 10px; line-height: 1.45; }
.g11-bp i { width: 42px; height: 42px; font-size: 20px; }
.g11-bp b { font-size: 10px; }
.g11-bp span { font-size: 9px; }
.g11-pledge i { width: 42px; height: 42px; font-size: 20px; }
.g11-pledge b { font-size: 9.6px; }
.g11-pledge span { font-size: 8.9px; }
.g11-sub em { font-size: 16.5px; }
.g11-sub b { font-size: 10.4px; }
.g11-aptc b { font-size: 10.2px; }
.g11-aptc span { font-size: 8.6px; }
.g11-course b { font-size: 11.2px; }
.g11-course span { font-size: 9px; }
.g11-nc span { font-size: 9px; }

/* g11 certificate balance */
.g11cert-frame { justify-content: space-between; }
.g11cert-sigs { margin-top: 0; width: 90%; }
.g11cert-title { font-size: 46px; }
.g11cert-of { font-size: 13.5px; }
.g11cert-band { font-size: 10.5px; padding: 5.5px 24px; }
.g11cert-name { font-size: 32px; }
.g11cert-text { font-size: 11px; max-width: 78%; }
.g11cert-marks { gap: 12px; }
.g11cert-mark { flex: 0 1 152px; padding: 9px 6px; }
.g11cert-mark i { font-size: 20px; }
.g11cert-mark b { font-size: 9.2px; }
.g11cert-mark span { font-size: 8.8px; }
.g11cert-foot { font-size: 11.5px; }

/* ===================================================================
   Grade 12 — Premium Career Blueprint Report (orange + navy)
   =================================================================== */
.g12-page { color: #0E1E4E; padding: 12px 22px 0; }
.g12-page .c-or, .g12p-title b { color: #F5820D; }
.g12-page .c-blue2 { color: #4DA3FF; } .g12-page .c-green3 { color: #4ADE80; }
.g12-dark { background: linear-gradient(160deg, #0A1633 0%, #13234F 60%, #0E1E4E 100%); color: #EAF0FF; }
.g12-dark .g12p-title { color: #fff; }
.g12-dark .g12p-sub { color: #C9D4EE; }

/* ---- chrome ---- */
.g12p-top { display: flex; align-items: flex-start; gap: 14px; flex: 0 0 auto; }
.g12p-ribbon { background: linear-gradient(120deg, #0A1633, #1A3A8F); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: 1px; padding: 8px 16px 9px; margin: -12px 0 0 -22px; border-radius: 0 0 14px 0;
  border-bottom: 3px solid #F5820D; white-space: nowrap; }
.g12p-titlebox { flex: 1 1 auto; min-width: 0; text-align: center; padding-top: 2px; }
.g12p-title { font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1.04; color: #0E1E4E; letter-spacing: .4px; }
.g12p-dash { display: flex; justify-content: center; gap: 6px; margin: 5px 0 4px; }
.g12p-dash i { width: 46px; height: 3px; border-radius: 3px; background: #F5820D; }
.g12p-dash i:nth-child(2) { background: #1E4FD8; width: 26px; }
.g12p-dash i:nth-child(3) { background: #F5820D; width: 12px; }
.g12p-sub { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: #24356B; }
.g12p-logo { height: 40px; width: auto; background: #fff; border: 1.5px solid #E3E9F5; border-radius: 9px; padding: 3px 8px; flex: 0 0 auto; }
.g12p-body { margin-top: 9px; }
.g12p-foot { font-size: 13px; }
.g12p-foot .g9f-star { color: #F5820D; }
.g12p-foot b { color: #F5B301; }

/* generic bits */
.g12-eh { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #8A6A00; }
.g12-eh-wide { grid-column: 1 / -1; background: linear-gradient(90deg, #0F2147, #1A3A8F); color: #fff; border-radius: 9px;
  text-align: center; padding: 6px; font-size: 10.5px; letter-spacing: 1px; }
.g12-eh-dark { background: rgba(255, 255, 255, .08); border: 1px solid rgba(245, 208, 97, .4); color: #F5D061;
  border-radius: 9px; text-align: center; padding: 6px; font-size: 10px; letter-spacing: 1px; font-weight: 800; }
.g12-bandblue { background: linear-gradient(90deg, #1E4FD8, #2E7BE4); border-radius: 10px; color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 8px 13px; text-align: center; letter-spacing: .3px; }
.g12-bandblue b { color: #FFE9A8; }
.g12-bandnavy { grid-column: 1 / -1; background: linear-gradient(90deg, #0A1633, #16295C); border-radius: 10px; color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .4px; padding: 9px 14px; text-align: center; text-transform: uppercase; }
.g12-bandnavy b { color: #F5B301; }
.g12-stepband { grid-column: 1 / -1; background: linear-gradient(180deg, #FFF8EC, #FDEFD5); border: 1.5px solid #F0D9A8;
  border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.g12-stepband span { font-size: 9.4px; font-weight: 800; color: #0E1E4E; letter-spacing: .3px; }
.g12-stepband span b { color: #F5820D; }
.g12-stepband em { font-style: normal; color: #F5820D; font-weight: 800; }
.g12-span2 { grid-column: 1 / -1; }
.g12-span3 { grid-column: 1 / -1; }
.g12-profimg { border: 2.5px solid #F5820D; border-radius: 12px; overflow: hidden; position: relative; min-height: 0; flex: 1 1 auto; }
.g12-profimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* balance: distribute card interiors on g12 pages */
.g12-page .g9c-b { display: flex; flex-direction: column; justify-content: space-evenly; }

/* ---- cover ---- */
.g12-cover { background: linear-gradient(150deg, #0A1633 0%, #10224C 55%, #0E1E4E 100%); color: #fff; padding: 0; }
.g12cv-main { flex: 1 1 auto; min-height: 0; display: flex; }
.g12cv-left { flex: 1 1 auto; min-width: 0; padding: 20px 18px 8px 26px; display: flex; flex-direction: column; }
.g12cv-logo { height: 44px; width: auto; align-self: flex-start; background: #fff; border-radius: 9px; padding: 4px 10px; }
.g12cv-grade { font-size: 44px; font-weight: 800; line-height: 1; margin-top: 12px; letter-spacing: 1px; }
.g12cv-blue { font-size: 30px; font-weight: 800; letter-spacing: .6px; line-height: 1.05;
  color: #F5B301; margin-top: 3px; }
.g12cv-bar { align-self: flex-start; background: linear-gradient(90deg, #F5820D, #F5B301); color: #0A1633; font-size: 9.6px;
  font-weight: 800; letter-spacing: .8px; border-radius: 14px; padding: 4px 13px; margin-top: 8px; }
.g12cv-lines { font-size: 16px; font-weight: 800; letter-spacing: .6px; line-height: 1.5; margin-top: 12px; }
.g12cv-lines span { color: #F5B301; }
.g12cv-info { margin-top: auto; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(245, 179, 1, .55);
  border-radius: 13px; padding: 10px 14px; }
.g12cv-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 10.6px; }
.g12cv-row i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #F5820D; display: flex;
  align-items: center; justify-content: center; font-size: 11px; flex: 0 0 auto; }
.g12cv-row span { flex: 0 0 112px; font-weight: 800; letter-spacing: .5px; color: #F5D061; font-size: 9.2px; }
.g12cv-row em { font-style: normal; color: #8FA3D0; }
.g12cv-row b { font-weight: 800; letter-spacing: .3px; }
.g12cv-heroframe { flex: 0 0 40%; position: relative; border-left: 4px solid #F5820D; overflow: hidden; }
.g12cv-heroframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.g12cv-strip { flex: 0 0 auto; background: #060D22; border-top: 2.5px solid #F5820D; display: flex; align-items: center;
  justify-content: space-between; gap: 6px; padding: 9px 20px 7px; }
.g12cv-chip { display: flex; align-items: center; gap: 7px; color: #fff; min-width: 0; }
.g12cv-chip i { font-style: normal; width: 27px; height: 27px; border-radius: 50%; border: 2px solid #F5B301;
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.g12cv-chip b { display: block; font-size: 8.6px; letter-spacing: .5px; color: #F5D061; line-height: 1.2; }
.g12cv-chip span { display: block; font-size: 7.8px; font-weight: 700; letter-spacing: .4px; color: #C9D4EE; line-height: 1.2; }
.g12cv-tagline { background: #060D22; color: #DCE6FA; text-align: center; font-size: 10px; font-weight: 800;
  letter-spacing: 4px; padding: 0 0 9px; }

/* ---- p2 profile ---- */
.g12b-profile { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr auto; }
.g12-prow { display: flex; align-items: center; gap: 9px; padding: 5.5px 0; border-bottom: 1px solid #EDF2FB; }
.g12-prow:last-child { border-bottom: none; }
.g12-prow i { font-style: normal; width: 25px; height: 25px; border-radius: 8px; background: #EEF3FC; display: flex;
  align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.g12-prow span { flex: 0 0 158px; font-size: 10px; font-weight: 800; letter-spacing: .4px; color: #24356B; text-transform: uppercase; }
.g12-prow em { font-style: normal; color: #94A6CC; }
.g12-prow b { font-size: 11px; font-weight: 800; color: #0E1E4E; }
.g12-profside { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-sixgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.g12-six { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; text-align: center; padding: 8px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.g12-six i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 13px; }
.g12-six b { font-size: 8.6px; font-weight: 800; letter-spacing: .3px; line-height: 1.15; }
.g12-six span { font-size: 7.8px; font-weight: 600; color: #4A5A8A; line-height: 1.3; }

/* ---- p3 exec ---- */
.g12b-exec { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto 1fr; }
.g12-execband { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr 1.55fr; gap: 9px; }
.g12-execready, .g12-execid { background: linear-gradient(165deg, #0A1633, #16295C); border: 1.5px solid #F5820D;
  border-radius: 12px; color: #fff; text-align: center; padding: 9px; display: flex; flex-direction: column;
  align-items: center; justify-content: space-evenly; gap: 3px; }
.g12-execready .g12-eh, .g12-execid .g12-eh { color: #F5D061; }
.g12-execready b { font-size: 12px; letter-spacing: 1px; }
.g12-execready svg, .g12-execready img { background: #fff; border-radius: 50%; }
.g12-execid i { font-style: normal; font-size: 21px; }
.g12-execid b { font-size: 14.5px; font-weight: 800; color: #F5B301; letter-spacing: .5px; line-height: 1.1; }
.g12-execid span { font-size: 9px; font-weight: 600; color: #DCE6FA; line-height: 1.45; }
.g12-execmini { border: 1.5px solid #DFE7F5; border-radius: 12px; background: #fff; padding: 6px 11px;
  display: flex; flex-direction: column; justify-content: space-evenly; }
.g12-em { display: flex; align-items: center; gap: 8px; }
.g12-em i { font-style: normal; font-size: 13px; flex: 0 0 auto; }
.g12-em b { display: block; font-size: 8.4px; font-weight: 800; letter-spacing: .6px; color: #8A6A00; }
.g12-em span { display: block; font-size: 9.4px; font-weight: 700; color: #16265C; line-height: 1.2; }

/* ---- p4 dna facets ---- */
.g12b-dna { grid-template-columns: 1fr 1.05fr 1fr; }
.g12-dnacol { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-facet { flex: 1; border: 2px solid; border-radius: 12px; background: #fff; padding: 7px 11px; min-height: 0;
  display: flex; flex-direction: column; justify-content: space-evenly; box-shadow: 0 3px 8px rgba(15,33,71,.07); }
.g12-facet b { font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.g12-facet em { font-style: normal; font-size: 8.4px; font-weight: 800; letter-spacing: .7px; color: #64748B; }
.g12-facet span { font-size: 9.2px; font-weight: 600; color: #24356B; line-height: 1.4; }
.g12-facet i { font-style: normal; align-self: flex-start; color: #fff; font-size: 7.8px; font-weight: 800;
  letter-spacing: .5px; border-radius: 10px; padding: 2.5px 9px; }
.g12-dnacenter { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-dnacenter img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; }
.g12-dnasay { background: linear-gradient(90deg, #0A1633, #16295C); border: 1.5px solid #F5B301; border-radius: 11px;
  color: #fff; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 8px; line-height: 1.5; }
.g12-dnasay span { color: #F5B301; }

/* ---- p5 readiness ---- */
.g12b-ready { grid-template-columns: 1fr 2.1fr; grid-template-rows: 1fr auto; }
.g12-readyside { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-readyscore { background: linear-gradient(165deg, #0A1633, #16295C); border: 1.5px solid #F5B301; border-radius: 12px;
  color: #fff; text-align: center; padding: 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g12-readyscore b { font-size: 9.6px; letter-spacing: 1px; color: #F5D061; }
.g12-readyscore svg, .g12-readyscore img { background: #fff; border-radius: 50%; }
.g12-readyscore em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.g12-skillrings { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr 1fr; gap: 8px; min-height: 0; }
.g12-sring { border: 1.5px solid #DFE7F5; border-radius: 11px; background: linear-gradient(180deg, #fff, #F8FBFF);
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 6px 4px;
  text-align: center; min-width: 0; box-shadow: 0 3px 8px rgba(15,33,71,.07); }
.g12-sring i { font-style: normal; font-size: 13px; }
.g12-sring b { font-size: 9.6px; font-weight: 800; color: #16265C; line-height: 1.1; }
.g12-sring span { font-size: 7.6px; font-weight: 800; letter-spacing: .5px; }
.g12-levelband { grid-column: 1 / -1; border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff;
  display: flex; align-items: center; gap: 12px; padding: 7px 14px; flex-wrap: wrap; }
.g12-levelband > b { font-size: 9.6px; letter-spacing: .8px; color: #0E1E4E; }
.g12-lvl { display: flex; align-items: center; gap: 6px; opacity: .55; }
.g12-lvl.on { opacity: 1; transform: scale(1.04); }
.g12-lvl i { width: 12px; height: 12px; border-radius: 50%; }
.g12-lvl em { font-style: normal; font-size: 8.8px; font-weight: 800; color: #16265C; }
.g12-lvl span { font-size: 8px; font-weight: 700; color: #64748B; }
.g12-lvlmsg { margin-left: auto; font-size: 10px; font-weight: 800; color: #0E1E4E; }
.g12-lvlmsg b { color: #F5820D; }

/* ---- p6 brain (dark) ---- */
.g12b-brain, .g12b-super { grid-template-columns: 1fr 1.15fr 1fr; }
.g12-braincol { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.g12-brow { flex: 1; background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 11px; display: flex; align-items: center; gap: 9px; padding: 6px 11px; min-height: 0; }
.g12-brow i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #F5B301;
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.g12-brow b { display: block; font-size: 10.6px; font-weight: 800; color: #F5D061; letter-spacing: .3px; }
.g12-brow span { display: block; font-size: 8.8px; font-weight: 600; color: #C9D4EE; line-height: 1.35; }
.g12-braincenter { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-braincenter img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; border-radius: 12px; }
.g12-formula { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(245, 208, 97, .4); border-radius: 11px; padding: 7px 9px; }
.g12-formula span { font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .4px; }
.g12-formula em { font-style: normal; color: #F5B301; font-weight: 800; }
.g12-formula .g12-imp { color: #F5D061; font-size: 10px; }
.g12-neon { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.g12-neon span { flex: 0 0 108px; font-size: 9.2px; font-weight: 800; color: #EAF0FF; }
.g12-neon b { flex: 0 0 auto; font-size: 9.6px; font-weight: 800; color: #F5D061; }
.g12-ntrack { flex: 1 1 auto; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.g12-ntrack div { height: 100%; border-radius: 5px; }
.g12-power { background: linear-gradient(90deg, #B8860B, #F5820D); border-radius: 11px; color: #fff; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .8px; padding: 7px; }
.g12-power b { font-size: 17px; margin: 0 4px; }
.g12-power span { color: #FFF3D6; }

/* ---- p7 riasec ---- */
.g12b-riasec { grid-template-columns: 1.7fr 1fr; }
/* ---- Grade 12 page 8: role-model match ---------------------------------- */
/* Portrait column + stacked cards. The image is cropped by an overflow:hidden
   wrapper with an oversized img, the same technique used for the career tiles:
   html2canvas ignores object-position, so cropping must be done by the wrapper. */
.g12b-rolemodel { grid-template-columns: 0.82fr 1.6fr; }
.g12-rmcard { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 2px solid #E3EAF6; background: #fff; }
.g12-rmimg { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #F1F5FB; }
.g12-rmimg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(1.06) contrast(1.03); }
.g12-rmname { padding: 10px 12px 12px; text-align: center; }
.g12-rmname b { display: block; font-size: 19px; font-weight: 800; color: #10245C; line-height: 1.15; }
.g12-rmname span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: #5A6A8A; }
.g12-rmname i { display: inline-block; margin-top: 8px; padding: 3px 11px; border-radius: 999px;
  background: #10245C; color: #F5D061; font-style: normal; font-size: 11.5px;
  font-weight: 800; letter-spacing: .06em; }
.g12-rmright { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.g12-rmorient { margin: 8px 0 0; font-size: 13.2px; line-height: 1.5; color: #33415C; }
.g12-rmstory { margin: 0; font-size: 12.8px; line-height: 1.52; color: #33415C; }
.g12-rmnote { border-radius: 12px; padding: 9px 12px; background: #FFF7E6; border: 1px solid #F5D061;
  font-size: 12.2px; line-height: 1.45; color: #4A3A12; }

.g12-rrow { display: flex; align-items: center; gap: 9px; padding: 4px 0; border-bottom: 1px solid #EDF2FB; }
.g12-rrow:last-child { border-bottom: none; }
.g12-rrow > b { width: 26px; height: 26px; border-radius: 8px; color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 13px; flex: 0 0 auto; }
.g12-rmid { flex: 0 0 218px; min-width: 0; }
.g12-rmid em { display: block; font-style: normal; font-size: 10.2px; font-weight: 800; color: #16265C; }
.g12-rmid span { display: block; font-size: 7.9px; font-weight: 600; color: #4A5A8A; line-height: 1.25; }
.g12-rrow .g11-ptrack { flex: 1 1 auto; }
.g12-rrow > i { font-style: normal; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #0E1E4E; }
.g12-rrow u { text-decoration: none; flex: 0 0 auto; color: #fff; font-size: 8.2px; font-weight: 800; letter-spacing: .4px;
  border-radius: 9px; padding: 2.5px 8px; }
.g12-rside { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-rcode { flex: 1; background: linear-gradient(165deg, #0A1633, #16295C); border: 1.5px solid #F5B301; border-radius: 12px;
  color: #fff; text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center;
  justify-content: space-evenly; min-height: 0; }
.g12-rcode > b { font-size: 9.4px; letter-spacing: 1.4px; color: #C9D4EE; }
.g12-rletters { font-size: 40px; font-weight: 800; letter-spacing: 6px; line-height: 1; }
.g12-rcode em { font-style: normal; font-size: 10px; font-weight: 800; color: #F5D061; letter-spacing: .5px; }
.g12-rcode p { font-size: 9px; font-weight: 600; color: #DCE6FA; line-height: 1.5; margin: 0; }

/* ---- p8 areas ---- */
.g12b-areas { grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr auto; }
.g12-arealist { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.g12-area { flex: 1; border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; display: flex; align-items: center;
  gap: 10px; padding: 4px 12px; min-height: 0; box-shadow: 0 2px 6px rgba(15,33,71,.06); }
.g12-area > b { width: 26px; height: 26px; border-radius: 8px; color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.g12-area i { font-style: normal; font-size: 16px; flex: 0 0 auto; }
.g12-area em { font-style: normal; flex: 1 1 auto; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; }
.g12-areaside { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-intsum { background: linear-gradient(165deg, #0A1633, #16295C); border: 1.5px solid #F5B301; border-radius: 12px;
  color: #fff; text-align: center; padding: 9px; display: flex; flex-direction: column; align-items: center;
  justify-content: space-evenly; gap: 3px; flex: 1; min-height: 0; }
.g12-intsum b { font-size: 9.2px; letter-spacing: 1px; color: #F5D061; }
.g12-intsum svg, .g12-intsum img { background: #fff; border-radius: 50%; }
.g12-intsum em { font-style: normal; font-size: 11px; font-weight: 800; color: #4ADE80; letter-spacing: 1px; }
.g12-intsum span { font-size: 8.6px; font-weight: 600; color: #DCE6FA; line-height: 1.4; }
.g12-divmap { grid-column: 1 / -1; border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff;
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; flex-wrap: wrap; }
.g12-divmap > b { font-size: 9.4px; letter-spacing: .8px; color: #0E1E4E; }
.g12-div { display: flex; align-items: center; gap: 5px; }
.g12-div i { font-style: normal; font-size: 13px; }
.g12-div em { font-style: normal; font-size: 10.5px; font-weight: 800; }
.g12-div span { font-size: 7.8px; font-weight: 800; letter-spacing: .6px; color: #64748B; }
.g12-bigdream { margin-left: auto; font-size: 9.8px; font-weight: 700; color: #24356B; }
.g12-bigdream b { color: #F5820D; }

/* ---- p9 matches ---- */
.g12b-matches { grid-template-columns: 1.5fr 1fr; }
.g12-matchlist { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.g12-match { flex: 1; border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; align-items: center;
  gap: 9px; padding: 3px 11px; min-height: 0; box-shadow: 0 2px 6px rgba(15,33,71,.06); }
.g12-match > b { width: 24px; height: 24px; border-radius: 7px; color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.g12-match i { font-style: normal; font-size: 15px; flex: 0 0 auto; }
.g12-match em { display: block; font-style: normal; font-size: 10.8px; font-weight: 800; color: #16265C; line-height: 1.1; }
.g12-match span { display: block; font-size: 8px; font-weight: 700; color: #8A6A00; letter-spacing: .3px; }
.g12-match div { flex: 1 1 auto; min-width: 0; }
.g12-match u { text-decoration: none; text-align: center; font-size: 13px; font-weight: 800; line-height: 1; flex: 0 0 auto; }
.g12-match u small { font-size: 7.6px; letter-spacing: .6px; color: #64748B; font-weight: 800; }
.g12-matchside { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-msum { flex: 0 0 auto; }

/* ---- p10 clusters ---- */
.g12b-clusters { grid-template-columns: 1fr 1fr; }
.g12-cluscol { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 0; }
.g12-clustop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 0; }
.g12-clus { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; text-align: center; padding: 8px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; min-width: 0; }
.g12-clus > b { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; }
.g12-clus i { font-style: normal; font-size: 17px; }
.g12-clus em { font-style: normal; font-size: 9px; font-weight: 800; color: #16265C; line-height: 1.2; }
.g12-clus u { text-decoration: none; font-size: 14px; font-weight: 800; }
.g12-clusfit { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; display: flex; align-items: center;
  gap: 12px; padding: 8px 12px; }
.g12-clusfit > div { min-width: 0; }
.g12-clusfit b { display: block; font-size: 9.4px; letter-spacing: .8px; color: #0E1E4E; }
.g12-clusfit em { display: block; font-style: normal; font-size: 12px; font-weight: 800; color: #16A34A; margin: 2px 0 5px; }
.g12-clusgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; min-height: 0; }
.g12-clusmini { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; align-items: center;
  gap: 8px; padding: 4px 10px; min-width: 0; }
.g12-clusmini i { font-style: normal; width: 26px; height: 26px; border-radius: 8px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.g12-clusmini b { flex: 1 1 auto; font-size: 9.6px; font-weight: 800; color: #16265C; line-height: 1.15; }
.g12-clusmini span { font-size: 10.5px; font-weight: 800; color: #0E1E4E; }

/* ---- p11 superpowers (dark) ---- */
.g12-supercenter { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-superring { flex: 1 1 auto; min-height: 0; border: 2.5px solid #F5B301; border-radius: 50%; margin: 6px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; text-align: center;
  background: radial-gradient(circle, rgba(245, 179, 1, .12), transparent 70%); padding: 14px; }
.g12-superring span { font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; color: #fff; }
.g12-superring span:nth-child(odd) { color: #F5D061; }
.g12-shine { padding: 8px; }

/* ---- p12 worlds (dark) ---- */
.g12b-worlds { grid-template-rows: 1fr auto auto; }
/* 3x2 near-square tiles (was 6 narrow slivers). Image top-cropped via aspect-ratio +
   overflow (html2canvas ignores object-position) so the poster's baked bottom title is
   removed; caption overlaid at the bottom like the P13 career tiles. */
.g12-worldpanels { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
.g12-wpanel { border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 11px; overflow: hidden;
  background: rgba(6, 13, 34, .5); position: relative; min-width: 0; }
.g12-wpanel img { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 3 / 4; height: auto; display: block; }
.g12-wpcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 9px 6px;
  background: linear-gradient(to top, rgba(4, 10, 28, .96) 12%, rgba(4, 10, 28, .62) 58%, rgba(4, 10, 28, 0) 100%); }
.g12-wpanel b { display: block; font-size: 10.5px; font-weight: 800; color: #fff; line-height: 1.18; }
.g12-wpanel span { display: block; font-size: 9.2px; font-weight: 800; letter-spacing: .4px; margin-top: 1px; }
.g12-journeyband { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(245, 208, 97, .4); border-radius: 11px; padding: 7px 10px; }
.g12-journeyband span { font-size: 8.8px; font-weight: 800; color: #fff; letter-spacing: .4px; }
.g12-journeyband em { font-style: normal; color: #F5B301; font-weight: 800; }
.g12-worldfoot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g12-wf { background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 11px;
  padding: 6px 12px; display: flex; align-items: center; gap: 5px 10px; flex-wrap: wrap; }
.g12-wf b { flex: 0 0 100%; font-size: 8.8px; letter-spacing: .8px; color: #F5D061; }
.g12-wf span { font-size: 8.6px; font-weight: 700; color: #EAF0FF; }

/* ---- p13 careers ---- */
.g12b-cars { grid-template-rows: 1fr auto; }
.g12-cargrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; min-height: 0; align-content: space-evenly; }
.g12-car { border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; display: flex; align-items: center;
  gap: 8px; padding: 5px 11px; min-width: 0; box-shadow: 0 2px 6px rgba(15,33,71,.06); }
.g12-car > b { font-size: 14px; font-weight: 800; color: #F5820D; flex: 0 0 auto; }
.g12-car i { font-style: normal; font-size: 17px; flex: 0 0 auto; }
.g12-car em { display: block; font-style: normal; font-size: 10.8px; font-weight: 800; color: #16265C; line-height: 1.15; }
.g12-car span { display: block; font-size: 8.2px; font-weight: 700; color: #8A6A00; letter-spacing: .3px; }

/* ---- p14/15 landscape ---- */
.g12b-courseland { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr auto; }
.g12b-examland { grid-template-rows: 1fr auto; }
.g12-examgrid6 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
.g12-exam6 { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; }
.g12-e6head { color: #fff; display: flex; align-items: center; gap: 7px; padding: 5px 10px; }
.g12-e6head i { font-style: normal; font-size: 13px; }
.g12-e6head b { font-size: 9.8px; font-weight: 800; letter-spacing: .5px; }
.g12-e6head u { text-decoration: none; margin-left: auto; background: rgba(255, 255, 255, .22); border-radius: 10px;
  font-size: 8px; font-weight: 800; padding: 2px 8px; }
.g12-exam6 > span { flex: 1; display: flex; align-items: center; font-size: 9.6px; font-weight: 700; color: #24356B; padding: 0 12px; }
.g12-exam6.focus { border: 2px solid #F5820D; background: linear-gradient(180deg, #FFF8EC, #FDEFD5); }

/* ---- p16 explore ---- */
.g12b-explore { grid-template-columns: 1fr 1.55fr; }
.g12-expside { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-expmain { display: grid; grid-template-rows: 1.2fr 1fr; gap: 8px; min-height: 0; }
.g12-nextrow { flex-direction: row !important; gap: 7px; }
.g12-next { flex: 1; border: 1.5px solid #E3EAF7; border-radius: 10px; background: #F8FBFF; text-align: center;
  padding: 8px 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; min-width: 0; }
.g12-next i { font-style: normal; font-size: 16px; }
.g12-next b { font-size: 9px; font-weight: 800; letter-spacing: .6px; color: #0E1E4E; }
.g12-next span { font-size: 8.4px; font-weight: 600; color: #4A5A8A; line-height: 1.3; }

/* ---- p17 degrees ---- */
.g12b-degrees { grid-template-rows: 1fr auto auto; }
.g12-coursegrid { grid-template-rows: none; align-content: space-evenly; }
.g12-factorband { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; padding: 7px 12px; }
.g12-factorband b { font-size: 9.2px; letter-spacing: .8px; color: #8A6A00; }
.g12-factorband span { font-size: 9.2px; font-weight: 700; color: #24356B; }

/* ---- p18 timeline ---- */
.g12b-timeline { grid-template-columns: 1fr 1.25fr 1fr; }

/* ---- p19 gap ---- */
.g12b-gap { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr auto; }
.g12-gaprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4.5px 0;
  border-bottom: 1px solid #EDF2FB; }
.g12-gaprow b { font-size: 10.4px; font-weight: 800; color: #16265C; }
.g12-gaprow span { color: #fff; font-size: 7.8px; font-weight: 800; letter-spacing: .5px; border-radius: 10px; padding: 3px 10px; }
.g12-gapnote { background: linear-gradient(90deg, #0A1633, #16295C); border-radius: 10px; color: #fff; font-size: 9.4px;
  font-weight: 700; padding: 8px 11px; line-height: 1.45; margin-top: 5px; }
.g12-gapnote b { color: #F5B301; }
.g12-tracker { grid-column: 1 / -1; border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
.g12-tracker > b { font-size: 9.2px; letter-spacing: .8px; color: #0E1E4E; }
.g12-tracker span { display: flex; align-items: center; gap: 5px; font-size: 8.2px; font-weight: 800; color: #64748B; letter-spacing: .3px; }
.g12-tracker span i { width: 17px; height: 17px; border-radius: 50%; background: #E3EAF7; color: #24356B; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; }
.g12-tracker span.on { color: #0E1E4E; }
.g12-tracker span.on i { background: #F5820D; color: #fff; }
.g12-tracker em { font-style: normal; color: #F5820D; font-weight: 800; }

/* ---- p20 year ---- */
.g12b-year { grid-template-rows: 1fr auto auto; }
.g12-monthgrid { grid-template-rows: none; align-content: space-evenly; }
.g12-habitband { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  border: 1.5px solid #DFE7F5; border-radius: 10px; background: #fff; padding: 7px 12px; }
.g12-habitband b { font-size: 9.2px; letter-spacing: .8px; color: #8A6A00; }
.g12-habitband span { font-size: 9.2px; font-weight: 700; color: #24356B; }

/* ---- p21 projects ---- */
.g12b-projects { grid-template-columns: 1fr 1.35fr; }
.g12-stairs { display: flex; gap: 5px; margin-top: 6px; }
.g12-stairs span { flex: 1; color: #fff; border-radius: 8px; text-align: center; font-size: 8px; font-weight: 800;
  letter-spacing: .4px; padding: 7px 2px; }
.g12-stairs span b { display: block; font-size: 10px; margin-bottom: 1px; }
.g12-stairs span:nth-child(2) { margin-top: -4px; } .g12-stairs span:nth-child(3) { margin-top: -8px; }
.g12-stairs span:nth-child(4) { margin-top: -12px; } .g12-stairs span:nth-child(5) { margin-top: -16px; }
.g12-pgroup { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border: 1.5px solid #E3EAF7;
  border-radius: 10px; background: #fff; margin: 2.5px 0; }
.g12-pgroup i { font-style: normal; width: 28px; height: 28px; border-radius: 9px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.g12-pgroup b { display: block; font-size: 10.2px; font-weight: 800; color: #16265C; }
.g12-pgroup span { display: block; font-size: 8.8px; font-weight: 600; color: #4A5A8A; }
.g12-pgroup.fit { border-color: #F5820D; background: linear-gradient(180deg, #FFF8EC, #FDEFD5); }
.g12-formula2 { background: linear-gradient(90deg, #0A1633, #16295C); border-radius: 10px; color: #fff; text-align: center;
  font-size: 9.6px; font-weight: 700; padding: 7px 10px; margin-top: 4px; }
.g12-formula2 b { color: #F5B301; }

/* ---- p22 clubs ---- */
.g12b-clubs { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr auto; }

/* ---- p23 colleges ---- */
.g12b-colleges { grid-template-rows: 1fr auto auto; }
.g12-collgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; min-height: 0; align-content: space-evenly; }
.g12-coll { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; display: flex; align-items: center;
  gap: 10px; padding: 6px 12px; min-width: 0; box-shadow: 0 2px 6px rgba(15,33,71,.06); }
.g12-coll i { font-style: normal; width: 30px; height: 30px; border-radius: 9px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.g12-coll b { display: block; font-size: 11px; font-weight: 800; color: #0E1E4E; }
.g12-coll span { display: block; font-size: 9.2px; font-weight: 700; color: #24356B; }
.g12-coll.focus { border: 2px solid #F5820D; background: linear-gradient(180deg, #FFF8EC, #FDEFD5); }
.g12-collhow .g12-howrow { flex-direction: row !important; gap: 6px; }
.g12-collhow .g9ico-row { flex: 1; flex-direction: column; text-align: center; gap: 4px; padding: 2px; }
.g12-collhow .g9ico-row p { font-size: 8.6px; line-height: 1.3; }

/* ---- p24 scholarships ---- */
.g12b-scholar { grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr auto; }

/* ---- p25 checklist ---- */
.g12b-check { grid-template-columns: .8fr 1.15fr 1fr; grid-template-rows: 1fr auto; }
.g12-signcol { display: flex; min-height: 0; }
.g12-ck { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.g12-ck i { width: 13px; height: 13px; border: 2px solid #94A6CC; border-radius: 3.5px; flex: 0 0 auto; }
.g12-ck p { margin: 0; font-size: 10.2px; font-weight: 700; color: #24356B; }

/* ---- p26 parent / p27 commitment ---- */
.g12b-parent, .g12b-commit { grid-template-columns: 1fr 1.2fr 1fr; }
.g12-parmid, .g12-commid { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-parbig { text-align: center; font-size: 16.5px; font-weight: 800; letter-spacing: .4px; line-height: 1.35; color: #0E1E4E; }
.g12-parbig span { color: #1E4FD8; }
.g12-parbig em { font-style: normal; color: #F5820D; }
.g12-empband { display: flex; align-items: center; justify-content: center; gap: 5px 9px; flex-wrap: wrap;
  background: linear-gradient(90deg, #0A1633, #16295C); border-radius: 10px; padding: 7px 10px; }
.g12-empband span { font-size: 8.4px; font-weight: 800; color: #fff; letter-spacing: .3px; }
.g12-pledgeline { background: linear-gradient(180deg, #FFF8EC, #FDEFD5); border: 1.5px solid #F0D9A8; border-radius: 10px;
  padding: 8px 12px; display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.g12-pledgeline b { flex: 0 0 100%; font-size: 9.6px; letter-spacing: .6px; color: #8A6A00; text-align: center; }
.g12-pledgeline i { flex: 1 1 60px; border-bottom: 2px solid #0E1E4E; height: 14px; }
.g12-pledgeline span { font-size: 7.8px; font-weight: 800; letter-spacing: .4px; color: #64748B; }

/* ---- p28 summary ---- */
.g12b-summary { grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: 1fr auto; }
.g12-sumwheel { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 7px; min-height: 0; }
.g12-sumstep { border: 1.5px solid #DFE7F5; border-radius: 11px; background: #fff; padding: 6px 10px; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-evenly; box-shadow: 0 2px 6px rgba(15,33,71,.06); }
.g12-sumstep b { align-self: flex-start; color: #fff; font-size: 9px; font-weight: 800; border-radius: 8px; padding: 2.5px 8px; }
.g12-sumstep em { font-style: normal; font-size: 10.4px; font-weight: 800; color: #0E1E4E; letter-spacing: .6px; }
.g12-sumstep span { font-size: 8.4px; font-weight: 600; color: #4A5A8A; line-height: 1.35; }

/* ---- p29 cert overrides ---- */
.g12-cert { background: #FDF7EE; }
.g12cert-frame { border-color: #F5820D; outline-color: #F8D8AF; }
.g12cert-title { color: #F5820D; text-shadow: 0 2px 0 rgba(181, 88, 9, .22); }
.g12cert-band { background: linear-gradient(90deg, #B45309, #F5820D); color: #fff; }

/* ---- p30 founder ---- */
.g12b-founder { grid-template-columns: 1fr 1.3fr 1fr; }
.g12-fcol { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g12-fcol .g9c { flex: 1; }
.g12-fmid { border: 2px solid #F0D9A8; border-radius: 13px; background: linear-gradient(180deg, #FFFDF7, #FDF4E3);
  padding: 12px 16px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; min-height: 0; }
.g12-fquote { font-size: 15.5px; font-weight: 800; color: #0E1E4E; line-height: 1.4; }
.g12-fquote span { color: #1E4FD8; }
.g12-fquote em { font-style: normal; color: #F5820D; }
.g12-fmsg { font-size: 10px; font-weight: 600; color: #24356B; line-height: 1.6; margin: 0; }
.g12-fmsg b { color: #0E1E4E; }
.g12-fdream { font-size: 11px; font-weight: 800; color: #0E1E4E; margin: 0; }
.g12-fdream span { color: #F5820D; }
.g12-fsig b { display: block; font-family: "DM Serif Display", serif; font-size: 17px; color: #0E1E4E; }
.g12-fsig span { display: block; font-size: 9.6px; font-weight: 800; color: #B45309; }
.g12-fsig em { display: block; font-style: normal; font-size: 8.8px; font-weight: 700; color: #4A5A8A; }

/* dark-page card adjustments */
.g12-dark .g9c { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.g12-dark .g9c-b, .g12-dark .g9c-b p { color: #EAF0FF; }
.g12-dark .g9ico-row p { color: #EAF0FF; }

/* ===== g12 polish pass ===== */
.g12-clus { justify-content: center; gap: 7px; }
.g12-clusgrid { align-content: space-evenly; }
.g12-clusmini { padding: 8px 12px; }
.g12b-year .g11-monthgrid { grid-template-rows: repeat(3, 1fr); align-content: stretch; }
.g12b-year .g11-month i { font-size: 18px; }
.g12b-year .g11-month em { font-size: 11.2px; }
.g12b-year .g11-month span { font-size: 9.4px; }
.g12b-year .g11-month > b { font-size: 10px; padding: 4px 7px; }
.g12-sumstep { justify-content: center; gap: 4px; }
.g12-sumstep em { font-size: 11.5px; }
.g12-sumstep span { font-size: 9px; }
.g12-car { padding: 8px 12px; }
.g12-car em { font-size: 11.4px; }
.g12-pledgeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 16px; align-items: end; }
.g12-pledgeline b { grid-column: 1 / -1; }
.g12-pledgeline i:nth-of-type(1) { grid-row: 2; grid-column: 1; }
.g12-pledgeline i:nth-of-type(2) { grid-row: 2; grid-column: 2; }
.g12-pledgeline i:nth-of-type(3) { grid-row: 2; grid-column: 3; }
.g12-pledgeline span:nth-of-type(1) { grid-row: 3; grid-column: 1; text-align: center; }
.g12-pledgeline span:nth-of-type(2) { grid-row: 3; grid-column: 2; text-align: center; }
.g12-pledgeline span:nth-of-type(3) { grid-row: 3; grid-column: 3; text-align: center; }
.g12-facet i { border-radius: 10px; }

/* ===== g12 fidelity pass ===== */
.g12-cargridP { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; min-height: 0; }
.g12-carP { border: 1.5px solid rgba(255, 255, 255, .24); border-radius: 11px; overflow: hidden;
  background: rgba(6, 13, 34, .5); position: relative; min-width: 0;
  aspect-ratio: 1 / 1; height: 100%; width: auto; justify-self: center; }
/* html2canvas ignores object-position, so instead of object-fit:cover we let the
   portrait poster (aspect 0.75) overflow the square top-aligned; overflow:hidden on
   .g12-carP crops the BOTTOM band where the poster's baked title lives -> only our
   caption remains. width:100% -> height = 133% of the square, top:0 shows the top 75%. */
.g12-carP img { position: absolute; top: 0; left: 0; width: 100%; height: 133.34%; display: block; }
.g12-cp { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 15px 8px 6px;
  background: linear-gradient(to top, rgba(4, 10, 28, .96) 10%, rgba(4, 10, 28, .66) 56%, rgba(4, 10, 28, 0) 100%); }
.g12-cp b { color: #F5B301; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.g12-cp i { font-style: normal; font-size: 12px; flex: 0 0 auto; }
.g12-cp em { display: block; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; line-height: 1.15; }
.g12-cp span { display: block; font-size: 8px; font-weight: 700; color: #F5D061; letter-spacing: .2px; }
.g12-superring { position: relative; overflow: hidden; }
.g12-summit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.g12-superring span { position: relative; z-index: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.g12-dark .g12-exam6 { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .2); }
.g12-dark .g12-exam6 > span { color: #EAF0FF; }
.g12-dark .g12-exam6.focus { background: linear-gradient(180deg, #FFF8EC, #FDEFD5); }
.g12-dark .g12-exam6.focus > span { color: #24356B; }
.g12-dark .g12-bandnavy { border: 1.5px solid rgba(245, 208, 97, .45); }
.g12-dark .g9-mini { background: rgba(255, 255, 255, .1); color: #EAF0FF; border-color: rgba(255, 255, 255, .25); }

/* ===== career / world tile imagery: brighter, clearer, uniform premium look ===== */
.g9wx-img,
.g11-worldcard img,
.g12-wpanel img,
.g12-carP img,
.g12-profimg img {
  filter: brightness(1.09) contrast(1.06) saturate(1.13);
  image-rendering: -webkit-optimize-contrast;
}

/* ===== TYPE SCALE — bigger copy on pages with measured slack (g11/g12 already dense, left alone) =====
   measured slack: g10 p12=337 p10=319 p14=305 p11=291 p5=236 p7=191 p2=125
                   g9  p14=212 p13=165 p11/p12=158 p4=131 p2=103 p10=92 (p10 shares g9b-tips6 → size to 92) */
/* (a) distribute rows so short-content cards fill their column — the same technique
   g12 already uses (.g12-page .g9c-b space-evenly), which is why g12 has almost no slack.
   :not([class*="grid"]) is REQUIRED — .g10-streamgrid/.g10-skillgrid are display:grid and
   must not be flipped to flex-column (that collapses them into one column). */
.g9b-tips6 > .g9c > .g9c-b,
.g9b-final3 > .g9c > .g9c-b,
.g9b-pers2 > .g9c > .g9c-b,
.g9b-learn3 > .g9c > .g9c-b,
.g9b-exec > .g9c:not(.g9-span4) > .g9c-b,
.g10b-streams > .g9c > .g9c-b:not([class*="grid"]),
.g10b-plan > .g9c > .g9c-b:not([class*="grid"]),
.g10b-guide > .g9c > .g9c-b:not([class*="grid"]),
.g10b-skills > .g9c > .g9c-b:not([class*="grid"]),
.g10b-mi > .g9c > .g9c-b:not([class*="grid"]),
.g10b-worlds .g10-cexplore > .g9c-b { display: flex; flex-direction: column; justify-content: space-evenly; }

/* (b) bigger copy ONLY in the roomy cards (.g10-howx = "How to Explore Better",
   .g10-buildc = "How to Build Skills"); the sibling grids keep their own size */
.g10-howx .g9ico-row p, .g10-buildc .g9ico-row p { font-size: 14px; }
.g10b-plan .g9ico-row p { font-size: 14px; }
.g10b-plan .g9ap b { font-size: 14px; }
.g10b-plan .g9ap p { font-size: 13.2px; }
.g10b-guide .g9c-b p, .g10b-guide .g9ico-row p { font-size: 13.5px; }
.g10b-mi .g9c-b p, .g10b-mi .g9ico-row p { font-size: 13.4px; }
.g10b-worlds .g9wx-desc p { font-size: 12px; }
.g10b-worlds .g10-cexplore .g9ico-row p { font-size: 13px; }
.g10b-exec .g9c-b p { font-size: 12.8px; }

.g9b-tips6 .g9ico-row p, .g9b-tips6 .g9c-b p { font-size: 14px; }
.g9b-pers2 .g9tr b { font-size: 15.5px; }
.g9b-pers2 .g9tr p { font-size: 13.4px; }
.g9b-final3 .g9ico-row p { font-size: 14.4px; }
.g9b-final3 .g9-lite .g9c-b, .g9b-final3 .g9-lite .g9c-b p { font-size: 12.8px; }
.g9b-learn3 .g9ico-row p { font-size: 12px; }
.g9b-learn3 .g9-mini { font-size: 10.4px; }
/* p2 back to 2 "how you learn" items (word budget) -> reclaim the space with
   size + row spacing, not words */
.g9b-exec .g9num-row p, .g9b-exec .g9tr p, .g9b-exec .g9ico-row p { font-size: 12.6px; }
.g9b-exec .g9num-row b, .g9b-exec .g9tr b { font-size: 13.4px; }
.g9b-exec .g9num-row, .g9b-exec .g9tr { padding: 9px 0; }
.g9b-exec .g9ico-row { padding: 8px 0; }
.g9b-exec .g9-lead { font-size: 13px; margin-bottom: 8px; }

/* (c) single-paragraph guidance cards (g9 p11 Parent / p12 Teacher): a large circular
   icon fills the box the way the g11 mockup does — icons, not photos */
.g9-guide { align-items: center; text-align: center; gap: 8px; }
.g9-guide-ico { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid;
  display: flex; align-items: center; justify-content: center; font-size: 27px; font-style: normal;
  box-shadow: 0 3px 10px rgba(15, 33, 71, .14); }
.g9-guide p { font-size: 12.6px; line-height: 1.5; }

/* (d) distribute the 2-col skill grid instead of centring it (g11 already does this
   via .g11-skillsc .g10-skillgrid) — fills g10 p11's 121px gap */
.g10b-skills .g10-skillgrid { align-content: space-evenly; }

/* results: local response-capture notice */
.data-note { max-width: 720px; margin: 18px auto 0; text-align: center; font-size: .82rem;
  font-weight: 600; color: #5A6A8E; background: #F4F7FE; border: 1px solid #DFE7F5;
  border-radius: 12px; padding: 10px 16px; line-height: 1.5; }
.g9-report .data-note, #results.pdf-render .data-note { display: none; }

/* Role-model page (grades 9 & 10). Three cards in one row: portrait, what you
   share, their story. The .g12-rm* card classes are reused as-is - only
   .g12b-rolemodel itself is grade-12 specific. */
.g9b-rolemodel { grid-template-columns: .85fr 1.15fr 1.1fr; }

/* ============================================================================
   LEGIBILITY PASS — grades 6-12 reports (brighter, bolder, bigger)
   Measured before this block: 755 text elements under 10.5px in grade 11, 457 in
   grade 12, plus 124 / 102 washed-out against a light background. At A4 landscape
   a 7.6px element prints at roughly 5.7pt, which is genuinely hard to read.
   Scoped to #results so the quiz UI and homepage are untouched.
   Sizes are raised conservatively - every page is locked to one A4 sheet, so the
   clip check must pass after any change here.
   ========================================================================= */

/* --- washed-out text on light cards: darken, keep the hue --- */
#results .g11-world-tag, #results .g11cv-talent, #results .g11cert-title { color: #7A5E00; }
/* on the dark navy footer / ring backgrounds, "brighter" means LIGHTER, not darker */
#results .g11-tab > div > span { color: #C9D6F5; }
#results .g11-nc .g9w-ring b span { color: #DCE6FA; }
#results .g9c-b .g12-rmid span, #results .g9c-b .g12-cp div span,
#results .g9c-b small, #results .g9c-b .g9-note, #results .data-note { color: #3E4A63; }
#results .g9c-b .g12-brow div b, #results .g9c-b .g12-exam6 b { color: #B4520A; }

/* --- content text that was too small to read comfortably in print --- */
#results .g12-rrow .g12-rmid span { font-size: 9.6px; font-weight: 600; }
#results .g12-cp div span,
#results .g11-car div span,
#results .g10-skill div span,
#results .g10-stream div span,
#results .g12-brow div span   { font-size: 9.4px; font-weight: 700; }
#results .g10-dnastat div span,
#results .g9w-ring b span      { font-size: 9px;  font-weight: 800; }
#results .g9-mini              { font-size: 9.4px; font-weight: 800; }
#results .g9car p              { font-size: 10.4px; font-weight: 700; }
#results .g11-proj span,
#results .g12-exam6 span,
#results .g12-stepband span,
#results .g11-check span,
#results .g11-month div span   { font-size: 10px; font-weight: 700; }

/* --- the per-page nav rail repeats 130x in grade 11; it was the smallest text
       in the whole product at 7.6px --- */
#results .g11-tab > div > b    { font-size: 9.2px; font-weight: 800; }
#results .g11-tab > div > span { font-size: 8.6px; font-weight: 700; }

/* --- icons and a few stray runs were still at the browser default 400 --- */
#results .g9car-ico, #results .g12-rmnote,
#results .g11cert-name         { font-weight: 700; }
#results .g9c-b i, #results .g9tr i, #results .g9ico-row i { font-weight: 700; }

/* --- accent text colours: darken for readability, keep the hue -------------
   These are applied INLINE from the palette arrays (G9_TRAITS, G11_TRAITS,
   G9_RANK_COLORS ...), so a plain CSS rule loses to the style attribute and an
   override is needed. Matching is anchored with ^="color:" on purpose: a
   substring match would also hit background-color:<same hex> and would repaint
   white-on-green card headers as dark-green-on-green.
   The same hexes stay untouched as FILLS - bars, rings and icon chips keep the
   bright palette; only text is darkened. Measured on white: every mapping below
   goes from under 3.6:1 to at least 4.5:1. */
#results [style^="color:#F97316"], #results [style^="color: #F97316"] { color: #C2410C !important; }
#results [style^="color:#F5820D"], #results [style^="color: #F5820D"] { color: #B45309 !important; }
#results [style^="color:#F59E0B"], #results [style^="color: #F59E0B"] { color: #A15C07 !important; }
#results [style^="color:#16A34A"], #results [style^="color: #16A34A"] { color: #15803D !important; }
#results [style^="color:#84CC16"], #results [style^="color: #84CC16"] { color: #4D7C0F !important; }
#results [style^="color:#0891B2"], #results [style^="color: #0891B2"] { color: #0E7490 !important; }
#results [style^="color:#0CB8C4"], #results [style^="color: #0CB8C4"] { color: #0E7490 !important; }
#results [style^="color:#EC4899"], #results [style^="color: #EC4899"] { color: #BE185D !important; }
#results [style^="color:#C9A227"], #results [style^="color: #C9A227"] { color: #8A6A00 !important; }
#results [style^="color:#B8860B"], #results [style^="color: #B8860B"] { color: #7A5E00 !important; }
#results [style^="color:#7C3AED"], #results [style^="color: #7C3AED"] { color: #6D28D9 !important; }

/* grade 11 / 12 page titles use the gold and orange accents at 30-33px. Large
   text only needs 3:1, but gold-on-cream was 2.42 and orange-on-white 2.60. */
#results .g11p-title b { color: #8A6A00; }
#results .g12p-title b { color: #B45309; }

/* .results-sub is on a dark band in grades 6-8 but a light surface in the slide
   grades, so it can only be safely restyled via its dark parent. */
#results .results-header + .results-sub,
#results-header-block .results-sub { color: #24356B; font-weight: 800; }

/* The skill-gap ring sits on the dark navy gradient panel, but its percentage
   inherited the dark navy used by the rings on white cards - contrast 1.10, i.e.
   the number was invisible. The readiness ring on .g11-nc already handles this
   with gold; match that treatment here. */
#results .g11-gap-ring .g9w-ring b,
#results .g12-execready .g9w-ring b { color: #F5D061; }
#results .g11-gap-ring .g9w-ring b span,
#results .g12-execready .g9w-ring b span { color: #DCE6FA; }

/* --- grade 6-8 slide report page grids -------------------------------------
   Reuses the whole g9 card system; these rules only lay out each page's cards.
   .g68-span2 lets a card take two columns where a page has one wide block. */
#results .g68b-cover  { grid-template-columns: .92fr 1.08fr; }
#results .g68b-map    { grid-template-columns: 1.35fr .95fr; }
#results .g68b-three  { grid-template-columns: repeat(3, 1fr); }
#results .g68b-reason { grid-template-columns: .85fr 1.1fr 1.05fr; }
#results .g68b-car    { grid-template-columns: .8fr 1.2fr; }
#results .g68b-subj   { grid-template-columns: 1.25fr 1fr; }
#results .g68b-try    { grid-template-columns: repeat(3, 1fr); }
#results .g68b-parent { grid-template-columns: 1.3fr 1fr; }
#results .g68b-final  { grid-template-columns: 1.3fr 1fr; }
#results .g68-span2   { grid-column: span 1; }
#results .g68b-three .g9car-p,
#results .g68b-three .g9-lead { font-size: 12.5px; font-weight: 700; }

/* ============================================================================
   QUESTION UI — image carries the question, choices are real buttons
   Replaces the old hotspot overlay: nothing is positioned on top of the artwork,
   so option targets cannot drift off their cards (which used to record the wrong
   answer silently). Gloss lives inside background-image, not on a pseudo-element,
   so it also rasterises cleanly for any capture.
   ========================================================================= */
.q-new{display:flex;flex-direction:column;gap:18px}
.qn-imgwrap{border:1px solid #DCE4F2;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 2px 10px rgba(16,36,92,.07)}
.qn-img{display:block;width:100%;height:auto}
.qn-card{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:14px;
  background:linear-gradient(135deg,#10245C,#1E3E86);box-shadow:0 6px 18px -8px rgba(16,36,92,.5)}
.qn-num{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.14);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
  border:1px solid rgba(255,255,255,.25)}
.qn-t{margin:0;color:#fff;font-size:19px;font-weight:800;line-height:1.28}
/* pre-line, because 83 of the 141 text-card prompts contain deliberate line breaks -
   a data table, a scenario set-up, then the question - and HTML was collapsing every
   one of them into a single run-on paragraph. "Monday = 120 Tuesday = 150 Wednesday =
   90" is far harder to read than the same figures on their own lines. pre-line keeps
   the authored newlines and still collapses accidental runs of spaces. */
.qn-p{margin:6px 0 0;color:#C9D6F5;font-size:13.5px;font-weight:600;line-height:1.45;white-space:pre-line}

/* ---- Text-only questions get a bigger box ------------------------------------
   A text question IS the whole question - there is no artwork carrying it - and it
   was being set at 13.5px in a card barely 210px tall. Grade 11's personality block
   (questions 56-80) is a single short statement each, so the student was reading the
   most important line on the screen at the smallest size on the screen.
   The card grows, the text grows, and the shorter the statement the larger it is set,
   because a 46-character sentence can afford the room a 390-character one cannot. */
.q-new:not(.lettered) .qn-card{padding:30px 30px;min-height:190px;align-items:center}
.q-new:not(.lettered) .qn-t{font-size:22px;line-height:1.24}
.q-new:not(.lettered) .qn-p{font-size:17px;line-height:1.55;margin-top:10px;color:#DCE5FA}
/* short statements - the Big Five block and similar - go larger still */
.q-new:not(.lettered) .qn-card.short .qn-p{font-size:21px;line-height:1.5}
.q-new:not(.lettered) .qn-card.short{min-height:210px}
@media(max-width:560px){
  .q-new:not(.lettered) .qn-card{padding:20px 18px;min-height:0}
  .q-new:not(.lettered) .qn-t{font-size:19px}
  .q-new:not(.lettered) .qn-p{font-size:16px}
  .q-new:not(.lettered) .qn-card.short .qn-p{font-size:18px} }

.qopts{display:grid;gap:20px;align-items:stretch;margin-top:18px}
.qopts.n2{grid-template-columns:repeat(2,1fr)}
.qopts.n3{grid-template-columns:repeat(3,1fr)}
.qopts.n4{grid-template-columns:repeat(4,1fr)}
.qopts.n5{grid-template-columns:repeat(5,1fr)}
/* Grade 8 has five 6-option items and one with 12. Without a rule the grid falls back
   to a single column, so the later options are pushed below the fold and simply are
   not there for the student - "option E is not visible". Six and twelve both wrap to
   a 3-wide grid, which keeps the buttons legible instead of shrinking them to slivers. */
.qopts.n6{grid-template-columns:repeat(3,1fr)}
.qopts.n7,.qopts.n8{grid-template-columns:repeat(4,1fr)}
.qopts.n9,.qopts.n10,.qopts.n11,.qopts.n12,.qopts.n13{grid-template-columns:repeat(4,1fr)}
.qopts.n6 .qopt-lab,.qopts.n9 .qopt-lab,.qopts.n10 .qopt-lab,
.qopts.n11 .qopt-lab,.qopts.n12 .qopt-lab,.qopts.n13 .qopt-lab{font-size:.92rem}
.qopt{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;min-height:132px;height:100%;padding:20px 14px;border:0;
  border-radius:16px;cursor:pointer;font-family:inherit;text-align:center;color:#fff;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 55%),
    linear-gradient(165deg,var(--c1) 0%,var(--c2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.18);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, filter .18s}
.qopt:hover{transform:translateY(-3px);filter:brightness(1.07) saturate(1.05);
  box-shadow:0 10px 20px -10px rgba(16,36,92,.45), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.18)}
.qopt:focus-visible{outline:3px solid #5B21B6;outline-offset:3px}
.qopt-k{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);color:#16264F;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
  box-shadow:0 2px 5px rgba(0,0,0,.22)}
.qopt-lab{font-size:15px;font-weight:800;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.qopt.sel{transform:translateY(-4px);filter:brightness(1.05);
  box-shadow:0 0 0 3px #fff, 0 0 0 6px #5B21B6, inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.18)}
.qopt.sel .qopt-k{background:#fff;color:#5B21B6}
.qopt-tick{position:absolute;top:10px;right:10px;width:23px;height:23px;border-radius:50%;
  background:#fff;color:#5B21B6;font-size:13px;font-weight:800;display:none;align-items:center;
  justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.qopt.sel .qopt-tick{display:flex}
/* ---- Lettered mode: the picture already shows the choices --------------------
   Where the artwork carries its own A/B/C/D cards, the buttons are only the letter.
   Repeating the wording underneath said everything twice, and trying to erase the
   cards out of the artwork instead is what cost grade 11's F1 the bottom 43% of its
   picture. Small tiles, centred, so the picture keeps the height it needs. */
/* Lettered tiles sit wider apart than text buttons: they are small targets, and
   without real air between them a row of A B C D reads as one strip rather than four
   separate choices. */
.qopts.letters{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:22px}
.qopts.letters .qopt{flex:0 0 92px}
.qopts.letters .qopt.qopt-none{flex:0 0 auto;min-width:104px;flex-direction:row;
  justify-content:center;gap:10px;padding:12px 18px}
.qopts.letters .qopt.qopt-none .qopt-lab{font-size:14px}
.qopts.letters .qopt{min-height:0;height:auto;padding:12px 10px;gap:0;border-radius:14px}
.qopt-k.solo{width:44px;height:44px;font-size:20px}
.qopts.letters .qopt-tick{top:5px;right:5px;width:19px;height:19px;font-size:11px}
/* the artwork is the question here, so let it use the room the labels gave back */
/* Lettered art must leave room for the A–D tiles — 68vh was clipping options on
   desktop quiz-mode (overflow:hidden). Keep the picture prominent but always leave
   space for the real choice buttons under it. */
.q-new.lettered .qn-img{max-height:min(52vh,560px)}

@media(max-width:860px){ .qopts{gap:16px}
  .qopts.n4,.qopts.n5,.qopts.n6,.qopts.n7,.qopts.n8,
  .qopts.n9,.qopts.n10,.qopts.n11,.qopts.n12,.qopts.n13{grid-template-columns:repeat(2,1fr)}
  .qopts.letters{gap:20px} .qopts.letters .qopt{flex:0 0 84px} }
@media(max-width:560px){ .qopts{gap:12px;margin-top:14px}
  .qopts.n2,.qopts.n3,.qopts.n4,.qopts.n5,.qopts.n6,.qopts.n7,
  .qopts.n8,.qopts.n9,.qopts.n10,.qopts.n11,.qopts.n12,.qopts.n13{grid-template-columns:1fr}
  .qopt{flex-direction:row;justify-content:flex-start;gap:14px;min-height:0;text-align:left;padding:15px 16px}
  /* lettered tiles stay a centred row on a phone rather than stretching full width */
  .qopts.letters{gap:16px} .qopts.letters .qopt{flex:0 0 72px}
  .qopts.letters .qopt{flex-direction:column;justify-content:center;text-align:center;padding:10px 8px} }

/* Position counter. The number drawn into each question picture is its original
   bank number and the bank has gaps, so slot 7 can show art captioned "Q8". This
   states the real position; the caption in the art is just part of the picture. */
.q-count{font-size:13px;font-weight:800;letter-spacing:.04em;color:#4A5A7A;text-transform:uppercase;flex-shrink:0}
.q-count b{color:#10245C;font-size:15px}
/* Tall artwork (the spot-the-difference pages) used to push the option cards below
   the fold, so a student saw a picture and no way to answer. */
.qn-img{max-height:min(56vh,620px);width:auto;max-width:100%;margin:0 auto;object-fit:contain}
/* More than one row of buttons? The picture yields the height, because an option the
   student has to scroll to find is an option they do not know is there. */
.q-new.n6 .qn-img,.q-new.n7 .qn-img,.q-new.n8 .qn-img{max-height:min(38vh,420px)}
.q-new.n9 .qn-img,.q-new.n10 .qn-img,.q-new.n11 .qn-img,
.q-new.n12 .qn-img,.q-new.n13 .qn-img{max-height:min(30vh,340px)}
.qn-imgwrap{display:flex;justify-content:center;align-items:center;min-height:0}

/* ---- Grade 6 desktop: keep answer tiles visible under tall artwork -------------
   On large screens quiz-mode locks height and hid overflow, so lettered A–D buttons
   (and text option rows) were clipped under the image. Fill the card, shrink the
   picture into leftover space, pin options at the bottom. */
body.quiz-grade-6.quiz-mode #question-card{
  align-items:stretch;
  justify-content:flex-start;
  overflow:auto;
}
body.quiz-grade-6.quiz-mode #question-card > .q-new{
  width:100%;
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
  gap:10px;
}
body.quiz-grade-6.quiz-mode #question-card .qn-imgwrap{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
body.quiz-grade-6.quiz-mode #question-card .qn-img,
body.quiz-grade-6.quiz-mode #question-card .q-new.lettered .qn-img{
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
body.quiz-grade-6.quiz-mode #question-card .qn-card{
  flex-shrink:0;
}
body.quiz-grade-6.quiz-mode #question-card .qopts{
  flex-shrink:0;
  margin-top:6px;
  padding-bottom:2px;
}
body.quiz-grade-6.quiz-mode #question-card .qopts.letters{
  margin-top:10px;
  gap:18px;
}
body.quiz-grade-6.quiz-mode #question-card .qopts:not(.letters) .qopt{
  min-height:96px;
  padding:14px 12px;
}

.quiz-top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.btn-dev-finish{
  flex-shrink:0;
  background:linear-gradient(135deg,#0F2147,#1E4FD8);
  border:1px solid transparent;
  color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:0.78rem;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(30,79,216,.28);
  transition:0.18s ease;
}
.btn-dev-finish:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-dev-finish:disabled{opacity:.55;cursor:wait;transform:none}

/* Grade 11 aptitude: one composite ring plus the domains it covers, replacing six
   per-ability rings. Four items could not support a named score; twelve can support
   one. The domain tiles stay so the student sees what was tested. */
.g11-aptsolo{display:flex;align-items:center;gap:22px;margin-bottom:14px}
.g11-aptsolo-txt{flex:1}
.g11-aptsolo-txt b{display:block;font-size:15px;color:#0F2147;margin-bottom:5px}
.g11-aptsolo-txt p{margin:0;font-size:11.5px;line-height:1.5;color:#4A5878}
.g11-aptgrid-flat{grid-template-rows:auto}
.g11-aptc-flat{padding:9px 6px}
.g11-aptc-flat i{font-size:19px}
.g11-aptc-flat b{font-size:11px}
.g11-aptc-flat span{font-size:9px}

/* Grade 12 aptitude: the four reasoning areas are listed, not scored individually.
   Six questions per area could not support a named percentage; the composite can. */
.g12-rrow-flat{grid-template-columns:auto 1fr;gap:10px}
.g12-rrow-flat .g12-rmid{padding-right:6px}

/* ==== appended by tools/patch_team_zip.py: report layout + question UI.
   The team stylesheet above is untouched; these are additive only. ==== */
.g9-page.g68-page { aspect-ratio: 0.7071; }
#results .g68b-cover,
#results .g68b-map,
#results .g68b-reason,
#results .g68b-subj,
#results .g68b-try,
#results .g68b-parent { display: flex; flex-direction: column; gap: 12px; }
#results .g68b-map    > .g9c,
#results .g68b-reason > .g9c,
#results .g68b-subj   > .g9c,
#results .g68b-try    > .g9c,
#results .g68b-parent > .g9c { flex: 1 1 auto; }
#results .g68b-cover > .g9cv-heroframe { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
#results .g68b-cover > .g9cv-heroframe > img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
#results .g68b-cover > .g9c { flex: 1 1 auto; }
.q-new.lettered.n7 .qn-img,.q-new.lettered.n8 .qn-img,
.q-new.lettered.n9 .qn-img,.q-new.lettered.n10 .qn-img,.q-new.lettered.n11 .qn-img{max-height:min(58vh,640px)}
.qopts.letters.n9,.qopts.letters.n10,.qopts.letters.n11{gap:16px;margin-top:14px}
.qopts.letters.n9 .qopt,.qopts.letters.n10 .qopt,.qopts.letters.n11 .qopt{flex:0 0 76px;padding:9px 8px}
.qopts.letters.n9 .qopt-k.solo,.qopts.letters.n10 .qopt-k.solo,
.qopts.letters.n11 .qopt-k.solo{width:40px;height:40px;font-size:18px}
.qopts.letters.n11{gap:12px}
.qopts.letters.n11 .qopt{flex:0 0 70px;padding:8px 6px}
/* Lettered quiz pages: pin A–F (etc.) under the art so they never slide into the
   Previous/Next bar. Applies to Grade 8 XC1–XC6 and similar tall lettered items. */
body.quiz-mode #question-card:has(> .q-new.lettered){
  align-items:stretch;
  justify-content:flex-start;
  overflow:hidden;
}
body.quiz-mode #question-card > .q-new.lettered{
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  gap:10px;
}
body.quiz-mode #question-card .q-new.lettered .qn-imgwrap{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
body.quiz-mode #question-card .q-new.lettered .qn-img{
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
body.quiz-mode #question-card .q-new.lettered .q-count,
body.quiz-mode #question-card .q-new.lettered .qopts{
  flex-shrink:0;
}
body.quiz-mode #question-card .q-new.lettered .qopts{
  margin-top:8px;
  padding-bottom:6px;
}
/* Grade 8 XC* (6 letters) — keep one clear row with breathing room */
.q-new.lettered.n5 .qn-img,.q-new.lettered.n6 .qn-img{max-height:min(44vh,500px)}
.qopts.letters.n5,.qopts.letters.n6{gap:18px;margin-top:12px}
.qopts.letters.n5 .qopt,.qopts.letters.n6 .qopt{flex:0 0 84px;padding:10px 8px}
/* Grade 8 F1 is the only lettered 12-option question. Lay A–L in a 6×2 grid. */
.q-new.lettered.n12{height:100%;min-height:0;gap:12px}
.q-new.lettered.n12 .qn-imgwrap{flex:1 1 auto;min-height:0}
.q-new.lettered.n12 .qn-img{max-height:min(42vh,480px)}
.qopts.letters.n12{display:grid;grid-template-columns:repeat(6,minmax(0,72px));justify-content:center;
  gap:12px 14px;margin-top:10px;flex-shrink:0}
.qopts.letters.n12 .qopt{flex:none;width:100%;min-width:0;padding:8px 6px}
.qopts.letters.n12 .qopt-k.solo{width:40px;height:40px;font-size:18px}
@media(max-width:860px){
  .q-new.lettered.n5 .qn-img,.q-new.lettered.n6 .qn-img{max-height:min(36vh,400px)}
  .qopts.letters.n5,.qopts.letters.n6{gap:14px}
  .qopts.letters.n5 .qopt,.qopts.letters.n6 .qopt{flex:0 0 72px}
  .q-new.lettered.n12 .qn-img{max-height:min(36vh,400px)}
  .qopts.letters.n12{grid-template-columns:repeat(4,minmax(0,68px));gap:10px 12px}
}
@media(max-width:560px){
  .qopts.letters.n12{grid-template-columns:repeat(4,minmax(0,62px));gap:8px 10px}
  .qopts.letters.n12 .qopt{padding:7px 5px}
}
.rp-head{padding:14px 24px 10px;border-bottom:3px solid #12265A;margin-bottom:12px}
.rp-title{font-size:26px;font-weight:800;color:#12265A;line-height:1.12;letter-spacing:-.01em}
.rp-sub{margin-top:3px;font-size:12px;font-weight:600;color:#5A6A8E}
.g9-page .g9p-body{padding:0 24px 18px}
.rp-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:14px;padding:40px;text-align:center}
.rp-cover-logo{height:64px;width:auto;margin-bottom:6px}
.rp-cover-title{font-size:40px;font-weight:800;color:#12265A;line-height:1.1;letter-spacing:-.015em}
.rp-cover-grade{font-size:14px;font-weight:700;color:#5A6A8E;letter-spacing:.08em;text-transform:uppercase}
.rp-cover-id{display:flex;gap:34px;margin-top:22px;padding-top:20px;border-top:2px solid #C4D2EE}
.rp-cover-id div{display:flex;flex-direction:column;gap:3px}
.rp-cover-id span{font-size:9.5px;font-weight:800;letter-spacing:.12em;color:#8A97B4}
.rp-cover-id b{font-size:15px;color:#12265A}
.g68-page { --g68f: 22px; }
[class*="g68b-"] .g9c-b { font-size: var(--g68f); line-height: 1.55; }
[class*="g68b-"] .g9ico-row { padding: calc(var(--g68f) * .34) 0; gap: calc(var(--g68f) * .6); }
[class*="g68b-"] .g9ico-row i { font-size: calc(var(--g68f) * 1.3); margin-top: 0; }
[class*="g68b-"] .g9ico-row p { font-size: var(--g68f); font-weight: 700; line-height: 1.45; }
[class*="g68b-"] .g9ico-row p b { font-size: calc(var(--g68f) * 1.04); }
[class*="g68b-"] .g9ico-row p span { font-size: calc(var(--g68f) * .93); font-weight: 600; }
[class*="g68b-"] .g9-lead { font-size: calc(var(--g68f) * 1.06); font-weight: 800; margin-bottom: 8px; }
[class*="g68b-"] .g9car-p { font-size: var(--g68f); font-weight: 700; line-height: 1.5; }
[class*="g68b-"] .g9-goldbox,
[class*="g68b-"] .g9-tipbox { font-size: calc(var(--g68f) * .94); font-weight: 700;
  padding: calc(var(--g68f) * .6) calc(var(--g68f) * .7); line-height: 1.45; }
[class*="g68b-"] .g9-goldbox b,
[class*="g68b-"] .g9-tipbox b { font-size: calc(var(--g68f) * .94); }
[class*="g68b-"] .g9-mini { font-size: calc(var(--g68f) * .9); font-weight: 700;
  padding: calc(var(--g68f) * .38) calc(var(--g68f) * .7); }
[class*="g68b-"] .g9-note { font-size: calc(var(--g68f) * .86); font-weight: 600; }
[class*="g68b-"] .g9-minis { gap: calc(var(--g68f) * .45); }
#results .g68b-reason > .g9c > .g9c-b,
#results .g68b-subj   > .g9c > .g9c-b,
#results .g68b-try    > .g9c > .g9c-b,
#results .g68b-parent > .g9c > .g9c-b {
  display: flex; flex-direction: column; justify-content: space-evenly;
  padding: 10px 18px; }
#results .g68b-reason .g9ico-row,
#results .g68b-subj   .g9ico-row,
#results .g68b-try    .g9ico-row,
#results .g68b-parent .g9ico-row { padding: calc(var(--g68f) * .24) 0; }
#results .g68b-reason .g9ico-row i,
#results .g68b-subj   .g9ico-row i,
#results .g68b-try    .g9ico-row i,
#results .g68b-parent .g9ico-row i { line-height: 1.1; text-align: center;
  flex: 0 0 calc(var(--g68f) * 1.45); }
#results [class*="g68b-"] .g9c-b,
#results [class*="g68b-"] .g9c-b p { color: #081231; font-weight: 700; }
#results [class*="g68b-"] .g9c-b p b { color: #0B1F5C; font-weight: 800; }
#results [class*="g68b-"] .g9c-h { font-size: calc(var(--g68f) * 1.02); font-weight: 800;
  padding: calc(var(--g68f) * .42) calc(var(--g68f) * .82); letter-spacing: .3px; }
#results [class*="g68b-"] .g9-goldbox b,
#results [class*="g68b-"] .g9-tipbox b { font-weight: 800; }
#results .g68b-reason > .g9c:first-child > .g9c-b {
  flex-direction: row; align-items: center; justify-content: center; gap: 34px; }
#results .g68b-reason > .g9c:first-child > .g9c-b > svg { flex: 0 0 auto; }
#results .g68b-reason .g9g-pct { font-size: calc(var(--g68f) * 2.6); line-height: 1; }
#results .g68b-reason .g9g-band { font-size: calc(var(--g68f) * 1.1); letter-spacing: .6px; }
#results .g68b-reason .g9-cap { font-size: calc(var(--g68f) * .8); margin-top: 4px; }
#results .g68b-map .g9m-row {
  grid-template-columns: calc(var(--g68f) * 1.3) calc(var(--g68f) * 13) 1fr calc(var(--g68f) * 2.4);
  gap: calc(var(--g68f) * .5); padding: calc(var(--g68f) * .26) 0; align-items: center; }
#results .g68b-map .g9m-row i { font-size: calc(var(--g68f) * .95); line-height: 1.1; }
#results .g68b-map .g9m-row b { font-size: calc(var(--g68f) * .82); font-weight: 800;
  line-height: 1.25; }
#results .g68b-map .g9m-row em { font-size: calc(var(--g68f) * .9); font-weight: 800; }
#results .g68b-map .g9m-track { height: calc(var(--g68f) * .6); border-radius: 999px; }
#results .g68b-map .g9-note { font-size: calc(var(--g68f) * .8); line-height: 1.4; margin-top: 8px; }
#results .g68b-map > .g9c > .g9c-b {
  display: flex; flex-direction: column; justify-content: space-evenly; }
#results .g68b-map .g9ico-row { padding: calc(var(--g68f) * .3) 0; }
#results .g68b-map .g9ico-row i { align-self: flex-start; }
#results .g68b-map .g9ico-row p span { display: block; margin-top: 2px; line-height: 1.4; }
#results .g68b-cover > .g9c > .g9c-b {
  display: flex; flex-direction: column; justify-content: space-evenly; padding: 12px 18px; }
#results .g68b-cover .g9ico-row { padding: 5px 0; }
#results .g68b-cover .g9ico-row i { line-height: 1.1; flex: 0 0 24px; text-align: center; }