/* ==========================================================
   style.css — Page & section specific styles.
   Only add styles here that are NOT already covered by:
     variables.css / base.css / layout.css /
     components.css / responsive.css
   Append new page sections below in clearly labelled blocks.
   ========================================================== */


/* =========================================================
   ABOUT US PAGE
   ========================================================= */

/* ===== Hero ===== */
.about-hero { padding: 56px 0 64px; background: var(--color-quaternary); border-bottom: 1px solid var(--color-quaternary-dark); }
.about-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 15px/1.4 var(--font-heading); color: var(--color-secondary); }
.about-kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--color-tertiary); }
.about-hero h1 { max-width: 11em; margin: 0 0 16px; font: 700 clamp(36px, 5vw, 56px)/1.08 var(--font-heading); }
.about-hero .about-lead { max-width: 38em; margin: 0 0 28px; font-size: 18px; line-height: 1.7; color: var(--color-text-body); }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 48px 56px; align-items: center; }

/* ===== Learning model rail (aside in hero) ===== */
.model-rail { padding: 28px 28px 12px; border-radius: var(--radius-card); background: var(--color-secondary); color: var(--color-text-on-dark-body); }
.model-rail-kicker { margin: 0 0 6px; font: 600 13px/1.3 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--color-tertiary); }
.model-rail-title { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); color: var(--color-text-on-dark); }
.model-rail ol { list-style: none; margin: 0; padding: 0; }
.model-rail li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
.model-rail li span:first-child { font: 700 15px/1.4 var(--font-heading); color: var(--color-tertiary); }
.model-rail strong { display: block; font: 600 17px/1.3 var(--font-heading); color: var(--color-text-on-dark); }
.model-rail li span:last-child { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; }

/* ===== Pull quote ===== */
.pull { margin: 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--color-primary); font: 600 clamp(22px, 2.5vw, 30px)/1.4 var(--font-heading); color: var(--color-text-heading); }
.perspective-copy .lede { margin-bottom: 18px; }

/* ===== Learning model steps (ol.model) ===== */
.model { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; margin: 8px 0 0; padding: 0; list-style: none; }
.model::before { content: ""; position: absolute; top: 18px; left: 4px; right: 14%; height: 2px; background: var(--color-border); }
.model-num { position: relative; z-index: 1; display: inline-block; margin-bottom: 18px; padding-right: 14px; background: var(--color-bg-alt); font: 700 36px/1 var(--font-heading); color: var(--color-primary-dark); }
.model li:nth-child(2) .model-num { color: var(--color-quinary-dark); }
.model li:nth-child(3) .model-num { color: var(--color-tertiary-text); }
.model li:nth-child(4) .model-num { color: var(--color-secondary); }
.model h3 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); }
.model p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }

/* ===== Academic journey table ===== */
.journey { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.journey-row { display: grid; grid-template-columns: 210px 1fr; border-bottom: 1px solid var(--color-border); }
.journey-label { display: flex; flex-direction: column; justify-content: center; padding: 28px 24px; border-left: 4px solid var(--color-primary); }
.journey-row.is-inter .journey-label { border-left-color: var(--color-primary-dark); }
.journey-row.is-cambridge .journey-label { border-left-color: var(--color-tertiary); }
.journey-label h3 { margin: 0; font: 700 24px/1.2 var(--font-heading); }
.journey-label p { margin: 4px 0 0; font-size: 15px; color: var(--color-text-muted); }
.journey-links { display: grid; grid-template-columns: 1fr 1fr; }
.journey-links a { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 20px 22px; text-decoration: none; }
.journey-links a + a { border-left: 1px solid var(--color-border); }
.journey-links a:hover { background: var(--color-bg-alt); }
.journey-id { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary-dark); font: 700 16px var(--font-heading); }
.is-inter .journey-id { background: var(--color-primary-dark); color: var(--color-text-on-dark); }
.is-cambridge .journey-id { background: var(--color-quaternary); color: var(--color-tertiary-text); font-size: 20px; }
.journey-links strong { display: block; font: 600 17px/1.3 var(--font-heading); color: var(--color-secondary); }
.journey-links span span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--color-text-muted); }
.journey-links .txt { flex: 1; min-width: 0; }
.journey-links .jsa-ico { width: 18px; height: 18px; color: var(--color-primary-dark); transition: transform .2s; }
.journey-links a:hover .jsa-ico { transform: translateX(3px); }

/* ===== Guidance & support ===== */
.support-intro { max-width: 760px; }
.support-intro p + p { margin-top: 14px; font-size: 17px; line-height: 1.7; }
ul.guide { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(17,26,46,.14); }
ul.guide li { padding: 28px 32px 0 0; }
ul.guide li + li { padding-left: 32px; border-left: 1px solid rgba(17,26,46,.14); }
.guide-num { display: block; margin-bottom: 12px; font: 700 13px/1 var(--font-heading); letter-spacing: .06em; color: var(--color-secondary); }
ul.guide h3 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); }
ul.guide p { margin: 0; font-size: 16px; line-height: 1.6; }

/* ===== Parents section ===== */
.about-parents .section-head { max-width: none; margin-bottom: 0; }
.parent-note { max-width: 38em; margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--color-text-on-dark-body); }
.parent-list { margin: 8px 0 0; padding: 0; list-style: none; }
.parent-list li { display: grid; grid-template-columns: 52px 1fr; gap: 8px 16px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16); }
.parent-list li:first-child { border-top: 0; padding-top: 0; }
.parent-num { font: 700 22px/1.2 var(--font-heading); color: var(--color-tertiary); }
.parent-list h3 { margin: 0 0 4px; font: 600 20px/1.3 var(--font-heading); color: var(--color-text-on-dark); }
.parent-list p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-text-on-dark-body); }

/* ===== What guides JSA (beliefs) ===== */
.beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 0; padding: 0; list-style: none; }
.beliefs li { padding-top: 18px; border-top: 3px solid var(--color-secondary); }
.beliefs li:nth-child(2) { border-top-color: var(--color-primary); }
.beliefs li:nth-child(3) { border-top-color: var(--color-tertiary); }
.beliefs h3 { margin: 0 0 10px; font: 600 24px/1.25 var(--font-heading); }
.beliefs p { margin: 0; font-size: 16.5px; line-height: 1.6; }

/* ===== JSA Today stats ===== */
.today-head { max-width: 640px; margin-bottom: 8px; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 36px 0 0; padding: 32px 0 0; border-top: 1px solid var(--color-border); list-style: none; }
.about-stats li { padding-left: 20px; border-left: 3px solid var(--color-secondary); }
.about-stats li:nth-child(2) { border-left-color: var(--color-primary); }
.about-stats li:nth-child(3) { border-left-color: var(--color-tertiary); }
.about-stat-num { display: block; font: 700 clamp(44px, 6vw, 68px)/1 var(--font-heading); color: var(--color-secondary); }
.about-stat-num i { font-style: normal; color: var(--color-tertiary-text); }
.about-stat-label { display: block; margin-top: 8px; font: 600 16px/1.35 var(--font-heading); color: var(--color-text-muted); }

/* ===== Know JSA links ===== */
.know { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.know a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 26px 4px; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.know a:hover { background: var(--color-bg-alt); }
.know-num { font: 700 26px/1 var(--font-heading); color: var(--color-primary); }
.know h3 { margin: 0; font: 600 22px/1.3 var(--font-heading); color: var(--color-secondary); }
.know p { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--color-text-muted); }
.know-go { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--font-heading); color: var(--color-secondary); }
.know-go .jsa-ico { width: 17px; height: 17px; transition: transform .2s; }
.know a:hover .know-go { color: var(--color-primary-dark); }
.know a:hover .know-go .jsa-ico { transform: translateX(3px); }
.know a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }

/* ===== About-Us Responsive ===== */
@media (min-width: 992px) {
  .about-hero { padding: 84px 0 88px; }
}
@media (max-width: 991.98px) {
  .about-hero-grid, .journey-row, .guide, .beliefs { grid-template-columns: 1fr; }
  .model { grid-template-columns: 1fr; gap: 0; }
  .model::before { display: none; }
  .model li { position: relative; padding: 0 0 28px 72px; }
  .model li:last-child { padding-bottom: 0; }
  .model-num { position: absolute; left: 0; top: 0; width: 52px; margin: 0; padding: 2px 0; text-align: center; font-size: 22px; }
  .model li:not(:last-child)::after { content: ""; position: absolute; top: 36px; bottom: 8px; left: 25px; width: 2px; background: var(--color-border); }
  .guide li, .guide li + li { padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(17,26,46,.14); }
  .guide li:first-child { border-top: 0; padding-top: 0; }
  .journey-label { padding: 22px 8px 8px; }
  .journey-links a + a { border-left: 0; border-top: 1px solid var(--color-border); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .about-hero-actions { flex-direction: row; }
  .journey-links { grid-template-columns: 1fr 1fr; }
  .journey-links a + a { border-top: 0; border-left: 1px solid var(--color-border); }
}
@media (max-width: 575.98px) {
  .about-hero { padding: 36px 0 44px; }
  .about-hero-actions .btn { width: 100%; }
  .journey-links { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; gap: 22px; }
  .know a { grid-template-columns: 44px minmax(0, 1fr); }
  .know-go { grid-column: 2; }
  .parent-list li { grid-template-columns: 40px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-links a:hover .jsa-ico, .know a:hover .know-go .jsa-ico { transform: none; }
}


/* =========================================================
   OUR COURSES PAGE
   ========================================================= */

/* ===== Hero ===== */
.courses-hero { padding: 52px 0 48px; background: var(--color-bg-alt); }
.courses-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.courses-hero h1 { max-width: 14em; margin: 0 0 14px; font: 700 clamp(34px, 4.6vw, 52px)/1.12 var(--font-heading); }
.courses-hero .lede { max-width: 42em; margin-bottom: 26px; }
.courses-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ===== Path jump nav ===== */
.path-jump { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.path-jump a { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 16px 22px; text-decoration: none; }
.path-jump a + a { border-left: 1px solid var(--color-border); }
.path-jump a:hover { background: var(--color-primary-soft); }
.jump-key { display: grid; place-items: center; flex-shrink: 0; min-width: 64px; height: 44px; padding: 0 8px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary-dark); font: 700 14px/1 var(--font-heading); }
.path-jump a:nth-child(2) .jump-key { background: var(--color-primary-dark); color: var(--color-text-on-dark); }
.path-jump a:nth-child(3) .jump-key { background: var(--color-quaternary); color: var(--color-secondary); }
.path-jump strong { display: block; font: 600 17px/1.25 var(--font-heading); color: var(--color-secondary); }
.path-jump span span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--color-text-muted); }

/* ===== Courses catalog ===== */
.catalog { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; background: var(--color-bg); }
.track { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; scroll-margin-top: 110px; }
.track + .track { border-top: 1px solid var(--color-border); }
.track-id { display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; }
.track-matric .track-id { background: var(--color-primary-soft); }
.track-inter .track-id { background: var(--color-primary-dark); }
.track-cambridge .track-id { background: var(--color-quaternary); }
.track-id h3 { margin: 0; font: 700 30px/1.15 var(--font-heading); }
.track-id p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; }
.track-inter .track-id h3 { color: var(--color-text-on-dark); }
.track-inter .track-id p { color: var(--color-primary-soft); }
.track-links { display: grid; grid-template-columns: 1fr 1fr; }
.track-links a { display: flex; align-items: center; gap: 16px; min-height: 112px; padding: 24px 22px; text-decoration: none; }
.track-links a + a { border-left: 1px solid var(--color-border); }
.track-links a:hover { background: var(--color-bg-alt); }
.track-yr { font: 700 28px/1 var(--font-heading); color: var(--color-primary-dark); }
.track-cambridge .track-yr { color: var(--color-secondary); }
.track-name { flex: 1; font: 600 18px/1.3 var(--font-heading); color: var(--color-secondary); }
.track-links .jsa-ico { width: 20px; height: 20px; color: var(--color-primary-dark); transition: transform .2s; }
.track-links a:hover .jsa-ico { transform: translateX(4px); }

/* ===== Skill catalog ===== */
.skill-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.skill-catalog li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; padding: 18px 22px; background: var(--color-bg); }
.skill-catalog h3 { margin: 0; font: 600 18px/1.35 var(--font-heading); color: var(--color-secondary); }
.skill-state { flex-shrink: 0; margin: 0; max-width: 12em; font: 600 13px/1.35 var(--font-body); color: var(--color-text-muted); text-align: right; }

/* ===== Includes (what's in every program) ===== */
.includes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; margin: 8px 0 0; padding: 0; list-style: none; }
.includes li { padding-top: 16px; border-top: 3px solid var(--color-secondary); }
.includes li:nth-child(2) { border-top-color: var(--color-primary); }
.includes li:nth-child(3) { border-top-color: var(--color-quinary-dark); }
.includes li:nth-child(4) { border-top-color: var(--color-tertiary); }
.includes span { display: block; margin-bottom: 10px; font: 700 13px/1 var(--font-heading); letter-spacing: .05em; color: var(--color-primary-dark); }
.includes h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.includes p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

/* ===== Approach section ===== */
.approach-layout { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.approach-copy { max-width: 640px; }
.approach-copy .lede { max-width: 38em; }
.stage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.stages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 0; list-style: none; }
.stages li { display: flex; align-items: center; gap: 10px; font: 600 18px/1.2 var(--font-heading); color: var(--color-text-on-dark); }
.stages li + li::before { content: ""; width: 22px; height: 2px; margin-right: 10px; background: var(--color-tertiary); }
.stage-num { font: 700 14px/1 var(--font-heading); color: var(--color-tertiary); }

/* ===== Plans band ===== */
.plans-layout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.plans-copy { max-width: 640px; }
.plans-actions { display: flex; flex-direction: column; gap: 14px; }

/* ===== FAQ wrap ===== */
.faq-wrap { max-width: 860px; }
.faq-wrap .section-head { margin-bottom: 28px; }

/* ===== Our-Courses Responsive ===== */
@media (min-width: 992px) {
  .courses-hero { padding-top: 72px; }
  .final-actions, .plans-actions { min-width: 280px; }
}
@media (max-width: 991.98px) {
  .track { grid-template-columns: 1fr; }
  .includes { grid-template-columns: 1fr 1fr; }
  .path-jump { grid-template-columns: 1fr; }
  .path-jump a + a { border-left: 0; border-top: 1px solid var(--color-border); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .courses-actions, .plans-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .courses-hero { padding-top: 36px; padding-bottom: 36px; }
  .courses-actions .btn, .plans-actions .btn { width: 100%; }
  .path-jump { margin-top: 28px; }
  .track-links, .includes, .skill-catalog { grid-template-columns: 1fr; }
  .track-links a + a { border-left: 0; border-top: 1px solid var(--color-border); }
}
@media (prefers-reduced-motion: reduce) {
  .track-links a:hover .jsa-ico { transform: none; }
}


/* =========================================================
   OUR PLANS PAGE
   ========================================================= */

/* ===== Hero ===== */
.pl-hero { padding: 48px 0 56px; background: var(--color-bg-alt); }
.pl-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 28px 56px; align-items: center; }
.pl-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.pl-hero h1 { max-width: 11em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.pl-hero .lede { max-width: 38em; margin-bottom: 26px; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ===== Plan board (aside in hero) ===== */
.plan-board { margin: 0; padding: 8px 22px; list-style: none; border-radius: var(--radius-card); background: var(--color-bg); border-top: 3px solid var(--color-secondary); }
.plan-board li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.plan-board li:last-child { border-bottom: 0; }
.plan-board span { font: 700 14px/1 var(--font-heading); color: var(--color-primary-dark); }
.plan-board strong { display: block; font: 600 17px/1.3 var(--font-heading); color: var(--color-secondary); }
.plan-board p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: var(--color-text-muted); }

/* ===== Package types ===== */
.pkg-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.pkg-types li { min-width: 0; padding: 22px 28px 4px 0; }
.pkg-types li + li { padding-left: 28px; border-left: 1px solid var(--color-border); }
.pkg-types h3 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); }
.pkg-types p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-body); }
.pkg-return { max-width: 42em; margin: 22px 0 0; font-size: 16px; line-height: 1.55; }
.pkg-return a, .fee-note a, .policy-copy a { font-weight: 600; }

/* ===== Fee table ===== */
.fee-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.fee-table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; }
.fee-table th, .fee-table td { padding: 16px 18px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.fee-table thead th { font: 600 16px/1.3 var(--font-heading); color: var(--color-secondary); text-align: left; background: var(--color-bg-alt); }
.fee-table tbody th { font: 600 16px/1.3 var(--font-heading); text-align: left; }
.fee-table tbody th a { text-decoration: none; }
.fee-table tbody th a:hover { text-decoration: underline; }
.fee-table td { font-size: 16px; line-height: 1.45; color: var(--color-text-body); }
.fee-table td strong { font-weight: 600; color: var(--color-secondary); }
.fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom: 0; }
.fee-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.fee-table td[colspan] { color: var(--color-text-muted); }
.fee-note { max-width: 46em; margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--color-text-body); }
.fee-once { margin-top: 18px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--color-quaternary); }
.fee-once strong { font-family: var(--font-heading); color: var(--color-secondary); }
.fee-once p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--color-text-body); }
.section-actions { margin-top: 22px; }

/* ===== Payment / start steps ===== */
.pay-steps, .start-steps { margin: 8px 0 0; padding: 0; list-style: none; }
.pay-steps li, .start-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 18px; position: relative; padding: 0 0 22px; }
.pay-steps li::before, .start-steps li::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--color-border); }
.pay-steps li:last-child, .start-steps li:last-child { padding-bottom: 0; }
.pay-steps li:last-child::before, .start-steps li:last-child::before { display: none; }
.step-no { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-secondary); color: var(--color-text-on-dark); font: 700 13px/1 var(--font-heading); }
.pay-steps h3, .start-steps h3 { margin: 6px 0 4px; font: 600 18px/1.3 var(--font-heading); }
.pay-steps p, .start-steps p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-text-body); }
.start-steps a { font-weight: 600; }

/* ===== Admission layout ===== */
.admit-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 28px 48px; align-items: start; }
.admit-box { padding: 22px 22px 18px; border-radius: var(--radius-card); background: var(--color-bg); }
.admit-box p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-text-body); }
.admit-box strong { font-family: var(--font-heading); color: var(--color-secondary); }

/* ===== Refund policy copy ===== */
.policy-copy { max-width: 44em; }
.policy-copy p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; }
.policy-copy .btn { margin-top: 8px; }

/* ===== Our-Plans Responsive ===== */
@media (min-width: 992px) {
  .pl-hero { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 991.98px) {
  .pl-hero-row, .admit-layout, .pkg-types { grid-template-columns: 1fr; }
  .pkg-types li, .pkg-types li + li { padding-left: 0; padding-right: 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .pkg-types li:first-child { border-top: 0; padding-top: 8px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .pl-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .pl-hero { padding-top: 32px; padding-bottom: 36px; }
  .pl-actions .btn, .section-actions .btn { width: 100%; }
}


/* =========================================================
   CLASS PAGES (9th, 10th, 11th, 12th, O Level, A Level)
   Shared layout for all academic class pages.
   ========================================================= */

/* ===== Hero ===== */
.class-hero { padding: 48px 0 56px; background: var(--color-bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 40px 64px; align-items: center; }
.class-eyebrow { margin: 0 0 14px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.class-hero h1 { max-width: 11em; margin: 0 0 16px; font: 700 clamp(36px, 5vw, 58px)/1.08 var(--font-heading); }
.class-hero .lede { max-width: 38em; margin-bottom: 28px; }
.class-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-panel { padding: 32px 32px 24px; border-radius: var(--radius-card); background: var(--color-secondary); color: var(--color-text-on-dark); }
.hero-year { margin: 0; font: 700 clamp(76px, 9vw, 120px)/.82 var(--font-heading); letter-spacing: -.04em; color: var(--color-text-on-dark); }
.hero-kicker { margin: 10px 0 0; font: 600 18px/1.3 var(--font-heading); color: var(--color-primary-soft); }
.hero-steps { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 28px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.hero-steps li { font: 600 15px/1 var(--font-heading); color: var(--color-text-on-dark); }
.hero-steps li + li::before { content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 12px 3px 0; background: var(--color-tertiary); vertical-align: middle; }

/* ===== Who it's for (audience list) ===== */
.audience-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.audience-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 20px; padding: 26px 0; border-bottom: 1px solid var(--color-border); }
.audience-num { font: 700 18px/1.3 var(--font-heading); color: var(--color-primary-dark); }
.audience-list h3 { margin: 0 0 6px; font: 600 22px/1.3 var(--font-heading); }
.audience-list p { max-width: 46em; margin: 0; font-size: 16.5px; line-height: 1.6; }

/* ===== What's included (experience grid) ===== */
.experience { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.experience li { padding: 28px 36px 28px 0; border-bottom: 1px solid var(--color-border); }
.experience li:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--color-border); }
.experience li:nth-child(even) { padding-left: 40px; }
.experience h3 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); }
.experience p { max-width: 36em; margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ===== Learning routine (ol.routine) ===== */
.routine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 8px 0 0; list-style: none; }
.routine li { position: relative; min-width: 0; padding-top: 40px; }
.routine li::before { content: ""; position: absolute; top: 8px; left: 0; width: calc(100% + 28px); height: 2px; background: var(--color-border); }
.routine li:last-child::before { width: 18px; }
.routine-mark { position: absolute; top: 0; left: 0; z-index: 1; width: 18px; height: 18px; border: 4px solid var(--color-bg-alt); border-radius: 50%; background: var(--color-primary); box-sizing: content-box; transform: translateY(-4px); }
.routine h3 { margin: 0 0 8px; font: 600 22px/1.25 var(--font-heading); }
.routine p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }

/* ===== Practice layout ===== */
.practice-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 36px 72px; align-items: start; }
.practice-layout .lede { max-width: 36em; color: var(--color-text-body); }
.practice-points { margin: 0; padding: 0; list-style: none; }
.practice-points li + li { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(17,26,46,.14); }
.practice-points h3 { margin: 0 0 6px; font: 600 20px/1.3 var(--font-heading); }
.practice-points p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--color-text-body); }

/* ===== Parents section — class pages (9th, 10th, 11th, 12th, O-Level, A-Level) ===== */
/* Uses .cls-parent-points to avoid conflict with homepage ul.parent-points (flex icon list) */
.band-navy h3 { color: var(--color-text-on-dark); }
.cls-parent-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; margin: 40px 0 0; padding: 32px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.cls-parent-points h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-heading); color: var(--color-text-on-dark); }
.cls-parent-points p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-on-dark-body); }
.parent-actions { margin-top: 36px; }

/* ===== Package comparison table ===== */
.pkg-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.pkg-compare { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; }
.pkg-compare th, .pkg-compare td { padding: 18px 16px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.pkg-compare thead th { font: 600 18px/1.3 var(--font-heading); color: var(--color-secondary); text-align: center; background: var(--color-bg-alt); }
.pkg-compare thead th:first-child { text-align: left; }
.pkg-compare tbody th { width: 24%; font: 600 15px/1.4 var(--font-heading); color: var(--color-secondary); text-align: left; }
.pkg-compare td { font-size: 16px; line-height: 1.45; color: var(--color-text-body); text-align: center; }
.pkg-compare td strong { font-weight: 600; color: var(--color-secondary); }
.pkg-compare tr:last-child th, .pkg-compare tr:last-child td { border-bottom: 0; }
.pkg-compare tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.pkg-note { max-width: 46em; margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--color-text-muted); }

/* ===== Next-step journey nav (class pages — scoped to .next-step to avoid about-us .journey table) ===== */
.section.next-step { padding-top: 56px; padding-bottom: 56px; }
.section.next-step h2 { max-width: 16em; margin-bottom: 10px; font-size: clamp(28px, 3.2vw, 36px); }
.section.next-step .lede { max-width: 40em; }
.next-step .journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.next-step .journey a, .next-step .journey .is-current { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); text-decoration: none; }
.next-step .journey .is-current { background: var(--color-secondary); border-color: var(--color-secondary); }
.next-step .journey a:hover { background: var(--color-primary-soft); }
.journey-key { flex-shrink: 0; font: 700 22px/1 var(--font-heading); color: var(--color-primary-dark); }
.next-step .journey .is-current .journey-key, .next-step .journey .is-current strong { color: var(--color-text-on-dark); }
.next-step .journey small { display: block; font: 600 13px/1.2 var(--font-body); color: var(--color-text-muted); }
.next-step .journey .is-current small { color: var(--color-text-on-dark-body); }
.next-step .journey strong { display: block; margin-top: 3px; font: 600 18px/1.25 var(--font-heading); color: var(--color-secondary); }
.next-step .journey .jsa-ico { width: 18px; height: 18px; margin-left: auto; color: var(--color-primary-dark); transition: transform .2s; }
.next-step .journey a:hover .jsa-ico { transform: translateX(4px); }
.journey-all { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); font: 600 16px/1.3 var(--font-heading); color: var(--color-secondary); text-decoration: none; }
.journey-all:hover { background: var(--color-primary-soft); color: var(--color-secondary); }
.journey-all .jsa-ico { width: 18px; height: 18px; color: var(--color-primary-dark); transition: transform .2s; }
.journey-all:hover .jsa-ico { transform: translateX(4px); }

/* ===== Class Pages Responsive ===== */
@media (min-width: 992px) {
  .class-hero { padding-top: 72px; padding-bottom: 80px; }
  .final-actions { min-width: 280px; }
}
@media (max-width: 991.98px) {
  .hero-grid, .practice-layout, .routine, .cls-parent-points { grid-template-columns: 1fr; }
  .next-step .journey { grid-template-columns: 1fr 1fr; }
  .routine { gap: 0; }
  .routine li { padding: 0 0 32px 44px; }
  .routine li::before { top: 10px; bottom: 0; left: 8px; width: 2px; height: auto; }
  .routine li:last-child { padding-bottom: 0; }
  .routine li:last-child::before { display: none; }
  .routine-mark { top: 2px; left: 0; }
  .final-actions { margin-top: 8px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .class-actions, .final-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 767.98px) {
  .experience { grid-template-columns: 1fr; }
  .experience li, .experience li:nth-child(odd), .experience li:nth-child(even) { padding: 24px 0; border-right: 0; }
}
@media (max-width: 575.98px) {
  .class-hero { padding-top: 36px; padding-bottom: 40px; }
  .class-actions .btn, .final-actions .btn { width: 100%; }
  .audience-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .next-step .journey { grid-template-columns: 1fr; }
  .jsa-faq summary { padding: 14px 18px; font-size: 16px; }
  .jsa-faq details p { padding: 0 18px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .next-step .journey a:hover .jsa-ico, .journey-all:hover .jsa-ico { transform: none; }
}


/* =========================================================
   10TH CLASS PAGE
   ========================================================= */

/* ===== Hero ===== */
.c10-hero { padding: 48px 0 56px; background: var(--color-bg-alt); }
.c10-hero-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 40px; align-items: end; }
.c10-year { margin: 0; font: 700 clamp(92px, 14vw, 168px)/.78 var(--font-heading); letter-spacing: -.06em; color: var(--color-primary); }
.c10-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.c10-hero h1 { max-width: 14em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.c10-hero .lede { max-width: 40em; margin-bottom: 26px; }
.c10-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ===== Focus points ===== */
.focus-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 8px 0 0; padding: 0; list-style: none; }
.focus-points li { padding-top: 14px; border-top: 3px solid var(--color-secondary); }
.focus-points li:nth-child(2) { border-top-color: var(--color-primary); }
.focus-points li:nth-child(3) { border-top-color: var(--color-quinary-dark); }
.focus-points h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.focus-points p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-text-muted); }

/* ===== Learn rows ===== */
.learn-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.learn-rows li { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--color-border); }
.learn-rows h3 { margin: 0; font: 600 20px/1.3 var(--font-heading); }
.learn-rows p { margin: 0; font-size: 16.5px; line-height: 1.55; }

/* ===== c10-model cards ===== */
.c10-model { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.c10-model li { min-width: 0; padding: 20px 18px 22px; border-radius: var(--radius-sm); background: var(--color-bg); border-top: 3px solid var(--color-primary); }
.c10-model li:nth-child(2) { border-top-color: var(--color-quinary-dark); }
.c10-model li:nth-child(3) { border-top-color: var(--color-tertiary); }
.c10-model li:nth-child(4) { border-top-color: var(--color-secondary); }
.c10-model span { display: block; margin-bottom: 10px; font: 700 13px/1 var(--font-heading); letter-spacing: .04em; color: var(--color-primary-dark); }
.c10-model h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.c10-model p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

/* ===== Habit row ===== */
.habit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.habit-row h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.habit-row p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-text-body); }

/* ===== Parent band ===== */
.parent-band { background: var(--color-primary-soft); }
.parent-band h2, .parent-band h3 { color: var(--color-secondary); }
.parent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.parent-grid p { margin: 0; font-size: 16px; line-height: 1.55; }

/* ===== Next pair (2-col link cards) ===== */
.next-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.next-pair a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); text-decoration: none; }
.next-pair a:hover { background: var(--color-primary-soft); }
.next-pair small { display: block; font: 600 13px/1.2 var(--font-body); color: var(--color-text-muted); }
.next-pair strong { display: block; margin-top: 3px; font: 600 20px/1.25 var(--font-heading); color: var(--color-secondary); }
.next-pair .jsa-ico { width: 18px; height: 18px; color: var(--color-primary-dark); transition: transform .2s; }
.next-pair a:hover .jsa-ico { transform: translateX(4px); }

/* ===== 10th Class Responsive ===== */
@media (min-width: 992px) {
  .c10-hero { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 991.98px) {
  .c10-model, .focus-points, .habit-row, .parent-grid { grid-template-columns: 1fr; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .c10-actions, .focus-points, .habit-row, .parent-grid { grid-template-columns: 1fr 1fr; }
  .c10-model { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .c10-hero-row, .learn-rows li { grid-template-columns: 1fr; }
  .c10-year { font-size: 88px; }
}
@media (max-width: 575.98px) {
  .c10-hero { padding-top: 32px; padding-bottom: 36px; }
  .c10-actions .btn { width: 100%; }
  .focus-points, .habit-row, .parent-grid, .c10-model, .next-pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .next-pair a:hover .jsa-ico { transform: none; }
}


/* =========================================================
   HOW JSA WORKS PAGE
   ========================================================= */

/* ===== Hero ===== */
.hw-hero { padding: 52px 0 60px; background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-bg-alt) 100%); border-bottom: 1px solid var(--color-border); }
.hw-hero-row { display: grid; grid-template-columns: 1fr 280px; gap: 48px 56px; align-items: center; }
.hw-eyebrow { margin: 0 0 10px; font: 700 13px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-dark); }
.hw-hero h1 { margin: 0 0 16px; font: 700 clamp(34px, 5vw, 52px)/1.1 var(--font-heading); }
.hw-points { margin: 16px 0 0; font: 600 15px/1.5 var(--font-heading); color: var(--color-text-muted); }
.hw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.journey-board { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px; list-style: none; background: var(--color-secondary); border-radius: var(--radius-card); color: var(--color-text-on-dark); }
.journey-board li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.journey-board li:last-child { border-bottom: 0; }
.journey-board span { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); font: 700 14px/1 var(--font-heading); }
.journey-board strong { font: 600 17px/1.3 var(--font-heading); }

/* ===== hjw-cycle: 4-step numbered list (avoids conflict with index.php ol.cycle) ===== */
.hjw-cycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 8px 0 0; padding: 0; list-style: none; }
.hjw-cycle li { min-width: 0; padding: 20px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.cycle-no { display: block; margin-bottom: 12px; font: 700 28px/1 var(--font-heading); color: var(--color-primary-dark); }
.hjw-cycle h3 { margin: 0 0 8px; font: 600 19px/1.3 var(--font-heading); }
.hjw-cycle p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text-muted); }
.takeaway { max-width: 48em; margin: 24px 0 0; padding: 14px 20px; border-left: 4px solid var(--color-primary); background: var(--color-primary-soft); font: 600 16px/1.5 var(--font-heading); color: var(--color-secondary); }

/* ===== Expect list ===== */
.expect-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 8px 0 0; padding: 0; list-style: none; }
.expect-list li { display: grid; grid-template-columns: 48px 1fr; gap: 8px 16px; padding: 20px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.expect-list span { grid-row: 1 / 3; font: 700 28px/1.2 var(--font-heading); color: var(--color-primary-dark); }
.expect-list h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--font-heading); align-self: end; }
.expect-list p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ===== Roles ===== */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 8px 0 0; padding: 0; list-style: none; }
.roles li { padding: 24px; background: var(--color-bg); border-radius: var(--radius-card); border: 1px solid var(--color-border); }
.roles h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-heading); }
.roles p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text-muted); }
.roles-note { max-width: 52em; margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); font-style: italic; }

/* ===== Parents section (how-jsa-works layout) ===== */
.parent-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px 56px; align-items: start; }
/* hjw-parent-points: simple bullet list (avoids conflict with index.php flex icon list) */
.hjw-parent-points { margin: 20px 0 0; padding: 0 0 0 1.2em; }
.hjw-parent-points li { margin-bottom: 10px; font-size: 16.5px; line-height: 1.65; color: var(--color-text-body); }
.sample { padding: 24px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.sample-kicker { margin: 0 0 6px; font: 700 12px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-dark); }
.sample h3 { margin: 0 0 10px; font: 600 18px/1.3 var(--font-heading); }
.sample p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--color-text-body); }
.sample-foot { margin: 10px 0 0; font-size: 13px; color: var(--color-text-muted); font-style: italic; }

/* ===== Routes ===== */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 8px 0 0; padding: 0; list-style: none; }
.routes li { padding: 24px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.routes h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-heading); }
.routes p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ===== FAQ wrap ===== */
.faq-wrap { max-width: 800px; margin: 0 auto; }

/* ===== How JSA Works Responsive ===== */
@media (min-width: 992px) {
  .hw-hero { padding-top: 72px; padding-bottom: 80px; }
}
@media (max-width: 991.98px) {
  .hw-hero-row, .hjw-cycle, .roles, .routes, .parent-layout { grid-template-columns: 1fr; }
  .expect-list { grid-template-columns: 1fr; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .hjw-cycle, .roles, .routes { grid-template-columns: 1fr 1fr; }
  .expect-list { grid-template-columns: 1fr 1fr; }
  .hw-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .hw-hero { padding-top: 32px; padding-bottom: 36px; }
  .hw-actions .btn { width: 100%; }
}


/* =========================================================
   SHARED UTILITIES (used across multiple pages)
   ========================================================= */
.pkg-compare td strong { font-weight: 600; color: var(--color-secondary); }
.pkg-compare a { font-weight: 600; }
.pkg-note a { font-weight: 600; }
.jsa-faq a { font-weight: 500; }


/* =========================================================
   11TH CLASS PAGE
   ========================================================= */
.c11-hero { padding: 52px 0 56px; background: var(--color-bg); }
.c11-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 28px 48px; align-items: stretch; }
.c11-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.c11-hero h1 { max-width: 13em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.c11-hero .lede { max-width: 38em; margin-bottom: 26px; }
.c11-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.c11-aside { display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 28px 24px; border-radius: var(--radius-card); background: var(--color-quaternary); }
.c11-aside p { margin: 0; }
.c11-year { font: 700 clamp(72px, 8vw, 104px)/.85 var(--font-heading); letter-spacing: -.04em; color: var(--color-secondary); }
.c11-aside-label { margin-top: 8px; font: 600 16px/1.3 var(--font-heading); color: var(--color-secondary); }
.c11-aside-note { margin-top: 12px; max-width: 22em; font-size: 15.5px; line-height: 1.5; color: var(--color-text-body); }

.start-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.start-list li { min-width: 0; padding-top: 14px; border-top: 2px solid var(--color-border); }
.start-list span { display: block; margin-bottom: 8px; font: 700 13px/1 var(--font-heading); color: var(--color-primary-dark); }
.start-list h3 { margin: 0; font: 600 16px/1.4 var(--font-heading); }

.exp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.exp-grid li { min-width: 0; padding: 22px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.exp-grid h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-heading); }
.exp-grid p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps li { min-width: 0; }
/* .steps uses a square step-no — override the circular version from Our Plans */
.steps .step-no { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 8px; background: var(--color-secondary); color: var(--color-text-on-dark); font: 700 14px/1 var(--font-heading); position: static; z-index: auto; }
.steps h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.steps p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.steady { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 28px 56px; align-items: start; }
.steady .lede { max-width: 36em; color: var(--color-text-body); }
.steady-points { margin: 0; padding: 0; list-style: none; }
.steady-points li { padding: 16px 0; border-top: 1px solid rgba(17,26,46,.14); }
.steady-points li:last-child { border-bottom: 1px solid rgba(17,26,46,.14); }
.steady-points h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--font-heading); }
.steady-points p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--color-text-body); }

.family { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 56px; align-items: start; }
.family .family-points { margin: 0; padding: 0; list-style: none; }
.family .family-points li + li { margin-top: 18px; }
.family .family-points h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--font-heading); color: var(--color-text-on-dark); }
.family .family-points p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.family .parent-actions { margin-top: 22px; }

/* 11th Class Responsive */
@media (min-width: 992px) {
  .c11-hero { padding-top: 72px; padding-bottom: 72px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .start-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .c11-hero-row, .steady, .family, .exp-grid, .steps { grid-template-columns: 1fr; }
  .start-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .c11-actions { flex-direction: row; flex-wrap: wrap; }
  .exp-grid, .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .c11-hero { padding-top: 32px; padding-bottom: 36px; }
  .c11-actions .btn { width: 100%; }
  .start-list, .exp-grid, .steps { grid-template-columns: 1fr; }
}


/* =========================================================
   12TH CLASS PAGE
   ========================================================= */
.c12-hero { padding: 28px 0 36px; background: var(--color-bg); }
.c12-hero-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: 28px 40px; align-items: stretch; }
.c12-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.c12-hero h1 { max-width: 13em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.c12-hero .lede { max-width: 38em; margin-bottom: 26px; }
.c12-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.c12-rail { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: 28px 26px 24px; border-radius: var(--radius-card); background: var(--color-secondary); }
.c12-rail p { margin: 0; }
.c12-rail-kicker { font: 600 14px/1.3 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-on-dark-body); }
.c12-rail-year { margin-top: 10px; font: 700 clamp(84px, 9vw, 120px)/.8 var(--font-heading); letter-spacing: -.04em; color: var(--color-text-on-dark); }
.c12-rail-note { max-width: 16em; margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--color-text-on-dark-body); }

.focus-ledger { margin: 0; padding: 0; list-style: none; }
.focus-ledger li { display: grid; grid-template-columns: 48px minmax(180px, 280px) minmax(0, 1fr); gap: 8px 28px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--color-border); }
.focus-ledger li:last-child { border-bottom: 1px solid var(--color-border); }
.focus-ledger span { font: 700 14px/1 var(--font-heading); color: var(--color-primary-dark); }
.focus-ledger h3 { margin: 0; font: 600 18px/1.35 var(--font-heading); }
.focus-ledger p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-text-muted); }

.exp-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-secondary); }
.exp-line li { min-width: 0; padding: 22px 22px 4px 0; }
.exp-line li + li { padding-left: 22px; border-left: 1px solid var(--color-border); }
.exp-line h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-heading); }
.exp-line p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 18px 0 0; list-style: none; }
.flow li { min-width: 0; padding-top: 16px; border-top: 2px solid var(--color-border); }
.flow li:nth-child(1) { border-top-color: var(--color-primary); }
.flow li:nth-child(2) { border-top-color: var(--color-quinary-dark); }
.flow li:nth-child(3) { border-top-color: var(--color-tertiary-dark); }
.flow li:nth-child(4) { border-top-color: var(--color-secondary); }
.flow span { display: block; margin-bottom: 8px; font: 700 13px/1 var(--font-heading); letter-spacing: .04em; color: var(--color-primary-dark); }
.flow h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.flow p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.ahead-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; margin: 8px 0 0; padding: 0; list-style: none; }
.ahead-points h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--font-heading); color: var(--color-text-on-dark); }
.ahead-points p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-on-dark-body); }
.section.band-navy .section-head { max-width: 40em; }

.parent-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 24px 48px; align-items: start; }
.parent-panel { padding: 24px 24px 8px; border-radius: var(--radius-card); background: var(--color-bg); }
.parent-panel h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--font-heading); }
.parent-panel p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--color-text-body); }

/* 12th Class Responsive */
@media (min-width: 992px) {
  .c12-hero { padding-top: 48px; padding-bottom: 56px; }
}
@media (max-width: 991.98px) {
  .c12-hero-row, .parent-split, .ahead-points { grid-template-columns: 1fr; }
  .c12-copy { padding-top: 8px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .c12-actions { flex-direction: row; flex-wrap: wrap; }
  .exp-line, .flow { grid-template-columns: 1fr 1fr; }
  .exp-line li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ahead-points { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .focus-ledger li { grid-template-columns: 40px minmax(0, 1fr); }
  .focus-ledger p { grid-column: 2; }
}
@media (max-width: 575.98px) {
  .c12-hero { padding-top: 24px; padding-bottom: 28px; }
  .c12-rail-year { font-size: 84px; }
  .c12-actions .btn { width: 100%; }
  .exp-line, .flow, .ahead-points { grid-template-columns: 1fr; }
  .exp-line li, .exp-line li + li { padding-left: 0; border-left: 0; padding-right: 0; }
}


/* =========================================================
   A LEVEL PAGE
   ========================================================= */
.al-hero { padding: 48px 0 56px; background: var(--color-bg-alt); }
.al-eyebrow { margin: 0 0 18px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.al-hero-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 20px 48px; align-items: end; }
.al-hero h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.al-hero .lede { margin-bottom: 22px; }
.al-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.al-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; }
.al-strip li { min-width: 0; padding: 16px 16px 14px; background: var(--color-bg); border-radius: var(--radius-sm); border-bottom: 2px solid var(--color-secondary); }
.al-strip strong { display: block; font: 600 16px/1.35 var(--font-heading); color: var(--color-secondary); }
.al-strip span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--color-text-muted); }

.al-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 56px; align-items: start; }
.al-split .lede { max-width: 36em; }
.al-points { margin: 0; padding: 0; list-style: none; }
.al-points li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px 16px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.al-points li:last-child { border-bottom: 1px solid var(--color-border); }
.al-points span { font: 700 14px/1.4 var(--font-heading); color: var(--color-primary-dark); }
.al-points h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--font-heading); }
.al-points p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--color-text-muted); }

.exp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.exp-row li { min-width: 0; }
.exp-row h3 { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--color-tertiary-dark); font: 600 18px/1.3 var(--font-heading); }
.exp-row p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.al-model { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; position: relative; }
.al-model::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 1px; background: var(--color-border); }
.al-model li { position: relative; min-width: 0; padding-top: 40px; }
.al-model span { position: absolute; top: 0; left: 0; padding-right: 10px; background: var(--color-bg); font: 700 14px/1 var(--font-heading); color: var(--color-secondary); }
.al-model h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.al-model p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.forward { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; margin: 8px 0 0; padding: 0; list-style: none; }
.forward h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--font-heading); }
.forward p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-body); }

.al-family { background: var(--color-secondary-soft); color: var(--color-text-on-dark-body); }
.al-family h2, .al-family h3 { color: var(--color-text-on-dark); }
.al-family .lede { color: var(--color-text-on-dark-body); }
.al-family .btn.jsa-btn-secondary { border-color: rgba(255,255,255,.6); color: var(--color-text-on-dark); }
.al-family .btn.jsa-btn-secondary:hover { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-secondary); }
.family-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr); gap: 28px 48px; align-items: start; }
.al-family .family-points { margin: 0; padding: 0; list-style: none; }
.al-family .family-points li { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.16); }
.al-family .family-points li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.al-family .family-points h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--font-heading); }
.al-family .family-points p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--color-text-on-dark-body); }
.family-actions { margin-top: 22px; }

/* A Level Responsive */
@media (min-width: 992px) {
  .al-hero { padding-top: 72px; padding-bottom: 64px; }
}
@media (max-width: 991.98px) {
  .al-hero-top, .al-split, .family-split, .forward { grid-template-columns: 1fr; }
  .al-model::before { display: none; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .al-actions { flex-direction: row; flex-wrap: wrap; }
  .al-strip, .exp-row, .al-model { grid-template-columns: 1fr 1fr; }
  .al-model span { position: static; display: block; margin-bottom: 8px; padding: 0; background: transparent; }
  .al-model li { padding-top: 0; }
}
@media (max-width: 575.98px) {
  .al-hero { padding-top: 32px; padding-bottom: 36px; }
  .al-actions .btn { width: 100%; }
  .al-strip, .exp-row, .al-model, .forward { grid-template-columns: 1fr; }
  .al-model span { position: static; display: block; margin-bottom: 8px; padding: 0; background: transparent; }
  .al-model li { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .al-model::before { display: none; }
}


/* =========================================================
   ADMISSIONS PAGE
   ========================================================= */
.ad-hero { padding: 48px 0 56px; background: var(--color-bg-alt); }
.ad-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 28px 56px; align-items: center; }
.ad-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.ad-hero h1 { max-width: 12em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.ad-hero .lede { max-width: 38em; margin-bottom: 26px; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ready { margin: 0; padding: 22px 24px 8px; list-style: none; border-radius: var(--radius-card); background: var(--color-bg); }
.ready li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 14px 0; border-top: 1px solid var(--color-border); font: 600 16px/1.4 var(--font-heading); color: var(--color-secondary); }
.ready li:first-child { border-top: 0; }
.ready span { font: 700 13px/1 var(--font-heading); color: var(--color-primary-dark); }
.ready-note { margin: 8px 0 16px; font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }

.prep { margin: 8px 0 0; padding: 0; list-style: none; }
.prep li { display: grid; grid-template-columns: 52px minmax(180px, 280px) minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--color-border); }
.prep li:last-child { border-bottom: 1px solid var(--color-border); }
.prep span { font: 700 14px/1.4 var(--font-heading); color: var(--color-primary-dark); }
.prep h3 { margin: 0; font: 600 18px/1.35 var(--font-heading); }
.prep p { margin: 0; font-size: 16px; line-height: 1.55; }
.prep a { font-weight: 600; }

.ad-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 8px 0 0; padding: 0; list-style: none; }
.ad-path li { position: relative; min-width: 0; }
.ad-path li::after { content: ""; position: absolute; top: 19px; left: 48px; right: -24px; height: 2px; background: var(--color-border); }
.ad-path li:last-child::after { display: none; }
.path-no { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: var(--color-secondary); color: var(--color-text-on-dark); font: 700 13px/1 var(--font-heading); }
.ad-path h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-heading); }
.ad-path p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }
.ad-path a { font-weight: 600; }

.stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; }
.stage-grid article { min-width: 0; padding: 18px 18px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.stage-grid h3 { margin: 0 0 4px; font: 600 20px/1.3 var(--font-heading); }
.stage-grid p { margin: 0 0 10px; font-size: 15px; color: var(--color-text-muted); }
.stage-grid ul { margin: 0; padding: 0; list-style: none; }
.stage-grid a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-top: 1px solid var(--color-border); font: 600 16px/1.3 var(--font-heading); text-decoration: none; }
.stage-grid a:hover { color: var(--color-primary); }
.stage-grid .jsa-ico { width: 16px; height: 16px; }

.ad-model-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 8px 0 0; padding: 0; list-style: none; }
.ad-model-row li { min-width: 0; padding-top: 14px; border-top: 2px solid var(--color-quinary-dark); }
.ad-model-row h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-heading); }
.ad-model-row p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-body); }
.learn-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Guide section on admissions is a dark band — only need lede max-width here since band-navy covers background/color */
section.guide .lede { max-width: 40em; }
.guide-note { max-width: 40em; margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--color-text-on-dark); }
.guide-actions { margin-top: 24px; }

.policy-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.policy-links a { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 96px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--color-bg); text-decoration: none; }
.policy-links a:hover { background: var(--color-primary-soft); }
.policy-links strong { font: 600 18px/1.3 var(--font-heading); color: var(--color-secondary); }
.policy-links span { font-size: 15px; line-height: 1.45; color: var(--color-text-body); }

/* Admissions Responsive */
@media (min-width: 992px) {
  .ad-hero { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 991.98px) {
  .ad-hero-row, .ad-path, .ad-model-row, .stage-grid, .policy-links { grid-template-columns: 1fr; }
  .ad-path li::after { display: none; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .ad-actions, .learn-actions { flex-direction: row; flex-wrap: wrap; }
  .ad-model-row, .stage-grid, .policy-links { grid-template-columns: 1fr 1fr; }
  .stage-grid article:last-child, .policy-links li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .prep li { grid-template-columns: 40px minmax(0, 1fr); }
  .prep p { grid-column: 2; }
}
@media (max-width: 575.98px) {
  .ad-hero { padding-top: 32px; padding-bottom: 36px; }
  .ad-actions .btn, .learn-actions .btn, .guide-actions .btn { width: 100%; }
  .ad-model-row, .stage-grid, .policy-links { grid-template-columns: 1fr; }
  .stage-grid article:last-child, .policy-links li:last-child { grid-column: auto; }
}


/* =========================================================
   DEMO CLASS PAGE
   ========================================================= */
.dm-hero { padding: 48px 0 56px; background: var(--color-bg); }
.dm-hero-row { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); gap: 28px 56px; align-items: center; }
.dm-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.dm-hero h1 { max-width: 12em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.dm-hero .lede { max-width: 38em; margin-bottom: 18px; }
.dm-points { margin: 0 0 26px; padding: 0; list-style: none; }
.dm-points li { position: relative; padding: 6px 0 6px 18px; font-size: 16px; line-height: 1.45; color: var(--color-text-body); }
.dm-points li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-quinary-dark); }
.dm-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.session { padding: 26px 26px 22px; border-radius: var(--radius-card); background: var(--color-quaternary); }
.session-kicker { margin: 0 0 8px; font: 700 12px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-quinary-dark); }
.session h2 { margin: 0 0 16px; font: 600 26px/1.25 var(--font-heading); color: var(--color-secondary); }
.session ul { margin: 0; padding: 0; list-style: none; }
.session li { padding: 12px 0; border-top: 1px solid rgba(17,26,46,.12); font: 600 16px/1.4 var(--font-heading); color: var(--color-secondary); }
.session-foot { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--color-text-body); }

.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 8px 0 0; padding: 0; list-style: none; }
.benefits li { min-width: 0; padding: 20px 0 8px; border-top: 2px solid var(--color-primary); }
.benefits li:nth-child(2) { border-top-color: var(--color-quinary-dark); }
.benefits li:nth-child(3) { border-top-color: var(--color-tertiary-dark); }
.benefits li:nth-child(4) { border-top-color: var(--color-secondary); }
.benefits h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.benefits p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-body); }

.demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 8px 0 0; padding: 0; list-style: none; }
.demo-steps li { position: relative; min-width: 0; }
.demo-steps li::after { content: ""; position: absolute; top: 19px; left: 48px; right: -28px; height: 2px; background: var(--color-border); }
.demo-steps li:last-child::after { display: none; }
.demo-steps span { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-dark); font: 700 13px/1 var(--font-heading); }
.demo-steps h3 { margin: 0 0 8px; font: 600 18px/1.35 var(--font-heading); }
.demo-steps p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.dm-model-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 8px 0 0; padding: 0; list-style: none; }
.dm-model-row li { min-width: 0; padding-top: 14px; border-top: 2px solid var(--color-secondary); }
.dm-model-row h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font-heading); }
.dm-model-row p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-body); }
.model-note { max-width: 44em; margin: 18px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }
.model-action { margin-top: 18px; }

.request { background: var(--color-secondary); color: var(--color-text-on-dark-body); }
.request h2 { color: var(--color-text-on-dark); }
.request .lede { color: var(--color-text-on-dark-body); }
.request-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); gap: 28px 56px; align-items: start; }
.share-list { margin: 18px 0 0; padding: 0; list-style: none; }
.share-list li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); font-size: 16.5px; line-height: 1.45; color: var(--color-text-on-dark); }
.share-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.request-panel { padding: 24px 24px 22px; border-radius: var(--radius-card); background: var(--color-secondary-soft); }
.request-panel p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--color-text-on-dark-body); }
.request-panel a:not(.btn) { font-weight: 600; color: var(--color-text-on-dark); }
.request .btn.jsa-btn-primary { width: 100%; }

/* Demo Class Responsive */
@media (min-width: 992px) {
  .dm-hero { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 991.98px) {
  .dm-hero-row, .request-row, .demo-steps, .dm-model-row, .benefits, .stage-grid { grid-template-columns: 1fr; }
  .demo-steps li::after { display: none; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .dm-actions { flex-direction: row; flex-wrap: wrap; }
  .benefits, .dm-model-row, .stage-grid { grid-template-columns: 1fr 1fr; }
  .stage-grid article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .dm-hero { padding-top: 32px; padding-bottom: 36px; }
  .dm-actions .btn { width: 100%; }
  .benefits, .dm-model-row, .stage-grid { grid-template-columns: 1fr; }
  .stage-grid article:last-child { grid-column: auto; }
}


/* =========================================================
   O LEVEL PAGE
   ========================================================= */
.ol-hero { padding: 48px 0 56px; background: var(--color-bg); }
.ol-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 28px 48px; align-items: stretch; }
.ol-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-quinary-dark); }
.ol-hero h1 { max-width: 13em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.ol-hero .lede { max-width: 38em; margin-bottom: 26px; }
.ol-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ol-index { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 10px 26px; list-style: none; border-radius: var(--radius-card); background: var(--color-quinary-soft); }
.ol-index li { padding: 16px 0; border-bottom: 1px solid rgba(15,118,110,.2); }
.ol-index li:last-child { border-bottom: 0; }
.ol-index strong { display: block; font: 600 18px/1.3 var(--font-heading); color: var(--color-secondary); }
.ol-index span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--color-text-body); }

.approach { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.approach li { grid-column: span 2; min-width: 0; padding: 18px 18px 16px; background: var(--color-bg); border-top: 2px solid var(--color-quinary-dark); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.approach li:nth-child(4), .approach li:nth-child(5) { grid-column: span 3; }
.approach span { display: block; margin-bottom: 8px; font: 700 13px/1 var(--font-heading); color: var(--color-quinary-dark); }
.approach h3 { margin: 0 0 6px; font: 600 18px/1.35 var(--font-heading); }
.approach p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--color-text-muted); }

.exp-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.exp-mosaic li { min-width: 0; padding: 24px 22px; border-radius: var(--radius-sm); }
.exp-mosaic li:nth-child(1) { background: var(--color-primary-soft); }
.exp-mosaic li:nth-child(2) { background: var(--color-quaternary); }
.exp-mosaic li:nth-child(3) { background: var(--color-quinary-soft); }
.exp-mosaic li:nth-child(4) { background: var(--color-bg-alt); }
.exp-mosaic h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.exp-mosaic p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-text-body); }

.ol-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.ol-steps li { min-width: 0; }
.ol-no { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border: 2px solid var(--color-secondary); border-radius: 50%; font: 700 14px/1 var(--font-heading); color: var(--color-secondary); }
.ol-steps h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.ol-steps p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.ol-family { background: var(--color-quinary-soft); }
.ol-family .family-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); gap: 28px 48px; align-items: start; }
.ol-family .family-points { margin: 0; padding: 22px 22px 6px; list-style: none; border-radius: var(--radius-card); background: var(--color-bg); }
.ol-family .family-points li + li { margin-top: 4px; }
.ol-family .family-points h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--font-heading); }
.ol-family .family-points p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.5; color: var(--color-text-body); }

/* O Level Responsive */
@media (min-width: 992px) {
  .ol-hero { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 991.98px) {
  .ol-hero-row, .ol-family .family-split, .ol-steps { grid-template-columns: 1fr; }
  .approach { grid-template-columns: 1fr 1fr; }
  .approach li, .approach li:nth-child(4), .approach li:nth-child(5) { grid-column: auto; }
  .approach li:last-child { grid-column: 1 / -1; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .ol-actions { flex-direction: row; flex-wrap: wrap; }
  .ol-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .ol-hero { padding-top: 32px; padding-bottom: 36px; }
  .ol-actions .btn { width: 100%; }
  .approach { grid-template-columns: 1fr; }
  .approach li, .approach li:nth-child(4), .approach li:nth-child(5) { grid-column: auto; }
  .exp-mosaic, .ol-steps { grid-template-columns: 1fr; }
}


/* =========================================================
   OUR TEAM PAGE
   ========================================================= */
.tm-hero { padding: 48px 0 56px; background: var(--color-bg); }
.tm-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 28px 56px; align-items: center; }
.tm-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.tm-hero h1 { max-width: 11em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.tm-hero .lede { max-width: 38em; margin-bottom: 26px; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.duty-board { margin: 0; padding: 8px 0 8px 22px; list-style: none; border-left: 3px solid var(--color-primary); }
.duty-board li { padding: 14px 0; }
.duty-board strong { display: block; font: 600 20px/1.3 var(--font-heading); color: var(--color-secondary); }
.duty-board span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--color-text-muted); }

.share { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px 56px; align-items: start; }
.share .lede { max-width: 28em; }
.roles { margin: 0; padding: 0; list-style: none; }
.roles li { position: relative; padding: 0 0 22px 58px; }
.roles li::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--color-border); }
.roles li:last-child { padding-bottom: 0; }
.roles li:last-child::before { display: none; }
.roles span { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-dark); font: 700 13px/1 var(--font-heading); }
.roles li:nth-child(2) span { background: var(--color-quinary-dark); }
.roles li:nth-child(3) span { background: var(--color-tertiary); color: var(--color-secondary); }
.roles li:nth-child(4) span { background: var(--color-secondary); }
.roles h3 { margin: 4px 0 6px; font: 600 18px/1.3 var(--font-heading); }
.roles p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }

.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--color-secondary); }
.who li { min-width: 0; padding: 22px 28px 4px 0; }
.who li + li { padding-left: 28px; border-left: 1px solid var(--color-border); }
.who h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.who p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-body); }
.who-actions { margin-top: 28px; }

.community { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 28px 48px; align-items: center; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.facts li { min-width: 0; padding: 22px 18px; border-radius: var(--radius-sm); background: var(--color-bg); }
.facts strong { display: block; font: 700 clamp(40px, 5vw, 64px)/1 var(--font-heading); letter-spacing: -.03em; color: var(--color-secondary); }
.facts span { display: block; margin-top: 8px; font: 600 16px/1.35 var(--font-heading); color: var(--color-text-body); }
.profile-note { max-width: 40em; margin: 18px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }
.team-specimens { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.team-specimens li { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 18px 18px 16px; }
.team-photo { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 12px; border-radius: 14px; background: #f7f4ee; border: 1px dashed var(--color-border); font: 700 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); object-fit: cover; }
.team-photo.is-real { border-style: solid; }
.team-specimens strong { display: block; font: 600 18px/1.3 var(--font-heading); color: var(--color-secondary); }
.team-role { display: block; margin-top: 4px; font: 600 13.5px/1.4 var(--font-heading); color: var(--color-primary-dark); }
.team-specimens p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--color-text-body); }

.tm-cycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 8px 0 0; padding: 0; list-style: none; }
.tm-cycle li { min-width: 0; padding-top: 12px; border-top: 2px solid var(--color-primary); }
.tm-cycle li:nth-child(2) { border-top-color: var(--color-quinary-dark); }
.tm-cycle li:nth-child(3) { border-top-color: var(--color-tertiary-dark); }
.tm-cycle li:nth-child(4) { border-top-color: var(--color-secondary); }
.tm-cycle h3 { margin: 0 0 8px; font: 600 16px/1.3 var(--font-heading); letter-spacing: .04em; }
.tm-cycle p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-muted); }
.cycle-action { margin-top: 26px; }

.meet { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.meet li { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 22px; border-radius: var(--radius-sm); background: var(--color-bg); }
.meet h3 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); }
.meet p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--color-text-body); }
.meet .btn { margin-top: auto; }

/* Our Team Responsive */
@media (min-width: 992px) {
  .tm-hero { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 991.98px) {
  .tm-hero-row, .share, .community, .who, .tm-cycle, .meet { grid-template-columns: 1fr; }
  .who li, .who li + li { padding-left: 0; padding-right: 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .who li:first-child { border-top: 0; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .tm-actions { flex-direction: row; flex-wrap: wrap; }
  .tm-cycle, .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .tm-hero { padding-top: 32px; padding-bottom: 36px; }
  .tm-actions .btn, .meet .btn { width: 100%; }
  .tm-cycle, .facts { grid-template-columns: 1fr; }
}


/* =========================================================
   SHARED RESPONSIVE: Increase section spacing on large screens
   (applies across all pages that use --section-y)
   ========================================================= */
@media (min-width: 992px) {
  :root { --section-y: 96px; }
}


/* =========================================================
   PROSPECTUS PAGE
   ========================================================= */
/* ==========================================================
/* ==========================================================
   Prospectus. All classes prefixed pro- to avoid conflicts.
   ========================================================== */
.pro-hero { padding: 36px 0 28px; background: var(--color-bg-alt); }
.pro-eyebrow { margin: 0 0 10px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.pro-hero h1 { max-width: 16em; margin: 0 0 12px; font: 700 clamp(32px, 4vw, 48px)/1.15 var(--font-heading); }
.pro-hero .lede { max-width: 40em; margin: 0 0 20px; }
a.prospectus-download[hidden] { display: none !important; }
.pro-contents { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--color-border); }
.pro-contents a { font: 600 14.5px/1.3 var(--font-heading); color: var(--color-secondary); text-decoration: none; }
.pro-contents a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.pro-contents a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.pro-welcome-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px 48px; align-items: start; }
.pro-welcome-grid p { margin: 0 0 12px; }
.pro-welcome-grid .lede { margin-bottom: 0; }
.pro-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.pro-path-grid section { padding-top: 14px; border-top: 3px solid var(--color-primary); }
.pro-path-grid section:nth-child(2) { border-top-color: var(--color-quinary); }
.pro-path-grid section:nth-child(3) { border-top-color: var(--color-tertiary); }
.pro-path-grid h3 { margin: 0 0 10px; font: 600 22px/1.3 var(--font-heading); }
.pro-path-grid ul { margin: 0; padding: 0; list-style: none; }
.pro-path-grid a { display: inline-block; padding: 6px 0; font: 600 16px/1.3 var(--font-heading); color: var(--color-secondary); }
.pro-path-grid a:hover { color: var(--color-primary-dark); }
.pro-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: step; }
.pro-process li { padding-top: 12px; border-top: 3px solid var(--color-primary); }
.pro-process li:nth-child(2) { border-top-color: var(--color-quinary); }
.pro-process li:nth-child(3) { border-top-color: var(--color-tertiary); }
.pro-process li:nth-child(4) { border-top-color: var(--color-primary-dark); }
.pro-process h3 { margin: 0 0 10px; font: 600 22px/1.3 var(--font-heading); }
.pro-process h3::before { content: counter(step, decimal-leading-zero); counter-increment: step; display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .04em; color: var(--color-primary-dark); }
.pro-process p { margin: 0 0 8px; }
.pro-experience-list { display: grid; gap: 0; margin: 0; }
.pro-experience-list div { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 8px 28px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.pro-experience-list div:last-child { border-bottom: 1px solid var(--color-border); }
.pro-experience-list dt { margin: 0; font: 600 18px/1.35 var(--font-heading); color: var(--color-text-heading); }
.pro-experience-list dd { margin: 0; }
.pro-parent-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 40px; align-items: start; }
.pro-parent-note { margin: 0; padding: 18px 18px 16px; border-left: 3px solid var(--color-quinary); background: var(--color-quinary-soft); color: var(--color-text-heading); }
.pro-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pro-facts li { padding-top: 12px; border-top: 3px solid var(--color-primary); }
.pro-facts strong { display: block; color: var(--color-text-heading); font: 700 clamp(32px, 4vw, 44px)/1 var(--font-heading); }
.pro-facts span { display: block; margin-top: 6px; color: var(--color-text-body); }
.pro-option-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 22px; list-style: none; padding: 0; }
.pro-option-links a { display: inline-block; padding: 6px 0; font: 600 16px/1.3 var(--font-heading); color: var(--color-secondary); text-decoration: none; }
.pro-option-links a:hover { color: var(--color-primary-dark); }
.pro-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: step; }
.pro-journey li { padding-top: 12px; border-top: 3px solid var(--color-primary); }
.pro-journey li:nth-child(2) { border-top-color: var(--color-quinary); }
.pro-journey li:nth-child(3) { border-top-color: var(--color-tertiary); }
.pro-journey li:nth-child(4) { border-top-color: var(--color-primary-dark); }
.pro-journey h3 { margin: 0 0 10px; font: 600 22px/1.3 var(--font-heading); }
.pro-journey h3::before { content: counter(step, decimal-leading-zero); counter-increment: step; display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .04em; color: var(--color-primary-dark); }
.pro-journey p { margin: 0 0 8px; }
.pro-journey a { display: inline-block; padding: 6px 0; font: 600 16px/1.3 var(--font-heading); color: var(--color-secondary); }
.pro-journey a:hover { color: var(--color-primary-dark); }
.pro-resource-list { margin: 0; padding: 0; list-style: none; }
.pro-resource-list li { display: grid; grid-template-columns: minmax(180px, 340px) 1fr; gap: 8px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--color-border); }
.pro-resource-list li:last-child { border-bottom: 1px solid var(--color-border); }
.pro-resource-list a { font: 600 16.5px/1.3 var(--font-heading); color: var(--color-secondary); text-decoration: none; }
.pro-resource-list a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.pro-resource-list span { color: var(--color-text-body); }
@media (min-width: 992px) { .pro-hero { padding-top: 52px; } }
@media (max-width: 991.98px) { .pro-welcome-grid, .pro-parent-band, .pro-path-grid { grid-template-columns: 1fr; } .pro-process, .pro-journey, .pro-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .pro-hero { padding-top: 28px; } .pro-process, .pro-journey, .pro-facts, .pro-experience-list div, .pro-resource-list li { grid-template-columns: 1fr; } }


/* =========================================================
   MARKS, PERCENTAGE & AGGREGATE CALCULATOR PAGE
   ========================================================= */
/* ==========================================================
   Marks calculator. Shared header, buttons and footer match Home.
   ========================================================== */

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.calc-hero { padding: 36px 0 8px; background: var(--color-bg-alt); }
.calc-eyebrow { margin: 0 0 10px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.calc-hero h1 { max-width: 16em; margin: 0 0 12px; font: 700 clamp(32px, 4vw, 46px)/1.15 var(--font-heading); }
.calc-hero .lede { max-width: 40em; margin: 0 0 8px; }
.hero-note { max-width: 40em; margin: 0; color: var(--color-text-muted); font-weight: 600; }
.calc-section { padding-top: 28px; }
.mode-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mode-tab { min-height: 48px; padding: 10px 16px; border: 1.5px solid var(--color-border); border-radius: 999px; background: var(--color-bg); color: var(--color-secondary); font: 600 15px/1.2 var(--font-heading); cursor: pointer; }
.mode-tab[aria-selected="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); }
.mode-tab:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.local-note, .panel-lead { max-width: 46em; margin: 0 0 16px; }
.local-note { font-size: 14.5px; font-weight: 600; color: var(--color-text-muted); }
.col-head, .mark-row, .agg-row { display: grid; grid-template-columns: minmax(140px, 1.5fr) minmax(90px, .8fr) minmax(120px, 1fr) 4.8rem auto; gap: 8px 12px; align-items: end; }
.agg-head, .agg-row { grid-template-columns: minmax(140px, 1.5fr) minmax(100px, .9fr) minmax(100px, .9fr) 5.5rem auto; }
.col-head { margin-bottom: 4px; color: var(--color-text-muted); font: 600 13px/1.3 var(--font-heading); }
.mark-row, .agg-row { padding: 12px 0; border-top: 1px solid var(--color-border); }
.field { position: relative; min-width: 0; }
.field label { display: block; margin: 0 0 6px; font: 600 13px/1.3 var(--font-heading); color: var(--color-text-heading); }
.field input { display: block; width: 100%; margin: 0; padding: 11px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-text-heading); font: 400 16px/1.4 var(--font-body); }
.field input:focus-visible, .remove-row:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.field.is-invalid input { border-color: var(--color-error); }
.field-error { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--color-error); }
.row-pct { margin: 0 0 12px; font: 700 15px/1 var(--font-heading); color: var(--color-primary-dark); }
.remove-row { margin-bottom: 2px; min-height: 46px; padding: 8px 10px; border: 0; background: transparent; color: var(--color-error); font: 600 14px/1.2 var(--font-heading); cursor: pointer; text-decoration: underline; }
.remove-row:disabled { color: var(--color-text-muted); cursor: not-allowed; text-decoration: none; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.tool-btn { min-height: 48px; padding: 0 18px; }
.limit-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.weight-status { margin: 0 0 14px; font-weight: 600; }
.weight-status.is-short { color: var(--color-error); }
.disclaimer { max-width: 48em; margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid var(--color-tertiary-dark); background: var(--color-quaternary); color: var(--color-text-heading); font-size: 14.5px; }
.result-box { margin-top: 18px; padding: 22px 24px; border-radius: var(--radius-card); background: var(--color-secondary); color: var(--color-text-on-dark-body); }
.result-box.is-stale { box-shadow: inset 4px 0 0 var(--color-tertiary); }
.stale-note { margin: 0 0 10px; color: var(--color-tertiary); font-weight: 700; }
.result-kicker { margin: 0; font: 700 13px/1.2 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-on-dark-body); }
.result-figure { margin: 6px 0 14px; color: var(--color-text-on-dark); font: 700 clamp(36px, 5vw, 52px)/1 var(--font-heading); }
.result-totals { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 8px; }
.result-totals div { margin: 0; }
.result-totals dt { margin: 0; font-size: 13px; color: var(--color-text-on-dark-body); }
.result-totals dd { margin: 2px 0 0; color: var(--color-text-on-dark); font: 700 20px/1.2 var(--font-heading); }
.result-list { margin: 12px 0 0; padding: 0; list-style: none; }
.result-list li { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 8px 16px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.14); color: var(--color-text-on-dark); }
.result-list span:last-child { font-weight: 700; }

.how-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: 28px 48px; align-items: start; }
.how-list { margin: 0; padding-left: 1.2em; }
.how-list li { margin: 0 0 8px; }
.example-box { padding: 22px 22px 18px; border-radius: var(--radius-card); background: var(--color-bg); border: 1px solid var(--color-border); }
.example-box p { margin: 0 0 8px; }
.panel-kicker { font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.example-sum { color: var(--color-text-heading); font: 700 22px/1.3 var(--font-heading); }
.meaning-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; margin: 0; }
.meaning-list div { margin: 0; padding-top: 12px; border-top: 3px solid var(--color-primary); }
.meaning-list div:nth-child(2) { border-top-color: var(--color-quinary); }
.meaning-list div:nth-child(3) { border-top-color: var(--color-tertiary); }
.meaning-list dt { margin: 0 0 6px; font: 700 18px/1.3 var(--font-heading); color: var(--color-text-heading); }
.meaning-list dd { margin: 0; }
.jsa-faq { max-width: 820px; }

.final { position: relative; overflow: hidden; }
.final .container { position: relative; }
.final h2 { font-size: clamp(30px, 4vw, 44px); }
.final .lede { max-width: 36em; font-size: 19px; }
.final-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

@media (min-width: 768px) {
  .mark-row .field label, .agg-row .field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.jsa-btn { transition: none; }
  .btn.jsa-btn-primary:hover { transform: none; }
}

@media (min-width: 992px) {
  :root { --section-y: 96px; }
  .calc-hero { padding-top: 52px; }
  .final-actions { min-width: 260px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jsa-nav-link { padding: 12px 10px; }
  .jsa-nav-link::after { left: 10px; right: 10px; }
  .nav-cta { padding: 12px 16px; margin-left: 4px; }
}

@media (max-width: 991.98px) {
  .topbar-text { display: none; }
  .topbar-inner { justify-content: center; }
  .brand .jsa-mark, .scrolled .brand .jsa-mark { height: 46px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 80px); padding: 10px 20px 22px; overflow-y: auto; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 30px rgba(17,26,46,.1); }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .jsa-nav-link { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 16px; }
  .jsa-nav-link::after { left: 14px; right: auto; width: 28px; bottom: 8px; transform-origin: left; }
  .mega { position: static; width: auto; margin: 2px 0 8px; border: 0; border-radius: 12px; background: var(--color-bg-alt); box-shadow: none; animation: none; }
  .mega::before { display: none; }
  .mega-grid { grid-template-columns: 1fr; padding: 8px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-cta { justify-content: center; width: 100%; margin: 12px 0 0; }
  .how-grid, .meaning-list { grid-template-columns: 1fr; }
  .final-actions { margin-top: 8px; }
}

@media (max-width: 767.98px) {
  .col-head { display: none; }
  .mark-row, .agg-row { grid-template-columns: 1fr 1fr; align-items: start; }
  .name-field, .row-end { grid-column: 1 / -1; }
  .row-pct { margin: 0; }
  .calc-actions .btn, .final-actions .btn, .row-actions .tool-btn { width: 100%; }
}

@media (max-width: 575.98px) {
  .calc-hero { padding-top: 28px; }
  .result-box { padding: 18px 16px; }
  .result-list li { grid-template-columns: 1fr auto; }
}


/* =========================================================
   HELP & SUPPORT PAGE
   ========================================================= */
/* ==========================================================
   Help & Support. Shared header, buttons and footer match Home.
   ========================================================== */

.hs-hero { padding: 48px 0 40px; background: var(--color-bg-alt); }
.hs-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 28px 48px; align-items: end; }
.hs-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.hs-hero h1 { max-width: 12em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.hs-hero .lede { max-width: 36em; margin: 0 0 18px; }
.search-panel { padding: 22px 22px 18px; border-radius: var(--radius-card); background: var(--color-secondary); color: var(--color-text-on-dark-body); }
.search-panel label { display: block; margin: 0 0 8px; font: 600 15px/1.3 var(--font-heading); color: var(--color-text-on-dark); }
.search-row { display: flex; gap: 10px; }
.search-row input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-text-heading); font: 400 16px/1.4 var(--font-body); }
.search-row input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.check input:focus-visible,
.topics a:focus-visible,
.guides a:focus-visible,
.resource-list a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.search-row button { flex-shrink: 0; }
.search-panel .btn.jsa-btn-secondary { border-color: rgba(255,255,255,.65); color: var(--color-text-on-dark); }
.search-panel .btn.jsa-btn-secondary:hover { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-secondary); }
.faq-count { min-height: 1.4em; margin: 10px 0 0; font-size: 14.5px; font-weight: 600; color: var(--color-text-on-dark-body); }

.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 36px; margin: 0; padding: 0; list-style: none; counter-reset: topic; }
.topics li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-content: start; padding: 16px 0 0; border-top: 3px solid var(--color-primary); }
.topics li:nth-child(3n) { border-top-color: var(--color-quinary); }
.topics li:nth-child(3n+2) { border-top-color: var(--color-tertiary); }
.topics li::before { content: counter(topic, decimal-leading-zero); counter-increment: topic; grid-row: 1 / span 3; padding-top: 3px; font: 700 15px/1.2 var(--font-heading); color: var(--color-primary-dark); }
.topics li:nth-child(3n)::before { color: var(--color-quinary-dark); }
.topics h3 { margin: 0; font: 600 20px/1.3 var(--font-heading); }
.topics p { grid-column: 2; margin: 6px 0 10px; }
.topics .jsa-link { grid-column: 2; justify-self: start; }
.topics li:first-child { grid-column: 1 / -1; margin-bottom: 8px; padding: 26px 28px; border: 0; border-radius: var(--radius-card); background: var(--color-primary-soft); }
.topics li:first-child::before { color: var(--color-primary-dark); }

.guides { margin: 0; padding: 0; list-style: none; counter-reset: guide; }
.guides > li { padding: 22px 0 22px 18px; border-bottom: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); }
.guides > li:nth-child(even) { border-left-color: var(--color-quinary); }
.topics li[hidden], .guides > li[hidden] { display: none !important; }
.guides h3 { margin: 0 0 8px; font: 600 20px/1.35 var(--font-heading); }
.guides h3::before { content: counter(guide, decimal-leading-zero) "  "; counter-increment: guide; color: var(--color-primary-dark); }
.guides > li:nth-child(even) h3::before { color: var(--color-quinary-dark); }
.guides p { max-width: 46em; margin: 0; }
.guides ol { max-width: 46em; margin: 0; padding-left: 1.2em; }
.guides ol li { margin: 0 0 6px; }
.guides a { font-weight: 600; }

.help-empty { padding: 28px 24px; border-radius: var(--radius-card); background: var(--color-quaternary); }
.help-empty h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); }
.help-empty p { max-width: 36em; margin: 0 0 16px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.contact-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 36px; align-items: center; padding: 36px 40px; border-radius: var(--radius-card); background: var(--color-secondary); color: var(--color-text-on-dark-body); }
.contact-box h2, .contact-box .lede { color: var(--color-text-on-dark); }
.contact-box .lede { max-width: 40em; margin-bottom: 12px; }
.contact-box p:last-of-type { max-width: 40em; margin: 0; }

.support-form { max-width: 760px; }
.form-note { margin: 0 0 22px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--color-quaternary); color: var(--color-text-heading); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.span-2 { grid-column: 1 / -1; }
.field label { display: block; margin: 0 0 6px; font: 600 14.5px/1.4 var(--font-heading); color: var(--color-text-heading); }
.field input, .field select, .field textarea { display: block; width: 100%; margin: 0; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-text-heading); font: 400 16px/1.5 var(--font-body); }
.field textarea { min-height: 140px; resize: vertical; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--color-error); }
.field-error { margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-error); }
.field label.check { display: flex; align-items: flex-start; gap: 10px; font: 500 15.5px/1.45 var(--font-body); }
.check input { width: 1.15em; height: 1.15em; margin-top: 3px; flex-shrink: 0; accent-color: var(--color-primary-dark); }
#support-submit { margin-top: 18px; }
.privacy-line { max-width: 46em; margin: 16px 0 0; font-size: 14.5px; color: var(--color-text-muted); }
.form-result { max-width: 46em; margin: 16px 0 0; font-weight: 600; }
.form-result.is-held { padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-error); background: #fff6f6; color: var(--color-text-heading); }

.write-list { max-width: 42em; margin: 0 0 18px; padding-left: 1.2em; }
.write-list li { margin: 0 0 8px; }
.privacy-reminder { max-width: 42em; margin: 0; padding: 14px 16px; border-left: 3px solid var(--color-tertiary-dark); background: var(--color-quaternary); color: var(--color-text-heading); font-weight: 600; }

.resource-list { margin: 0; padding: 0; list-style: none; }
.resource-list li { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--color-border); }
.resource-list li:last-child { border-bottom: 1px solid var(--color-border); }
.resource-list a { font: 600 16.5px/1.3 var(--font-heading); color: var(--color-secondary); text-decoration: none; }
.resource-list a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.resource-list span { color: var(--color-text-body); }

#join-class, #topics, #guides, #contact-support, #support-form-section { scroll-margin-top: 96px; }

.final { position: relative; overflow: hidden; }
.final-mark { position: absolute; right: -90px; bottom: -110px; width: 420px; height: auto; color: var(--color-text-on-dark); opacity: .06; pointer-events: none; }
.final .container { position: relative; }
.final h2 { font-size: clamp(30px, 4vw, 44px); }
.final .lede { max-width: 36em; font-size: 19px; }
.final-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .btn.jsa-btn { transition: none; }
  .btn.jsa-btn-primary:hover { transform: none; }
}

@media (min-width: 992px) {
  :root { --section-y: 96px; }
  .hs-hero { padding-top: 72px; }
  .final-actions { min-width: 260px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jsa-nav-link { padding: 12px 10px; }
  .jsa-nav-link::after { left: 10px; right: 10px; }
  .nav-cta { padding: 12px 16px; margin-left: 4px; }
}

@media (max-width: 991.98px) {
  .topbar-text { display: none; }
  .topbar-inner { justify-content: center; }
  .brand .jsa-mark, .scrolled .brand .jsa-mark { height: 46px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 80px); padding: 10px 20px 22px; overflow-y: auto; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 30px rgba(17,26,46,.1); }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .jsa-nav-link { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 16px; }
  .jsa-nav-link::after { left: 14px; right: auto; width: 28px; bottom: 8px; transform-origin: left; }
  .mega { position: static; width: auto; margin: 2px 0 8px; border: 0; border-radius: 12px; background: var(--color-bg-alt); box-shadow: none; animation: none; }
  .mega::before { display: none; }
  .mega-grid { grid-template-columns: 1fr; padding: 8px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-cta { justify-content: center; width: 100%; margin: 12px 0 0; }

  .hs-hero-row, .topics, .contact-box { grid-template-columns: 1fr; }
  .final-actions { margin-top: 8px; }
}

@media (max-width: 575.98px) {
  .hs-hero { padding-top: 32px; padding-bottom: 28px; }
  .search-row { flex-direction: column; }
  .search-row button, .final-actions .btn, .empty-actions .btn, .contact-box .btn, .foot-actions .btn { width: 100%; }
  .form-grid, .resource-list li { grid-template-columns: 1fr; }
  .contact-box, .topics li:first-child { padding: 22px 18px; }
}


/* =========================================================
   CONTACT US PAGE
   ========================================================= */
/* ==========================================================
   Contact Us. Shared header, buttons and footer match Home.
   ========================================================== */

html { scroll-behavior: smooth; }
.cu-hero { padding: 48px 0 40px; background: var(--color-bg-alt); }
.cu-hero-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 28px 48px; align-items: center; }
.cu-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.cu-hero h1 { max-width: 14em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.12 var(--font-heading); }
.cu-hero .lede { max-width: 38em; margin: 0 0 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-panel { position: relative; overflow: hidden; padding: 28px 26px; border-radius: var(--radius-card); background: var(--color-secondary); color: var(--color-text-on-dark-body); }
.hero-mark { position: absolute; right: -36px; bottom: -48px; width: 180px; color: var(--color-text-on-dark); opacity: .08; pointer-events: none; }
.panel-kicker { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-tertiary); }
.hero-panel ul { position: relative; margin: 0; padding: 0; list-style: none; }
.hero-panel li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); color: var(--color-text-on-dark); font: 600 16px/1.4 var(--font-heading); }
.hero-panel li:last-child { padding-bottom: 0; }

.type-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .75fr); gap: 28px 40px; align-items: start; }
.type-main { margin: 0; padding: 0; list-style: none; }
.type-main li { padding: 20px 0; border-top: 1px solid var(--color-border); }
.type-main li:last-child { border-bottom: 1px solid var(--color-border); }
.type-main h3, .type-side h3 { margin: 0 0 6px; font: 600 20px/1.3 var(--font-heading); }
.type-main p, .type-side p { margin: 0 0 10px; }
.type-side { padding: 22px 22px 8px; border-radius: var(--radius-card); background: var(--color-quinary-soft); }
.type-side .panel-kicker { color: var(--color-quinary-dark); }
.type-side ul { margin: 0; padding: 0; list-style: none; }
.type-side li { padding: 14px 0 16px; border-top: 1px solid rgba(15,118,110,.18); }
.type-side a { font: 600 15.5px/1.3 var(--font-heading); color: var(--color-secondary); }
.type-side a:hover { color: var(--color-quinary-dark); }

.form-panel { padding: 32px 36px 28px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.form-note { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--color-quaternary); color: var(--color-text-heading); }
.req-note { margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.req { color: var(--color-error); font-weight: 700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.span-2 { grid-column: 1 / -1; }
.field label { display: block; margin: 0 0 6px; font: 600 14.5px/1.4 var(--font-heading); color: var(--color-text-heading); }
.field input, .field select, .field textarea { display: block; width: 100%; margin: 0; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-text-heading); font: 400 16px/1.5 var(--font-body); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .check input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--color-error); }
.field-error { margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-error); }
.field label.check { display: flex; align-items: flex-start; gap: 10px; font: 500 15.5px/1.45 var(--font-body); }
.check input { width: 1.15em; height: 1.15em; margin-top: 3px; flex-shrink: 0; accent-color: var(--color-primary-dark); }
.type-hint { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-text-heading); }
.type-hint a { font-weight: 600; }
#enquiry-submit { margin-top: 18px; }
.privacy-line { max-width: 46em; margin: 16px 0 0; font-size: 14.5px; color: var(--color-text-muted); }
.form-result { max-width: 46em; margin: 16px 0 0; font-weight: 600; }
.form-result.is-held { padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-error); background: #fff6f6; color: var(--color-text-heading); }

.channel-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 36px; align-items: center; padding: 36px 40px; border-radius: var(--radius-card); background: var(--color-secondary); color: var(--color-text-on-dark-body); }
.channel-box h2, .channel-box .lede { color: var(--color-text-on-dark); }
.channel-box .lede { max-width: 40em; margin-bottom: 12px; }
.channel-box p:last-of-type { max-width: 40em; margin: 0; }

.next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.next-steps li { padding-top: 14px; border-top: 3px solid var(--color-primary); }
.next-steps li:nth-child(2) { border-top-color: var(--color-quinary); }
.next-steps li:nth-child(3) { border-top-color: var(--color-tertiary); }
.next-steps h3 { margin: 0 0 8px; font: 600 18px/1.35 var(--font-heading); }
.next-steps h3::before { content: counter(step, decimal-leading-zero); counter-increment: step; display: block; margin-bottom: 8px; font-size: 14px; letter-spacing: .04em; color: var(--color-primary-dark); }
.next-steps li:nth-child(2) h3::before { color: var(--color-quinary-dark); }
.next-steps p { margin: 0; }
.process-note { max-width: 46em; margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--color-tertiary-dark); background: var(--color-quaternary); color: var(--color-text-heading); font-weight: 600; }

.resource-list { margin: 0; padding: 0; list-style: none; }
.resource-list li { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 8px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--color-border); }
.resource-list li:last-child { border-bottom: 1px solid var(--color-border); }
.resource-list a { font: 600 16.5px/1.3 var(--font-heading); color: var(--color-secondary); text-decoration: none; }
.resource-list a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.resource-list span { color: var(--color-text-body); }
.jsa-faq { max-width: 820px; }
.jsa-faq a { font-weight: 600; }

#form-title, #enquiry-types, #channels { scroll-margin-top: 88px; }

.final { position: relative; overflow: hidden; }
.final-mark { position: absolute; right: -90px; bottom: -110px; width: 420px; height: auto; color: var(--color-text-on-dark); opacity: .06; pointer-events: none; }
.final .container { position: relative; }
.final h2 { font-size: clamp(30px, 4vw, 44px); }
.final .lede { max-width: 36em; font-size: 19px; }
.final-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn.jsa-btn { transition: none; }
  .btn.jsa-btn-primary:hover { transform: none; }
}

@media (min-width: 992px) {
  :root { --section-y: 96px; }
  .cu-hero { padding-top: 72px; }
  .final-actions { min-width: 260px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jsa-nav-link { padding: 12px 10px; }
  .jsa-nav-link::after { left: 10px; right: 10px; }
  .nav-cta { padding: 12px 16px; margin-left: 4px; }
}

@media (max-width: 991.98px) {
  .topbar-text { display: none; }
  .topbar-inner { justify-content: center; }
  .brand .jsa-mark, .scrolled .brand .jsa-mark { height: 46px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 80px); padding: 10px 20px 22px; overflow-y: auto; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 30px rgba(17,26,46,.1); }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .jsa-nav-link { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 16px; }
  .jsa-nav-link::after { left: 14px; right: auto; width: 28px; bottom: 8px; transform-origin: left; }
  .mega { position: static; width: auto; margin: 2px 0 8px; border: 0; border-radius: 12px; background: var(--color-bg-alt); box-shadow: none; animation: none; }
  .mega::before { display: none; }
  .mega-grid { grid-template-columns: 1fr; padding: 8px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-cta { justify-content: center; width: 100%; margin: 12px 0 0; }

  .cu-hero-row, .type-layout, .channel-box, .next-steps { grid-template-columns: 1fr; }
  .final-actions { margin-top: 8px; }
}

@media (max-width: 575.98px) {
  .cu-hero { padding-top: 32px; padding-bottom: 28px; }
  .hero-actions .btn, .final-actions .btn, .channel-box .btn, .foot-actions .btn, #enquiry-submit { width: 100%; }
  .form-grid, .resource-list li { grid-template-columns: 1fr; }
  .form-panel, .channel-box { padding: 22px 18px; }
}


/* =========================================================
   RESULTS & ACHIEVEMENTS PAGE
   ========================================================= */
/* ==========================================================
   Results and Achievements. Shared header, buttons and footer match Home.
   ========================================================== */

.ra-hero { padding: 48px 0 56px; background: var(--color-bg-alt); }
.ra-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 28px 56px; align-items: center; }
.ra-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.ra-hero h1 { max-width: 12em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.ra-hero .lede { max-width: 38em; margin-bottom: 26px; }
.ra-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.scope-board { margin: 0; padding: 8px 0 8px 22px; list-style: none; border-left: 3px solid var(--color-primary); }
.scope-board li { padding: 12px 0; }
.scope-board strong { display: block; font: 600 18px/1.3 var(--font-heading); color: var(--color-secondary); }
.scope-board span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--color-text-muted); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.facts li { padding: 22px 20px; border-top: 3px solid var(--color-primary); background: var(--color-bg); }
.facts strong { display: block; font: 700 36px/1 var(--font-heading); color: var(--color-secondary); }
.facts span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.4; color: var(--color-text-body); }
.fact-note { max-width: 46em; margin: 22px 0 0; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }

.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.areas li { display: flex; flex-direction: column; min-height: 100%; padding: 24px 24px 22px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.areas h3 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); }
.areas p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-body); }
.areas .area-status { margin-top: 14px; font: 600 14px/1.4 var(--font-body); color: var(--color-quinary-dark); }
.areas .jsa-link { margin-top: auto; padding-top: 18px; }

.divide { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.divide li { padding: 24px; border-radius: var(--radius-card); }
.divide li:first-child { background: var(--color-primary-soft); }
.divide li:last-child { background: var(--color-quaternary); }
.divide h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.divide p { margin: 0; font-size: 16px; line-height: 1.6; }

.faq-wrap { max-width: 860px; }
.faq-wrap .section-head { margin-bottom: 28px; }
.jsa-faq a { font-weight: 500; }

.final { position: relative; overflow: hidden; }
.final-mark { position: absolute; right: -90px; bottom: -110px; width: 420px; height: auto; color: var(--color-text-on-dark); opacity: .06; pointer-events: none; }
.final .container { position: relative; }
.final h2 { font-size: clamp(30px, 4vw, 44px); }
.final .lede { max-width: 34em; font-size: 19px; }
.final-actions { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 992px) {
  :root { --section-y: 96px; }
  .ra-hero { padding-top: 72px; padding-bottom: 72px; }
  .final-actions { min-width: 280px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jsa-nav-link { padding: 12px 10px; }
  .jsa-nav-link::after { left: 10px; right: 10px; }
  .nav-cta { padding: 12px 16px; margin-left: 4px; }
}

@media (max-width: 991.98px) {
  .topbar-text { display: none; }
  .topbar-inner { justify-content: center; }
  .brand .jsa-mark, .scrolled .brand .jsa-mark { height: 46px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 80px); padding: 10px 20px 22px; overflow-y: auto; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 30px rgba(17,26,46,.1); }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .jsa-nav-link { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 16px; }
  .jsa-nav-link::after { left: 14px; right: auto; width: 28px; bottom: 8px; transform-origin: left; }
  .mega { position: static; width: auto; margin: 2px 0 8px; border: 0; border-radius: 12px; background: var(--color-bg-alt); box-shadow: none; animation: none; }
  .mega::before { display: none; }
  .mega-grid { grid-template-columns: 1fr; padding: 8px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-cta { justify-content: center; width: 100%; margin: 12px 0 0; }

  .ra-hero-row, .facts, .areas, .divide { grid-template-columns: 1fr; }
  .final-actions { margin-top: 8px; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .ra-actions, .final-actions { flex-direction: row; flex-wrap: wrap; }
  .facts, .areas { grid-template-columns: 1fr 1fr; }
  .facts li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .ra-hero { padding-top: 32px; padding-bottom: 36px; }
  .ra-actions .btn, .final-actions .btn, .foot-actions .btn { width: 100%; }
}


/* =========================================================
   PARTNERS & SPONSORS PAGE
   ========================================================= */
/* ==========================================================
   Partners and Sponsors. Shared header, buttons and footer match Home.
   ========================================================== */

.ps-hero { padding: 48px 0 56px; background: var(--color-bg-alt); }
.ps-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 28px 56px; align-items: center; }
.ps-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.ps-hero h1 { max-width: 12em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.ps-hero .lede { max-width: 38em; margin-bottom: 26px; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.open-note { padding: 28px 26px; border-radius: var(--radius-card); background: var(--color-secondary); color: var(--color-text-on-dark-body); }
.open-note p { margin: 0; }
.open-note strong { display: block; margin-bottom: 10px; font: 600 22px/1.3 var(--font-heading); color: var(--color-text-on-dark); }
.open-note span { display: block; font-size: 16px; line-height: 1.55; }

.why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 56px; align-items: start; }
.why .lede { max-width: 32em; }
.aims { margin: 0; padding: 0; list-style: none; }
.aims li { padding: 16px 0; border-top: 1px solid var(--color-border); }
.aims li:last-child { border-bottom: 1px solid var(--color-border); }
.aims h3 { margin: 0 0 4px; font: 600 18px/1.3 var(--font-heading); }
.aims p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-text-body); }

.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 8px 0 0; padding: 0; list-style: none; }
.areas li { min-width: 0; padding: 22px 0 8px; border-top: 2px solid var(--color-primary); }
.areas li:nth-child(2) { border-top-color: var(--color-quinary-dark); }
.areas li:nth-child(3) { border-top-color: var(--color-tertiary-dark); }
.areas li:nth-child(4) { border-top-color: var(--color-secondary); }
.areas span { display: block; margin-bottom: 8px; font: 700 13px/1 var(--font-heading); color: var(--color-primary-dark); }
.areas h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.areas p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-body); }

.fit-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.fit-list li { min-width: 0; padding-top: 14px; border-top: 2px solid var(--color-secondary); }
.fit-list h3 { margin: 0; font: 600 16px/1.4 var(--font-heading); }

.values { margin: 8px 0 0; padding: 0; list-style: none; }
.values li { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 8px 28px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--color-border); }
.values li:last-child { border-bottom: 1px solid var(--color-border); }
.values h3 { margin: 0; font: 600 18px/1.3 var(--font-heading); }
.values p { margin: 0; font-size: 16.5px; line-height: 1.55; }

.network { background: var(--color-quaternary); }
.network-inner { max-width: 40em; }
.network h2 { max-width: 12em; }
.network .lede { font-size: 20px; line-height: 1.6; color: var(--color-text-body); }

.enquire-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 8px; }
.enquire-actions .jsa-link { font-weight: 600; }

.faq-wrap { max-width: 860px; }
.faq-wrap .section-head { margin-bottom: 28px; }
.jsa-faq a { font-weight: 500; }

.final { position: relative; overflow: hidden; }
.final-mark { position: absolute; right: -90px; bottom: -110px; width: 420px; height: auto; color: var(--color-text-on-dark); opacity: .06; pointer-events: none; }
.final .container { position: relative; }
.final h2 { font-size: clamp(30px, 4vw, 44px); }
.final .lede { max-width: 34em; font-size: 19px; }
.final-actions { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 992px) {
  :root { --section-y: 96px; }
  .ps-hero { padding-top: 72px; padding-bottom: 72px; }
  .final-actions { min-width: 280px; }
}

@media (min-width: 1200px) {
  .fit-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 32px; }
  .fit-list li:nth-child(1),
  .fit-list li:nth-child(2),
  .fit-list li:nth-child(3) { grid-column: span 2; }
  .fit-list li:nth-child(4) { grid-column: 2 / span 2; }
  .fit-list li:nth-child(5) { grid-column: 4 / span 2; }
  .fit-list h3 { font-size: 18px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jsa-nav-link { padding: 12px 10px; }
  .jsa-nav-link::after { left: 10px; right: 10px; }
  .nav-cta { padding: 12px 16px; margin-left: 4px; }
  .fit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .topbar-text { display: none; }
  .topbar-inner { justify-content: center; }
  .brand .jsa-mark, .scrolled .brand .jsa-mark { height: 46px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 80px); padding: 10px 20px 22px; overflow-y: auto; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 30px rgba(17,26,46,.1); }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .jsa-nav-link { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 16px; }
  .jsa-nav-link::after { left: 14px; right: auto; width: 28px; bottom: 8px; transform-origin: left; }
  .mega { position: static; width: auto; margin: 2px 0 8px; border: 0; border-radius: 12px; background: var(--color-bg-alt); box-shadow: none; animation: none; }
  .mega::before { display: none; }
  .mega-grid { grid-template-columns: 1fr; padding: 8px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-cta { justify-content: center; width: 100%; margin: 12px 0 0; }

  .ps-hero-row, .why, .areas, .fit-list { grid-template-columns: 1fr; }
  .final-actions { margin-top: 8px; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .ps-actions, .final-actions, .enquire-actions { flex-direction: row; flex-wrap: wrap; }
  .areas, .fit-list { grid-template-columns: 1fr 1fr; }
  .fit-list li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .values li { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 575.98px) {
  .ps-hero { padding-top: 32px; padding-bottom: 36px; }
  .ps-actions .btn, .final-actions .btn, .enquire-actions .btn, .foot-actions .btn { width: 100%; }
  .areas, .fit-list { grid-template-columns: 1fr; }
  .fit-list li:last-child { grid-column: auto; }
  .jsa-faq summary { padding: 14px 18px; font-size: 16px; }
  .jsa-faq details p { padding: 0 18px 18px; font-size: 16px; }
}


/* =========================================================
   CAREERS PAGE
   ========================================================= */
/* ==========================================================
   Careers. Shared header, buttons and footer match Home.
   ========================================================== */

.cr-hero { padding: 48px 0 56px; }
.cr-hero-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 28px 56px; align-items: center; }
.cr-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.cr-hero h1 { max-width: 11em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.cr-hero .lede { max-width: 38em; margin-bottom: 26px; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.path-panel { margin: 0; padding: 8px 8px 8px 0; list-style: none; border-radius: var(--radius-card); background: var(--color-primary-soft); }
.path-panel li { padding: 18px 22px 18px 20px; border-top: 1px solid rgba(31,98,201,.16); }
.path-panel li:first-child { border-top: 0; }
.path-panel a { display: block; color: inherit; text-decoration: none; }
.path-panel a:hover strong { color: var(--color-primary-dark); }
.path-panel span { display: block; margin-bottom: 4px; font: 700 13px/1 var(--font-heading); color: var(--color-primary-dark); }
.path-panel strong { display: block; font: 600 18px/1.35 var(--font-heading); color: var(--color-text-heading); }

.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; margin: 8px 0 0; padding: 0; list-style: none; }
.principles li { min-width: 0; padding-top: 16px; border-top: 2px solid var(--color-primary); }
.principles li:nth-child(2) { border-top-color: var(--color-quinary-dark); }
.principles li:nth-child(3) { border-top-color: var(--color-tertiary-dark); }
.principles li:nth-child(4) { border-top-color: var(--color-secondary); }
.principles h3 { margin: 0 0 6px; font: 600 20px/1.3 var(--font-heading); }
.principles p { margin: 0; font-size: 16.5px; line-height: 1.6; }

.vacancy-list { margin: 0; padding: 0; list-style: none; }
.vacancy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; padding: 22px 0; border-top: 1px solid var(--color-border); }
.vacancy:last-child { border-bottom: 1px solid var(--color-border); }
.vacancy h3 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); }
.vacancy p { margin: 0 0 8px; font-size: 16.5px; line-height: 1.6; }
.vacancy .meta { margin-bottom: 10px; font-size: 15px; color: var(--color-text-muted); }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.status-pill { display: inline-block; padding: 5px 10px; border-radius: 999px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }
.status-pill.open { background: var(--color-quinary-soft); color: var(--color-quinary-dark); }
.status-pill.closed { background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text-heading); }
.vacancy-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.empty-roles { padding: 32px 28px; border-radius: var(--radius-card); background: var(--color-quaternary); }
.empty-roles h3 { margin: 0 0 10px; font: 600 clamp(24px, 3vw, 32px)/1.25 var(--font-heading); }
.empty-roles p { max-width: 40em; margin: 0 0 18px; font-size: 17px; line-height: 1.6; }
.closed-wrap { margin-top: 28px; }
.closed-wrap h3 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-heading); }

.qualities { margin: 8px 0 0; padding: 0; list-style: none; }
.qualities li { padding: 14px 0; border-top: 1px solid var(--color-border); font: 600 17px/1.45 var(--font-heading); color: var(--color-text-heading); }
.qualities li:last-child { border-bottom: 1px solid var(--color-border); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; margin: 8px 0 0; padding: 0; list-style: none; }
.steps li { min-width: 0; padding-top: 16px; border-top: 3px solid var(--color-primary); }
.steps li:nth-child(2) { border-top-color: var(--color-quinary-dark); }
.steps li:nth-child(3) { border-top-color: var(--color-tertiary-dark); }
.steps .step-no { display: block; margin-bottom: 8px; font: 700 13px/1 var(--font-heading); color: var(--color-primary-dark); }
.steps h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-heading); }
.steps p, .steps li > ul { margin: 0 0 10px; font-size: 16px; line-height: 1.6; font-weight: 400; color: var(--color-text-body); }
.steps ul { padding-left: 1.1em; }
.steps li > ul li { padding: 0; border: 0; font: 400 16px/1.55 var(--font-body); color: var(--color-text-body); }
.video-note, .form-note, .form-result { margin: 12px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--color-bg-alt); font-size: 15.5px; line-height: 1.55; }
.form-note { margin: 0 0 22px; background: var(--color-quaternary); }
.form-result { color: var(--color-text-heading); font-weight: 600; }
.form-result.is-saved { background: var(--color-quinary-soft); color: var(--color-quinary-dark); }
.form-result.is-error { background: var(--color-bg); border: 1.5px solid var(--color-error); }
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.btn.jsa-btn:disabled { opacity: .72; cursor: not-allowed; transform: none; }

.apply-form { max-width: 820px; padding: 28px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.span-2 { grid-column: 1 / -1; }
.field label, .teaching-fields legend { display: block; margin: 0 0 6px; padding: 0; font: 600 14.5px/1.4 var(--font-heading); color: var(--color-text-heading); }
.optional-mark { font-weight: 500; color: var(--color-text-muted); }
.field input, .field select, .field textarea { display: block; width: 100%; margin: 0; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-text-heading); font: 400 16px/1.5 var(--font-body); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .check input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--color-error); }
.field-error { margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-error); }
.teaching-fields { margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--color-border); }
.teaching-fields legend { margin-bottom: 12px; font-size: 18px; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--color-text-body); }
.field label.check { display: flex; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.privacy-line { margin: 8px 0 0; font-size: 15px; }

.next-list { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: next; }
.next-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px 18px; align-items: start; padding: 16px 0; border-top: 1px solid var(--color-border); }
.next-list li:last-child { border-bottom: 1px solid var(--color-border); }
.next-list li::before { counter-increment: next; content: counter(next, decimal-leading-zero); font: 700 18px/1.3 var(--font-heading); color: var(--color-primary-dark); }
.next-list h3 { margin: 0 0 4px; font: 600 18px/1.35 var(--font-heading); }
.next-list p { margin: 0; font-size: 16.5px; line-height: 1.55; }

.faq-wrap { max-width: 860px; }
.faq-wrap .section-head { margin-bottom: 28px; }
.jsa-faq a { font-weight: 500; }

.final { position: relative; overflow: hidden; }
.final-mark { position: absolute; right: -90px; bottom: -110px; width: 420px; height: auto; color: var(--color-text-on-dark); opacity: .06; pointer-events: none; }
.final .container { position: relative; }
.final h2 { font-size: clamp(30px, 4vw, 44px); }
.final .lede { max-width: 34em; font-size: 19px; }
.final-actions { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 992px) {
  :root { --section-y: 96px; }
  .cr-hero { padding-top: 72px; padding-bottom: 72px; }
  .final-actions { min-width: 280px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jsa-nav-link { padding: 12px 10px; }
  .jsa-nav-link::after { left: 10px; right: 10px; }
  .nav-cta { padding: 12px 16px; margin-left: 4px; }
}

@media (max-width: 991.98px) {
  .topbar-text { display: none; }
  .topbar-inner { justify-content: center; }
  .brand .jsa-mark, .scrolled .brand .jsa-mark { height: 46px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 80px); padding: 10px 20px 22px; overflow-y: auto; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 30px rgba(17,26,46,.1); }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .jsa-nav-link { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 16px; }
  .jsa-nav-link::after { left: 14px; right: auto; width: 28px; bottom: 8px; transform-origin: left; }
  .mega { position: static; width: auto; margin: 2px 0 8px; border: 0; border-radius: 12px; background: var(--color-bg-alt); box-shadow: none; animation: none; }
  .mega::before { display: none; }
  .mega-grid { grid-template-columns: 1fr; padding: 8px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-cta { justify-content: center; width: 100%; margin: 12px 0 0; }

  .cr-hero-row, .principles, .steps, .vacancy { grid-template-columns: 1fr; }
  .final-actions { margin-top: 8px; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .cr-actions, .final-actions, .form-actions { flex-direction: row; flex-wrap: wrap; }
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .form-grid, .next-list li { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

@media (max-width: 575.98px) {
  .cr-hero { padding-top: 32px; padding-bottom: 36px; }
  .cr-actions .btn, .final-actions .btn, .form-actions .btn, .vacancy-actions .btn, .foot-actions .btn { width: 100%; }
  .apply-form, .empty-roles { padding: 22px 16px; }
  .jsa-faq summary { padding: 14px 18px; font-size: 16px; }
  .jsa-faq details p { padding: 0 18px 18px; font-size: 16px; }
}


/* =========================================================
   POLICY PAGES (Privacy / Terms / Refund)
   ========================================================= */
/* ==========================================================
   Privacy Policy. Shared header, buttons and footer match Home.
   ========================================================== */

html { scroll-behavior: smooth; }
.policy-hero { padding: 36px 0 8px; background: var(--color-bg-alt); }
.policy-wrap { max-width: 760px; }
.policy-hero h1 { margin: 0 0 12px; font: 700 clamp(34px, 4vw, 48px)/1.15 var(--font-heading); }
.policy-hero .lede { margin: 0 0 16px; }
.draft-status { margin: 0; padding: 14px 16px; border-left: 3px solid var(--color-tertiary-dark); background: var(--color-quaternary); color: var(--color-text-heading); font-weight: 600; }
.policy-body { padding-top: 28px; }
.policy-body h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); }
.policy-body h3 { margin: 18px 0 8px; font: 600 18px/1.35 var(--font-heading); color: var(--color-text-heading); }
.policy-body p, .policy-body li { max-width: 65ch; }
.policy-body section { margin: 0 0 36px; scroll-margin-top: 88px; }
.policy-body ul, .policy-toc ol, .policy-related ul { margin: 0; padding-left: 1.2em; }
.policy-body li, .policy-toc li { margin: 0 0 8px; }
.policy-toc { margin: 0 0 36px; padding: 16px 18px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt); }
.policy-toc h2 { margin-bottom: 10px; font-size: 20px; }
.policy-toc a, .policy-related a, .policy-body a { font-weight: 600; }
.policy-toc a:focus-visible, .policy-body a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.policy-related { margin-bottom: 0; padding-top: 8px; border-top: 1px solid var(--color-border); }
.policy-related ul { padding-left: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (min-width: 992px) {
  :root { --section-y: 96px; }
  .policy-hero { padding-top: 52px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jsa-nav-link { padding: 12px 10px; }
  .jsa-nav-link::after { left: 10px; right: 10px; }
  .nav-cta { padding: 12px 16px; margin-left: 4px; }
}

@media (max-width: 991.98px) {
  .topbar-text { display: none; }
  .topbar-inner { justify-content: center; }
  .brand .jsa-mark, .scrolled .brand .jsa-mark { height: 46px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 80px); padding: 10px 20px 22px; overflow-y: auto; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 30px rgba(17,26,46,.1); }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .jsa-nav-link { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 16px; }
  .jsa-nav-link::after { left: 14px; right: auto; width: 28px; bottom: 8px; transform-origin: left; }
  .mega { position: static; width: auto; margin: 2px 0 8px; border: 0; border-radius: 12px; background: var(--color-bg-alt); box-shadow: none; animation: none; }
  .mega::before { display: none; }
  .mega-grid { grid-template-columns: 1fr; padding: 8px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-cta { justify-content: center; width: 100%; margin: 12px 0 0; }
}

@media (max-width: 575.98px) {
  .policy-hero { padding-top: 28px; }
}




/* =========================================================
   OUR FAQs PAGE
   ========================================================= */
.faq-hero { padding: 48px 0 40px; background: var(--color-bg-alt); }
.faq-hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 28px 48px; align-items: end; }
.faq-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); }
.faq-hero h1 { max-width: 11em; margin: 0 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading); }
.faq-hero .lede { max-width: 38em; margin: 0; }
.faq-count { min-height: 1.4em; margin: 10px 0 0; font-size: 14.5px; font-weight: 600; color: var(--color-text-muted); }
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; padding: 0; list-style: none; }
.faq-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border); font: 600 14px/1.2 var(--font-heading); color: var(--color-secondary); text-decoration: none; }
.faq-jump a:hover, .faq-jump a[aria-current="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); }
.faq-group .section-head { margin-bottom: 22px; }
.faq-group .lede { max-width: 40em; }
.path-links { margin: 8px 0 0; padding: 0; list-style: none; }
.path-links li { padding: 8px 0; border-top: 1px solid var(--color-border); }
.path-links li:last-child { border-bottom: 1px solid var(--color-border); }
.path-links a { font-weight: 600; }
.faq-empty { padding: 28px 24px; border-radius: var(--radius-card); background: var(--color-quaternary); }
.faq-empty h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); }
.faq-empty p { max-width: 36em; margin: 0 0 16px; }
@media (min-width: 992px) { .faq-hero { padding-top: 72px; } }
@media (max-width: 991.98px) { .faq-hero-row { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 575.98px) { .faq-hero { padding-top: 32px; padding-bottom: 28px; } .search-row { flex-direction: column; } .search-row button { width: 100%; } }

/* ===== PAGE STYLE RECONCILE ===== */
/* Restores old-template rules. Conflicting classes are prefixed per page. */
.ad-guide {
  background: var(--color-secondary);
  color: var(--color-text-on-dark-body);
}
.ad-guide .lede {
  color: var(--color-text-on-dark-body);
  max-width: 40em;
}
.ad-guide h2 {
  color: var(--color-text-on-dark);
}
.al-family-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.al-family-points h3 {
  font: 600 18px/1.3 var(--font-heading);
  margin: 0 0 4px;
}
.al-family-points li {
  border-top: 1px solid rgba(255,255,255,.16);
  padding: 14px 0;
}
.al-family-points li:last-child {
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.al-family-points p {
  color: var(--color-text-on-dark-body);
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
}
.au-final-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c10-final-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c10-parent-actions {
  margin-top: 28px;
}
.c10-pkg-note {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 46em;
}
.c11-step-no {
  background: var(--color-secondary);
  border-radius: 8px;
  color: var(--color-text-on-dark);
  display: grid;
  font: 700 14px/1 var(--font-heading);
  height: 36px;
  margin-bottom: 14px;
  place-items: center;
  width: 36px;
}
.c11-steps {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.c11-steps h3 {
  font: 600 20px/1.3 var(--font-heading);
  margin: 0 0 8px;
}
.c11-steps li {
  min-width: 0;
}
.c11-steps p {
  color: var(--color-text-muted);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
}
.c12-parent-actions {
  margin-top: 22px;
}
.c12-parent-band {
  background: var(--color-primary-soft);
}
.c12-pkg-compare {
  border-collapse: collapse;
  margin: 0;
  min-width: 640px;
  width: 100%;
}
.c12-pkg-compare a {
  font-weight: 600;
}
.c12-pkg-compare tbody th {
  color: var(--color-secondary);
  font: 600 15px/1.4 var(--font-heading);
  text-align: left;
  width: 24%;
}
.c12-pkg-compare tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}
.c12-pkg-compare td {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 1.45;
  padding: 18px 16px;
  text-align: center;
  vertical-align: middle;
}
.c12-pkg-compare th {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 16px;
  vertical-align: middle;
}
.c12-pkg-compare thead th {
  background: var(--color-bg-alt);
  color: var(--color-secondary);
  font: 600 18px/1.3 var(--font-heading);
  text-align: center;
}
.c12-pkg-compare thead th:first-child {
  text-align: left;
}
.c12-pkg-compare tr:last-child td {
  border-bottom: 0;
}
.c12-pkg-compare tr:last-child th {
  border-bottom: 0;
}
.c9-hero-panel {
  background: var(--color-secondary);
  border-radius: var(--radius-card);
  color: var(--color-text-on-dark);
  padding: 32px 32px 24px;
}
.c9-journey {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.c9-journey .is-current {
  align-items: center;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-color: var(--color-secondary);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 14px;
  min-height: 88px;
  padding: 14px 16px;
  text-decoration: none;
}
.c9-journey .is-current .journey-key {
  color: var(--color-text-on-dark);
}
.c9-journey .is-current small {
  color: var(--color-text-on-dark-body);
}
.c9-journey .is-current strong {
  color: var(--color-text-on-dark);
}
.c9-journey .jsa-ico {
  color: var(--color-primary-dark);
  height: 18px;
  margin-left: auto;
  transition: transform .2s;
  width: 18px;
}
.c9-journey a {
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 14px;
  min-height: 88px;
  padding: 14px 16px;
  text-decoration: none;
}
.c9-journey a:hover {
  background: var(--color-primary-soft);
}
.c9-journey a:hover .jsa-ico {
  transform: translateX(4px);
}
.c9-journey small {
  color: var(--color-text-muted);
  display: block;
  font: 600 13px/1.2 var(--font-body);
}
.c9-journey strong {
  color: var(--color-secondary);
  display: block;
  font: 600 18px/1.25 var(--font-heading);
  margin-top: 3px;
}
.c9-parent-actions {
  margin-top: 36px;
}
.c9-pkg-compare {
  border-collapse: collapse;
  margin: 0;
  min-width: 720px;
  width: 100%;
}
.c9-pkg-compare tbody th {
  color: var(--color-secondary);
  font: 600 15px/1.4 var(--font-heading);
  text-align: left;
  width: 24%;
}
.c9-pkg-compare tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}
.c9-pkg-compare td {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 1.45;
  padding: 20px 18px;
  text-align: center;
  vertical-align: middle;
}
.c9-pkg-compare td strong {
  color: var(--color-secondary);
  font-weight: 600;
}
.c9-pkg-compare th {
  border-bottom: 1px solid var(--color-border);
  padding: 20px 18px;
  vertical-align: middle;
}
.c9-pkg-compare thead th {
  background: var(--color-bg-alt);
  color: var(--color-secondary);
  font: 600 18px/1.3 var(--font-heading);
  text-align: center;
}
.c9-pkg-compare thead th:first-child {
  text-align: left;
}
.c9-pkg-compare tr:last-child td {
  border-bottom: 0;
}
.c9-pkg-compare tr:last-child th {
  border-bottom: 0;
}
.c9-pkg-note {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 42em;
}
.calc-final-actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calc-panel-kicker {
  color: var(--color-primary-dark);
  font: 700 13px/1.2 var(--font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cr-form-grid {
  display: grid;
  gap: 18px 20px;
  grid-template-columns: 1fr 1fr;
}
.cr-privacy-line {
  font-size: 15px;
  margin: 8px 0 0;
}
.cu-check,
.demo-reg-field label.cu-check,
.ad-form-field label.cu-check {
  align-items: flex-start !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 10px 0 0 !important;
  text-align: left !important;
  font: 500 14px/1.5 var(--font-body) !important;
  color: var(--color-text-body) !important;
  width: 100% !important;
}
.cu-check input[type="checkbox"],
.demo-reg-field input[type="checkbox"],
.ad-form-field input[type="checkbox"] {
  accent-color: var(--color-primary-dark) !important;
  cursor: pointer !important;
  display: inline-block !important;
  flex: 0 0 18px !important;
  height: 18px !important;
  margin: 2px 0 0 0 !important;
  max-width: 18px !important;
  min-height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  width: 18px !important;
  box-shadow: none !important;
  background: #fff !important;
}
.cu-check span,
.demo-reg-field label.cu-check span,
.ad-form-field label.cu-check span {
  color: var(--color-text-body) !important;
  display: inline !important;
  flex: 1 1 auto !important;
  font: 500 14px/1.5 var(--font-body) !important;
  text-align: left !important;
}
.cu-check input:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.cu-field input {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-heading);
  display: block;
  font: 400 16px/1.5 var(--font-body);
  margin: 0;
  padding: 12px 14px;
  width: 100%;
}
.cu-field input:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.cu-field label {
  color: var(--color-text-heading);
  display: block;
  font: 600 14.5px/1.4 var(--font-heading);
  margin: 0 0 6px;
}
.cu-field label.check {
  align-items: flex-start;
  display: flex;
  font: 500 15.5px/1.45 var(--font-body);
  gap: 10px;
}
.cu-field select {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-heading);
  display: block;
  font: 400 16px/1.5 var(--font-body);
  margin: 0;
  padding: 12px 14px;
  width: 100%;
}
.cu-field select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.cu-field textarea {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-heading);
  display: block;
  font: 400 16px/1.5 var(--font-body);
  margin: 0;
  min-height: 150px;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}
.cu-field textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.cu-field.is-invalid input {
  border-color: var(--color-error);
}
.cu-field.is-invalid select {
  border-color: var(--color-error);
}
.cu-field.is-invalid textarea {
  border-color: var(--color-error);
}
.cu-final {
  overflow: hidden;
  position: relative;
}
.cu-final .container {
  position: relative;
}
.cu-final .lede {
  font-size: 19px;
  max-width: 36em;
}
.cu-final h2 {
  font-size: clamp(30px, 4vw, 44px);
}
.cu-form-note {
  background: var(--color-quaternary);
  border-radius: var(--radius-sm);
  color: var(--color-text-heading);
  margin: 0 0 16px;
  padding: 14px 16px;
}
.cu-form-result {
  font-weight: 600;
  margin: 16px 0 0;
  max-width: 46em;
}
.cu-form-result.is-held {
  background: #fff6f6;
  border: 1.5px solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-text-heading);
  padding: 14px 16px;
}
.cu-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cu-hero-mark {
  bottom: -48px;
  color: var(--color-text-on-dark);
  opacity: .08;
  pointer-events: none;
  position: absolute;
  right: -36px;
  width: 180px;
}
.cu-span-2 {
  grid-column: 1 / -1;
}
.fq-final-actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fq-final-actions .jsa-link {
  border-bottom-color: var(--color-tertiary);
  color: var(--color-text-on-dark);
}
.fq-search-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 22px 22px 18px;
}
.fq-search-panel label {
  color: var(--color-text-heading);
  display: block;
  font: 600 15px/1.3 var(--font-heading);
  margin: 0 0 8px;
}
.home-final {
  overflow: hidden;
  position: relative;
}
.home-final .container {
  position: relative;
}
.home-final .lede {
  font-size: 19px;
  max-width: 30em;
}
.home-final h2 {
  font-size: clamp(30px, 4vw, 44px);
}
.home-final-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hs-faq-count {
  color: var(--color-text-on-dark-body);
  font-size: 14.5px;
  font-weight: 600;
  margin: 10px 0 0;
  min-height: 1.4em;
}
.hs-field input {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-heading);
  display: block;
  font: 400 16px/1.5 var(--font-body);
  margin: 0;
  padding: 12px 14px;
  width: 100%;
}
.hs-field input:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.hs-field label {
  color: var(--color-text-heading);
  display: block;
  font: 600 14.5px/1.4 var(--font-heading);
  margin: 0 0 6px;
}
.hs-field label.check {
  align-items: flex-start;
  display: flex;
  font: 500 15.5px/1.45 var(--font-body);
  gap: 10px;
}
.hs-field select {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-heading);
  display: block;
  font: 400 16px/1.5 var(--font-body);
  margin: 0;
  padding: 12px 14px;
  width: 100%;
}
.hs-field select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.hs-field textarea {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-heading);
  display: block;
  font: 400 16px/1.5 var(--font-body);
  margin: 0;
  min-height: 140px;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}
.hs-field textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.hs-field.is-invalid input {
  border-color: var(--color-error);
}
.hs-field.is-invalid select {
  border-color: var(--color-error);
}
.hs-field.is-invalid textarea {
  border-color: var(--color-error);
}
.hs-form-note {
  background: var(--color-quaternary);
  border-radius: var(--radius-sm);
  color: var(--color-text-heading);
  margin: 0 0 22px;
  padding: 14px 16px;
}
.hs-resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hs-resource-list a {
  color: var(--color-secondary);
  font: 600 16.5px/1.3 var(--font-heading);
  text-decoration: none;
}
.hs-resource-list a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.hs-resource-list a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
.hs-resource-list li {
  align-items: baseline;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 8px 24px;
  grid-template-columns: minmax(140px, 220px) 1fr;
  padding: 14px 0;
}
.hs-resource-list li:last-child {
  border-bottom: 1px solid var(--color-border);
}
.hs-resource-list span {
  color: var(--color-text-body);
}
.hw-parent-actions {
  margin-top: 22px;
}
.hw-parents {
  background: var(--color-quaternary);
}
.hw-roles {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.hw-roles h3 {
  font: 600 20px/1.3 var(--font-heading);
  margin: 0 0 8px;
}
.hw-roles li {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border-top: 3px solid var(--color-quinary-dark);
  min-width: 0;
  padding: 22px 20px 20px;
}
.hw-roles li:nth-child(2) {
  border-top-color: var(--color-primary);
}
.hw-roles li:nth-child(3) {
  border-top-color: var(--color-tertiary-dark);
}
.hw-roles p {
  color: var(--color-text-body);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
}
.oc-final-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ol-family-points {
  background: var(--color-bg);
  border-radius: var(--radius-card);
  list-style: none;
  margin: 0;
  padding: 22px 22px 6px;
}
.ol-family-points h3 {
  font: 600 18px/1.3 var(--font-heading);
  margin: 0 0 4px;
}
.ol-family-points li + li {
  margin-top: 4px;
}
.ol-family-points p {
  color: var(--color-text-body);
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.ol-family-split {
  align-items: start;
  display: grid;
  gap: 28px 48px;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
}
.ol-habit-row {
  display: grid;
  gap: 22px 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.ol-habit-row h3 {
  font: 600 18px/1.3 var(--font-heading);
  margin: 0 0 8px;
}
.ol-habit-row p {
  color: var(--color-text-body);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
}
.pro-final {
  overflow: hidden;
  position: relative;
}
.pro-final .container {
  position: relative;
}
.pro-final .lede {
  font-size: 19px;
  max-width: 38em;
}
.pro-final h2 {
  font-size: clamp(30px, 4vw, 44px);
}
.ra-areas {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.ra-areas .area-status {
  color: var(--color-quinary-dark);
  font: 600 14px/1.4 var(--font-body);
  margin-top: 14px;
}
.ra-areas .jsa-link {
  margin-top: auto;
  padding-top: 18px;
}
.ra-areas h3 {
  font: 600 22px/1.3 var(--font-heading);
  margin: 0 0 8px;
}
.ra-areas li {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 24px 22px;
}
.ra-areas p {
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
.steps .cr-step-no {
  color: var(--color-primary-dark);
  display: block;
  font: 700 13px/1 var(--font-heading);
  margin-bottom: 8px;
}
.tm-facts {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tm-facts li {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  min-width: 0;
  padding: 22px 18px;
}
.tm-facts span {
  color: var(--color-text-body);
  display: block;
  font: 600 16px/1.35 var(--font-heading);
  margin-top: 8px;
}
.tm-facts strong {
  color: var(--color-secondary);
  display: block;
  font: 700 clamp(40px, 5vw, 64px)/1 var(--font-heading);
  letter-spacing: -.03em;
}
main.page-10th-class .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-11th-class .family-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
main.page-11th-class .family-points h3 {
  color: var(--color-text-on-dark);
  font: 600 18px/1.3 var(--font-heading);
  margin: 0 0 4px;
}
main.page-11th-class .family-points li + li {
  margin-top: 18px;
}
main.page-11th-class .family-points p {
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
}
main.page-11th-class .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-12th-class .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-9th-class .cls-parent-points h3 {
  color: unset;
  font: 600 18px/1.3 var(--font-heading);
  margin: 0 0 8px;
}
main.page-9th-class .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-a-level .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-admissions .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-careers .check input {
  accent-color: unset;
  flex-shrink: 0;
  height: 20px;
  margin-top: 2px;
  width: 20px;
}
main.page-careers .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-careers .field label.check {
  align-items: unset;
  font: unset;
  gap: unset;
  display: flex;
}
main.page-careers .form-note {
  color: unset;
  background: var(--color-quaternary);
  border-radius: var(--radius-sm);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 22px;
  padding: 14px 16px;
}
main.page-careers .form-result {
  max-width: unset;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  color: var(--color-text-heading);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
  margin: 12px 0 0;
  padding: 14px 16px;
}
main.page-contact-us .jsa-faq a {
  font-weight: 600;
}
main.page-contact-us .privacy-line {
  color: var(--color-text-muted);
  font-size: 14.5px;
  margin: 16px 0 0;
  max-width: 46em;
}
main.page-demo-class .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-help-and-support .privacy-line {
  color: var(--color-text-muted);
  font-size: 14.5px;
  margin: 16px 0 0;
  max-width: 46em;
}
main.page-how-jsa-works .cycle-no {
  background: var(--color-primary);
  border-radius: 50%;
  color: var(--color-text-on-dark);
  display: grid;
  font: 700 14px/1 var(--font-heading);
  height: 44px;
  margin-bottom: 16px;
  place-items: center;
  position: relative;
  width: 44px;
  z-index: 1;
}
main.page-how-jsa-works .expect-list {
  display: unset;
  gap: unset;
  grid-template-columns: unset;
  list-style: none;
  margin: 0;
  padding: 0;
}
main.page-how-jsa-works .expect-list h3 {
  align-self: unset;
  font: 600 22px/1.3 var(--font-heading);
  margin: 0;
}
main.page-how-jsa-works .expect-list li {
  background: unset;
  border: unset;
  border-radius: unset;
  align-items: baseline;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 8px 28px;
  grid-template-columns: 76px minmax(220px, 280px) minmax(0, 1fr);
  padding: 26px 0;
}
main.page-how-jsa-works .expect-list li:last-child {
  border-bottom: 1px solid var(--color-border);
}
main.page-how-jsa-works .expect-list p {
  color: unset;
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0;
}
main.page-how-jsa-works .expect-list span {
  grid-row: unset;
  color: var(--color-primary-dark);
  font: 700 28px/1 var(--font-heading);
}
main.page-how-jsa-works .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-how-jsa-works .hjw-cycle {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
main.page-how-jsa-works .hjw-cycle h3 {
  font: 600 18px/1.3 var(--font-heading);
  letter-spacing: .04em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
main.page-how-jsa-works .hjw-cycle li {
  background: unset;
  border: unset;
  border-radius: unset;
  padding: unset;
  min-width: 0;
  position: relative;
}
main.page-how-jsa-works .hjw-cycle li::after {
  background: var(--color-border);
  content: "";
  height: 2px;
  left: 52px;
  position: absolute;
  right: -28px;
  top: 21px;
}
main.page-how-jsa-works .hjw-cycle li:last-child::after {
  display: none;
}
main.page-how-jsa-works .hjw-cycle li:nth-child(2) .cycle-no {
  background: var(--color-quinary-dark);
}
main.page-how-jsa-works .hjw-cycle li:nth-child(3) .cycle-no {
  background: var(--color-tertiary);
  color: var(--color-secondary);
}
main.page-how-jsa-works .hjw-cycle li:nth-child(4) .cycle-no {
  background: var(--color-secondary);
}
main.page-how-jsa-works .hjw-cycle p {
  color: var(--color-text-muted);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
}
main.page-how-jsa-works .hjw-parent-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
main.page-how-jsa-works .hjw-parent-points li {
  margin-bottom: unset;
  border-top: 1px solid rgba(17,26,46,.14);
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 0;
}
main.page-how-jsa-works .hjw-parent-points li:last-child {
  border-bottom: 1px solid rgba(17,26,46,.14);
}
main.page-how-jsa-works .hw-actions {
  margin-top: unset;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
main.page-how-jsa-works .hw-eyebrow {
  color: var(--color-primary-dark);
  font: 700 13px/1.2 var(--font-heading);
  letter-spacing: .08em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
main.page-how-jsa-works .hw-hero {
  border-bottom: unset;
  background: var(--color-bg);
  padding: 48px 0 56px;
}
main.page-how-jsa-works .hw-hero .lede {
  margin-bottom: 16px;
  max-width: 38em;
}
main.page-how-jsa-works .hw-hero h1 {
  font: 700 clamp(34px, 4.4vw, 52px)/1.1 var(--font-heading);
  margin: 0 0 14px;
  max-width: 12em;
}
main.page-how-jsa-works .hw-hero-row {
  align-items: center;
  display: grid;
  gap: 28px 56px;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
}
main.page-how-jsa-works .hw-points {
  color: var(--color-secondary);
  font: 600 15px/1.5 var(--font-heading);
  margin: 0 0 26px;
}
main.page-how-jsa-works .journey-board {
  color: unset;
  display: unset;
  flex-direction: unset;
  gap: unset;
  background: var(--color-secondary);
  border-radius: var(--radius-card);
  list-style: none;
  margin: 0;
  padding: 12px 28px;
}
main.page-how-jsa-works .journey-board li {
  border-bottom: unset;
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 16px 0;
  position: relative;
}
main.page-how-jsa-works .journey-board li::before {
  background: rgba(255,255,255,.22);
  bottom: 0;
  content: "";
  left: 27px;
  position: absolute;
  top: 0;
  width: 1px;
}
main.page-how-jsa-works .journey-board li:first-child::before {
  top: 50%;
}
main.page-how-jsa-works .journey-board li:last-child::before {
  bottom: 50%;
}
main.page-how-jsa-works .journey-board li:nth-child(1) span {
  background: var(--color-primary);
}
main.page-how-jsa-works .journey-board li:nth-child(2) span {
  background: var(--color-quinary-dark);
}
main.page-how-jsa-works .journey-board li:nth-child(3) span {
  background: var(--color-tertiary);
  color: var(--color-secondary);
}
main.page-how-jsa-works .journey-board span {
  flex-shrink: unset;
  background: var(--color-secondary-soft);
  border-radius: 50%;
  color: var(--color-text-on-dark);
  display: grid;
  font: 700 15px/1 var(--font-heading);
  height: 56px;
  place-items: center;
  position: relative;
  width: 56px;
  z-index: 1;
}
main.page-how-jsa-works .journey-board strong {
  color: var(--color-text-on-dark);
  font: 600 22px/1.2 var(--font-heading);
}
main.page-how-jsa-works .parent-layout {
  align-items: start;
  display: grid;
  gap: 28px 48px;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
}
main.page-how-jsa-works .roles-note {
  font-style: unset;
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 1.55;
  margin: 22px 0 0;
  max-width: 40em;
}
main.page-how-jsa-works .routes {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
main.page-how-jsa-works .routes .btn {
  margin-top: auto;
}
main.page-how-jsa-works .routes h3 {
  font: 600 20px/1.3 var(--font-heading);
  margin: 0 0 8px;
}
main.page-how-jsa-works .routes li {
  border: unset;
  align-items: flex-start;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 20px;
}
main.page-how-jsa-works .routes p {
  color: var(--color-text-body);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
main.page-how-jsa-works .sample {
  border: unset;
  background: var(--color-bg);
  border-radius: var(--radius-card);
  padding: 24px 24px 20px;
}
main.page-how-jsa-works .sample h3 {
  font: 600 22px/1.3 var(--font-heading);
  margin: 0 0 10px;
}
main.page-how-jsa-works .sample p {
  color: var(--color-text-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
main.page-how-jsa-works .sample-foot {
  font-style: unset;
  margin: unset;
  color: var(--color-text-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  margin-top: 16px !important;
}
main.page-how-jsa-works .sample-kicker {
  color: var(--color-quinary-dark);
  font: 700 12px/1.2 var(--font-heading);
  letter-spacing: .08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
main.page-how-jsa-works .takeaway {
  border-left: unset;
  max-width: unset;
  background: var(--color-secondary);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-dark);
  font: 600 18px/1.45 var(--font-heading);
  margin: 28px 0 0;
  padding: 18px 22px;
}
/* main.page-index .hero-actions {
  flex-wrap: unset;
  display: flex;
  flex-direction: column;
  gap: 14px;
} */
main.page-index .hero-mark {
  color: unset;
  bottom: -120px;
  height: auto;
  opacity: .05;
  pointer-events: none;
  position: absolute;
  right: -110px;
  width: 400px;
}
main.page-o-level .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-our-courses .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-our-faq .faq-jump a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
main.page-our-plans .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-our-team .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-our-team .roles {
  display: unset;
  gap: unset;
  grid-template-columns: unset;
  list-style: none;
  margin: 0;
  padding: 0;
}
main.page-our-team .roles li {
  background: unset;
  border: unset;
  border-radius: unset;
  padding: 0 0 22px 58px;
  position: relative;
}
main.page-partners-and-sponsors .areas li {
  background: unset;
  border: unset;
  border-radius: unset;
  display: unset;
  flex-direction: unset;
  min-height: unset;
  border-top: 2px solid var(--color-primary);
  min-width: 0;
  padding: 22px 0 8px;
}
main.page-partners-and-sponsors .faq-wrap {
  margin: unset;
  max-width: 860px;
}
main.page-prospectus .pro-option-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  margin-bottom: 22px;
  padding: 0;
}
main.page-prospectus .pro-option-links a {
  text-decoration: unset;
  color: var(--color-secondary);
  display: inline-block;
  font: 600 16px/1.3 var(--font-heading);
  padding: 6px 0;
}
main.page-results-and-achievements .facts li {
  border-radius: unset;
  min-width: unset;
  background: var(--color-bg);
  border-top: 3px solid var(--color-primary);
  padding: 22px 20px;
}
main.page-results-and-achievements .facts span {
  font: unset;
  color: var(--color-text-body);
  display: block;
  font-size: 15.5px;
  line-height: 1.4;
  margin-top: 8px;
}
main.page-results-and-achievements .facts strong {
  letter-spacing: unset;
  color: var(--color-secondary);
  display: block;
  font: 700 36px/1 var(--font-heading);
}
main.page-results-and-achievements .faq-wrap {
  margin: unset;
  max-width: 860px;
}
#admission {
  scroll-margin-top: 88px;
}
#environment {
  scroll-margin-top: 88px;
}
#experience {
  scroll-margin-top: 88px;
}
#options {
  scroll-margin-top: 88px;
}
#parents {
  scroll-margin-top: 88px;
}
#pathways {
  scroll-margin-top: 88px;
}
#process {
  scroll-margin-top: 88px;
}
#resources {
  scroll-margin-top: 88px;
}
#welcome {
  scroll-margin-top: 88px;
}
html.page-10th-class {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-11th-class {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-12th-class {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-9th-class {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-a-level {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-about-us {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-about-us a {
  /*color: var(--color-primary-dark);*/
  text-decoration: none;
}
html.page-admissions {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-careers {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-demo-class {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-help-and-support {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-how-jsa-works {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-index {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-marks-percentage-aggregate-calculator {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-o-level {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-our-courses {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-our-faq {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-our-plans {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-our-team {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-partners-and-sponsors {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
html.page-results-and-achievements {
  scroll-behavior: unset;
  scroll-padding-top: 96px;
}
@media (max-width: 575.98px) {
  .au-final-actions {
    margin-top: 8px;
  }
  .au-final-actions .btn {
    width: 100%;
  }
  .c10-final-actions .btn {
    width: 100%;
  }
  .c11-steps {
    grid-template-columns: 1fr;
  }
  .c9-journey {
    grid-template-columns: 1fr;
  }
  .cu-hero-actions .btn {
    width: 100%;
  }
  .fq-final-actions .btn {
    width: 100%;
  }
  .home-final-actions {
    margin-top: 24px;
  }
  .home-final-actions .btn {
    width: 100%;
  }
  .hs-resource-list li {
    grid-template-columns: 1fr;
  }
  .hw-parent-actions .btn {
    width: 100%;
  }
  .hw-roles {
    grid-template-columns: 1fr;
  }
  .hw-roles li:last-child {
    grid-column: auto;
  }
  .oc-final-actions {
    margin-top: 8px;
  }
  .oc-final-actions .btn {
    width: 100%;
  }
  .ol-habit-row {
    grid-template-columns: 1fr;
  }
  .tm-facts {
    grid-template-columns: 1fr;
  }
  main.page-how-jsa-works .routes {
    grid-template-columns: 1fr;
  }
  main.page-how-jsa-works .routes .btn {
    width: 100%;
  }
  main.page-how-jsa-works .routes li:last-child {
    grid-column: auto;
  }
  main.page-index .hero-cycle {
    font-size: 11.5px;
    gap: 5px;
    letter-spacing: -0.01em;
    max-width: calc(100% - 8px);
    padding: 8px 12px;
    right: 12px;
  }
  main.page-prospectus #options .btn {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .calc-final-actions .btn {
    width: 100%;
  }
  .cr-form-grid {
    grid-template-columns: 1fr;
  }
  main.page-how-jsa-works .expect-list li {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  main.page-how-jsa-works .expect-list p {
    grid-column: 2;
  }
}
@media (max-width: 991.98px) {
  .c10-final-actions {
    margin-top: 8px;
  }
  .c11-steps {
    grid-template-columns: 1fr;
  }
  .c9-journey {
    grid-template-columns: 1fr 1fr;
  }
  .calc-final-actions {
    margin-top: 8px;
  }
  .fq-final-actions {
    margin-top: 8px;
  }
  .hw-roles {
    grid-template-columns: 1fr;
  }
  .ol-family-split {
    grid-template-columns: 1fr;
  }
  .ol-habit-row {
    grid-template-columns: 1fr;
  }
  .ra-areas {
    grid-template-columns: 1fr;
  }
  main.page-how-jsa-works .hjw-cycle li {
    padding-bottom: 8px;
  }
  main.page-how-jsa-works .hjw-cycle li::after {
    height: calc(100% - 22px);
    left: 21px;
    right: auto;
    top: 44px;
    width: 2px;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .au-final-actions {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .c10-final-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .c11-steps {
    grid-template-columns: 1fr 1fr;
  }
  .home-final-actions {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 24px;
  }
  .hw-roles {
    grid-template-columns: 1fr 1fr;
  }
  .hw-roles li:last-child {
    grid-column: 1 / -1;
  }
  .oc-final-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ol-habit-row {
    grid-template-columns: 1fr 1fr;
  }
  .ra-areas {
    grid-template-columns: 1fr 1fr;
  }
  .tm-facts {
    grid-template-columns: 1fr 1fr;
  }
  main.page-10th-class .c10-actions {
    grid-template-columns: unset;
    flex-direction: row;
    flex-wrap: wrap;
  }
  main.page-how-jsa-works .routes li:last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 992px) {
  .au-final-actions {
    align-items: stretch;
  }
  .c10-final-actions {
    min-width: 280px;
  }
  .calc-final-actions {
    min-width: 260px;
  }
  .fq-final-actions {
    min-width: 260px;
  }
  .home-final-actions {
    align-items: stretch;
  }
  .oc-final-actions {
    min-width: 280px;
  }
  main.page-contact-us .final-actions {
    align-items: unset;
    min-width: 260px;
  }
  main.page-help-and-support .final-actions {
    align-items: unset;
    min-width: 260px;
  }
  main.page-how-jsa-works .hw-hero {
    padding-bottom: 72px;
    padding-top: 72px;
  }
  main.page-prospectus .final-actions {
    align-items: unset;
    min-width: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c9-journey a:hover .jsa-ico {
    transform: none;
  }
}
/* ===== END PAGE STYLE RECONCILE ===== */


/* =========================================================
   TESTIMONIALS SECTION (Homepage)
   ========================================================= */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--color-primary);
}
.testimonial-card:nth-child(2) { border-top-color: var(--color-secondary); }
.testimonial-card:nth-child(3) { border-top-color: var(--color-tertiary); }
.testimonial-card blockquote { margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
.testimonial-text {
  flex: 1;
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--color-text-body);
  font-style: italic;
}
.testimonial-meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border); }
.testimonial-name { display: block; font: 600 15px/1.3 var(--font-heading); color: var(--color-secondary); }
.testimonial-program { display: block; margin-top: 3px; font-size: 13.5px; color: var(--color-text-muted); }
.testimonial-note { max-width: 46em; margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); font-style: italic; }

@media (max-width: 991.98px) { .testimonials-grid { grid-template-columns: 1fr; } }
@media (min-width: 576px) and (max-width: 991.98px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .testimonials-grid { grid-template-columns: 1fr; } }


/* =========================================================
   PARTNERS PAGE — COMING SOON BADGE
   ========================================================= */
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--color-quaternary);
  color: var(--color-secondary);
  font: 700 13px/1 var(--font-heading);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.network-inner { text-align: center; max-width: 560px; margin: 0 auto; }
.network-inner .lede { margin-bottom: 12px; }
.network-inner p { margin-bottom: 24px; }


/* =========================================================
   CHANNEL ACTIONS — contact, help, demo pages
   Used alongside "Send a Message" + "WhatsApp JSA" buttons
   ========================================================= */
.channel-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
@media (max-width: 575.98px) { .channel-actions .btn { width: 100%; } }


/* =========================================================
   FORM — HONEYPOT (anti-spam hidden field)
   ========================================================= */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; tab-index: -1; }


/* =========================================================
   CONTACT / SUPPORT FORM RESULT MESSAGES
   cu-form-result replaces the old .form-result class
   ========================================================= */
.cu-form-result {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
  border: 1px solid transparent;
}
.cu-form-result:empty { display: none; }
.cu-form-result.is-saved {
  background: #e6f4ea;
  border-color: #b7dfbf;
  color: #1a5c2a;
}
.cu-form-result.is-error {
  background: #fdecea;
  border-color: #f5c2bd;
  color: #8b1d18;
}


/* =========================================================
   PAYMENT METHODS SECTION (our-plans.php)
   ========================================================= */
.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 0;
}
.payment-card--wide {
  grid-column: 1 / -1;
}
.payment-card {
  padding: 22px 20px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--color-primary);
}
.payment-card:nth-child(2) { border-top-color: var(--color-secondary); }
.payment-card:nth-child(3) { border-top-color: var(--color-tertiary); }
.payment-card:nth-child(4) { border-top-color: var(--color-quinary-dark); }
.payment-card--wide { border-top-color: var(--color-secondary); }

.payment-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.payment-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.payment-card-header h3 {
  margin: 0;
  font: 700 18px/1.2 var(--font-heading);
  color: var(--color-secondary);
}

.payment-details {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: baseline;
}
.payment-details dt {
  font: 600 13.5px/1.4 var(--font-heading);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.payment-details dd {
  margin: 0;
  font: 600 15px/1.4 var(--font-heading);
  color: var(--color-secondary);
  word-break: break-all;
}

/* Wide bank card — row layout */
.payment-details--row {
  grid-template-columns: 160px 1fr;
  gap: 10px 24px;
}

/* Warning notice */
.payment-notice {
  margin-top: 24px;
  padding: 18px 20px;
  background: #fff8e6;
  border: 1px solid #f5d98b;
  border-radius: var(--radius-sm);
  border-left: 4px solid #f0ad00;
}
.payment-notice p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-text-body);
}
.payment-notice p + p { margin-top: 8px; }
.payment-notice strong { color: var(--color-secondary); }
.payment-notice a { font-weight: 600; color: var(--color-primary-dark); }

/* Responsive */
@media (max-width: 991.98px) {
  .payment-methods-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .payment-methods-grid { grid-template-columns: 1fr; }
  .payment-details--row { grid-template-columns: 120px 1fr; }
  .section-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .section-actions .btn { width: 100%; }
}


/* =========================================================
   TESTIMONIALS SLIDER (Homepage) — Task 1 Fix
   ========================================================= */
.ts-section { padding: 64px 0; }
.ts-widget { position: relative; }
.ts-track { min-height: 220px; outline: none; position: relative; }
.testimonial-slide { display: none; }
.testimonial-slide:first-child { display: block; }
.ts-widget.is-ready .testimonial-slide { display: none; }
.ts-widget.is-ready .testimonial-slide.is-active { display: block; animation: tsFadeIn .35s ease; }
@keyframes tsFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ts-card {
  display: block; margin: 0 auto; max-width: 780px;
  padding: 40px 44px 36px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  border-top: 4px solid var(--color-primary);
  box-shadow: 0 4px 24px rgba(0,0,0,.05); text-align: center;
}
.ts-text { display: block; font-size: 18px; font-style: italic; line-height: 1.75; color: var(--color-text-body); margin: 0 0 24px; }
.ts-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ts-name { font: 700 15px/1.3 var(--font-heading); color: var(--color-secondary); }
.ts-program { font-size: 13.5px; color: var(--color-text-muted); }
.ts-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.ts-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1.5px solid var(--color-border);
  border-radius: 50%; background: var(--color-bg); color: var(--color-secondary);
  cursor: pointer; transition: background .2s, border-color .2s, transform .15s;
}
.ts-arrow:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: scale(1.08); }
.ts-dots { display: flex; gap: 8px; align-items: center; }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--color-border); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.ts-dot.is-active { background: var(--color-primary); transform: scale(1.3); }
.ts-note { font-size: 13.5px; color: var(--color-text-muted); font-style: italic; margin-top: 20px; text-align: center; }
.ts-cta { display: flex; justify-content: center; margin-top: 24px; }
@media (max-width: 575.98px) { .ts-card { padding: 28px 20px 24px; } .ts-text { font-size: 16px; } }

/* =========================================================
   WHATSAPP CTA BUTTON — Prominent Green Style (Tasks 2,4)
   ========================================================= */
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px;
  border-radius: var(--radius-btn, 8px); background: #25D366; color: #fff !important;
  font: 700 16px/1.2 var(--font-heading); text-decoration: none; border: none;
  cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(37,211,102,.3);
}
.btn-whatsapp:hover { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,.4); }

/* =========================================================
   PAYMENT CARDS — Hover/Click Reveal (Task 3)
   ========================================================= */
.payment-card { cursor: pointer; }
.payment-card-body { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s; padding: 0 20px; }
.payment-card.is-open .payment-card-body { max-height: 400px; padding: 0 20px 20px; }
.payment-card--wide.is-open .payment-card-body { max-height: 600px; }
.payment-card-reveal-hint { font-size: 12px; color: var(--color-text-muted); margin-left: 4px; }
.payment-card.is-open .payment-card-reveal-hint { display: none; }
.payment-card-toggle { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-text-muted); flex-shrink: 0; margin-left: auto; transition: transform .25s, background .2s; }
.payment-card.is-open .payment-card-toggle { transform: rotate(180deg); background: var(--color-primary); color: #fff; }
.payment-card-header { cursor: pointer; }

/* =========================================================
   ADMISSIONS FORM (Task 2)
   ========================================================= */
.ad-intake-form { max-width: 860px; margin: 0 auto; }
.ad-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ad-form-grid .field-span-2 { grid-column: 1 / -1; }
.ad-form-field label:not(.cu-check) { display: block; font: 600 14px/1.3 var(--font-heading); color: var(--color-text-heading); margin-bottom: 6px; }
.ad-form-field input:not([type="checkbox"]), .ad-form-field select, .ad-form-field textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font: 500 15px/1.4 var(--font-body); color: var(--color-text-body); background: var(--color-bg); transition: border-color .2s; box-sizing: border-box; }
.ad-form-field input:focus-visible, .ad-form-field select:focus-visible, .ad-form-field textarea:focus-visible { outline: none; border-color: var(--color-primary); }
.ad-form-field textarea { resize: vertical; min-height: 100px; }
.ad-form-note { font-size: 14px; color: var(--color-text-muted); margin-bottom: 22px; line-height: 1.5; }
.ad-form-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; align-items: center; }
@media (max-width: 575.98px) { .ad-form-grid { grid-template-columns: 1fr; } .ad-form-actions .btn, .ad-form-actions .btn-whatsapp { width: 100%; justify-content: center; } }

/* =========================================================
   DEMO COHORT LIVE TRACKER CARDS
   ========================================================= */
.demo-cohorts-container {
  margin-bottom: 40px;
}
.demo-cohorts-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 28px;
}
.demo-cohorts-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: rgba(30, 90, 230, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.demo-cohorts-intro h3 {
  font-size: 26px;
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  margin: 0 0 10px;
}
.demo-cohorts-intro p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
.demo-cohorts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991.98px) {
  .demo-cohorts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639.98px) {
  .demo-cohorts-grid {
    grid-template-columns: 1fr;
  }
}
.demo-cohort-card {
  background: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.demo-cohort-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 30, 60, 0.08);
  border-color: var(--color-primary);
}
.demo-cohort-card--ready {
  border-color: #22c55e;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 35%);
}
.demo-cohort-card--cambridge {
  border-top: 3px solid #0056b3;
}
.demo-cohort-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.cohort-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: #eef2f6;
  color: #334155;
}
.cohort-badge--cambridge {
  background: #0056b3;
  color: #ffffff;
}
.cohort-seats-pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: rgba(30, 90, 230, 0.1);
  padding: 3px 9px;
  border-radius: 999px;
}
.cohort-seats-pill--ready {
  background: #dcfce7;
  color: #15803d;
}
.demo-cohort-title {
  font-size: 19px;
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  margin: 0 0 4px;
}
.demo-cohort-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
.cohort-progress-wrap {
  margin-bottom: 14px;
}
.cohort-progress-bar {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.cohort-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.cohort-progress-fill--ready {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}
.cohort-progress-hint {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.status-tag--ready {
  color: #15803d;
}
.status-tag--progress {
  color: #b45309;
}
.status-tag--new {
  color: var(--color-text-muted);
  font-weight: 500;
}
.status-tag--full {
  color: #dc2626;
}
.cohort-boards-section {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}
.cohort-boards-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.cohort-boards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 26px;
}
.cohort-board-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f4fd;
  color: #1a4a6e;
  border: 1px solid #b3d7f5;
}
.cohort-board-pill-count {
  font-size: 10.5px;
  background: #1a4a6e;
  color: #ffffff;
  padding: 0 4px;
  border-radius: 999px;
  margin-left: 2px;
}
.cohort-board-pill--empty {
  background: #f8fafc;
  color: var(--color-text-muted);
  border-color: #e2e8f0;
  font-weight: 500;
  font-style: italic;
}
.cohort-action-btn {
  margin-top: 14px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  justify-content: center;
}
.cohort-action-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}
.demo-cohort-card--ready .cohort-action-btn {
  border-color: #16a34a;
  color: #16a34a;
}
.demo-cohort-card--ready .cohort-action-btn:hover {
  background: #16a34a;
  color: #ffffff;
}
/* =========================================================
   DEMO REGISTRATION FORM (Task 4)
   ========================================================= */
.demo-reg-section { background: linear-gradient(135deg,#f0f7ff 0%,#fff 60%); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 40px 44px; max-width: 860px; margin: 0 auto; }
.demo-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.demo-reg-grid .field-span-2 { grid-column: 1 / -1; }
.demo-reg-field label:not(.cu-check) { display: block; font: 600 14px/1.3 var(--font-heading); margin-bottom: 6px; }
.demo-reg-field input:not([type="checkbox"]), .demo-reg-field select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font: 500 15px/1.4 var(--font-body); background: #fff; transition: border-color .2s; box-sizing: border-box; }
.demo-reg-field input:focus-visible, .demo-reg-field select:focus-visible { outline: none; border-color: var(--color-primary); }
.demo-reg-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; align-items: center; }
.demo-reg-note { font-size: 13.5px; color: var(--color-text-muted); margin-top: 14px; }
.demo-batch-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: #e8f4fd; border: 1px solid #b3d7f5; border-radius: var(--radius-sm); margin-top: 20px; font-size: 14.5px; color: #1a4a6e; line-height: 1.55; }
@media (max-width: 767.98px) { .demo-reg-section { padding: 28px 20px; } .demo-reg-grid { grid-template-columns: 1fr; } .demo-reg-actions .btn, .demo-reg-actions .btn-whatsapp { width: 100%; } }

/* =========================================================
   CONTACT AND HELP FORMS — full row
   ========================================================= */
main.page-contact-us #send-message .section-head,
main.page-help-and-support #support-form-section .section-head,
#admission-form .section-head,
#demo-register .section-head {
  max-width: none;
}
main.page-contact-us .form-panel,
main.page-help-and-support .support-form,
main.page-admissions .ad-intake-form,
main.page-demo-class .demo-reg-section {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cu-span-2 { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
  .form-grid { grid-template-columns: 1fr; }
  .cu-span-2 { grid-column: 1; }
}

/* =========================================================
   CAREERS — Job Vacancy Cards (Task 6)
   ========================================================= */
.vacancy-board { display: grid; gap: 20px; margin-bottom: 40px; }
.vacancy-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); border-left: 4px solid var(--color-primary); padding: 24px 28px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px 24px; align-items: start; transition: box-shadow .2s; }
.vacancy-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.vacancy-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font: 700 12px/1.2 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; }
.vacancy-badge.open { background: #e6f4ea; color: #1a5c2a; }
.vacancy-badge.closed { background: #fdecea; color: #8b1d18; }
.vacancy-title { font: 700 20px/1.3 var(--font-heading); color: var(--color-secondary); margin: 8px 0 6px; }
.vacancy-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--color-text-muted); margin-bottom: 10px; }
.vacancy-desc { font-size: 15.5px; line-height: 1.6; color: var(--color-text-body); margin: 0; }
.vacancy-apply-btn { align-self: center; }
@media (max-width: 767.98px) { .vacancy-card { grid-template-columns: 1fr; } }

/* =========================================================
   PARTNERS — Type Sections (Task 7)
   ========================================================= */
.partner-type-section { padding: 40px 0; border-bottom: 1px solid var(--color-border); }
.partner-type-section:last-child { border-bottom: none; }
.partner-type-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.partner-type-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--color-bg-alt); display: grid; place-items: center; color: var(--color-primary); flex-shrink: 0; }
.partner-type-header h3 { margin: 0; font: 700 22px/1.3 var(--font-heading); color: var(--color-secondary); }
.partner-logo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 16px; margin-top: 16px; }
.partner-logo-slot { display: flex; align-items: center; justify-content: center; height: 80px; border: 1.5px dashed var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt); color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 12px; transition: border-color .2s, background .2s; }
.partner-logo-slot:hover { border-color: var(--color-primary); background: var(--color-bg); }
.partner-type-cta { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .ts-widget.is-ready .testimonial-slide.is-active { animation: none; }
}

/* WhatsApp buttons stay green on light and dark bands */
a.btn.btn-whatsapp,
.band-blue a.btn.btn-whatsapp,
.ad-guide a.btn.btn-whatsapp {
  background: #25D366;
  border: 0;
  color: #fff;
  box-shadow: 0 10px 22px rgba(18, 140, 70, .35);
  min-height: 56px;
  padding: 0 28px;
}
a.btn.btn-whatsapp:hover,
.band-blue a.btn.btn-whatsapp:hover,
.ad-guide a.btn.btn-whatsapp:hover {
  background: #1ebe5d;
  color: #fff;
  transform: translateY(-1px);
}
a.btn.btn-whatsapp .jsa-ico { stroke: #fff; }

/* Payment accounts — interactive 3D turning and sliding payment cards */
.pay-accounts {
  background: linear-gradient(180deg, #eaf2ff 0%, #f4f7fb 55%, #ffffff 100%);
  padding: 64px 0 76px;
}
.pay-accounts .section-head { max-width: none; text-align: center; }
.pay-accounts .section-head .lede { max-width: 44em; margin-left: auto; margin-right: auto; }
.pay-kicker {
  margin: 0 0 8px;
  font: 700 13px/1.2 var(--font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.pay-accounts-panel {
  max-width: 1060px;
  margin: 0 auto;
}

/* Slider navigation bar */
.pay-slider-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 32px 0 20px;
}
.pay-method-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e6edf8;
  padding: 5px;
  border-radius: 14px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.pay-method-tabs::-webkit-scrollbar { display: none; }
.pay-tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 10px;
  font: 600 14px/1.3 var(--font-heading);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pay-tab-btn:hover {
  color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.6);
}
.pay-tab-btn.active {
  background: #ffffff;
  color: var(--color-secondary);
  box-shadow: 0 4px 14px rgba(17, 26, 46, 0.08);
  font-weight: 700;
}
.pay-tab-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pay-tab-dot--easypaisa { background: #00A651; box-shadow: 0 0 6px rgba(0, 166, 81, 0.45); }
.pay-tab-dot--jazzcash  { background: #ED1C24; box-shadow: 0 0 6px rgba(237, 28, 36, 0.45); }
.pay-tab-dot--sadapay   { background: #FF6B6B; box-shadow: 0 0 6px rgba(255, 107, 107, 0.45); }
.pay-tab-dot--meezan    { background: #0E2F56; box-shadow: 0 0 6px rgba(14, 47, 86, 0.45); }

.pay-slider-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pay-arrow-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: #ffffff;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(17, 26, 46, 0.04);
}
.pay-arrow-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.pay-arrow-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pay-arrow-btn .jsa-ico {
  width: 20px;
  height: 20px;
  stroke-width: 2.3;
}

/* Slider Viewport & Track */
.pay-slider-viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 18px;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.pay-slider-viewport::-webkit-scrollbar { display: none; }
.pay-slider-track {
  display: flex;
  gap: 24px;
}
.pay-card-slide {
  flex: 0 0 calc(50% - 12px);
  scroll-snap-align: start;
  perspective: 1200px;
}

/* 3D Flippable Card */
.pay-card-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1.58 / 1;
  min-height: 250px;
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34, 1.45, 0.64, 1);
  cursor: pointer;
  user-select: none;
}
.pay-card-3d.is-flipped {
  transform: rotateY(180deg);
}
@media (hover: hover) and (pointer: fine) {
  .pay-card-slide:hover .pay-card-3d:not(.is-flipped) {
    transform: translateY(-4px) scale(1.008);
  }
}

/* Front & Back Faces */
.pay-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 20px 42px -12px rgba(17, 26, 46, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  overflow: hidden;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pay-card-front {
  padding: 24px 24px 20px;
  z-index: 1;
}

/* Brand Themes */
.theme-easypaisa {
  background: linear-gradient(135deg, #00A651 0%, #007C3D 50%, #004522 100%);
  background-image: radial-gradient(circle at 90% 12%, rgba(255,255,255,0.2) 0%, transparent 45%), linear-gradient(135deg, #00A651 0%, #007C3D 50%, #004522 100%);
}
.theme-jazzcash {
  background: linear-gradient(135deg, #ED1C24 0%, #AA1017 50%, #200406 100%);
  background-image: radial-gradient(circle at 90% 12%, rgba(255,215,0,0.22) 0%, transparent 45%), linear-gradient(135deg, #ED1C24 0%, #AA1017 50%, #200406 100%);
}
.theme-sadapay {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 45%, #153243 100%);
  background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.22) 0%, transparent 50%), linear-gradient(135deg, #FF6B6B 0%, #FF8E53 45%, #153243 100%);
}
.theme-meezan {
  background: linear-gradient(135deg, #0E2F56 0%, #15457C 50%, #061629 100%);
  background-image: radial-gradient(circle at 90% 12%, rgba(212,175,55,0.25) 0%, transparent 45%), linear-gradient(135deg, #0E2F56 0%, #15457C 50%, #061629 100%);
}

/* Card Header */
.pay-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pay-card-brand {
  display: flex;
  flex-direction: column;
}
.pay-card-brand-name {
  font: 700 22px/1.2 var(--font-heading);
  color: #ffffff;
  letter-spacing: -0.01em;
}
.pay-card-subtitle {
  font: 500 12px/1.3 var(--font-body);
  opacity: 0.84;
  color: #ffffff;
}
.pay-card-badge-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pay-card-type-badge {
  font: 600 11px/1 var(--font-heading);
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}
.pay-contactless-ico {
  width: 22px;
  height: 22px;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
}

/* EMV Chip */
.pay-card-chip {
  width: 44px;
  height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ffd700 0%, #cca01d 50%, #ffdf40 100%);
  position: relative;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 2px 5px rgba(0,0,0,0.3);
  border: 1px solid rgba(0,0,0,0.15);
  margin: 6px 0 10px;
  overflow: hidden;
}
.pay-chip-lines {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(138, 98, 0, 0.45);
  border-left: none;
  border-right: none;
  top: 9px;
  height: 12px;
}
.pay-chip-lines::before {
  content: '';
  position: absolute;
  left: 13px;
  top: -10px;
  bottom: -1px;
  width: 14px;
  border: 1px solid rgba(138, 98, 0, 0.45);
  border-top: none;
  border-bottom: none;
}

/* Card Number */
.pay-card-number-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 14px;
}
.pay-card-number {
  font-family: 'Courier New', Courier, monospace, var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  word-spacing: 0.15em;
}
.pay-copy-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 8px;
  font: 600 12.5px/1 var(--font-heading);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.pay-copy-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}
.pay-copy-btn.is-copied {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #ffffff !important;
}
.pay-copy-ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Bottom of Front */
.pay-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.pay-card-holder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pay-card-holder-label {
  font: 500 10.5px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
}
.pay-card-holder-val {
  font: 700 14px/1.2 var(--font-heading);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
}
.pay-flip-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 20px;
  font: 600 12px/1 var(--font-heading);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.pay-flip-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: scale(1.04);
}
.pay-flip-ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  transition: transform .3s ease;
}
.pay-flip-btn:hover .pay-flip-ico {
  transform: rotate(180deg);
}

/* Card Back Side */
.pay-card-back {
  transform: rotateY(180deg);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pay-card-magstrip {
  width: 100%;
  height: 38px;
  background: #11141a;
  margin-top: 14px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.pay-card-back-body {
  padding: 10px 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.pay-sig-strip {
  height: 26px;
  background: #f4f6fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  margin-bottom: 8px;
}
.pay-sig-text {
  font: 700 9px/1 monospace;
  color: #64748b;
  letter-spacing: 0.1em;
}
.pay-sig-code {
  font: 700 11px/1 monospace;
  color: #0f172a;
  letter-spacing: 0.06em;
  background: #e2e8f0;
  padding: 2px 5px;
  border-radius: 3px;
}
.pay-back-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: rgba(0, 0, 0, 0.26);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 8px;
}
.pay-back-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}
.pay-back-label {
  color: rgba(255, 255, 255, 0.74);
  font-weight: 500;
  font-size: 11.5px;
}
.pay-back-val {
  color: #ffffff;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 13px;
}
.pay-back-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}
.pay-copy-btn--alt {
  flex: 1;
  justify-content: center;
  background: rgba(255, 255, 255, 0.26);
}
.pay-flip-btn--back {
  background: rgba(255, 255, 255, 0.16);
}

/* Dots indicator */
.pay-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.pay-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  transition: all .25s ease;
  padding: 0;
}
.pay-dot.active {
  background: var(--color-primary);
  width: 28px;
  border-radius: 8px;
}

/* Explanatory hint */
.pay-hint-text {
  text-align: center;
  margin: 18px auto 26px;
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 38em;
}

/* Responsive adjustments */
@media (max-width: 860px) {
  .pay-card-slide {
    flex: 0 0 100%;
  }
  .pay-card-number {
    font-size: 18px;
    letter-spacing: 0.08em;
  }
  .pay-card-front {
    padding: 20px 20px 18px;
  }
}
@media (max-width: 575.98px) {
  .pay-slider-nav-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .pay-method-tabs {
    width: 100%;
    justify-content: flex-start;
  }
  .pay-slider-arrows {
    align-self: center;
  }
  .pay-card-number {
    font-size: 16px;
    letter-spacing: 0.06em;
  }
  .pay-card-brand-name {
    font-size: 20px;
  }
}

.ad-form-field.is-invalid input,
.ad-form-field.is-invalid select,
.ad-form-field.is-invalid textarea,
.demo-reg-field.is-invalid input,
.demo-reg-field.is-invalid select {
  border-color: var(--color-error);
}
#admission-form, #demo-register, #payment-methods, #partner-board, #apply { scroll-margin-top: 96px; }

.vacancy-closed-title { margin: 28px 0 0; font: 700 22px/1.3 var(--font-heading); }

.section.partner-type-section { padding: var(--section-y) 0; border-bottom: 0; }
.partner-type-kicker {
  margin: 0 0 8px;
  font: 700 13px/1.2 var(--font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.partner-type-section.is-sponsor .partner-type-kicker { color: var(--color-tertiary-dark); }
.partner-treatment {
  max-width: 48em;
  margin: 16px 0 22px;
  padding: 14px 16px;
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg);
  border-radius: 0 12px 12px 0;
}
.partner-type-section.is-sponsor .partner-treatment { border-left-color: var(--color-tertiary); }
.partner-logo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.partner-logo-grid.is-sponsor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.partner-logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  margin: 0;
  padding: 22px 16px 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-align: center;
}
.partner-logo-tile a { display: flex; flex-direction: column; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.partner-logo-tile img { width: auto; max-width: 78%; height: 64px; object-fit: contain; }
.partner-logo-tile span { font: 600 14.5px/1.35 var(--font-heading); color: var(--color-secondary); }
.partner-logo-tile.is-sample { background: #fff; }
.partner-logo-mark {
  display: grid;
  place-items: center;
  width: min(78%, 168px);
  height: 64px;
  border-radius: 10px;
  background: #f7f4ee;
  border: 1px dashed var(--color-border);
  font: 700 12px/1 var(--font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.partner-sample-name { font: 600 14.5px/1.35 var(--font-heading); color: var(--color-secondary); }
.partner-sample-line { font-size: 13px; line-height: 1.4; color: var(--color-text-muted); }
.partner-invite { max-width: 46em; margin: 18px 0 0; font-size: 15px; line-height: 1.55; }
.partner-type-section.is-sponsor .partner-logo-tile { min-height: 188px; border-top: 4px solid var(--color-tertiary); }
.partner-type-section.is-media .partner-logo-tile { border-top: 4px solid var(--color-primary); }
.partner-logo-grid.is-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
  .partner-logo-grid,
  .partner-logo-grid.is-sponsor,
  .partner-logo-grid.is-media { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .partner-logo-grid,
  .partner-logo-grid.is-sponsor,
  .partner-logo-grid.is-media { grid-template-columns: 1fr; }
}

.admin-demo { max-width: 980px; }
.admin-demo h1 { margin: 0 0 12px; font: 700 clamp(32px, 4vw, 46px)/1.15 var(--font-heading); }
.admin-login { max-width: 460px; }
.admin-login .field { margin-bottom: 16px; }
.admin-logout { margin: 0 0 20px; }
.admin-batch {
  margin: 0 0 22px;
  padding: 22px 22px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  border-top: 4px solid var(--color-primary);
}
.admin-batch h2 { margin: 8px 0 6px; font-size: 26px; }
.admin-students { margin: 16px 0; padding: 0; list-style: none; }
.admin-students li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}
.admin-students span { color: var(--color-text-muted); font-size: 14.5px; }
.admin-notify { margin-top: 8px; }
.wa-mini {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #25D366;
  color: #fff;
  font: 700 14px/1 var(--font-heading);
  text-decoration: none;
}
.wa-mini:hover { background: #1ebe5d; color: #fff; }

/* ============================================================
   Updated Pricing & Lecture Duration Prominence
   ============================================================ */
.fee-dur-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-quaternary);
  color: var(--color-secondary);
  margin-top: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.fee-dur-badge--cambridge {
  background: rgba(14, 47, 86, 0.12);
  color: #0E2F56;
}
.fee-subhead {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.3;
}
.fee-popular-pill {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

/* Schedule & Duration Overview Cards */
.schedule-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.schedule-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(17, 26, 46, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.schedule-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17, 26, 46, 0.09);
}
.schedule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.schedule-card-title {
  font: 700 16px/1.3 var(--font-heading);
  color: var(--color-secondary);
  margin: 0;
}
.schedule-duration-pill {
  background: var(--color-secondary);
  color: #ffffff;
  font: 600 12px/1 var(--font-heading);
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.schedule-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-body);
}
.schedule-card-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.schedule-card-list li:last-child {
  border-bottom: 0;
}
.schedule-pkg-name {
  font-weight: 600;
  color: var(--color-secondary);
}
.schedule-pkg-days {
  font-weight: 500;
  color: var(--color-text-body);
}

/* Class Page Prominent Highlight Bar */
.pkg-highlight-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  background: var(--color-quaternary);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--color-text-body);
}
.pkg-highlight-bar strong {
  color: var(--color-secondary);
}
.pkg-highlight-bar--cambridge {
  background: rgba(14, 47, 86, 0.08);
  border-left-color: #0E2F56;
}

/* ============================================================
   Clean, Readable Pricing Table & Schedule Cards
   ============================================================ */
.fee-tier-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 3px;
  line-height: 1.3;
}
.dur-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-quaternary);
  color: var(--color-secondary);
  white-space: nowrap;
}
.dur-pill--cambridge {
  background: rgba(14, 47, 86, 0.12);
  color: #0E2F56;
}

/* 3-Pillar Clean Schedule Strip */
.plans-schedule-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.schedule-tier-box {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(17, 26, 46, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.schedule-tier-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 26, 46, 0.08);
}
.schedule-tier-box--popular {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, #ffffff 0%, rgba(30, 93, 237, 0.03) 100%);
}
.tier-popular-badge {
  position: absolute;
  top: -11px;
  right: 18px;
  background: var(--color-primary);
  color: #ffffff;
  font: 700 10.5px/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(30, 93, 237, 0.35);
}
.tier-tag {
  font: 600 12px/1 var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.tier-headline {
  font: 700 22px/1.2 var(--font-heading);
  color: var(--color-secondary);
  margin: 4px 0 0;
}
.tier-detail {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-body);
  margin: 4px 0 0;
}
.tier-detail strong {
  color: var(--color-secondary);
}
.tier-scope {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.07);
}

/* Schedule Callout Subtitle */
.schedule-dur-legend {
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--color-text-muted);
}
.schedule-dur-legend strong {
  color: var(--color-secondary);
}

/* Admin Dispatch Grid Responsive */
@media (max-width: 860px) {
  .admin-dispatch-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   LIVE DEMO COHORT & BOARD TRACKER DASHBOARD
   ========================================================= */
.demo-tracker-dashboard {
  margin-bottom: 44px;
}
.tracker-head-row {
  margin-bottom: 22px;
  text-align: center;
}
.tracker-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: rgba(30, 90, 230, 0.08);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.tracker-title {
  font-size: 26px;
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  margin: 0 0 8px;
}
.tracker-desc {
  font-size: 15px;
  color: var(--color-text-muted);
  max-width: 740px;
  margin: 0 auto;
  line-height: 1.6;
}
.tracker-metrics-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px 24px;
  margin: 22px 0 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
  gap: 16px;
}
.tracker-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 180px;
}
.tracker-metric-num {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.1;
}
.tracker-metric-num--ready {
  color: #16a34a;
}
.tracker-metric-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 4px;
}
.tracker-metric-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
}
@media (max-width: 767.98px) {
  .tracker-metric-divider {
    display: none;
  }
}
.tracker-filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.tracker-filter-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tracker-filter-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.tracker-filter-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(30, 90, 230, 0.25);
}
.tracker-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .tracker-cards-grid {
    grid-template-columns: 1fr;
  }
}
.tracker-card {
  background: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.tracker-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(15, 30, 60, 0.08);
  transform: translateY(-2px);
}
.tracker-card--ready {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%);
}
.tracker-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.tracker-stage-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: #eef2f6;
  color: #334155;
  margin-bottom: 6px;
}
.tracker-stage-tag--cambridge {
  background: #0056b3;
  color: #ffffff;
}
.tracker-card-name {
  font-size: 20px;
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  margin: 0 0 2px;
}
.tracker-card-batch {
  font-size: 12px;
  font-family: monospace;
  color: #64748b;
}
.tracker-card-status-col {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.tracker-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.tracker-pill--ready {
  background: #dcfce7;
  color: #15803d;
}
.tracker-pill--progress {
  background: rgba(30, 90, 230, 0.1);
  color: var(--color-primary-dark);
}
.tracker-pill--new {
  background: #f1f5f9;
  color: #64748b;
}
.tracker-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}
.tracker-pill-dot--ready {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}
.tracker-pill-dot--progress {
  background: var(--color-primary);
}
.tracker-substatus {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.3;
}
.tracker-substatus--pending strong {
  color: #b45309;
}
.tracker-bar-wrap {
  margin: 4px 0 16px;
}
.tracker-bar-track {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.tracker-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.tracker-bar-fill--ready {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}
.tracker-boards-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.tracker-boards-heading {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 8px;
}
.tracker-boards-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tracker-board-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}
.tracker-board-count {
  font-size: 11px;
  background: #e2e8f0;
  color: #334155;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.tracker-board-chip--empty {
  background: transparent;
  border-style: dashed;
  color: #94a3b8;
  font-style: italic;
}
.tracker-select-btn {
  width: 100%;
  margin-top: auto;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  justify-content: center;
}
.tracker-select-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
}
.tracker-card--ready .tracker-select-btn {
  border-color: #16a34a;
  color: #16a34a;
}
.tracker-card--ready .tracker-select-btn:hover {
  background: #16a34a;
  color: #ffffff;
}