/* ========================================================================
   IvyBridge Education · 青藤教育
   Page section styles — used across all 11 pages
   ======================================================================== */

/* ====================================================================
   LANDING PAGE
   ==================================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.hero-pinstripe {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--ivy) 0%, var(--ivy) 60%,
    var(--gold) 60%, var(--gold) 75%,
    var(--ivy) 75%, var(--ivy) 100%);
}
.hero-inner { padding-top: 96px; padding-bottom: 120px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 80px;
  align-items: start;
}
.hero-eyebrow-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 32px;
}
.hero-h1 { margin-bottom: 36px; }
.hero-h1 .em-ivy { font-style: italic; color: var(--ivy); font-family: var(--serif-display); }
.hero-h1 .em-dash { font-family: var(--serif-display); color: var(--gold); margin: 0 12px; }
.hero-h1 .sub-en {
  display: block; font-style: italic; font-family: var(--serif-display);
  font-size: 0.7em; color: var(--ink-2);
}
.hero-lede { max-width: 540px; margin-bottom: 36px; }
.hero-cta-row { display: flex; gap: 16px; margin-bottom: 56px; }

.funnel-cta {
  background: var(--paper-2);
  border: 1px solid var(--gold-soft);
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 24px;
  max-width: 540px;
}
.funnel-cta-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.funnel-cta-time {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold);
}
.funnel-cta-flow {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--serif-display); font-size: 15px; color: var(--ink-2);
}
.funnel-cta-flow .num {
  color: var(--ivy); font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
}
.funnel-cta-flow .arrow { color: var(--gold); }

.hero-schools {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.hero-schools-row {
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: var(--serif-display); font-size: 17px; color: var(--ink-2);
  align-items: center;
}
.hero-schools-row .sep { opacity: 0.4; }
.hero-schools-row .more { font-style: italic; color: var(--gold); }

/* ---- Hero Collage ---- */
.hero-collage { position: relative; min-height: 620px; }
.collage-portrait {
  position: absolute; top: 0; right: 0;
  width: 360px; height: 460px;
  background: var(--ivy); color: var(--paper);
  padding: 28px;
  border-radius: 4px;
  border: 1px solid var(--ivy-deep);
}
.collage-portrait-head {
  display: flex; justify-content: space-between; align-items: start;
}
.collage-portrait-name {
  font-family: var(--serif-display);
  font-size: 30px;
  margin-top: 14px;
  font-style: italic;
}
.collage-portrait-en {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; margin-top: 6px;
  color: var(--gold-soft);
}
.collage-portrait-img {
  margin-top: 24px;
  height: 240px;
  background: repeating-linear-gradient(45deg, rgba(168,124,52,0.18) 0 8px, rgba(168,124,52,0.06) 8px 18px);
  border: 1px solid rgba(168,124,52,0.35);
  border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold-soft);
}
.collage-portrait-quote {
  margin-top: 18px;
  font-family: var(--serif-display); font-size: 15px;
  line-height: 1.5;
  color: var(--cream);
  font-style: italic;
}

.collage-info {
  position: absolute; top: 360px; left: 0;
  width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(29,64,50,0.08);
}
.collage-info-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.collage-info-when {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); letter-spacing: 0.15em;
}
.collage-info-title {
  font-family: var(--serif-display); font-size: 19px;
  color: var(--ink); line-height: 1.3;
}
.collage-info-meta {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--muted);
}

.collage-ribbon {
  position: absolute; top: 100px; left: -60px;
  width: 200px;
  transform: rotate(-4deg);
  background: var(--paper-2);
  border: 1px solid var(--gold-soft);
  padding: 14px 18px;
}
.collage-ribbon-num {
  font-family: var(--serif-display); font-size: 38px;
  color: var(--ivy); line-height: 1;
}
.collage-ribbon-num em { font-style: italic; }
.collage-ribbon-num .pct { font-size: 22px; color: var(--gold); }
.collage-ribbon-sub {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--muted);
  margin-top: 6px;
}

.collage-sticker {
  position: absolute; bottom: 0; right: 80px;
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 1px dashed var(--gold);
  display: grid; place-items: center;
  background: transparent;
  text-align: center;
  transform: rotate(8deg);
}
.collage-sticker .cap {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; color: var(--gold);
}
.collage-sticker .val {
  font-family: var(--serif-display); font-style: italic;
  font-size: 15px; color: var(--ivy);
  margin-top: 4px; line-height: 1.1;
}

/* ---- Stats Ribbon ---- */
.stats-ribbon {
  background: var(--ivy); color: var(--paper);
  padding: 56px 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.stat-item { display: flex; flex-direction: column; gap: 6px; }
.stat-item + .stat-item {
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 40px;
}
.stat-num {
  font-family: var(--serif-display); font-size: 64px;
  line-height: 1; color: var(--paper);
}
.stat-num.italic { font-style: italic; }
.stat-label {
  font-family: var(--serif-display); font-size: 18px;
  color: var(--gold-soft); margin-top: 12px;
}
.stat-sub {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.55);
}

/* ---- Press Strip ---- */
.press-strip {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 48px 0;
}
.press-strip-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
}
.press-disclaimer {
  font-family: var(--serif-display); font-style: italic;
  font-size: 14px; color: var(--muted);
}
.press-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.press-item:not(:first-child) { border-left: 1px solid var(--line); padding-left: 24px; }
.press-name { font-family: var(--serif-display); font-size: 19px; color: var(--ink); }
.press-note {
  font-family: var(--serif-display); font-style: italic;
  font-size: 13.5px; color: var(--ink-2);
  margin-top: 8px; line-height: 1.5;
}
.press-date {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
  margin-top: 8px;
}

/* ---- Teachers grid (landing) ---- */
.teachers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.teacher-card {
  display: flex; flex-direction: column;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.teacher-card.cream { background: var(--paper-2); }
.teacher-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(29,64,50,0.10); }
.teacher-card-head {
  display: flex; justify-content: space-between; align-items: start;
}
.teacher-card-no {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); letter-spacing: 0.16em;
}
.teacher-card-id {
  display: flex; align-items: end; gap: 18px;
  margin-top: 22px; margin-bottom: 18px;
}
.teacher-card-name {
  font-family: var(--serif-display); font-size: 30px;
  line-height: 1; color: var(--ink);
}
.teacher-card-en {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--gold);
  margin-top: 6px;
}
.teacher-card-meta {
  border-top: 1px solid var(--line); padding-top: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.meta-cell .meta-label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); opacity: 0.6; margin-bottom: 4px;
}
.meta-cell .meta-value {
  font-family: var(--serif-display); font-size: 15.5px;
  color: var(--ink);
}
.teacher-card-bio {
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2); margin: 18px 0 0;
}
.teacher-card-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
}
.teacher-card-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.teacher-card-rating {
  display: flex; gap: 14px; align-items: baseline;
}
.teacher-card-rating .num {
  font-family: var(--serif-display); font-size: 26px;
  color: var(--ivy); font-style: italic;
}
.teacher-card-rating .students {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--muted);
}
.teacher-card-price {
  font-family: var(--serif-display); font-size: 18px;
  color: var(--ink);
}
.teacher-card-price .per { font-size: 13px; color: var(--muted); }

/* ---- Mode cards ---- */
.modes-section { background: var(--paper-2); }
.modes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.mode-card {
  background: #fff; color: var(--ink);
  padding: 44px 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 380px;
}
.mode-card.is-ivy {
  background: var(--ivy); color: var(--paper);
  border-color: var(--ivy-deep);
}
.mode-watermark {
  position: absolute; top: -30px; right: -10px;
  font-family: var(--serif-display);
  font-size: 240px; font-style: italic;
  color: rgba(168,124,52,0.10);
  line-height: 1;
  pointer-events: none;
}
.mode-card.is-ivy .mode-watermark { color: rgba(255,255,255,0.06); }
.mode-head {
  display: flex; justify-content: space-between; align-items: start;
  position: relative;
}
.mode-card.is-ivy .mode-head .eyebrow { color: var(--gold-soft); }
.mode-title {
  margin-top: 24px; font-size: 38px;
  position: relative;
  font-family: var(--serif-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.mode-card.is-ivy .mode-title { color: var(--paper); }
.mode-desc {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2);
  margin: 18px 0 24px; max-width: 440px;
  position: relative;
}
.mode-card.is-ivy .mode-desc { color: rgba(255,255,255,0.78); }
.mode-stats {
  display: flex; gap: 32px; margin-top: auto;
  position: relative;
}
.mode-stat-num {
  font-family: var(--serif-display); font-size: 30px;
  line-height: 1; color: var(--ivy); font-style: italic;
}
.mode-card.is-ivy .mode-stat-num { color: var(--gold-soft); }
.mode-stat-lab {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
  margin-top: 6px; text-transform: uppercase;
}
.mode-card.is-ivy .mode-stat-lab { color: rgba(255,255,255,0.55); }
.mode-foot {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}
.mode-card.is-ivy .mode-foot { border-top-color: rgba(255,255,255,0.14); }
.mode-price { font-family: var(--serif-display); font-size: 19px; }
.mode-duration {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
  margin-top: 3px;
}
.mode-card.is-ivy .mode-duration { color: rgba(255,255,255,0.5); }
.mode-card.is-ivy .btn-sm {
  background: var(--gold); color: var(--ivy-deep);
}

/* ---- Pathway section ---- */
.pathway-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 80px; align-items: start;
}
.pathway-text { padding-top: 24px; }
.pathway-text h2 { margin: 16px 0 24px; }
.pathway-steps {
  display: flex; flex-direction: column; gap: 18px;
}
.path-step {
  display: flex; gap: 24px; align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.path-step-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; color: var(--gold);
  margin-top: 6px; min-width: 24px;
}
.path-step-title {
  font-family: var(--serif-display); font-size: 22px;
  color: var(--ink);
}
.path-step-sub {
  font-size: 14.5px; color: var(--muted);
  margin-top: 4px;
}

.pathway-diagram {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
  position: relative;
  min-height: 560px;
}
.pathway-diagram-head {
  display: flex; justify-content: space-between; align-items: start;
  margin-bottom: 24px;
}
.pathway-diagram-title {
  font-family: var(--serif-display); font-size: 22px;
  color: var(--ink); margin-top: 8px; font-style: italic;
}
.pathway-diagram-updated {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
}
.pathway-diagram-tags {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.pathway-tag { border-top: 1px solid var(--line); padding-top: 12px; }

/* ---- Classroom mockup ---- */
.classroom-section {
  background: var(--ivy-deep); color: var(--paper);
  position: relative; overflow: hidden;
}
.classroom-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 64px; align-items: center;
}
.classroom-text h2 { color: var(--paper); margin-top: 16px; }
.classroom-text .lede { color: rgba(255,255,255,0.78); margin-top: 20px; max-width: 440px; }
.classroom-list {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.classroom-list-row {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(168,124,52,0.2);
}
.classroom-list-row .k {
  font-family: var(--serif-display); font-size: 16px;
  color: var(--paper);
}
.classroom-list-row .v {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--gold-soft);
}

.classroom-mock {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.classroom-chrome {
  background: #1a1714;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.classroom-chrome-dots { display: flex; gap: 8px; }
.classroom-chrome-dots span {
  width: 12px; height: 12px; border-radius: 50%;
}
.classroom-chrome-title {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; color: rgba(255,255,255,0.5);
}
.classroom-chrome-rec {
  display: flex; gap: 8px; align-items: center;
}
.classroom-chrome-rec .led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #28c840; box-shadow: 0 0 8px #28c840;
}
.classroom-chrome-rec .lab {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; color: #28c840;
}

.classroom-body {
  background: #f2ead6;
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto auto;
  min-height: 440px;
}
.classroom-whiteboard {
  padding: 24px;
  grid-row: 1 / span 2;
  background: linear-gradient(180deg, #f8f2dd, #ede4c2);
  position: relative;
}
.classroom-whiteboard-grid {
  position: absolute; inset: 24px;
  background:
    repeating-linear-gradient(0deg, rgba(168,124,52,0.08) 0 24px, transparent 24px 25px),
    repeating-linear-gradient(90deg, rgba(168,124,52,0.08) 0 24px, transparent 24px 25px);
}
.classroom-whiteboard-content { position: relative; }
.classroom-whiteboard-eyebrow {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; color: #a87c34; margin-bottom: 12px;
}
.classroom-cursor {
  position: absolute; top: 140px; left: 60px;
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.7;
  box-shadow: 0 0 0 4px rgba(168,124,52,0.2);
}
.classroom-rail {
  background: #1a1714;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.classroom-cam {
  aspect-ratio: 4/3;
  background: var(--ivy);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.classroom-cam.student { background: #3a342c; }
.classroom-cam-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(168,124,52,0.15) 0 6px, transparent 6px 14px);
}
.classroom-cam.student .classroom-cam-stripes {
  background: repeating-linear-gradient(135deg, rgba(168,124,52,0.1) 0 6px, transparent 6px 14px);
}
.classroom-cam-name {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.16em; color: var(--gold-soft);
  background: rgba(0,0,0,0.4); padding: 2px 6px;
}
.classroom-cam-meta {
  position: absolute; bottom: 8px; left: 8px; right: 8px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; color: var(--cream);
}
.classroom-chat {
  flex: 1;
  background: #0d0c0a;
  border-radius: 4px; padding: 10px;
  font-family: var(--mono); font-size: 10px;
  color: rgba(255,255,255,0.7); line-height: 1.7;
}
.classroom-chat .who { color: var(--gold-soft); }
.classroom-chat .ai { color: #5ea660; margin-top: 6px; }
.classroom-toolbar {
  background: #0d0c0a;
  padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.5);
}
.classroom-toolbar .left { display: flex; gap: 18px; }
.classroom-toolbar .right { color: var(--gold-soft); }

/* ---- Effect section ---- */
.effect-section {
  background: var(--ivy-deep);
  color: var(--paper);
  position: relative;
}
.effect-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.effect-text { padding-top: 28px; }
.effect-text h2 { color: var(--paper); margin-top: 16px; }
.effect-text h2 em { color: var(--gold-soft); font-style: italic; }
.effect-text .lede {
  color: rgba(255,255,255,0.78);
  margin-top: 24px;
  max-width: 460px;
}
.effect-features {
  margin-top: 40px;
  display: flex; flex-direction: column; gap: 22px;
}
.effect-feature {
  border-top: 1px solid rgba(168,124,52,0.3);
  padding-top: 16px;
}
.effect-feature-title {
  font-family: var(--serif-display); font-size: 22px;
  color: var(--paper);
}
.effect-feature-title .plus {
  color: var(--gold-soft); margin-right: 8px;
  font-family: var(--mono); font-size: 13px;
}
.effect-feature-desc {
  font-size: 14.5px;
  color: rgba(255,255,255,0.65);
  margin-top: 6px; padding-left: 22px;
}

/* ---- Dashboard mock (used in Effect section) ---- */
.dashboard-mock {
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  position: relative;
}
.dash-mock-chrome {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.dash-mock-chrome-dots { display: flex; gap: 12px; align-items: center; }
.dash-mock-chrome-dots span {
  width: 10px; height: 10px; border-radius: 50%;
}
.dash-mock-chrome-label {
  margin-left: 12px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
}
.dash-mock-stats {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px; margin-top: 24px;
}
.dash-mock-stat .eyebrow.ink { opacity: 0.6; }
.dash-mock-stat-val {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 8px;
}
.dash-mock-stat-val .big {
  font-family: var(--serif-display); font-size: 64px;
  color: var(--ivy); font-style: italic; line-height: 1;
}
.dash-mock-stat-val .points {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--gold);
}
.dash-mock-stat-num {
  font-family: var(--serif-display); font-size: 36px;
  color: var(--ink); margin-top: 8px; line-height: 1;
}
.dash-mock-stat-num .small { font-size: 18px; color: var(--muted); }
.dash-mock-chart-section { margin-top: 28px; position: relative; }
.dash-mock-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 22px; padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.dash-mock-comment {
  font-family: var(--serif-display); font-style: italic;
  font-size: 16px; line-height: 1.45; color: var(--ink-2);
}
.dash-mock-when {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted); margin-top: 8px;
}
.dash-mock-clip {
  height: 78px; background: var(--ivy);
  border-radius: 4px; position: relative; overflow: hidden;
}
.dash-mock-clip-stripe {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(168,124,52,0.18) 0 6px, transparent 6px 14px);
}
.dash-mock-clip-meta {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; color: var(--paper);
}
.dash-mock-clip-time {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--gold-soft);
}
.dash-mock-clip-play {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--gold-soft);
  display: grid; place-items: center; color: var(--gold-soft);
}

/* ---- Parent section / phone mock ---- */
.parent-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 80px; align-items: center;
}
.parent-traits {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; margin-top: 16px;
}
.parent-trait {
  border-top: 1px solid var(--line); padding-top: 14px;
}
.parent-trait-title {
  font-family: var(--serif-display); font-size: 24px;
  font-style: italic; color: var(--ivy);
}
.parent-trait-desc {
  font-size: 14.5px; color: var(--ink-2); margin-top: 6px;
}
.phone-mock-wrap { position: relative; display: flex; justify-content: center; }
.phone-mock {
  width: 320px; height: 640px;
  background: var(--ink);
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 30px 80px rgba(29,64,50,0.25);
  position: relative;
}
.phone-screen {
  background: var(--paper);
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.phone-statusbar {
  height: 28px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 22px;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink);
}
.phone-statusbar .notch {
  width: 80px; height: 18px;
  background: var(--ink); border-radius: 20px;
}
.phone-header {
  padding: 16px 22px 10px;
  border-bottom: 1px solid var(--line);
}
.phone-header-name {
  font-family: var(--serif-display); font-size: 22px; color: var(--ink);
}
.phone-body {
  padding: 18px; flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.phone-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 6px; padding: 14px;
}
.phone-card.ivy {
  background: var(--ivy); color: var(--paper);
  border-color: var(--ivy-deep);
}
.phone-card.cream { background: var(--paper-2); }
.phone-tabbar {
  height: 60px;
  border-top: 1px solid var(--line);
  display: flex; padding: 0 8px;
  align-items: center; justify-content: space-around;
  font-family: var(--serif-display); font-size: 12px;
  color: var(--muted);
}
.phone-tabbar .active { color: var(--ivy); }
.phone-annot-top {
  position: absolute; top: 60px; right: -40px; width: 180px;
  font-family: var(--serif-display); font-style: italic; font-size: 14px;
  color: var(--gold); text-align: left;
}
.phone-annot-bot {
  position: absolute; bottom: 80px; left: -50px; width: 200px;
  font-family: var(--serif-display); font-style: italic; font-size: 14px;
  color: var(--gold); text-align: right;
}

/* ---- Public class cards ---- */
.public-classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.public-class-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
  position: relative;
}
.public-class-head {
  display: flex; justify-content: space-between; align-items: start;
}
.public-class-seats {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--gold);
}
.public-class-date {
  font-family: var(--serif-display); font-style: italic;
  font-size: 16px; color: var(--ivy); margin-top: 14px;
}
.public-class-topic {
  font-family: var(--serif-display); font-size: 22px;
  margin-top: 8px; line-height: 1.35;
}
.public-class-foot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.public-class-host {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--muted);
}

/* ---- Package preview cards ---- */
.packages-section { background: var(--paper-2); }
.packages-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.package-card {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 28px; display: block; position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.package-card.is-featured {
  background: var(--ivy); color: var(--paper);
  border-color: var(--ivy-deep);
}
.package-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(29,64,50,0.10); }
.package-card-badge {
  position: absolute; top: -10px; left: 22px;
  background: var(--ivy); color: var(--paper);
  padding: 4px 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em;
}
.package-card.is-featured .package-card-badge {
  background: var(--gold); color: var(--ivy-deep);
}
.package-card-code {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--gold);
}
.package-card.is-featured .package-card-code { color: var(--gold-soft); }
.package-card-tier {
  font-family: var(--serif-display); font-size: 28px; margin-top: 10px;
}
.package-card-headline {
  font-family: var(--serif-display); font-style: italic;
  font-size: 15px; color: var(--ink-2); margin-top: 16px; line-height: 1.5;
}
.package-card.is-featured .package-card-headline { color: rgba(255,255,255,0.78); }
.package-card-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: end;
}
.package-card.is-featured .package-card-foot { border-top-color: rgba(255,255,255,0.16); }
.package-card-price-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
}
.package-card.is-featured .package-card-price-label { color: rgba(255,255,255,0.55); }
.package-card-price {
  font-family: var(--serif-display); font-style: italic;
  font-size: 32px; color: var(--ivy); margin-top: 4px; line-height: 1;
}
.package-card.is-featured .package-card-price { color: var(--paper); }
.package-card-cta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--gold);
}
.package-card.is-featured .package-card-cta { color: var(--gold-soft); }

/* ---- Gaokao preview ---- */
.gaokao-preview { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.gaokao-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px; padding: 32px;
}
.gaokao-card-num {
  font-family: var(--serif-display); font-style: italic;
  font-size: 64px; color: var(--ivy); line-height: 1;
}
.gaokao-card-label {
  font-family: var(--serif-display); font-size: 19px;
  color: var(--ink); margin-top: 14px;
}
.gaokao-card-desc {
  font-size: 13.5px; color: var(--muted); margin-top: 6px;
}

/* ---- Academy preview ---- */
.academy-preview-section {
  background: var(--ivy-deep); color: var(--paper);
}
.academy-preview-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.academy-preview-text h2 {
  color: var(--paper); margin-top: 16px;
  font-size: clamp(40px, 5vw, 64px);
}
.academy-preview-text h2 em { color: var(--gold-soft); font-style: italic; }
.academy-preview-text .lede {
  color: rgba(255,255,255,0.78); margin-top: 22px; max-width: 480px;
}
.academy-preview-grid-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.academy-mini {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: 20px;
}
.academy-mini-name {
  font-family: var(--serif-display); font-size: 22px;
  color: var(--paper); margin-top: 8px;
}
.academy-mini-school {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
  font-family: var(--serif-display);
  font-style: italic;
}

/* ---- Stories strip ---- */
.stories-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.story-card {
  padding: 28px; background: #fff;
  border: 1px solid var(--line); border-radius: 4px;
}
.story-card.cream { background: var(--paper-2); }
.story-card-head {
  display: flex; justify-content: space-between; align-items: start;
}
.story-card-name {
  font-family: var(--serif-display); font-size: 22px;
}
.story-card-stage {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold); margin-top: 6px;
}
.story-card-delta { text-align: right; }
.story-card-delta-num {
  font-family: var(--serif-display); font-style: italic;
  font-size: 30px; color: var(--ivy); line-height: 1;
}
.story-card-delta-lab {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--muted);
  margin-top: 4px;
}
.story-card-body {
  font-family: var(--serif-display); font-style: italic;
  font-size: 15.5px; color: var(--ink-2);
  margin-top: 16px; line-height: 1.6;
}
.story-card-foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--muted);
}

/* ---- Courses section ---- */
.courses-section { background: var(--paper-2); }
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.course-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.course-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(29,64,50,0.10); }
.course-card-band {
  background: var(--paper-2);
  color: var(--ink);
  padding: 20px 26px;
  border-bottom: 1px solid var(--line);
}
.course-card.is-ivy .course-card-band {
  background: var(--ivy); color: var(--paper);
  border-bottom-color: var(--ivy-deep);
}
.course-card-band-head {
  display: flex; justify-content: space-between; align-items: center;
}
.course-card-code {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--gold);
}
.course-card.is-ivy .course-card-code { color: var(--gold-soft); }
.course-card-seats {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--muted);
}
.course-card.is-ivy .course-card-seats { color: rgba(255,255,255,0.6); }
.course-card-title {
  font-family: var(--serif-display); font-size: 26px;
  margin-top: 12px; line-height: 1.2;
}
.course-card-body {
  padding: 24px 26px; flex: 1;
  display: flex; flex-direction: column;
}
.course-card-highlight {
  font-family: var(--serif-display); font-style: italic;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
}
.course-card-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.course-card-foot {
  margin-top: auto; padding-top: 22px;
  display: flex; justify-content: space-between; align-items: end;
}
.course-card-price {
  font-family: var(--serif-display); font-size: 32px;
  color: var(--ivy); font-style: italic;
}

/* ---- Testimonials ---- */
.testi-grid {
  display: grid; grid-template-columns: 1fr 2.2fr;
  gap: 64px; align-items: start;
}
.testi-left { position: sticky; top: 120px; }
.testi-left h2 em { font-style: italic; color: var(--ivy); }
.testi-left .lede { margin-top: 20px; color: var(--ink-2); }
.testi-list { display: flex; flex-direction: column; gap: 4px; }
.testi-fig {
  margin: 0; padding: 40px 0;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 60px 1fr;
  gap: 36px; align-items: start;
}
.testi-no {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; color: var(--gold);
  margin-top: 12px;
}
.testi-quote {
  margin: 0;
  font-family: var(--serif-display);
  font-size: 30px; line-height: 1.4;
  color: var(--ink); font-style: italic;
  text-wrap: pretty;
}
.testi-cite {
  margin-top: 18px;
  display: flex; gap: 12px; align-items: center;
}
.testi-cite-name {
  font-family: var(--serif-display); font-size: 17px;
  color: var(--ink-2);
}
.testi-cite-dash {
  width: 24px; height: 1px;
  background: var(--gold);
}
.testi-cite-en {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--muted);
}

/* ---- FAQ ---- */
.faq-section { background: var(--paper-2); }
.faq-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: start;
}
.faq-left { position: sticky; top: 120px; }
.faq-left h2 { margin: 16px 0 24px; }
.faq-left .lede { color: var(--ink-2); max-width: 360px; }
.faq-accordion {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 28px 32px;
  text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
}
.faq-q-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--gold);
  margin-right: 16px;
}
.faq-q-text {
  font-family: var(--serif-display); font-size: 22px;
  color: var(--ink); line-height: 1.3;
}
.faq-q-plus {
  font-family: var(--serif-display); font-size: 26px;
  color: var(--ivy); font-style: italic;
  transition: transform .2s;
}
.faq-item.is-open .faq-q-plus { transform: rotate(45deg); }
.faq-a {
  padding: 0 32px 32px 80px;
  font-size: 16px; line-height: 1.65;
  color: var(--ink-2); max-width: 640px;
  display: none;
}
.faq-item.is-open .faq-a { display: block; }

/* ---- CTA banner ---- */
.cta-banner { background: var(--ivy); color: var(--paper); }
.cta-banner-inner { padding-top: 104px; padding-bottom: 104px; }
.cta-banner-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 80px; align-items: center;
}
.cta-banner h2 {
  margin-top: 18px; color: var(--paper);
  font-size: clamp(40px, 5vw, 72px);
}
.cta-banner h2 em { font-style: italic; color: var(--gold-soft); }
.cta-banner .lede {
  color: rgba(255,255,255,0.78);
  margin-top: 24px; max-width: 580px;
}
.cta-banner-cards {
  display: flex; gap: 16px; margin-top: 36px;
}
.cta-banner-quote {
  position: relative;
  padding: 32px;
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
}
.cta-banner-quote-body {
  font-family: var(--serif-display);
  font-style: italic; font-size: 24px;
  margin-top: 22px; line-height: 1.4; color: var(--paper);
}
.cta-banner-quote-meta {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--gold-soft); margin-top: 24px;
}

/* ====================================================================
   COMMON: page header (dark) used on Diagnostic, Gaokao, Report
   ==================================================================== */
.page-header-dark {
  background: var(--ivy-deep);
  color: var(--paper);
  padding-top: 96px;
  padding-bottom: 96px;
  border-bottom: 1px solid rgba(168,124,52,0.3);
}
.page-header-dark h1 { color: var(--paper); margin-top: 16px; }
.page-header-dark .lede { color: rgba(255,255,255,0.78); max-width: 700px; margin-top: 24px; }

.page-header-light {
  padding-top: 96px;
  padding-bottom: 80px;
}

.page-h1 { font-size: clamp(56px, 6vw, 96px); }

.kpi-row {
  display: grid; gap: 24px; margin-top: 48px;
}
.kpi-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ====================================================================
   TEACHERS PAGE
   ==================================================================== */
.teachers-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.teachers-page-count {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--muted);
  margin-bottom: 24px;
}
.teachers-empty {
  grid-column: 1 / -1;
  padding: 80px;
  text-align: center;
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--muted);
}

/* Teacher drawer */
.drawer-hero {
  padding: 48px 40px 32px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.drawer-hero-head {
  display: flex; gap: 28px; align-items: center;
}
.drawer-hero-info { flex: 1; }
.drawer-hero-name {
  font-family: var(--serif-display);
  font-size: 44px;
}
.drawer-hero-en {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--gold);
  margin-top: 6px;
}
.drawer-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.drawer-section {
  padding: 32px 40px;
  border-bottom: 1px solid var(--line);
}
.drawer-section h3 {
  margin-bottom: 16px;
  font-size: 22px;
}
.drawer-foot {
  position: sticky; bottom: 0;
  padding: 20px 40px;
  background: rgba(250, 245, 230, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: auto;
}

/* ====================================================================
   COURSE PAGE
   ==================================================================== */
.breadcrumb {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--muted);
}
.breadcrumb a:hover { color: var(--ivy); }
.breadcrumb .sep { margin: 0 12px; color: var(--gold); }

.course-detail-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  padding-top: 64px;
  padding-bottom: 96px;
}
.course-detail-main h1 { margin-top: 8px; }
.course-detail-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.course-stat-val {
  font-family: var(--serif-display);
  font-size: 28px; color: var(--ivy);
  font-style: italic; line-height: 1;
}
.course-detail-teacher {
  display: flex; gap: 18px; align-items: center;
  padding: 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-top: 32px;
}
.course-syllabus {
  margin-top: 48px;
}
.course-syllabus-row {
  display: grid;
  grid-template-columns: 60px 1fr 100px;
  gap: 20px; align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.course-syllabus-row:last-child { border-bottom: 1px solid var(--line); }
.course-syllabus-no {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--gold);
}
.course-syllabus-title {
  font-family: var(--serif-display); font-size: 19px;
  color: var(--ink);
}
.course-syllabus-time {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--muted);
  text-align: right;
}
.course-includes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 32px;
}
.course-include {
  border-top: 1px solid var(--line); padding-top: 14px;
}
.course-include-title {
  font-family: var(--serif-display); font-size: 18px;
  font-style: italic; color: var(--ivy);
}
.course-include-desc {
  font-size: 14.5px; color: var(--ink-2); margin-top: 6px;
}
.course-outcomes {
  margin-top: 48px;
  padding: 32px;
  background: var(--ivy-deep);
  color: var(--paper);
  border-radius: 4px;
}
.course-outcomes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 24px;
}
.course-outcome-num {
  font-family: var(--serif-display); font-size: 48px;
  color: var(--gold-soft); font-style: italic; line-height: 1;
}
.course-outcome-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: rgba(255,255,255,0.7);
  margin-top: 10px;
}
.course-purchase-card {
  position: sticky; top: 100px;
  padding: 32px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
}
.course-purchase-price {
  font-family: var(--serif-display);
  font-size: 56px;
  color: var(--ivy);
  font-style: italic;
  line-height: 1;
}
.course-purchase-orig {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 15px;
  margin-left: 8px;
  font-style: normal;
}
.course-purchase-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.course-purchase-buttons {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 28px;
}
.course-purchase-promo {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px dashed var(--line);
  font-family: var(--serif-display);
  font-style: italic; font-size: 14px;
  color: var(--ink-2); line-height: 1.6;
}

/* ====================================================================
   BOOKING PAGE
   ==================================================================== */
.booking-page-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  padding-bottom: 96px;
}
.booking-main {}
.booking-aside { position: sticky; top: 100px; align-self: start; }
.booking-step { display: none; }
.booking-step.is-current { display: block; }

.booking-teachers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.booking-teacher-card {
  padding: 24px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.booking-teacher-card:hover { border-color: var(--ivy); }
.booking-teacher-card.is-selected {
  border-color: var(--ivy); background: var(--paper-2);
}
.booking-teacher-card.is-selected::after {
  content: "✓ 已选";
  position: absolute; top: 16px; right: 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--ivy);
}

.booking-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.booking-cal-day { }
.booking-cal-head {
  text-align: center; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.booking-cal-day-name {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
}
.booking-cal-day-num {
  font-family: var(--serif-display); font-size: 24px;
  color: var(--ink); margin-top: 4px;
}
.booking-cal-slots {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px;
}
.booking-cal-slot {
  font-family: var(--mono); font-size: 11px;
  padding: 8px 6px; text-align: center;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: all .12s;
  border-radius: 2px;
}
.booking-cal-slot:hover:not(:disabled) { border-color: var(--ivy); color: var(--ivy); }
.booking-cal-slot.is-selected {
  background: var(--ivy); color: var(--paper); border-color: var(--ivy);
}
.booking-cal-slot:disabled, .booking-cal-slot.unavail {
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 4px, transparent 4px 8px);
  color: var(--muted); cursor: not-allowed;
  text-decoration: line-through;
}
.booking-cal-legend {
  display: flex; gap: 24px; margin-top: 24px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--muted);
}
.legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1px solid var(--line);
  background: #fff;
  margin-right: 6px;
  vertical-align: middle;
}
.legend-dot.selected { background: var(--ivy); border-color: var(--ivy); }
.legend-dot.unavail { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 4px, transparent 4px 8px); }

.booking-form {
  display: grid; gap: 24px;
}
.booking-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.booking-form-row-3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}

.booking-confirm-card {
  padding: 32px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.booking-confirm-row {
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.booking-confirm-row:last-child { border-bottom: none; }
.booking-success {
  text-align: center;
  padding: 64px 40px;
  background: var(--ivy-deep);
  color: var(--paper);
  border-radius: 4px;
}
.booking-success h2 { color: var(--paper); }
.booking-success-ref {
  font-family: var(--mono); font-size: 14px;
  letter-spacing: 0.18em; color: var(--gold-soft);
  margin-top: 24px;
}

.booking-nav {
  display: flex; justify-content: space-between;
  margin-top: 32px;
}

.booking-summary {
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.booking-summary-rows {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 20px;
}
.booking-summary-row {
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.booking-summary-row .k {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
  text-transform: uppercase;
}
.booking-summary-row .v {
  font-family: var(--serif-display); font-size: 16px;
}
.booking-summary-price {
  margin-top: 28px; padding-top: 20px;
  border-top: 2px solid var(--ivy);
  font-family: var(--serif-display);
  font-size: 36px; color: var(--ivy);
  font-style: italic;
  text-align: right;
}

/* ====================================================================
   DIAGNOSTIC PAGE
   ==================================================================== */
.diag-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 96px;
}
.diag-stepper-wrap {
  padding: 32px 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.diag-step { display: none; }
.diag-step.is-current { display: block; }
.diag-step-inner {
  padding-top: 64px;
  padding-bottom: 64px;
}
.diag-intro-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px;
  align-items: start;
}
.diag-intro-aside {
  position: sticky; top: 100px;
  padding: 32px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: center;
}
.diag-form-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.diag-toggles {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 20px;
}
.diag-toggle {
  font-family: var(--serif-display); font-size: 15px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.diag-toggle:hover { border-color: var(--ivy); }
.diag-toggle.is-active {
  background: var(--ivy); color: var(--paper); border-color: var(--ivy);
}

.diag-question {
  padding: 32px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 16px;
}
.diag-question-q {
  font-family: var(--serif-display); font-size: 22px;
  color: var(--ink); margin-bottom: 20px;
}
.diag-options {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.diag-option {
  font-family: var(--serif-display); font-size: 16px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer; border-radius: 2px;
  transition: all .15s;
}
.diag-option:hover { border-color: var(--ivy); }
.diag-option.is-active {
  background: var(--ivy); color: var(--paper); border-color: var(--ivy);
}

.diag-academic-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 48px;
}
.diag-quiz-card {
  padding: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.diag-quiz-progress {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--gold);
  margin-bottom: 16px;
}
.diag-quiz-q {
  font-family: var(--serif-display); font-size: 24px;
  line-height: 1.45; margin-bottom: 28px;
}
.diag-quiz-options {
  display: flex; flex-direction: column; gap: 12px;
}
.diag-quiz-option {
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--serif-display);
  font-size: 16px;
  text-align: left;
  transition: all .15s;
}
.diag-quiz-option:hover { border-color: var(--ivy); }
.diag-quiz-option.is-active {
  border-color: var(--ivy); background: var(--paper-2);
}
.diag-quiz-side {
  position: sticky; top: 100px;
  padding: 32px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.diag-quiz-squares {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 6px; margin-top: 24px;
}
.diag-quiz-square {
  aspect-ratio: 1; background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.diag-quiz-square.is-filled { background: var(--ivy); border-color: var(--ivy); }
.diag-quiz-square.is-current { border-color: var(--gold); background: var(--gold-soft); }

.diag-matching {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  padding-top: 32px;
}
.diag-ripple {
  position: relative;
  width: 400px; height: 400px;
  margin: 0 auto;
}
.diag-ripple-svg { display: block; }
.diag-ripple-pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 84px;
  color: var(--ivy);
  pointer-events: none;
}
.diag-ripple-pct .lab {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-top: 8px;
  font-style: normal;
}

.diag-nav {
  display: flex; justify-content: space-between;
  margin-top: 40px;
}

/* ====================================================================
   REPORT PAGE
   ==================================================================== */
.report-header {
  background: var(--ivy-deep); color: var(--paper);
  padding-top: 80px; padding-bottom: 80px;
  border-bottom: 1px solid rgba(168,124,52,0.4);
}
.report-header h1 { color: var(--paper); }
.report-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 36px;
}
.report-meta-cell .k {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold-soft);
  margin-bottom: 6px;
}
.report-meta-cell .v {
  font-family: var(--serif-display); font-size: 17px;
  color: var(--paper);
}
.report-quote {
  margin-top: 36px;
  padding: 24px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif-display);
  font-style: italic; font-size: 20px;
  color: var(--cream);
}
.report-tldr {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
.report-tldr-synth {
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.report-tldr-text {
  font-family: var(--serif-display);
  font-size: 17px; line-height: 1.6;
  margin-top: 16px;
}
.report-tldr-kpi {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.report-tldr-kpi-num {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 56px;
  color: var(--ivy);
  line-height: 1;
}

.report-radar-section {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  margin-top: 64px;
  align-items: center;
}
.report-radar-svg-wrap {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px;
}
.report-radar-readout {
  display: flex; flex-direction: column; gap: 20px;
}
.report-radar-item {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.report-radar-item-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.report-radar-item-name {
  font-family: var(--serif-display); font-size: 18px;
}
.report-radar-item-val {
  font-family: var(--serif-display); font-style: italic;
  font-size: 26px; color: var(--ivy);
}
.report-radar-bar {
  height: 6px; background: var(--line);
  border-radius: 3px; overflow: hidden;
}
.report-radar-bar-fill {
  height: 100%; background: var(--ivy);
  border-radius: 3px;
}

.report-heatmap {
  margin-top: 80px;
}
.report-heatmap-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.report-heatmap-cell {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.report-heatmap-cell.l-1 { background: rgba(213,52,52,0.16); border-color: rgba(213,52,52,0.4); }
.report-heatmap-cell.l-2 { background: rgba(213,166,74,0.14); border-color: rgba(213,166,74,0.4); }
.report-heatmap-cell.l-3 { background: rgba(107,170,91,0.14); border-color: rgba(107,170,91,0.4); }
.report-heatmap-cell.l-4 { background: rgba(14,90,60,0.14); border-color: rgba(14,90,60,0.4); }
.report-heatmap-name {
  font-family: var(--serif-display); font-size: 17px;
}
.report-heatmap-pct {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--muted);
  margin-top: 8px;
}
.report-heatmap-level {
  font-family: var(--serif-display); font-style: italic;
  font-size: 14px; color: var(--ink-2); margin-top: 4px;
}

.report-habits {
  margin-top: 80px;
}
.report-habits-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; margin-top: 32px;
}
.report-habit {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.report-habit-name {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--gold);
}
.report-habit-val {
  font-family: var(--serif-display);
  font-style: italic; font-size: 30px;
  color: var(--ivy);
  margin-top: 10px;
}
.report-habit-desc {
  font-size: 14.5px; color: var(--muted); margin-top: 6px;
}

.report-match {
  margin-top: 80px;
}
.report-match-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 32px;
}
.report-match-card {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
}
.report-match-pct {
  position: absolute; top: -10px; right: 24px;
  background: var(--gold);
  color: var(--ivy-deep);
  padding: 5px 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em;
  border-radius: 2px;
}

.report-pkg {
  margin-top: 80px;
  background: var(--ivy);
  color: var(--paper);
  padding: 48px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}
.report-pkg h2 { color: var(--paper); }

/* ====================================================================
   DASHBOARD PAGE
   ==================================================================== */
.dash-banner {
  background: var(--ivy);
  color: var(--paper);
  padding: 18px 0;
  border-bottom: 1px solid var(--ivy-deep);
}
.dash-banner-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.dash-banner-text {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 16px;
}
.dash-banner-text strong {
  font-style: normal;
  color: var(--gold-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-right: 12px;
}
.dash-banner-actions { display: flex; gap: 12px; }
.dash-banner-close {
  background: transparent; border: none;
  color: var(--paper); opacity: 0.7;
  font-size: 20px;
  font-family: var(--serif-display);
  cursor: pointer;
  padding: 0 8px;
}

.dash-page-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding-top: 32px;
  padding-bottom: 64px;
}
.dash-sidebar {
  position: sticky; top: 100px;
  align-self: start;
}
.dash-sidebar-child {
  margin-bottom: 24px;
}
.dash-sidebar-child-title {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--muted);
  margin-bottom: 10px;
}
.dash-sidebar-child-list { display: flex; flex-direction: column; gap: 4px; }
.dash-sidebar-child-btn {
  font-family: var(--serif-display); font-size: 16px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
}
.dash-sidebar-child-btn.is-active {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ivy);
}
.dash-view-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 24px;
  background: #fff;
}
.dash-view-btn {
  flex: 1;
  padding: 8px 12px;
  font-family: var(--serif-display); font-size: 14px;
  background: transparent; border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-2);
}
.dash-view-btn.is-active {
  background: var(--ivy); color: var(--paper);
}
.dash-sidebar-nav {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.dash-sidebar-nav-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  font-family: var(--serif-display); font-size: 15px;
  color: var(--ink-2);
  border-radius: 4px;
  cursor: pointer;
}
.dash-sidebar-nav-item:hover { background: var(--paper-2); color: var(--ivy); }
.dash-sidebar-nav-badge {
  background: var(--gold); color: var(--ivy-deep);
  font-family: var(--mono); font-size: 9px;
  padding: 2px 6px; border-radius: 2px;
  letter-spacing: 0.1em;
}

.dash-main-header {
  background: var(--ivy);
  color: var(--paper);
  padding: 36px 36px 32px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.dash-main-header::after {
  content: ""; position: absolute;
  top: 0; right: 0; bottom: 0; width: 40%;
  background: repeating-linear-gradient(135deg, rgba(212,166,74,0.12) 0 12px, transparent 12px 24px);
  pointer-events: none;
}
.dash-main-header h2 { color: var(--paper); position: relative; }
.dash-main-header .sub {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--gold-soft);
  margin-top: 10px;
  position: relative;
}
.dash-main-header-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; margin-top: 28px;
  position: relative;
}
.dash-main-kpi-val {
  font-family: var(--serif-display);
  font-size: 36px;
  font-style: italic;
  line-height: 1;
}
.dash-main-kpi-lab {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--gold-soft);
  margin-top: 8px;
}

.dash-row {
  display: grid; gap: 24px;
  margin-top: 32px;
}
.dash-row.cols-2-1 { grid-template-columns: 2fr 1fr; }
.dash-row.cols-1-1 { grid-template-columns: 1fr 1fr; }

.dash-card {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.dash-card-title {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.dash-task {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.dash-task:first-of-type { border-top: none; }
.dash-task-time {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.dash-task-title {
  font-family: var(--serif-display); font-size: 18px;
}
.dash-task-sub {
  font-size: 13px; color: var(--muted); margin-top: 4px;
}
.dash-wallet-row {
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.dash-wallet-row:first-child { border-top: none; padding-top: 0; }
.dash-wallet-balance {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 44px;
  color: var(--ivy);
  line-height: 1;
}
.dash-curve {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px;
}
.dash-tree {
  display: flex; flex-direction: column; gap: 12px;
}
.dash-tree-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
}
.dash-tree-label {
  font-family: var(--serif-display); font-size: 15px;
}
.dash-tree-bar {
  height: 8px; background: var(--line);
  border-radius: 2px; overflow: hidden;
}
.dash-tree-bar-fill {
  height: 100%; background: var(--ivy);
  border-radius: 2px;
}
.dash-tree-bar-fill.l-3 { background: var(--leaf); }
.dash-tree-bar-fill.l-2 { background: var(--gold); }
.dash-tree-bar-fill.l-1 { background: var(--burgundy); }
.dash-tree-pct {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--muted);
  text-align: right;
}
.dash-msg {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.dash-msg.is-unread {
  background: var(--paper-2);
  border-color: var(--gold-soft);
  border-left: 3px solid var(--gold);
}
.dash-msg-from {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold);
}
.dash-msg-body {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 15px; color: var(--ink-2);
  margin-top: 8px; line-height: 1.5;
}
.dash-msg + .dash-msg { margin-top: 10px; }

.dash-upcoming-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.dash-upcoming-day {
  border-top: 2px solid var(--line);
  padding-top: 10px;
}
.dash-upcoming-day-head {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--muted);
}
.dash-upcoming-item {
  background: var(--paper-2);
  border-left: 3px solid var(--ivy);
  padding: 8px 10px;
  border-radius: 0 2px 2px 0;
  margin-top: 8px;
  font-family: var(--serif-display); font-size: 13px;
}
.dash-upcoming-item.live { border-color: var(--gold); }
.dash-upcoming-item.rec { border-color: var(--leaf); }
.dash-upcoming-item.ai { border-color: var(--burgundy); }

/* ====================================================================
   PLANS PAGE
   ==================================================================== */
.plans-page-header {
  padding-top: 80px; padding-bottom: 48px;
}
.plans-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.plans-card {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.plans-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(29,64,50,0.08); }
.plans-card.is-selected {
  background: var(--ivy); color: var(--paper); border-color: var(--ivy-deep);
}
.plans-card.is-selected .package-card-headline { color: rgba(255,255,255,0.78); }
.plans-card.is-selected .package-card-code { color: var(--gold-soft); }
.plans-card.is-selected .package-card-price { color: var(--paper); }

.plans-table-wrap {
  margin-top: 80px;
  overflow-x: auto;
}
.plans-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.plans-table th, .plans-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif-display);
  font-size: 15px;
  vertical-align: top;
}
.plans-table th {
  background: var(--paper-2);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--ink-2);
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold);
}
.plans-table th:first-child, .plans-table td:first-child {
  position: sticky; left: 0;
  background: var(--paper);
  z-index: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  min-width: 220px;
  width: 220px;
}
.plans-table th:first-child { background: var(--paper-2); }
.plans-table td.is-highlight,
.plans-table th.is-highlight {
  background: rgba(14, 90, 60, 0.08);
}
.plans-table td.dash {
  color: var(--muted); text-decoration: line-through;
}

.plans-pricemath {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.plans-pm {
  padding: 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
}
.plans-pm-best::after {
  content: "BEST"; position: absolute; top: -10px; right: 20px;
  background: var(--gold); color: var(--ivy-deep);
  padding: 4px 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em;
}
.plans-pm-name {
  font-family: var(--serif-display); font-size: 22px;
}
.plans-pm-unit {
  font-family: var(--serif-display); font-style: italic;
  font-size: 36px; color: var(--ivy); margin-top: 12px;
  line-height: 1;
}
.plans-pm-unit-lab {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--muted);
  margin-top: 6px;
}
.plans-pm-save {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--gold);
  margin-top: 16px;
  font-size: 15px;
}

.plans-addons {
  margin-top: 80px;
}
.plans-addons-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 32px;
}
.plans-addon {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex; gap: 18px;
}
.plans-addon-icon {
  width: 56px; height: 80px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--serif-display);
  color: var(--gold);
  font-size: 28px;
  flex-shrink: 0;
}
.plans-addon-name {
  font-family: var(--serif-display); font-size: 19px;
}
.plans-addon-price {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--gold);
  margin-top: 6px;
}
.plans-addon-desc {
  font-size: 14px; color: var(--ink-2); margin-top: 12px;
  line-height: 1.55;
}

.plans-policies {
  margin-top: 80px;
}
.plans-policies-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 32px;
}
.plans-policy {
  padding: 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.plans-policy-num {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--gold);
}
.plans-policy-title {
  font-family: var(--serif-display); font-size: 19px;
  margin-top: 10px;
}
.plans-policy-body {
  font-size: 14px; color: var(--ink-2);
  margin-top: 10px; line-height: 1.6;
}

/* ====================================================================
   GAOKAO PAGE
   ==================================================================== */
.gaokao-modes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 64px;
}
.gaokao-mode {
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 4px;
}
.gaokao-mode-code {
  font-family: var(--serif-display); font-style: italic;
  font-size: 40px; color: var(--ivy);
  line-height: 1;
}
.gaokao-mode-desc {
  margin-top: 18px; font-size: 15px; line-height: 1.6;
  color: var(--ink-2);
}
.gaokao-mode-regions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px;
}

.gaokao-combos-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 32px;
}
.gaokao-combo {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.gaokao-combo-subjects {
  display: flex; gap: 8px;
}
.gaokao-combo-subj {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-family: var(--serif-display);
  font-size: 18px;
  background: var(--ivy);
  color: var(--paper);
  border-radius: 4px;
}
.gaokao-combo.gold .gaokao-combo-subj { background: var(--gold); color: var(--ivy-deep); }
.gaokao-combo.burgundy .gaokao-combo-subj { background: var(--burgundy); }
.gaokao-combo-fit {
  font-family: var(--serif-display);
  font-size: 18px;
  margin-top: 18px;
}
.gaokao-combo-level {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em;
  margin-top: 6px;
  color: var(--muted);
}
.gaokao-combo-bar {
  margin-top: 18px;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.gaokao-combo-bar-fill {
  height: 100%;
  background: var(--ivy);
  border-radius: 3px;
}
.gaokao-combo.gold .gaokao-combo-bar-fill { background: var(--gold); }
.gaokao-combo.burgundy .gaokao-combo-bar-fill { background: var(--burgundy); }
.gaokao-combo-pct {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--muted);
  margin-top: 8px;
}

.gaokao-timeline-wrap {
  margin-top: 80px;
  position: relative;
}
.gaokao-timeline {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
}
.gaokao-timeline::before {
  content: ""; position: absolute;
  top: 20px; left: 30px; right: 30px;
  height: 1px; background: var(--gold);
  z-index: 0;
}
.gaokao-tl-card {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  margin-top: 36px;
}
.gaokao-tl-dot {
  position: absolute;
  top: -36px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--paper);
  z-index: 1;
}
.gaokao-tl-grade {
  font-family: var(--serif-display); font-size: 18px;
  color: var(--ivy);
}
.gaokao-tl-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold);
}
.gaokao-tl-themes {
  margin-top: 14px;
  font-size: 13.5px; color: var(--ink-2);
  line-height: 1.55;
}
.gaokao-tl-milestones {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; color: var(--muted);
}

.gaokao-special-section {
  margin-top: 80px;
  background: var(--ivy-deep);
  color: var(--paper);
  padding: 64px;
  border-radius: 4px;
}
.gaokao-special-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; margin-top: 40px;
}
.gaokao-special-card {
  padding: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
}
.gaokao-special-name {
  font-family: var(--serif-display); font-size: 24px;
  color: var(--paper);
}
.gaokao-special-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(168,124,52,0.3);
}
.gaokao-special-stat-num {
  font-family: var(--serif-display); font-style: italic;
  font-size: 28px;
  color: var(--gold-soft);
}

.gaokao-advisors {
  margin-top: 80px;
}
.gaokao-advisors-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 32px;
}
.gaokao-advisor {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.gaokao-advisor-head {
  display: flex; gap: 18px; align-items: center;
}
.gaokao-advisor-name {
  font-family: var(--serif-display); font-size: 22px;
}
.gaokao-advisor-title {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold);
  margin-top: 6px;
}

/* ====================================================================
   ACADEMY PAGE
   ==================================================================== */
.academy-page-header {
  display: grid; grid-template-columns: 1fr auto;
  gap: 64px;
  padding-top: 96px; padding-bottom: 64px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.academy-mission-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 64px;
}
.academy-mission-text {
  grid-column: span 1;
}
.academy-mission-item {
  border-left: 2px solid var(--gold);
  padding-left: 20px;
}
.academy-mission-item-title {
  font-family: var(--serif-display); font-size: 22px;
  color: var(--ivy);
}
.academy-mission-item-desc {
  font-size: 14.5px; color: var(--ink-2);
  margin-top: 8px; line-height: 1.6;
}

.committee-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.committee-card {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.committee-head {
  display: flex; gap: 18px; align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.committee-name {
  font-family: var(--serif-display); font-size: 24px;
}
.committee-title {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold);
  margin-top: 6px;
}
.committee-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 18px;
}
.committee-area {
  font-family: var(--serif-display);
  font-style: italic; font-size: 14px;
  color: var(--ink-2);
  margin-top: 14px;
  line-height: 1.6;
}

.academy-pipeline-section {
  background: var(--ivy-deep);
  color: var(--paper);
  padding: 80px 0;
  margin-top: 80px;
}
.academy-pipeline {
  position: relative;
  margin-top: 48px;
  padding-left: 60px;
}
.academy-pipeline::before {
  content: ""; position: absolute;
  left: 22px; top: 0; bottom: 20px;
  width: 1px; background: var(--gold);
}
.pipeline-step {
  position: relative;
  padding: 24px 0;
  border-bottom: 1px solid rgba(168,124,52,0.2);
}
.pipeline-step::before {
  content: ""; position: absolute;
  left: -45px; top: 30px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--ivy-deep);
  box-shadow: 0 0 0 4px rgba(212,166,74,0.2);
}
.pipeline-step-name {
  font-family: var(--serif-display); font-size: 24px;
  color: var(--paper);
}
.pipeline-step-desc {
  margin-top: 10px; font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6; max-width: 600px;
}
.pipeline-step-filter {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold-soft);
  margin-top: 10px;
}

.academy-pubs {
  margin-top: 80px;
}
.academy-pubs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; margin-top: 32px;
}
.academy-pub {
  display: flex; gap: 20px; align-items: center;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.academy-pub-spine {
  width: 56px; height: 80px;
  background: var(--ivy);
  display: grid; place-items: center;
  color: var(--gold-soft);
  font-family: var(--serif-display);
  font-size: 24px;
  flex-shrink: 0;
}
.academy-pub-title {
  font-family: var(--serif-display); font-size: 18px;
  line-height: 1.4;
}
.academy-pub-meta {
  display: flex; gap: 16px;
  margin-top: 10px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--muted);
}

.academy-licenses {
  margin-top: 80px;
  padding-bottom: 80px;
}
.academy-licenses-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 32px;
}
.academy-license {
  padding: 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.academy-license-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px dashed var(--gold);
  display: grid; place-items: center;
  font-family: var(--serif-display);
  color: var(--gold);
  font-size: 20px;
}
.academy-license-code {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold);
  margin-top: 16px;
}
.academy-license-name {
  font-family: var(--serif-display); font-size: 18px;
  margin-top: 6px;
}
.academy-license-num {
  font-family: var(--mono); font-size: 12px;
  color: var(--muted); margin-top: 10px;
  letter-spacing: 0.06em;
}
.academy-license-issuer {
  font-size: 13px; color: var(--ink-2);
  margin-top: 8px;
  font-family: var(--serif-display);
  font-style: italic;
}

/* ====================================================================
   STORIES PAGE
   ==================================================================== */
.stories-page-header {
  padding-top: 80px; padding-bottom: 48px;
}
.stories-kpi-strip {
  background: var(--ivy);
  color: var(--paper);
  padding: 32px 48px;
  margin-top: 40px;
  border-radius: 4px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stories-kpi-val {
  font-family: var(--serif-display);
  font-size: 44px; color: var(--paper);
  font-style: italic; line-height: 1;
}
.stories-kpi-lab {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold-soft);
  margin-top: 8px;
}

.stories-featured {
  margin-top: 80px;
  display: flex; flex-direction: column; gap: 32px;
}
.stories-feature {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 32px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.stories-feature.cream { background: var(--paper-2); }
.stories-feature-left .name {
  font-family: var(--serif-display); font-size: 26px;
  margin-top: 16px;
}
.stories-feature-left .stage {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--gold);
  margin-top: 8px;
}
.stories-feature-left .school {
  font-family: var(--serif-display);
  font-style: italic; color: var(--ink-2);
  margin-top: 8px;
}
.stories-feature-teachers {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--muted);
  line-height: 1.8;
}
.stories-feature-mid blockquote {
  margin: 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
}
.stories-feature-right {
  background: var(--ivy);
  color: var(--paper);
  border-radius: 4px;
  padding: 28px;
}
.stories-feature-delta-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(168,124,52,0.2);
}
.stories-feature-before {
  font-family: var(--serif-display);
  font-size: 28px;
  text-decoration: line-through;
  color: rgba(255,255,255,0.5);
}
.stories-feature-after {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 36px;
  color: var(--gold-soft);
}
.stories-feature-diff {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-top: 16px;
}

.stories-admissions {
  margin-top: 80px;
}
.stories-admissions-list {
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.stories-admission-row {
  display: grid;
  grid-template-columns: 60px 1fr 2fr 1fr;
  gap: 20px;
  padding: 16px 24px;
  align-items: center;
  border-top: 1px solid var(--line);
}
.stories-admission-row:first-child { border-top: none; }
.stories-admission-row.head {
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}
.stories-admission-no {
  font-family: var(--mono); font-size: 12px;
  color: var(--gold);
}
.stories-admission-name {
  font-family: var(--serif-display); font-size: 16px;
}
.stories-admission-school {
  font-family: var(--serif-display); font-size: 16px;
  color: var(--ivy);
}
.stories-admission-entry {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.stories-schools-grid {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stories-school {
  padding: 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.stories-school-name {
  font-family: var(--serif-display); font-size: 17px;
}
.stories-school-count {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 28px;
  color: var(--ivy);
  margin-top: 10px;
  line-height: 1;
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 1100px) {
  .hero-grid,
  .pathway-grid,
  .classroom-grid,
  .effect-grid,
  .parent-grid,
  .testi-grid,
  .faq-grid,
  .cta-banner-grid,
  .academy-preview-grid,
  .report-radar-section,
  .report-pkg,
  .course-detail-grid,
  .booking-page-grid,
  .diag-intro-grid,
  .diag-academic-grid,
  .diag-matching,
  .academy-page-header,
  .dash-page-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid,
  .press-grid,
  .gaokao-timeline,
  .dash-upcoming-grid,
  .plans-cards,
  .stories-feature {
    grid-template-columns: repeat(2, 1fr);
  }
  .teachers-grid,
  .modes-grid,
  .public-classes,
  .packages-preview-grid,
  .gaokao-preview,
  .stories-strip,
  .courses-grid,
  .academy-preview-grid-cards,
  .gaokao-modes-grid,
  .gaokao-combos-grid,
  .gaokao-advisors-grid,
  .gaokao-special-grid,
  .committee-grid,
  .report-tldr,
  .report-heatmap-grid,
  .report-habits-grid,
  .report-match-grid,
  .stories-schools-grid,
  .academy-licenses-grid,
  .plans-addons-grid,
  .plans-policies-grid,
  .academy-pubs-grid,
  .plans-pricemath,
  .academy-mission-grid,
  .booking-teachers,
  .diag-form-fields {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid .stat-item + .stat-item { border-left: none; padding-left: 0; }
  .booking-aside, .course-purchase-card, .testi-left, .faq-left, .dash-sidebar, .diag-intro-aside, .diag-quiz-side { position: static; }
  .hero-collage { min-height: auto; }
  .collage-portrait, .collage-info, .collage-ribbon, .collage-sticker { position: static; transform: none; width: auto; height: auto; margin-bottom: 20px; }
}
@media (max-width: 700px) {
  .stats-grid,
  .press-grid,
  .teachers-grid,
  .modes-grid,
  .gaokao-timeline,
  .gaokao-modes-grid,
  .gaokao-combos-grid,
  .gaokao-advisors-grid,
  .gaokao-special-grid,
  .committee-grid,
  .report-tldr,
  .report-heatmap-grid,
  .report-habits-grid,
  .report-match-grid,
  .stories-schools-grid,
  .academy-licenses-grid,
  .stories-feature,
  .stories-admission-row,
  .booking-teachers,
  .booking-calendar,
  .courses-grid,
  .public-classes,
  .packages-preview-grid,
  .stories-strip,
  .gaokao-preview,
  .dash-upcoming-grid,
  .plans-cards,
  .plans-addons-grid,
  .plans-policies-grid,
  .academy-pubs-grid,
  .plans-pricemath,
  .academy-mission-grid,
  .diag-form-fields,
  .academy-preview-grid-cards {
    grid-template-columns: 1fr;
  }
  .gaokao-timeline::before { display: none; }
  .gaokao-tl-dot { display: none; }
  .booking-calendar { grid-template-columns: 1fr; }
  .booking-cal-head { text-align: left; padding: 12px 16px; }
}

/* ====================================================================
   NEW SECTIONS v2 — Tagline strip · K12 Loop · Subject Frameworks · Brand Pillars
   ==================================================================== */

/* ---- A. Hero Tagline Strip ---- */
.hero-tagline-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px var(--pad-x);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--serif-display);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.hero-tagline-text em {
  font-style: italic;
  color: var(--ivy);
}
.hero-tagline-sparkle {
  color: var(--gold);
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* ---- B. K12 Learning Loop ---- */
.k12-loop-section {
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}

/* Clock-tower watermark */
.k12-loop-watermark {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.06;
  color: var(--ivy-deep);
  pointer-events: none;
  z-index: 0;
}

/* Title sparkle via pseudo-elements */
.k12-loop-title::before,
.k12-loop-title::after {
  content: "✦";
  font-family: var(--mono);
  font-size: 0.45em;
  color: var(--gold);
  font-style: normal;
  vertical-align: middle;
  line-height: 1;
}
.k12-loop-title::before { margin-right: 14px; }
.k12-loop-title::after  { margin-left: 14px; }

/* 3×2 grid */
.k12-loop-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}

.k12-step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.k12-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(14,90,60,0.09);
}

.k12-step-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.k12-step-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ivy);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 500;
  flex-shrink: 0;
}
.k12-step-icon {
  width: 36px;
  height: 36px;
  color: var(--ivy);
  flex-shrink: 0;
}
.k12-step-title {
  font-family: var(--serif-display);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
}
.k12-step-sub {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Bottom plaque */
.k12-plaque {
  position: relative;
  z-index: 1;
  margin-top: 56px;
}
.k12-plaque-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--ivy);
  color: var(--paper);
  padding: 22px 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--ivy-deep);
}
.k12-plaque-quote {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 18px;
  color: var(--cream);
  letter-spacing: 0.01em;
  text-align: center;
}
.k12-plaque-laurel {
  color: var(--gold);
  font-size: 22px;
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
}

/* ---- C. Subject Frameworks ---- */
.subject-frameworks-section {
  background: var(--paper);
}

/* Title sparkle */
.subject-frameworks-title::before,
.subject-frameworks-title::after {
  content: "✦";
  font-family: var(--mono);
  font-size: 0.45em;
  color: var(--gold);
  font-style: normal;
  vertical-align: middle;
  line-height: 1;
}
.subject-frameworks-title::before { margin-right: 14px; }
.subject-frameworks-title::after  { margin-left: 14px; }

.subject-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.subject-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: var(--paper-2);
}

.subject-card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.subject-card-title {
  font-family: var(--serif-display);
  font-size: clamp(24px, 2vw, 32px);
  color: var(--ink);
  margin: 4px 0 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.subject-card-tagline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
}

/* 3-stage pillars */
.subject-stages {
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.subject-stage {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid var(--line);
}
.subject-stage:last-child { border-right: none; }
.subject-stage-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivy);
  margin-bottom: 4px;
}
.subject-stage-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--serif-body);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.subject-stage-arrow {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 16px;
  padding: 16px 2px;
  align-self: center;
  flex-shrink: 0;
}

/* 4-step flow row */
.subject-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.subject-flow-step {
  font-family: var(--serif-display);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  white-space: nowrap;
}
.subject-flow-arrow {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 14px;
  flex-shrink: 0;
  padding: 0 2px;
}

/* Bottom italic tagline */
.subject-card-quote {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 16px;
  line-height: 1.5;
}

/* Colour accent: eng card top border */
.subject-card-eng { border-top: 3px solid var(--ivy); }
.subject-card-mat { border-top: 3px solid var(--gold); }

/* ---- D. Brand Pillars Strip ---- */
.brand-pillars-strip {
  background: var(--ivy-deep);
  color: var(--paper);
  padding: 64px 0 56px;
  border-top: 1px solid rgba(168,124,52,0.25);
}
.brand-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.brand-pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 0;
}
.brand-pillar + .brand-pillar {
  padding-left: 40px;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.brand-pillar-icon {
  color: var(--gold);
  margin-bottom: 4px;
}
.brand-pillar-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.brand-pillar-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--serif-body);
  font-size: 15px;
  color: var(--cream);
  line-height: 1.5;
  opacity: 0.9;
}
.brand-pillars-tagline {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(168,124,52,0.25);
  text-align: center;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}

/* ---- Mobile responsive (≤ 880px) for new sections ---- */
@media (max-width: 880px) {
  .k12-loop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .subject-cards-grid {
    grid-template-columns: 1fr;
  }
  .brand-pillars-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .brand-pillar + .brand-pillar {
    padding-left: 0;
    border-left: none;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .subject-stages {
    flex-direction: column;
  }
  .subject-stage {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .subject-stage:last-child { border-bottom: none; }
  .subject-stage-arrow {
    display: none;
  }
  .k12-loop-watermark {
    display: none;
  }
  .k12-plaque-inner {
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .k12-loop-grid {
    grid-template-columns: 1fr;
  }
  .hero-tagline-strip {
    font-size: 14px;
    padding: 8px 16px;
  }
}

/* ====================================================================
   NEW SECTIONS v3 — Sample Feedback · Case Studies · Parent Chat · Trial Booking
   ==================================================================== */

/* ---- A. Sample Feedback Report ---- */
.feedback-section {
  background: var(--paper-2);
}

.feedback-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 48px 52px 40px;
}

.feedback-card-title {
  font-family: var(--serif-display);
  font-size: clamp(26px, 2.4vw, 36px);
  color: var(--ink);
  text-align: center;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.feedback-card-title-bracket {
  color: var(--gold);
  font-style: normal;
  font-size: 0.75em;
  vertical-align: middle;
}

.feedback-card-lede {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: 10px 0 32px;
  font-style: italic;
  letter-spacing: 0.01em;
}

.feedback-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.feedback-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--line);
}
.feedback-row:last-child {
  border-bottom: none;
}

.feedback-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.feedback-label {
  font-family: var(--serif-display);
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 72px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
  margin-right: 4px;
  line-height: 1.55;
}

.feedback-value {
  font-family: var(--serif-body);
  font-size: 15px;
  font-style: italic;
  color: var(--ivy);
  line-height: 1.55;
  flex: 1;
}

.feedback-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.feedback-foot-teacher {
  font-family: var(--serif-display);
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
}

.feedback-stamp {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

/* ---- B. Case Studies ---- */
.case-studies-section {
  background: var(--paper);
}

.case-studies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 8px;
}

.case-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-ribbon {
  display: inline-block;
  background: var(--ivy);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  align-self: flex-start;
}

.case-header {
  font-family: var(--serif-display);
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink);
  line-height: 1.2;
}
.case-header .arrow-ivy {
  color: var(--gold);
  font-style: normal;
  margin: 0 4px;
}

.case-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.case-stat-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-stat-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.case-stat-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.case-stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-transform: uppercase;
}

.case-stat-text {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}

.case-chart {
  flex-shrink: 0;
  width: 110px;
}

.case-progress {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.case-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ivy);
  flex-shrink: 0;
}

.case-progress-line {
  flex: 1;
  height: 1px;
  background: var(--gold);
  position: relative;
}

.case-progress-mid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper-2);
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}

.case-progress-end {
  font-family: var(--serif-display);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.case-progress-start {
  font-family: var(--serif-display);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- C. Parent Chat (WeChat style) ---- */
.parent-chat-section {
  background: var(--paper-2);
}

.chat-phones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 8px;
}

.chat-phone {
  background: var(--ink);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(14,90,60,0.13);
}

.chat-status-bar {
  background: var(--ink);
  color: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.chat-status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-header {
  background: #f5f5f5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.chat-header-back {
  color: var(--ivy);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--sans);
}

.chat-header-name {
  flex: 1;
  text-align: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.chat-header-menu {
  color: var(--muted);
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 0.8;
}

.chat-body {
  background: #ededed;
  flex: 1;
  padding: 10px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.chat-date-stamp {
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  color: #888;
  margin: 2px 0 4px;
}

.chat-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.chat-bubble-row.teacher {
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
}

.chat-bubble {
  max-width: 68%;
  padding: 8px 11px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
}

.chat-bubble.parent {
  background: #fff;
  color: var(--ink);
  border-top-left-radius: 2px;
}

.chat-bubble.teacher {
  background: var(--ivy);
  color: var(--paper);
  border-top-right-radius: 2px;
}

.chat-input-bar {
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  gap: 8px;
  flex-shrink: 0;
}

.chat-input-icon {
  color: #888;
  font-size: 18px;
  line-height: 1;
}

.chat-input-field {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  height: 28px;
  border: 1px solid #e0e0e0;
}

.chat-bottom-plaque {
  margin-top: 48px;
}

/* ---- D. Trial Booking (CTA redesign) ---- */
.trial-booking-section {
  background: var(--paper);
}

.trial-booking-title {
  font-family: var(--serif-display);
  font-size: clamp(48px, 6vw, 88px);
  color: var(--ink);
  text-align: center;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.trial-booking-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--serif-display);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-2);
  text-align: center;
  margin-bottom: 56px;
}

.trial-booking-subtitle .laurel {
  color: var(--gold);
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}

.trial-icons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 0 auto 64px;
}

.trial-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.trial-icon-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--ivy);
  display: grid;
  place-items: center;
  color: var(--paper);
  flex-shrink: 0;
}

.trial-icon-circle svg {
  width: 32px;
  height: 32px;
}

.trial-icon-name {
  font-family: var(--serif-display);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.2;
}

.trial-icon-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.trial-booking-band {
  background: var(--ivy-deep);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 48px;
  gap: 32px;
}

.trial-band-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trial-band-title {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 28px;
  color: var(--gold);
  line-height: 1.1;
}

.trial-band-sub {
  font-family: var(--serif-body);
  font-size: 15px;
  color: var(--paper-2);
  opacity: 0.85;
}

.trial-band-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.trial-qr {
  width: 110px;
  height: 110px;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.trial-qr-grid {
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 11px, var(--ink) 11px, var(--ink) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, var(--ink) 11px, var(--ink) 12px);
  opacity: 0.18;
}

.trial-qr-corners::before,
.trial-qr-corners::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid var(--ink);
}
.trial-qr-corners::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.trial-qr-corners::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.trial-qr-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--paper-2);
  text-align: center;
  opacity: 0.75;
  text-transform: uppercase;
}

.trial-booking-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ivy);
}

.trial-booking-signature .laurel {
  color: var(--gold);
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}

/* ---- v3 Mobile responsive ---- */
@media (max-width: 880px) {
  .case-studies-grid {
    grid-template-columns: 1fr;
  }
  .chat-phones-grid {
    grid-template-columns: 1fr;
  }
  .trial-icons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trial-booking-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
  .trial-band-right {
    align-self: center;
  }
  .feedback-card {
    padding: 32px 28px 28px;
  }
  .case-body {
    flex-direction: column;
  }
  .case-chart {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .trial-icons-grid {
    grid-template-columns: 1fr;
  }
  .trial-booking-band {
    padding: 24px 18px;
  }
  .feedback-label {
    min-width: 60px;
  }
}