/* Product matrix visual polish */
html body main #moral-ecosystem.moral-ecosystem-section {
  min-height: 100vh !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: clamp(88px, 6vw, 128px) 7vw !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 0.9fr) minmax(620px, 1.1fr) !important;
  gap: clamp(42px, 5vw, 78px) !important;
  align-items: center !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(118, 185, 0, 0.18), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(18, 214, 223, 0.14), transparent 32%),
    linear-gradient(90deg, rgba(118, 185, 0, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 214, 223, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #05090f 0%, #07141b 54%, #0b241d 100%) !important;
  background-size: auto, auto, 48px 48px, 48px 48px, auto !important;
}

html body main #moral-ecosystem.moral-ecosystem-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(5, 9, 15, 0.92));
  pointer-events: none;
}

html body main #moral-ecosystem.moral-ecosystem-section > * {
  position: relative;
  z-index: 1;
}

html body main #moral-ecosystem .product-copy {
  max-width: 650px !important;
}

html body main #moral-ecosystem .feature-list {
  display: grid !important;
  gap: 18px !important;
  margin-top: 34px !important;
}

html body main #moral-ecosystem .feature-list li {
  margin: 0 !important;
}

html body main #moral-ecosystem .moral-command-grid {
  align-self: stretch !important;
  grid-template-rows: repeat(2, minmax(170px, 1fr)) auto !important;
  gap: 18px !important;
}

html body main #moral-ecosystem .moral-terminal-card {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(22px, 2.2vw, 32px) !important;
}

html body main #moral-ecosystem .moral-agent-loop {
  margin-top: 0 !important;
  align-items: center !important;
}

html body main #moral-ecosystem .moral-practice-proof {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 0.72fr) minmax(520px, 1.28fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-top: 8px !important;
  padding: 18px !important;
  border: 1px solid rgba(118, 185, 0, 0.24) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(118, 185, 0, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(5, 13, 18, 0.86) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28) !important;
}

html body main #moral-ecosystem .moral-practice-copy {
  display: grid !important;
  align-content: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 8px 4px 8px 8px !important;
}

html body main #moral-ecosystem .moral-practice-copy h3 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 32px !important;
  line-height: 1.16 !important;
}

html body main #moral-ecosystem .moral-practice-copy p:not(.eyebrow) {
  margin: 0 !important;
  color: #d9e8f4 !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
}

html body main #moral-ecosystem .moral-practice-copy ul {
  display: grid !important;
  gap: 8px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body main #moral-ecosystem .moral-practice-copy li {
  margin: 0 !important;
  padding: 11px 12px !important;
  color: #e9f5ff !important;
  font-size: 14px !important;
  line-height: 1.52 !important;
  border: 1px solid rgba(217, 232, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

html body main #moral-ecosystem .moral-practice-photo {
  display: grid !important;
  grid-template-rows: clamp(360px, 28vw, 520px) auto !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(4, 10, 14, 0.7) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.26) !important;
}

html body main #moral-ecosystem .moral-practice-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body main #moral-ecosystem .moral-practice-photo figcaption {
  margin: 0 !important;
  padding: 0 2px 12px !important;
  color: #bcd0de !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html body main #ai-recorder.unified-product-page > .recorder-page-nav {
  margin: 0 0 28px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(217, 232, 255, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body main #ai-recorder.unified-product-page .recorder-output-strip {
  gap: 10px !important;
}

html body main #ai-recorder.unified-product-page .recorder-output-strip > span {
  display: grid !important;
  grid-template-columns: minmax(92px, 0.42fr) 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  justify-items: start !important;
  text-align: left !important;
  min-height: 70px !important;
}

html body main #ai-recorder.unified-product-page .recorder-output-strip strong {
  justify-self: start !important;
  text-align: left !important;
  line-height: 1.18 !important;
}

html body main #ai-recorder.unified-product-page .recorder-output-strip em {
  justify-self: start !important;
  text-align: left !important;
  margin: 0 !important;
}

html body main #exam .exam-media-showcase,
html body main #cug .cug-media-showcase,
html body main #lms .lms-media-showcase,
html body main #steam-pbl .steam-media-showcase,
html body main #teacher-pd .teacher-media-showcase,
html body main #qinghe-bank .qinghe-media-showcase,
html body main #factory .factory-media-showcase {
  position: relative !important;
  display: grid !important;
  gap: clamp(12px, 1.3vw, 18px) !important;
  align-items: stretch !important;
  min-height: clamp(330px, 30vw, 480px) !important;
  padding: clamp(16px, 1.8vw, 26px) !important;
  border: 1px solid rgba(18, 214, 223, 0.18) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 240, 190, 0.12), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(18, 214, 223, 0.15), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)) !important;
}

html body main #exam .exam-ai-panel {
  padding: clamp(18px, 1.7vw, 26px) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 84% 18%, rgba(18, 214, 223, 0.18), transparent 32%),
    radial-gradient(circle at 24% 18%, rgba(118, 185, 0, 0.12), transparent 30%),
    rgba(5, 13, 24, 0.9) !important;
  background-size: 38px 38px, 38px 38px, auto, auto, auto !important;
}

html body main #exam .exam-panel-top {
  margin-bottom: 14px !important;
}

html body main #exam .exam-media-showcase {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.42fr) !important;
  grid-template-rows: minmax(190px, 1fr) minmax(190px, 1fr) !important;
  grid-template-areas:
    "task growth"
    "bank growth" !important;
  min-height: clamp(460px, 34vw, 600px) !important;
  padding: clamp(18px, 1.8vw, 28px) !important;
}

html body main #cug .cug-media-showcase {
  grid-template-columns: minmax(230px, 0.52fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(210px, 1fr) minmax(210px, 1fr) !important;
  grid-template-areas:
    "chat report"
    "form report" !important;
  min-height: clamp(500px, 36vw, 660px) !important;
  padding: clamp(18px, 1.8vw, 28px) !important;
}

html body main #lms .lms-media-showcase,
html body main #teacher-pd .teacher-media-showcase {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.9fr) minmax(150px, 0.54fr) !important;
}

html body main #steam-pbl .steam-media-showcase,
html body main #qinghe-bank .qinghe-media-showcase {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr) minmax(0, 0.82fr) !important;
}

html body main #factory .factory-media-showcase {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.68fr) !important;
  grid-template-rows: minmax(230px, 1fr) minmax(230px, 1fr) !important;
  grid-template-areas:
    "library ppt"
    "library video" !important;
  min-height: clamp(540px, 38vw, 690px) !important;
  padding: clamp(18px, 1.9vw, 30px) !important;
}

html body main #exam .product-media-showcase ~ .exam-orbit-stage,
html body main #cug .product-media-showcase ~ .exam-orbit-stage,
html body main #lms .product-media-showcase ~ .exam-orbit-stage,
html body main #steam-pbl .product-media-showcase ~ .exam-orbit-stage,
html body main #teacher-pd .product-media-showcase ~ .exam-orbit-stage,
html body main #qinghe-bank .product-media-showcase ~ .exam-orbit-stage,
html body main #factory .product-media-showcase ~ .exam-orbit-stage {
  display: none !important;
}

html body main .product-media-showcase .media-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(12px, 1.2vw, 18px) !important;
  border: 1px solid rgba(217, 232, 255, 0.13) !important;
  border-radius: 18px !important;
  background: rgba(4, 10, 16, 0.46) !important;
  overflow: hidden !important;
}

html body main .product-media-showcase .media-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-position: top center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(4, 9, 15, 0.88) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34) !important;
}

html body main .product-media-showcase .media-card:not(.media-card-photo) img,
html body main .product-media-showcase .media-card-phone img,
html body main .product-media-showcase .media-card-portrait img,
html body main .product-media-showcase .media-card-ultrawide img {
  object-fit: contain !important;
}

html body main .product-media-showcase .media-card-phone {
  justify-items: center !important;
}

html body main .product-media-showcase .media-card-phone img {
  width: min(100%, 190px) !important;
  aspect-ratio: 0.46 !important;
}

html body main .product-media-showcase .media-card-portrait img {
  width: min(100%, 210px) !important;
  margin: 0 auto !important;
}

html body main .product-media-showcase .media-card-ultrawide img {
  max-height: 210px !important;
}

html body main #cug .cug-media-showcase .media-card:nth-child(1) {
  grid-area: chat !important;
}

html body main #cug .cug-media-showcase .media-card:nth-child(2) {
  grid-area: form !important;
}

html body main #cug .cug-media-showcase .media-card:nth-child(3) {
  grid-area: report !important;
}

html body main #cug .cug-media-showcase .media-card-phone,
html body main #cug .cug-media-showcase .media-card-wide {
  justify-items: stretch !important;
}

html body main #cug .cug-media-showcase .media-card-phone img,
html body main #cug .cug-media-showcase .media-card-wide img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  object-fit: contain !important;
  object-position: top center !important;
  background: rgba(248, 250, 252, 0.98) !important;
}

html body main #cug .cug-media-showcase .media-card-wide img {
  padding: 14px !important;
}

html body main #exam .exam-media-showcase .media-card-ultrawide {
  grid-area: task !important;
}

html body main #exam .exam-media-showcase .media-card-wide {
  grid-area: bank !important;
}

html body main #exam .exam-media-showcase .media-card-portrait {
  grid-area: growth !important;
  align-content: stretch !important;
  padding: clamp(12px, 1.2vw, 18px) !important;
}

html body main #exam .exam-media-showcase .media-card-ultrawide img,
html body main #exam .exam-media-showcase .media-card-wide img {
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  background: rgba(248, 250, 252, 0.98) !important;
}

html body main #exam .exam-media-showcase .media-card-portrait img {
  width: min(100%, 270px) !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 10px !important;
  object-fit: contain !important;
  background: rgba(248, 250, 252, 0.98) !important;
}

html body main #exam .exam-live-feed {
  margin-top: 14px !important;
}

html body main #exam .exam-live-feed p {
  min-height: 92px !important;
  padding: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
}

html body main #exam > .exam-hero {
  grid-template-columns: 1fr !important;
  gap: clamp(18px, 2vw, 28px) !important;
  align-items: start !important;
  min-height: 0 !important;
}

html body main #exam > .exam-hero .product-copy {
  display: grid !important;
  grid-template-columns: minmax(520px, 0.96fr) minmax(340px, 0.58fr) !important;
  grid-template-areas:
    "eyebrow metrics"
    "title metrics"
    "body metrics"
    "flow flow"
    "feed feed" !important;
  column-gap: clamp(28px, 4vw, 72px) !important;
  row-gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

html body main #exam > .exam-hero .product-copy .eyebrow {
  grid-area: eyebrow !important;
}

html body main #exam > .exam-hero .product-copy h2 {
  grid-area: title !important;
  max-width: 980px !important;
}

html body main #exam > .exam-hero .product-copy > p:not(.eyebrow) {
  grid-area: body !important;
  max-width: 980px !important;
}

html body main #exam .exam-hero-metrics {
  grid-area: metrics !important;
  align-self: end !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  max-width: none !important;
  margin-top: 0 !important;
}

html body main #exam .exam-hero-metrics span {
  min-height: 0 !important;
  padding: 18px 20px !important;
}

html body main #exam .exam-hero-flow {
  grid-area: flow !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1px !important;
  max-width: none !important;
  margin-top: clamp(18px, 2vw, 26px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 214, 223, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(18, 214, 223, 0.18) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important;
}

html body main #exam .exam-hero-flow span {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 68px !important;
  padding: 14px 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    rgba(5, 13, 24, 0.82) !important;
}

html body main #exam .exam-hero-flow b {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(118, 185, 0, 0.48) !important;
  border-radius: 999px !important;
  color: #76b900 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body main #exam .exam-hero-flow strong {
  color: #f8fbff !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.2 !important;
}

html body main #exam .exam-hero-feed {
  grid-area: feed !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-width: none !important;
  margin-top: 10px !important;
}

html body main #exam .exam-hero-feed p {
  min-height: 86px !important;
  margin: 0 !important;
  padding: 16px 18px !important;
}

html body main #exam .exam-hero-feed b {
  display: block !important;
  color: #f8fbff !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

html body main #exam .exam-hero-feed span {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(214, 229, 245, 0.76) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html body main .product-media-showcase figcaption {
  display: grid !important;
  gap: 4px !important;
  min-height: 52px !important;
  color: #f8fbff !important;
  text-align: left !important;
}

html body main .product-media-showcase figcaption strong {
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.18 !important;
}

html body main .product-media-showcase figcaption span {
  color: rgba(214, 229, 245, 0.74) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body main #qinghe-bank .qinghe-media-showcase .media-card img {
  object-fit: cover !important;
  object-position: center !important;
}

html body main #qinghe-bank.unified-product-page > .exam-hero {
  grid-template-columns: 1fr !important;
  gap: clamp(22px, 2.2vw, 34px) !important;
}

html body main #qinghe-bank.unified-product-page > .exam-hero .product-copy {
  max-width: none !important;
}

html body main #qinghe-bank.unified-product-page .product-copy > p:not(.eyebrow) {
  max-width: 1120px !important;
}

html body main #qinghe-bank.unified-product-page .bank-economy-board {
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: clamp(16px, 1.6vw, 24px) !important;
}

html body main #qinghe-bank.unified-product-page .bank-economy-board .exam-panel-top {
  margin-bottom: clamp(14px, 1.4vw, 20px) !important;
}

html body main #qinghe-bank.unified-product-page .bank-economy-board .exam-live-feed {
  display: none !important;
}

html body main #qinghe-bank .qinghe-media-showcase {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body main #qinghe-bank .qinghe-media-showcase .media-card {
  grid-template-rows: minmax(260px, 1fr) auto !important;
  min-height: clamp(340px, 26vw, 430px) !important;
}

html body main #qinghe-bank .qinghe-media-showcase .media-card img {
  height: clamp(260px, 20vw, 340px) !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

html body main #qinghe-bank .qinghe-media-showcase figcaption {
  min-height: 78px !important;
}

html body main #cug.unified-product-page .cug-report-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:
    "chat form"
    "report history" !important;
  gap: clamp(16px, 1.4vw, 22px) !important;
  align-items: stretch !important;
}

html body main #cug.unified-product-page .cug-report-gallery .cug-screen-card,
html body main #cug.unified-product-page .cug-report-gallery .cug-guidance-form {
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid !important;
  grid-template-rows: minmax(320px, 1fr) auto !important;
  min-height: 0 !important;
  padding: clamp(14px, 1.25vw, 20px) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(18, 214, 223, 0.18) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 240, 190, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  overflow: hidden !important;
}

html body main #cug.unified-product-page .cug-report-gallery .cug-screen-card:nth-child(1) {
  grid-area: chat !important;
}

html body main #cug.unified-product-page .cug-report-gallery .cug-guidance-form {
  grid-area: form !important;
}

html body main #cug.unified-product-page .cug-report-gallery .cug-report-card {
  grid-area: report !important;
}

html body main #cug.unified-product-page .cug-report-gallery .cug-history-panel {
  grid-area: history !important;
}

html body main #cug.unified-product-page .cug-report-gallery img {
  display: block !important;
  width: 100% !important;
  height: clamp(320px, 28vw, 520px) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 12px !important;
  object-fit: contain !important;
  object-position: top center !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3) !important;
}

html body main #cug.unified-product-page .cug-report-gallery figcaption {
  align-self: start !important;
  min-height: 0 !important;
  padding: 14px 2px 0 !important;
  color: rgba(230, 241, 253, 0.9) !important;
  background: transparent !important;
}

html body main #factory .factory-media-showcase .media-card-ultrawide {
  grid-area: library !important;
}

html body main #factory .factory-media-showcase .media-card:nth-child(2) {
  grid-area: ppt !important;
}

html body main #factory .factory-media-showcase .media-card:nth-child(3) {
  grid-area: video !important;
}

html body main #factory .factory-media-showcase .media-card {
  min-height: 0 !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(118, 185, 0, 0.13), transparent 34%),
    rgba(4, 12, 18, 0.58) !important;
}

html body main #factory .factory-media-showcase .media-card img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 10px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(248, 250, 252, 0.98) !important;
}

html body main #factory.unified-product-page .factory-resource-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas: "micro courseware widget" !important;
  gap: clamp(16px, 1.45vw, 24px) !important;
  margin-top: 48px !important;
  align-items: stretch !important;
}

html body main #factory.unified-product-page .factory-resource-grid .factory-resource-card:nth-child(1) {
  grid-area: micro !important;
}

html body main #factory.unified-product-page .factory-resource-grid .factory-resource-card:nth-child(2) {
  grid-area: courseware !important;
}

html body main #factory.unified-product-page .factory-resource-grid .factory-resource-card:nth-child(3) {
  grid-area: widget !important;
}

html body main #factory.unified-product-page .factory-resource-grid .factory-resource-card {
  display: grid !important;
  grid-template-rows: minmax(300px, 1fr) auto !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: clamp(16px, 1.6vw, 24px) !important;
  border: 1px solid rgba(18, 214, 223, 0.2) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 16% 16%, rgba(118, 185, 0, 0.13), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(18, 214, 223, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.017)) !important;
  overflow: hidden !important;
}

html body main #factory.unified-product-page .factory-resource-grid .factory-resource-card-wide {
  grid-template-rows: minmax(260px, 0.9fr) auto !important;
}

html body main #factory.unified-product-page .factory-resource-grid img {
  display: block !important;
  width: 100% !important;
  height: clamp(300px, 24vw, 500px) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 12px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(248, 250, 252, 0.98) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3) !important;
}

html body main #factory.unified-product-page .factory-resource-grid .factory-resource-card-wide img {
  height: clamp(260px, 19vw, 420px) !important;
}

html body main #factory.unified-product-page .factory-resource-grid figcaption {
  align-self: start !important;
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: rgba(230, 241, 253, 0.9) !important;
  background: transparent !important;
  border: 0 !important;
}

html body main #ai-recorder.unified-product-page .recorder-live-stage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 18px !important;
  min-height: 0 !important;
  padding: clamp(18px, 1.8vw, 26px) !important;
}

html body main #ai-recorder.unified-product-page .recorder-device-showcase {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(170px, 0.82fr) minmax(190px, 1fr) minmax(170px, 0.82fr) !important;
  gap: clamp(16px, 2vw, 30px) !important;
  align-items: end !important;
  min-height: clamp(340px, 31vw, 480px) !important;
  padding: clamp(22px, 2.2vw, 34px) clamp(18px, 2vw, 30px) !important;
  border: 1px solid rgba(18, 214, 223, 0.18) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 240, 190, 0.14), transparent 26%),
    radial-gradient(circle at 76% 36%, rgba(18, 214, 223, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
}

html body main #ai-recorder.unified-product-page .recorder-device-showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 12% 6% auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(118, 185, 0, 0.62), transparent) !important;
  opacity: 0.62 !important;
}

html body main #ai-recorder.unified-product-page .recorder-phone {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  aspect-ratio: 1080 / 2341 !important;
  width: min(100%, 204px) !important;
  margin: 0 auto !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(244, 249, 255, 0.16), rgba(5, 10, 18, 0.82)) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 0 34px rgba(118, 185, 0, 0.14) !important;
  overflow: hidden !important;
}

html body main #ai-recorder.unified-product-page .recorder-phone-main {
  width: min(100%, 236px) !important;
  transform: none !important;
  box-shadow: 0 34px 88px rgba(0, 0, 0, 0.48), 0 0 46px rgba(255, 226, 156, 0.18) !important;
}

html body main #ai-recorder.unified-product-page .recorder-phone-secondary {
  transform: rotate(-2deg) !important;
}

html body main #ai-recorder.unified-product-page .recorder-phone-third {
  transform: rotate(2deg) !important;
}

html body main #ai-recorder.unified-product-page .recorder-phone img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 23px !important;
  padding: 0 !important;
  background: #050912 !important;
}

html body main #ai-recorder.unified-product-page .recorder-phone figcaption {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  display: grid !important;
  gap: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  color: #f8fbff !important;
  background: rgba(3, 8, 15, 0.78) !important;
  backdrop-filter: blur(12px) !important;
}

html body main #ai-recorder.unified-product-page .recorder-phone figcaption strong {
  font-size: 14px !important;
  line-height: 1.18 !important;
}

html body main #ai-recorder.unified-product-page .recorder-phone figcaption span {
  color: rgba(214, 229, 245, 0.72) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html body main #ai-recorder.unified-product-page .recorder-live-feed {
  position: static !important;
  display: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body main #ai-recorder.unified-product-page .recorder-live-feed p {
  position: static !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(217, 232, 255, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}

html body main #ai-recorder.unified-product-page .recorder-live-feed b,
html body main #ai-recorder.unified-product-page .recorder-live-feed span {
  position: static !important;
  display: block !important;
  transform: none !important;
}

html body main #ai-recorder.unified-product-page .recorder-evidence-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

html body main #ai-recorder.unified-product-page .recorder-shot-card {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: clamp(16px, 1.7vw, 24px) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(18, 214, 223, 0.18) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 240, 190, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  overflow: hidden !important;
}

html body main #ai-recorder.unified-product-page .recorder-shot-wide {
  grid-column: span 2 !important;
  grid-row: span 1 !important;
  grid-template-columns: minmax(210px, 0.48fr) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
}

html body main #ai-recorder.unified-product-page .recorder-shot-card img {
  display: block !important;
  width: min(78%, 230px) !important;
  height: auto !important;
  max-height: 520px !important;
  aspect-ratio: 1080 / 2341 !important;
  object-fit: contain !important;
  object-position: top center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: #050912 !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.38) !important;
}

html body main #ai-recorder.unified-product-page .recorder-shot-wide img {
  width: min(84%, 270px) !important;
  max-height: 560px !important;
}

html body main #ai-recorder.unified-product-page .recorder-shot-card figcaption {
  align-self: center !important;
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html body main #ai-recorder.unified-product-page .recorder-shot-card figcaption strong {
  color: #f8fbff !important;
  font-size: clamp(18px, 1.45vw, 24px) !important;
  line-height: 1.18 !important;
}

html body main #ai-recorder.unified-product-page .recorder-shot-card figcaption span {
  color: rgba(214, 229, 245, 0.76) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

html body main #ai-recorder.unified-product-page .recorder-live-share-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

html body main #ai-recorder.unified-product-page .recorder-live-share-grid span {
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  min-height: 118px !important;
  padding: 15px 16px !important;
  border: 1px solid rgba(118, 185, 0, 0.24) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 240, 190, 0.13), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html body main #ai-recorder.unified-product-page .recorder-live-share-grid b {
  color: #f8fbff !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.2 !important;
}

html body main #ai-recorder.unified-product-page .recorder-live-share-grid em {
  color: rgba(214, 229, 245, 0.78) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.52 !important;
}

@media (max-width: 960px) {
  html body main #moral-ecosystem.moral-ecosystem-section {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 76px 22px !important;
  }

  html body main #moral-ecosystem .moral-command-grid,
  html body main #ai-recorder.unified-product-page .recorder-output-strip > span {
    grid-template-columns: 1fr !important;
  }

  html body main #moral-ecosystem .moral-practice-proof {
    grid-template-columns: 1fr !important;
  }

  html body main #moral-ecosystem .moral-practice-copy {
    padding: 0 !important;
  }

  html body main #exam .exam-media-showcase,
  html body main #cug .cug-media-showcase,
  html body main #lms .lms-media-showcase,
  html body main #steam-pbl .steam-media-showcase,
  html body main #teacher-pd .teacher-media-showcase,
  html body main #qinghe-bank .qinghe-media-showcase,
  html body main #factory .factory-media-showcase {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  html body main #exam .exam-media-showcase {
    grid-template-areas: none !important;
    grid-template-rows: auto !important;
  }

  html body main #exam .exam-media-showcase .media-card {
    grid-area: auto !important;
  }

  html body main #exam > .exam-hero .product-copy {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "body"
      "metrics"
      "flow"
      "feed" !important;
  }

  html body main #exam .exam-hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: clamp(18px, 2vw, 24px) !important;
  }

  html body main #exam .exam-hero-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body main #exam .exam-hero-feed {
    grid-template-columns: 1fr !important;
  }

  html body main #cug .cug-media-showcase,
  html body main #cug.unified-product-page .cug-report-gallery,
  html body main #factory .factory-media-showcase,
  html body main #factory.unified-product-page .factory-resource-grid {
    grid-template-areas: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  html body main #cug .cug-media-showcase .media-card,
  html body main #cug.unified-product-page .cug-report-gallery .cug-screen-card,
  html body main #cug.unified-product-page .cug-report-gallery .cug-guidance-form,
  html body main #factory .factory-media-showcase .media-card,
  html body main #factory.unified-product-page .factory-resource-grid .factory-resource-card {
    grid-area: auto !important;
  }

  html body main #factory .factory-media-showcase .media-card img,
  html body main #factory.unified-product-page .factory-resource-grid img {
    height: auto !important;
    min-height: 0 !important;
  }

  html body main #ai-recorder.unified-product-page .recorder-device-showcase,
  html body main #ai-recorder.unified-product-page .recorder-live-feed,
  html body main #ai-recorder.unified-product-page .recorder-evidence-grid,
  html body main #ai-recorder.unified-product-page .recorder-shot-wide {
    grid-template-columns: 1fr !important;
  }

  html body main #ai-recorder.unified-product-page .recorder-device-showcase {
    min-height: 0 !important;
  }

  html body main #ai-recorder.unified-product-page .recorder-live-share-grid {
    grid-template-columns: 1fr !important;
  }

  html body main #ai-recorder.unified-product-page .recorder-phone,
  html body main #ai-recorder.unified-product-page .recorder-phone-main,
  html body main #ai-recorder.unified-product-page .recorder-phone-secondary,
  html body main #ai-recorder.unified-product-page .recorder-phone-third {
    width: min(72vw, 260px) !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  html body main #exam .exam-hero-metrics,
  html body main #exam .exam-hero-flow,
  html body main #exam .exam-hero-feed {
    grid-template-columns: 1fr !important;
  }
}

html body main #teacher-pd.unified-product-page > .exam-hero {
  grid-template-columns: 1fr !important;
  gap: clamp(20px, 2.4vw, 34px) !important;
  align-items: start !important;
  min-height: 0 !important;
}

html body main #teacher-pd.unified-product-page > .exam-hero .product-copy {
  display: grid !important;
  grid-template-columns: minmax(520px, 0.96fr) minmax(360px, 0.58fr) !important;
  grid-template-areas:
    "eyebrow metrics"
    "title metrics"
    "body metrics" !important;
  column-gap: clamp(30px, 4vw, 76px) !important;
  row-gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

html body main #teacher-pd.unified-product-page > .exam-hero .product-copy .eyebrow {
  grid-area: eyebrow !important;
}

html body main #teacher-pd.unified-product-page > .exam-hero .product-copy h2 {
  grid-area: title !important;
  max-width: 980px !important;
}

html body main #teacher-pd.unified-product-page > .exam-hero .product-copy > p:not(.eyebrow) {
  grid-area: body !important;
  max-width: 920px !important;
}

html body main #teacher-pd.unified-product-page .exam-hero-metrics {
  grid-area: metrics !important;
  align-self: end !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 0 !important;
  max-width: none !important;
}

html body main #teacher-pd.unified-product-page .exam-hero-metrics span {
  min-height: 0 !important;
  padding: 17px 18px !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-matrix {
  display: grid !important;
  gap: clamp(14px, 1.4vw, 20px) !important;
  width: 100% !important;
  padding: clamp(18px, 1.8vw, 28px) !important;
  overflow: hidden !important;
}

html body main #teacher-pd.unified-product-page .teacher-media-showcase {
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.64fr) minmax(180px, 0.34fr) !important;
  grid-template-rows: minmax(420px, 1fr) !important;
  grid-template-areas:
    "desktop record mobile" !important;
  min-height: clamp(430px, 31vw, 560px) !important;
  padding: clamp(18px, 1.8vw, 28px) !important;
}

html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card {
  align-content: stretch !important;
  background:
    radial-gradient(circle at 16% 16%, rgba(118, 185, 0, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)) !important;
}

html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card:nth-child(1) {
  grid-area: desktop !important;
}

html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card:nth-child(2) {
  grid-area: mobile !important;
}

html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card:nth-child(3) {
  grid-area: record !important;
}

html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  padding: 12px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(248, 250, 252, 0.98) !important;
}

html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card-phone {
  grid-template-rows: minmax(0, 1fr) auto !important;
  justify-items: center !important;
  align-content: stretch !important;
}

html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card-phone img {
  width: min(100%, 220px) !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 408 / 884 !important;
  align-self: center !important;
  margin: 0 auto !important;
  padding: 10px !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-panel {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.84fr) minmax(250px, 0.52fr) minmax(320px, 0.74fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: clamp(18px, 1.7vw, 26px) !important;
  border: 1px solid rgba(118, 185, 0, 0.25) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 240, 190, 0.13), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(18, 214, 223, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(118, 185, 0, 0.11), rgba(255, 255, 255, 0.035) 48%, rgba(18, 214, 223, 0.08)) !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-copy {
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-label {
  width: fit-content !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: #0b1720 !important;
  background: var(--green) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-copy h3 {
  margin: 0 !important;
  color: #f8fbff !important;
  font-size: clamp(22px, 1.8vw, 34px) !important;
  line-height: 1.15 !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-copy p {
  margin: 0 !important;
  color: rgba(214, 229, 245, 0.78) !important;
  font-size: clamp(14px, 0.98vw, 16px) !important;
  line-height: 1.7 !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-content: center !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-metrics span {
  display: grid !important;
  place-items: center !important;
  min-height: 58px !important;
  padding: 10px !important;
  border: 1px solid rgba(18, 214, 223, 0.18) !important;
  border-radius: 14px !important;
  color: #f8fbff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: center !important;
  background: rgba(5, 15, 24, 0.54) !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-output {
  display: grid !important;
  gap: 10px !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-output article {
  display: grid !important;
  gap: 5px !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(217, 232, 255, 0.13) !important;
  border-radius: 14px !important;
  background: rgba(5, 13, 22, 0.62) !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-output strong {
  color: #f8fbff !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-portrait-output span {
  color: rgba(214, 229, 245, 0.74) !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-gallery {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.4vw, 20px) !important;
  align-items: stretch !important;
  max-width: none !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen {
  display: grid !important;
  grid-template-rows: minmax(0, auto) auto !important;
  gap: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(5, 13, 22, 0.78) !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-elearning {
  grid-area: elearning !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-mobile {
  grid-area: mobile !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-record {
  grid-area: record !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-admin {
  grid-area: admin !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-stats {
  grid-area: stats !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-achievements {
  grid-area: auto !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-cpd {
  grid-area: auto !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen img {
  display: block !important;
  width: 100% !important;
  height: clamp(230px, 19vw, 360px) !important;
  max-height: none !important;
  padding: 12px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(248, 250, 252, 0.98) !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-wide img,
html body main #teacher-pd.unified-product-page .teacher-pd-screen-achievements img,
html body main #teacher-pd.unified-product-page .teacher-pd-screen-cpd img {
  height: clamp(300px, 23vw, 430px) !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-mobile {
  justify-items: center !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-mobile img {
  width: min(100%, 250px) !important;
  height: clamp(520px, 44vw, 720px) !important;
  aspect-ratio: 408 / 884 !important;
  padding: 10px !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen-record img {
  height: clamp(280px, 24vw, 430px) !important;
}

html body main #teacher-pd.unified-product-page .teacher-pd-screen figcaption {
  display: block !important;
  min-height: 0 !important;
  padding: 15px 17px !important;
  text-align: left !important;
  background: rgba(4, 12, 18, 0.82) !important;
}

@media (max-width: 1180px) {
  html body main #teacher-pd.unified-product-page > .exam-hero .product-copy {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "body"
      "metrics" !important;
  }

  html body main #teacher-pd.unified-product-page .teacher-pd-portrait-panel {
    grid-template-columns: 1fr !important;
  }

  html body main #teacher-pd.unified-product-page .teacher-pd-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
  }
}

@media (max-width: 820px) {
  html body main #teacher-pd.unified-product-page .teacher-media-showcase,
  html body main #teacher-pd.unified-product-page .teacher-pd-gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    min-height: 0 !important;
  }

  html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card,
  html body main #teacher-pd.unified-product-page .teacher-pd-screen {
    grid-area: auto !important;
  }

  html body main #teacher-pd.unified-product-page .teacher-pd-portrait-metrics {
    grid-template-columns: 1fr !important;
  }

  html body main #teacher-pd.unified-product-page .teacher-pd-screen img,
  html body main #teacher-pd.unified-product-page .teacher-pd-screen-wide img,
  html body main #teacher-pd.unified-product-page .teacher-pd-screen-achievements img,
  html body main #teacher-pd.unified-product-page .teacher-pd-screen-cpd img {
    height: auto !important;
    max-height: none !important;
  }

  html body main #teacher-pd.unified-product-page .teacher-pd-screen-mobile img,
  html body main #teacher-pd.unified-product-page .teacher-media-showcase .media-card-phone img {
    width: min(72vw, 250px) !important;
    height: auto !important;
  }
}

/* Compact CUG and AI resource factory product pages */
html body main #cug.unified-product-page,
html body main #factory.unified-product-page {
  padding-top: clamp(72px, 5vw, 96px) !important;
}

html body main #cug.unified-product-page > .exam-hero,
html body main #factory.unified-product-page > .exam-hero {
  grid-template-columns: minmax(360px, 0.78fr) minmax(620px, 1.22fr) !important;
  gap: clamp(22px, 3vw, 40px) !important;
  align-items: start !important;
}

html body main #cug.unified-product-page > .exam-hero > .product-copy,
html body main #factory.unified-product-page .factory-console {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
  position: static !important;
}

html body main #cug.unified-product-page .product-copy h2,
html body main #factory.unified-product-page .factory-console h2 {
  max-width: 720px !important;
}

html body main #cug.unified-product-page .product-copy > p:not(.eyebrow),
html body main #factory.unified-product-page .factory-console > p:not(.eyebrow) {
  max-width: 720px !important;
  margin-top: 18px !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

html body main #cug .cug-kpi-row,
html body main #factory .factory-output-tags {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

html body main #cug .cug-kpi-row span,
html body main #factory .factory-output-tags span {
  min-height: 0 !important;
  padding: 14px 16px !important;
}

html body main #cug .cug-product-stage,
html body main #factory .factory-studio {
  align-content: start !important;
  min-height: 0 !important;
  padding: 16px !important;
}

html body main #cug .cug-media-showcase {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  grid-template-rows: minmax(150px, 1fr) minmax(150px, 1fr) !important;
  min-height: clamp(360px, 28vw, 500px) !important;
  padding: 14px !important;
  gap: 12px !important;
  border-radius: 14px !important;
}

html body main #factory .factory-media-showcase {
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.72fr) !important;
  grid-template-rows: minmax(165px, 1fr) minmax(165px, 1fr) !important;
  min-height: clamp(380px, 30vw, 520px) !important;
  padding: 14px !important;
  gap: 12px !important;
  border-radius: 14px !important;
}

html body main #cug .cug-media-showcase .media-card,
html body main #factory .factory-media-showcase .media-card {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 12px !important;
}

html body main #cug .cug-media-showcase .media-card img,
html body main #factory .factory-media-showcase .media-card img {
  border-radius: 9px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

html body main #factory .factory-media-showcase .media-card-ultrawide img {
  max-height: none !important;
}

html body main #cug .cug-media-showcase figcaption,
html body main #factory .factory-media-showcase figcaption {
  min-height: 0 !important;
  padding: 0 2px 2px !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

html body main #cug .cug-media-showcase {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(250px, 1fr) !important;
  grid-template-areas: "chat form report" !important;
  min-height: clamp(310px, 24vw, 420px) !important;
}

html body main #cug .cug-media-showcase .media-card {
  align-content: start !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

html body main #cug .cug-media-showcase .media-card img {
  background: rgba(7, 12, 18, 0.92) !important;
}

html body main #cug .cug-media-showcase .media-card-wide {
  align-content: stretch !important;
}

html body main #cug .cug-media-showcase .media-card-wide img {
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: top center !important;
}

html body main #factory .factory-media-showcase {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(150px, 0.64fr) minmax(190px, 1fr) !important;
  grid-template-areas:
    "library library"
    "ppt video" !important;
  min-height: clamp(360px, 25vw, 480px) !important;
}

html body main #factory .factory-media-showcase .media-card {
  align-content: start !important;
}

html body main #factory .factory-media-showcase .media-card img {
  background: rgba(7, 12, 18, 0.92) !important;
}

html body main #factory .factory-media-showcase .media-card-ultrawide img {
  height: auto !important;
  max-height: 190px !important;
  object-fit: contain !important;
}

html body main #cug .exam-live-feed,
html body main #factory .exam-live-feed {
  display: none !important;
}

html body main #cug .cug-chat-wall,
html body main #factory .factory-pipeline {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 22px !important;
}

html body main #cug .cug-chat-wall .exam-loop-card,
html body main #factory .factory-pipeline .exam-loop-card {
  min-height: 148px !important;
  padding: 16px !important;
}

html body main #cug .cug-chat-wall .exam-loop-card h3,
html body main #factory .factory-pipeline .exam-loop-card h3 {
  margin-top: 14px !important;
  font-size: 19px !important;
  line-height: 1.24 !important;
}

html body main #cug .cug-chat-wall .exam-loop-card p,
html body main #factory .factory-pipeline .exam-loop-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

html body main #cug.unified-product-page .exam-cycle-map,
html body main #factory.unified-product-page .exam-cycle-map {
  gap: 10px !important;
  margin-top: 12px !important;
}

html body main #cug.unified-product-page .exam-cycle-map > div,
html body main #factory.unified-product-page .exam-cycle-map > div {
  min-height: 104px !important;
  padding: 15px !important;
}

html body main #cug.unified-product-page .exam-cycle-map strong,
html body main #factory.unified-product-page .exam-cycle-map strong {
  margin-top: 8px !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
}

html body main #cug.unified-product-page .cug-report-gallery {
  gap: 12px !important;
  margin-top: 24px !important;
}

html body main #factory.unified-product-page .factory-resource-grid {
  gap: 12px !important;
  margin-top: 24px !important;
  padding: 12px !important;
}

html body main #cug.unified-product-page .cug-screen-card,
html body main #cug.unified-product-page .cug-guidance-form,
html body main #factory.unified-product-page .factory-resource-card {
  border-radius: 10px !important;
}

html body main #cug.unified-product-page .cug-screen-card img,
html body main #cug.unified-product-page .cug-guidance-form img {
  height: auto !important;
  max-height: none !important;
  padding: 8px !important;
}

html body main #factory.unified-product-page .factory-resource-card img,
html body main #factory.unified-product-page .factory-resource-card-wide img {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 8px !important;
}

html body main #factory.unified-product-page .factory-resource-card-wide {
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-height: 0 !important;
}

html body main #cug.unified-product-page .cug-report-gallery figcaption,
html body main #factory.unified-product-page .factory-resource-card div {
  min-height: 0 !important;
  padding: 13px 14px !important;
}

html body main #factory.unified-product-page > .exam-hero {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

html body main #factory.unified-product-page .factory-console,
html body main #factory.unified-product-page .factory-studio {
  grid-column: 1 !important;
  grid-row: auto !important;
  width: 100% !important;
}

html body main #factory.unified-product-page .factory-studio {
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
}

html body main #factory .factory-output-tags {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 18px !important;
}

html body main #factory .factory-output-tags span {
  align-content: start !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

html body main #factory .factory-output-tags strong {
  white-space: nowrap !important;
}

html body main #factory .factory-media-showcase {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(210px, 1fr) !important;
  grid-template-areas: "library ppt video" !important;
  min-height: clamp(300px, 22vw, 380px) !important;
  padding: 14px !important;
  gap: 12px !important;
}

html body main #factory .factory-media-showcase .media-card {
  align-content: stretch !important;
  grid-template-rows: minmax(150px, 1fr) auto !important;
  min-height: 0 !important;
}

html body main #factory .factory-media-showcase .media-card img,
html body main #factory .factory-media-showcase .media-card-ultrawide img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}

html body main #factory.unified-product-page .factory-resource-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas: "micro courseware widget" !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding: 12px !important;
}

html body main #factory.unified-product-page .factory-resource-card {
  display: grid !important;
  grid-template-rows: minmax(300px, 1fr) auto !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 12px !important;
}

html body main #factory.unified-product-page .factory-resource-card-wide {
  grid-template-columns: 1fr !important;
}

html body main #factory.unified-product-page .factory-resource-grid img,
html body main #factory.unified-product-page .factory-resource-card-wide img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}

html body main #factory.unified-product-page .factory-resource-grid figcaption {
  min-height: 0 !important;
  padding: 0 !important;
}

@media (max-width: 1180px) {
  html body main #factory.unified-product-page .factory-resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas: "micro courseware widget" !important;
  }

  html body main #cug.unified-product-page > .exam-hero,
  html body main #factory.unified-product-page > .exam-hero,
  html body main #cug .cug-media-showcase,
  html body main #factory .factory-media-showcase,
  html body main #cug .cug-chat-wall,
  html body main #factory .factory-pipeline {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
  }

  html body main #cug .cug-media-showcase .media-card,
  html body main #factory .factory-media-showcase .media-card {
    grid-area: auto !important;
  }
}

@media (max-width: 720px) {
  html body main #factory.unified-product-page .factory-resource-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }

  html body main #factory.unified-product-page .factory-resource-grid .factory-resource-card {
    grid-area: auto !important;
  }
}
/* End product matrix visual polish */

/* Apple-inspired mobile experience */
@media (max-width: 820px) {
  html {
    scroll-padding-top: 124px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #05090c;
    -webkit-text-size-adjust: 100%;
  }

  html body main,
  html body main * {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  html body main h1,
  html body main h2,
  html body main h3,
  html body main p,
  html body main li,
  html body main strong,
  html body main span,
  html body main em {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-break: anywhere;
    word-break: break-word;
  }

  html body main h1,
  html body main h2,
  html body main h3 {
    word-break: break-all;
  }

  html body .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand language"
      "nav nav" !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: max(8px, env(safe-area-inset-top)) 14px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(5, 8, 12, 0.78) !important;
    backdrop-filter: blur(18px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  }

  html body .brand {
    grid-area: brand !important;
    min-width: 0 !important;
  }

  html body .brand img {
    width: 25px !important;
    height: 25px !important;
  }

  html body .brand span {
    max-width: 54vw !important;
    overflow: hidden !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body .language-switcher {
    grid-area: language !important;
    justify-self: end !important;
  }

  html body .primary-nav {
    grid-area: nav !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 !important;
    padding: 2px 0 4px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html body .primary-nav::-webkit-scrollbar {
    display: none !important;
  }

  html body .nav-group {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  html body .nav-group-trigger {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  html body .nav-group-trigger.is-active {
    color: #071108 !important;
    background: #b7ff00 !important;
  }

  html body .nav-menu,
  html body .primary-nav .nav-group:nth-child(3) .nav-menu {
    position: fixed !important;
    top: calc(82px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70svh, 560px) !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border-radius: 18px !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55) !important;
  }

  html body .nav-menu-column {
    gap: 5px !important;
  }

  html body .nav-menu-link {
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  html body main img {
    max-width: 100%;
    height: auto;
  }

  html body main #overview,
  html body main #positioning,
  html body main #base-socket,
  html body main #interfaces,
  html body main #platform,
  html body main #ai-agent,
  html body main #modules,
  html body main #openapi-platform,
  html body main #moral-ecosystem,
  html body main #student-profile,
  html body main #qinghe-bank,
  html body main #exam,
  html body main #lms,
  html body main #steam-pbl,
  html body main #teacher-pd,
  html body main #cug,
  html body main #factory,
  html body main #ai-recorder,
  html body main #pricing,
  html body main #proof,
  html body main #overview-contact,
  html body main #contact {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    scroll-margin-top: 124px !important;
  }

  html body main .hero {
    min-height: calc(100svh - 110px) !important;
    padding: 52px clamp(20px, 6vw, 28px) 42px !important;
    display: grid !important;
    align-items: end !important;
  }

  html body main .hero-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  html body main .hero h1 {
    font-size: clamp(50px, 16vw, 72px) !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
  }

  html body main .hero-content .eyebrow,
  html body main .hero h1,
  html body main .hero-subtitle,
  html body main .hero-actions,
  html body main .hero-metrics {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  html body main .hero-blackout {
    display: none !important;
  }

  html body main .hero-subtitle {
    max-width: 100% !important;
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.55 !important;
  }

  html body main .hero-actions,
  html body main .hero-metrics {
    grid-template-columns: 1fr !important;
  }

  html body main .button {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    border-radius: 999px !important;
  }

  html body main .section,
  html body main .product-section,
  html body main .closing {
    padding: clamp(52px, 14vw, 86px) clamp(18px, 5vw, 24px) !important;
  }

  html body main .intro-band {
    padding: clamp(52px, 14vw, 86px) clamp(18px, 5vw, 24px) !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  html body main .section-heading,
  html body main .section-heading.narrow,
  html body main .product-copy,
  html body main .recorder-copy,
  html body main #factory .factory-console {
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
  }

  html body main .section-heading h2,
  html body main .product-copy h2,
  html body main .recorder-copy h2,
  html body main #factory .factory-console h2 {
    max-width: none !important;
    font-size: clamp(30px, 9.5vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body main .section-heading p:not(.eyebrow),
  html body main .product-copy > p:not(.eyebrow),
  html body main .recorder-copy > p:not(.eyebrow),
  html body main .feature-list li {
    max-width: none !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.68 !important;
  }

  html body main .eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }

  html body main .value-grid,
  html body main .concept-showcase,
  html body main .concept-acronym-list,
  html body main .socket-layout,
  html body main .socket-ecosystem,
  html body main .entry-showcase,
  html body main .entry-showcase-body,
  html body main .entry-proof-grid,
  html body main .platform-layout,
  html body main .platform-capability-grid,
  html body main .architecture-stack,
  html body main .agent-workbench,
  html body main .agent-persona-grid,
  html body main .agent-evidence-stack,
  html body main .module-grid,
  html body main .interface-grid,
  html body main .media-grid,
  html body main .moral-command-grid,
  html body main .moral-practice-proof,
  html body main .bank-outcome-grid,
  html body main .student-profile-section,
  html body main .student-profile-flow,
  html body main .openapi-flow-grid,
  html body main .openapi-lifecycle-band,
  html body main .openapi-doc-gallery,
  html body main .exam-hero,
  html body main .exam-hero-metrics,
  html body main .exam-live-feed,
  html body main .exam-learning-loop,
  html body main .exam-cycle-map,
  html body main .exam-evidence-grid,
  html body main .exam-media-showcase,
  html body main .lms-classroom-loop,
  html body main .lms-classroom-gallery,
  html body main .lms-interface-grid,
  html body main .lms-evidence-board,
  html body main .cug-kpi-row,
  html body main .cug-media-showcase,
  html body main .cug-entry-cards,
  html body main .cug-chat-wall,
  html body main .factory-studio,
  html body main .factory-media-showcase,
  html body main .factory-output-tags,
  html body main .factory-pipeline,
  html body main .factory-resource-grid,
  html body main .recorder-hero,
  html body main .recorder-output-strip,
  html body main .recorder-device-showcase,
  html body main .recorder-live-feed,
  html body main .recorder-evidence-grid,
  html body main .recorder-live-share-grid,
  html body main .recorder-memory-panel,
  html body main .proof-card-grid,
  html body main .proof-story-grid,
  html body main .proof-grid,
  html body main .closing {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 16px !important;
    min-height: 0 !important;
  }

  html body main .unified-product-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(52px, 14vw, 86px) clamp(18px, 5vw, 24px) !important;
    border-radius: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  html body main .exam-product-page,
  html body main .lms-product-page,
  html body main .student-profile-section,
  html body main .openapi-product-section,
  html body main .moral-ecosystem-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  html body main .product-copy,
  html body main .recorder-copy,
  html body main #factory .factory-console,
  html body main .steam-pbl-stage,
  html body main .teacher-pd-matrix,
  html body main .cug-product-stage,
  html body main .exam-ai-panel,
  html body main .factory-studio,
  html body main .recorder-live-stage,
  html body main .bank-economy-board,
  html body main .moral-phone-panel,
  html body main .student-profile-flow,
  html body main .openapi-flow-grid {
    padding: clamp(18px, 5vw, 24px) !important;
    border-radius: 22px !important;
  }

  html body main .agent-section .section-heading.narrow,
  html body main .agent-section .section-heading > .eyebrow,
  html body main .agent-section .section-heading > h2,
  html body main .agent-section .section-heading > p:not(.eyebrow),
  html body main .agent-breakthrough-callout {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: none !important;
  }

  html body main .agent-breakthrough-callout {
    margin-top: 2px !important;
    padding: 18px !important;
  }

  html body main .mobile-stack-showcase {
    min-height: 0 !important;
    padding: 22px !important;
  }

  html body main .mobile-phone-stack {
    width: 100% !important;
    height: auto !important;
    margin: 22px 0 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html body main .mobile-phone-card {
    position: static !important;
    width: min(76vw, 278px) !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body main .entry-device img,
  html body main .media-card img,
  html body main .exam-media-showcase img,
  html body main .teacher-media-showcase img,
  html body main .factory-media-showcase img,
  html body main .factory-resource-grid img,
  html body main .recorder-shot-card img,
  html body main .student-profile-phone-stack img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    padding: 0 !important;
  }

  html body main .media-card,
  html body main .factory-resource-card,
  html body main .recorder-shot-card,
  html body main .teacher-pd-screen {
    grid-area: auto !important;
    min-height: 0 !important;
  }

  html body main .blueprint-static-figure,
  html body main .pricing-table-wrap {
    width: calc(100% + 36px) !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 0 !important;
  }

  html body main .blueprint-static-figure img {
    width: max(920px, 100%) !important;
    max-width: none !important;
  }

  html body main .pricing-table {
    min-width: 760px;
  }

  html body main .page-footer-closing,
  html body main .closing {
    border-radius: 0 !important;
  }
}

@media (max-width: 430px) {
  html body main .hero h1 {
    font-size: clamp(46px, 15vw, 64px) !important;
  }

  html body main .section-heading h2,
  html body main .product-copy h2,
  html body main .recorder-copy h2,
  html body main #factory .factory-console h2 {
    font-size: clamp(30px, 9.5vw, 40px) !important;
  }

  html body main .exam-hero-metrics,
  html body main .factory-output-tags,
  html body main .teacher-pd-portrait-metrics {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  html body main .hero-subtitle,
  html body main .section-heading p:not(.eyebrow),
  html body main .product-copy > p:not(.eyebrow),
  html body main .recorder-copy > p:not(.eyebrow),
  html body main .feature-list li,
  html body main .exam-loop-card p,
  html body main .exam-screen figcaption,
  html body main .pricing-note {
    line-break: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  html body main .section-heading h2,
  html body main .product-copy h2,
  html body main .recorder-copy h2,
  html body main #factory .factory-console h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    line-break: auto !important;
  }

  html body main .exam-hero,
  html body main .product-copy,
  html body main .recorder-copy,
  html body main .section-heading,
  html body main .section-heading.narrow,
  html body main #factory .factory-console {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body main .exam-hero .product-copy,
  html body main #exam > .exam-hero .product-copy,
  html body main .unified-product-page > .exam-hero > .product-copy,
  html body main .recorder-hero > .recorder-copy {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    column-gap: 0 !important;
    row-gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body main .exam-hero .product-copy > *,
  html body main #exam > .exam-hero .product-copy > *,
  html body main .unified-product-page > .exam-hero > .product-copy > *,
  html body main .recorder-hero > .recorder-copy > * {
    grid-area: auto !important;
    max-width: 100% !important;
  }

  html body main #exam .product-copy h2,
  html body main #cug .product-copy h2,
  html body main #factory .factory-console h2,
  html body main #ai-recorder .recorder-copy h2 {
    font-size: clamp(26px, 7.4vw, 31px) !important;
  }

  html body main #exam > .exam-hero {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
  }

  html body main #exam > .exam-hero .product-copy {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body main #exam > .exam-hero .product-copy .eyebrow,
  html body main #exam > .exam-hero .product-copy h2,
  html body main #exam > .exam-hero .product-copy > p:not(.eyebrow) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body main #exam > .exam-hero .product-copy h2 {
    margin: 10px 0 16px !important;
    max-width: min(100%, 10.9em) !important;
    word-break: normal !important;
  }

  html body main #exam .exam-hero-metrics,
  html body main #exam .exam-learning-loop,
  html body main #exam .exam-cycle-map,
  html body main #exam .exam-evidence-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  html body main #exam .exam-hero-metrics {
    margin: 18px 0 0 !important;
  }

  html body main #exam .exam-hero-metrics span,
  html body main #exam .exam-loop-card,
  html body main #exam .exam-cycle-map > div,
  html body main #exam .exam-screen {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body main #exam .exam-hero-flow,
  html body main #exam .exam-hero-feed {
    display: none !important;
  }
}

@media (max-width: 430px) {
  html body main .section-heading h2,
  html body main .product-copy h2,
  html body main .recorder-copy h2,
  html body main #factory .factory-console h2 {
    font-size: clamp(26px, 7.6vw, 32px) !important;
  }
}
/* End Apple-inspired mobile experience */
@media (max-width: 820px) {
  html body main .quote-calculator {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  html body main .quote-summary {
    position: static !important;
    border-radius: 16px !important;
    padding: 18px !important;
  }

  html body main .quote-summary-grid,
  html body main .quote-counter-grid,
  html body main .quote-contact-form {
    grid-template-columns: 1fr !important;
  }

  html body main .quote-summary-grid .quote-summary-primary {
    grid-column: auto !important;
  }

  html body main .quote-group {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  html body main .quote-option {
    grid-template-columns: 20px 1fr !important;
    padding: 12px !important;
  }

  html body main .quote-option-title {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body main .quote-contact-form {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  html body main .pricing-table {
    min-width: 1180px !important;
  }
}