/*
 * Wencui light theme
 *
 * The dark palette remains the default. This file is loaded by nav.js after
 * each page's existing styles so the light surface can intentionally win over
 * the legacy high-specificity theme rules.
 */

html[data-theme="light"] {
  color-scheme: light;
  --theme-paper: #f6f0e7;
  --theme-paper-strong: #fffdf8;
  --theme-paper-soft: #efe6d8;
  --theme-border: rgba(31, 30, 28, .14);
  --theme-ink: #1f1e1c;
  --theme-muted: #77736b;
  --theme-terracotta: #a64e35;
  --theme-coral: #c45742;
  --theme-sage: #657a5a;
  --theme-shadow-low: 0 2px 8px rgba(83, 65, 42, .06);
  --theme-shadow-medium: 0 12px 30px rgba(83, 65, 42, .10);
  --theme-shadow-high: 0 24px 70px rgba(83, 65, 42, .16);
  --bg-deep: var(--theme-paper) !important;
  --bg-surf: var(--theme-paper-soft) !important;
  --bg-card: var(--theme-paper-strong) !important;
  --bg-card-hover: #fffaf1 !important;
  --text: var(--theme-ink) !important;
  --text-pri: var(--theme-ink) !important;
  --text-sec: var(--theme-muted) !important;
  --text-muted: #8b857c !important;
  --border: var(--theme-border) !important;
  --gold: var(--theme-terracotta) !important;
  --gold-light: var(--theme-coral) !important;
  --gold-dark: #8d432f !important;
  --gold-glow: rgba(196, 87, 66, .12) !important;
  --yun-ink: var(--theme-ink) !important;
  --yun-deep: var(--theme-paper-soft) !important;
  --yun-paper: var(--theme-ink) !important;
  --yun-muted: var(--theme-muted) !important;
  --yun-line: var(--theme-border) !important;
  --accent-navy: var(--theme-coral) !important;
  --accent-navy-deep: var(--theme-terracotta) !important;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .page-shell,
html[data-theme="light"] .main-content {
  background: var(--theme-paper) !important;
  color: var(--theme-ink) !important;
}

/* Keep the homepage's original, very fine grain. Standalone pages below use
   their own sparse overlay so this light-theme pass does not change the hero
   texture users already know on the homepage. */
html[data-theme="light"] body:has(#home)::before {
  opacity: .09 !important;
  mix-blend-mode: multiply;
}

/* Standalone pages use a dedicated noise element instead of the homepage's
   body pseudo-element. Keep it as the visible overlay in light mode so the
   grain cannot disappear beneath an opaque page root. */
html[data-theme="light"] body .bg-noise {
  display: block !important;
  z-index: 9999 !important;
  opacity: .12 !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.08' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
}

/* Pages without .bg-noise get the same fixed layer from body::before. */
html[data-theme="light"] body:has(.academy-hero)::before,
html[data-theme="light"] body:has(.brain-page)::before,
html[data-theme="light"] body:has(#loginGate)::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: .12 !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.08' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--theme-paper-soft) !important; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #b4a99a !important; }

/* Shared navigation */
html[data-theme="light"] .nc-nav .nc-logo,
html[data-theme="light"] .nc-nav .nc-logo-copy { color: var(--theme-coral) !important; }
html[data-theme="light"] .nc-nav .nc-logo-mark-bg {
  fill: var(--theme-coral) !important;
  stroke: var(--theme-terracotta) !important;
}
html[data-theme="light"] .nc-nav .nc-logo-mark-inner { stroke: rgba(255,253,248,.72) !important; }
html[data-theme="light"] .nc-nav .nc-logo-mark-text { fill: #fffdf8 !important; }
html[data-theme="light"] .nc-nav .nc-links {
  background: rgba(255, 253, 248, .88) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-medium), inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(12px);
}
html[data-theme="light"] .nc-nav .nc-link {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] .nc-nav .nc-link:hover {
  color: var(--theme-terracotta) !important;
  background: rgba(196, 87, 66, .10) !important;
}
html[data-theme="light"] .nc-nav .nc-link.active {
  color: #fffdf8 !important;
  background: var(--theme-terracotta) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24) !important;
}
html[data-theme="light"] .nc-nav .nc-dropdown-menu {
  background: rgba(255, 253, 248, .98) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-high) !important;
}
html[data-theme="light"] .nc-nav .nc-dropdown-item { color: var(--theme-ink) !important; }
html[data-theme="light"] .nc-nav .nc-dropdown-item:hover {
  color: var(--theme-terracotta) !important;
  background: rgba(196, 87, 66, .10) !important;
}
html[data-theme="light"] .nc-nav .nc-theme-toggle {
  color: var(--theme-ink) !important;
  background: rgba(255, 253, 248, .82) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .nc-nav .nc-theme-toggle:hover {
  color: var(--theme-terracotta) !important;
  border-color: rgba(166, 78, 53, .42) !important;
  background: #fffdf8 !important;
}
html[data-theme="light"] .nc-nav .nc-theme-toggle .theme-sun { display: none !important; }
html[data-theme="light"] .nc-nav .nc-theme-toggle .theme-moon { display: block !important; }
html[data-theme="light"] .nc-nav .nc-cta {
  margin-left: 14px !important;
  color: #fffdf8 !important;
  background: var(--theme-coral) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .nc-nav .nc-cta:hover { background: var(--theme-terracotta) !important; }
html[data-theme="light"] .nc-nav .nc-toggle {
  color: var(--theme-ink) !important;
  background: rgba(255, 253, 248, .82) !important;
  border-color: var(--theme-border) !important;
}

/* Homepage and shared section rhythm */
html[data-theme="light"] .hero {
  color: var(--theme-ink) !important;
  background: var(--theme-paper) !important;
  background-image: radial-gradient(circle at 80% 20%, rgba(196,87,66,.10), transparent 28%) !important;
}
html[data-theme="light"] .hero::before {
  background: linear-gradient(90deg, rgba(246,240,231,.96), rgba(246,240,231,.72)) !important;
}
html[data-theme="light"] .hero::after {
  background: linear-gradient(0deg, var(--theme-paper), transparent 56%) !important;
}
html[data-theme="light"] .lattice {
  opacity: .16 !important;
  background-image: linear-gradient(45deg, transparent 48%, var(--theme-terracotta) 49%, var(--theme-terracotta) 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, var(--theme-terracotta) 49%, var(--theme-terracotta) 51%, transparent 52%) !important;
}
html[data-theme="light"] .hero-label {
  color: var(--theme-terracotta) !important;
  border-color: rgba(166,78,53,.24) !important;
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero h1 .gold,
html[data-theme="light"] .hero h1 .red,
html[data-theme="light"] .section-title {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] .hero h1 .gold { color: var(--theme-coral) !important; }
html[data-theme="light"] .hero h1 .red { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .hero-desc,
html[data-theme="light"] .hero-proof,
html[data-theme="light"] .section-copy,
html[data-theme="light"] .section p { color: var(--theme-muted) !important; }
html[data-theme="light"] .hero-proof b { color: var(--theme-ink) !important; }
html[data-theme="light"] .hero-media::before {
  border-color: rgba(166,78,53,.25) !important;
  background: linear-gradient(135deg, rgba(196,87,66,.14), rgba(255,253,248,.20)) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] .video-stage {
  border-color: var(--theme-border) !important;
  background: var(--theme-ink) !important;
  box-shadow: var(--theme-shadow-high) !important;
}
html[data-theme="light"] .video-stage::after {
  background: linear-gradient(0deg, rgba(31,30,28,.76), transparent 48%), linear-gradient(90deg, rgba(31,30,28,.10), transparent) !important;
}
html[data-theme="light"] .picked-card {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.88) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-medium) !important;
  backdrop-filter: blur(8px);
}
html[data-theme="light"] .picked-card p { color: var(--theme-muted) !important; }
html[data-theme="light"] .trust-bar {
  color: var(--theme-ink) !important;
  background: var(--theme-paper-soft) !important;
  border-color: rgba(166,78,53,.22) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.65) !important;
}
html[data-theme="light"] .trust-intro h3,
html[data-theme="light"] .trust-item strong { color: var(--theme-ink) !important; }
html[data-theme="light"] .trust-intro p,
html[data-theme="light"] .trust-item { color: var(--theme-muted) !important; }
html[data-theme="light"] .trust-item > span:not(.trust-icon) {
  color: #625e57 !important;
}
html[data-theme="light"] .trust-icon { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .seal { background: var(--theme-coral) !important; }
html[data-theme="light"] .section,
html[data-theme="light"] .section-dark,
html[data-theme="light"] .section-warm,
html[data-theme="light"] #channels,
html[data-theme="light"] #video-select,
html[data-theme="light"] #quality,
html[data-theme="light"] #heritage,
html[data-theme="light"] #partner,
html[data-theme="light"] #tools {
  color: var(--theme-ink) !important;
  background: var(--theme-paper) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] .section:nth-of-type(even) { background: var(--theme-paper-soft) !important; }
html[data-theme="light"] .section-warm { background: var(--theme-paper-soft) !important; }
html[data-theme="light"] .eyebrow { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .eyebrow::before { background: var(--theme-coral) !important; }
html[data-theme="light"] .section-link { color: var(--theme-terracotta) !important; border-color: rgba(166,78,53,.35) !important; }
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .submit-btn,
html[data-theme="light"] .story-launch,
html[data-theme="light"] .heart-custom-buy {
  color: #fffdf8 !important;
  background: var(--theme-coral) !important;
  border-color: var(--theme-coral) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .submit-btn:hover,
html[data-theme="light"] .story-launch:hover,
html[data-theme="light"] .heart-custom-buy:hover { background: var(--theme-terracotta) !important; }
html[data-theme="light"] .btn-outline {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.42) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] .btn-outline:hover { color: var(--theme-terracotta) !important; border-color: rgba(166,78,53,.42) !important; background: rgba(196,87,66,.08) !important; }

/* Homepage cards and media shelves */
html[data-theme="light"] .channel-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .heritage-feature,
html[data-theme="light"] .big-story,
html[data-theme="light"] .story-small,
html[data-theme="light"] .partner-point,
html[data-theme="light"] .craft,
html[data-theme="light"] .how-step {
  color: var(--theme-ink) !important;
  background: var(--theme-paper-strong) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .channel-card:hover,
html[data-theme="light"] .product-card:hover,
html[data-theme="light"] .tool-card:hover,
html[data-theme="light"] .story-small:hover {
  border-color: rgba(166,78,53,.40) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] .channel-card::after { background: linear-gradient(0deg, rgba(31,30,28,.84), rgba(31,30,28,.30) 48%, transparent 78%) !important; }
html[data-theme="light"] .channel-body h3,
html[data-theme="light"] .channel-body p,
html[data-theme="light"] .channel-no { color: #fffdf8 !important; }
html[data-theme="light"] .channel-ribbon { background: var(--theme-coral) !important; color: #fffdf8 !important; }
html[data-theme="light"] .channel-tags span { color: #fffdf8 !important; border-color: rgba(255,253,248,.45) !important; }
html[data-theme="light"] .channel-arrow { color: #fffdf8 !important; border-color: rgba(255,253,248,.42) !important; }
html[data-theme="light"] .product-info h3,
html[data-theme="light"] .tool-body h3,
html[data-theme="light"] .story-small h4 { color: var(--theme-ink) !important; }
html[data-theme="light"] .product-info p,
html[data-theme="light"] .tool-body p,
html[data-theme="light"] .story-small p,
html[data-theme="light"] .heritage-content > p { color: var(--theme-muted) !important; }
html[data-theme="light"] .pick-badge,
html[data-theme="light"] .rank,
html[data-theme="light"] .story-kicker { color: var(--theme-ink) !important; background: rgba(255,253,248,.88) !important; border-color: var(--theme-border) !important; }

/* Creator academy and other standalone pages */
html[data-theme="light"] .page,
html[data-theme="light"] .page-inner,
html[data-theme="light"] .content-section,
html[data-theme="light"] .certification,
html[data-theme="light"] .scene-section,
html[data-theme="light"] .section-divider,
html[data-theme="light"] .filter-section {
  color: var(--theme-ink) !important;
  background: var(--theme-paper) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] .hero,
html[data-theme="light"] .academy-hero,
html[data-theme="light"] .offline-hero,
html[data-theme="light"] .partner-hero {
  color: var(--theme-ink) !important;
  background: var(--theme-paper) !important;
  border-bottom-color: var(--theme-border) !important;
}
html[data-theme="light"] .hero-bg,
html[data-theme="light"] .hero-grid-lines,
html[data-theme="light"] .academy-hero::before,
html[data-theme="light"] .academy-hero::after {
  opacity: .08 !important;
  filter: sepia(.18) saturate(.45) !important;
}
html[data-theme="light"] .academy-tunnel-canvas { opacity: .08 !important; filter: sepia(.20) saturate(.45) !important; }
html[data-theme="light"] .hero h1,
html[data-theme="light"] .academy-hero h1,
html[data-theme="light"] .content-section h2,
html[data-theme="light"] .certification h2,
html[data-theme="light"] .section-divider h2 { color: var(--theme-ink) !important; }
html[data-theme="light"] .hero h1 .gold,
html[data-theme="light"] .academy-hero h1 span { color: var(--theme-coral) !important; }
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .academy-hero .eyebrow,
html[data-theme="light"] .kicker,
html[data-theme="light"] .eyebrow { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .academy-hero .eyebrow {
  background: rgba(255,253,248,.72) !important;
  border-color: rgba(166,78,53,.24) !important;
}
html[data-theme="light"] .hero p,
html[data-theme="light"] .academy-hero-copy > p,
html[data-theme="light"] .section-sub,
html[data-theme="light"] .course-grid p,
html[data-theme="light"] .certification > p,
html[data-theme="light"] .section-divider p { color: var(--theme-muted) !important; }
html[data-theme="light"] .hero .page-inner > .hero-stats,
html[data-theme="light"] .academy-hero-copy dl {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.84) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] .hero .hero-stat,
html[data-theme="light"] .academy-hero-copy dl > div { border-color: var(--theme-border) !important; }
html[data-theme="light"] .hero-stat .num,
html[data-theme="light"] .academy-hero-copy dl dt { color: var(--theme-ink) !important; }
html[data-theme="light"] .hero-stat .lbl,
html[data-theme="light"] .academy-hero-copy dl dd { color: var(--theme-muted) !important; }
html[data-theme="light"] .course-grid article,
html[data-theme="light"] .course-card,
html[data-theme="light"] .cert-card,
html[data-theme="light"] .advantage-card,
html[data-theme="light"] .campus-card,
html[data-theme="light"] .creator-card,
html[data-theme="light"] .exam-card,
html[data-theme="light"] .learn-card,
html[data-theme="light"] .featured-card,
html[data-theme="light"] .trust-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .cert-req,
html[data-theme="light"] .contact-section,
html[data-theme="light"] .modal-container {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.78) !important;
  background-image: none !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .course-grid article:hover,
html[data-theme="light"] .course-card:hover,
html[data-theme="light"] .cert-card:hover,
html[data-theme="light"] .advantage-card:hover,
html[data-theme="light"] .campus-card:hover,
html[data-theme="light"] .creator-card:hover,
html[data-theme="light"] .exam-card:hover,
html[data-theme="light"] .learn-card:hover {
  background: var(--theme-paper-strong) !important;
  border-color: rgba(166,78,53,.40) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] .course-grid article h3,
html[data-theme="light"] .course-card h4,
html[data-theme="light"] .cert-card h3,
html[data-theme="light"] .advantage-card h3,
html[data-theme="light"] .campus-card .city,
html[data-theme="light"] .exam-card h3,
html[data-theme="light"] .course-grid article p,
html[data-theme="light"] .course-card p,
html[data-theme="light"] .cert-card .req,
html[data-theme="light"] .advantage-card p,
html[data-theme="light"] .campus-card .desc,
html[data-theme="light"] .exam-card p,
html[data-theme="light"] .learn-card { color: var(--theme-ink) !important; }
html[data-theme="light"] .course-grid article > span,
html[data-theme="light"] .course-card .course-meta,
html[data-theme="light"] .cert-card .level,
html[data-theme="light"] .cert-card .badge,
html[data-theme="light"] .course-tag,
html[data-theme="light"] .course-icon,
html[data-theme="light"] .cert-icon,
html[data-theme="light"] .exam-icon { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .course-grid article a,
html[data-theme="light"] .course-card a { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .course-grid article::before,
html[data-theme="light"] .course-card::before,
html[data-theme="light"] .cert-card::after,
html[data-theme="light"] .advantage-card::after,
html[data-theme="light"] .campus-card::after,
html[data-theme="light"] .creator-card::after,
html[data-theme="light"] .exam-card::after,
html[data-theme="light"] .learn-card::after { background: linear-gradient(135deg, rgba(196,87,66,.10), transparent 48%, rgba(255,255,255,.35)) !important; }

/* academy-peak.css gives these cards a more specific nth-child gradient. */
html[data-theme="light"] body .course-grid .course-card:nth-child(n),
html[data-theme="light"] body .creator-grid .creator-card:nth-child(n),
html[data-theme="light"] body .exam-grid .exam-card:nth-child(n) {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.78) !important;
  background-image: none !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] body .course-grid .course-card:nth-child(n):hover,
html[data-theme="light"] body .creator-grid .creator-card:nth-child(n):hover,
html[data-theme="light"] body .exam-grid .exam-card:nth-child(n):hover {
  background: var(--theme-paper-strong) !important;
  border-color: rgba(166,78,53,.40) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] body .course-grid .course-card:nth-child(n)::after,
html[data-theme="light"] body .exam-grid .exam-card:nth-child(n)::after {
  background: linear-gradient(115deg, transparent 18%, rgba(196,87,66,.10) 48%, transparent 82%) !important;
  opacity: .28 !important;
}
html[data-theme="light"] body .course-grid .course-card:nth-child(n) h3,
html[data-theme="light"] body .course-grid .course-card:nth-child(n) h4,
html[data-theme="light"] body .course-grid .course-card:nth-child(n) p,
html[data-theme="light"] body .creator-grid .creator-card:nth-child(n) h3,
html[data-theme="light"] body .creator-grid .creator-card:nth-child(n) p,
html[data-theme="light"] body .exam-grid .exam-card:nth-child(n) h3,
html[data-theme="light"] body .exam-grid .exam-card:nth-child(n) p {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body .course-grid .course-card:nth-child(n) .course-meta,
html[data-theme="light"] body .exam-grid .exam-card:nth-child(n) .exam-features {
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] body .course-grid .course-card:nth-child(n) .course-meta,
html[data-theme="light"] body .course-grid .course-card:nth-child(n) .course-meta span {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body .cert-display {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.84) !important;
  background-image: none !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] body .cert-display h3,
html[data-theme="light"] body .cert-display .cert-name,
html[data-theme="light"] body .cert-display .cert-subtitle,
html[data-theme="light"] body .cert-display .cert-desc,
html[data-theme="light"] body .cert-display .cert-level-text,
html[data-theme="light"] body .cert-display .cert-footer-text { color: var(--theme-ink) !important; }
html[data-theme="light"] body .cert-display .cert-seal { background: var(--theme-coral) !important; color: #fffdf8 !important; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.82) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #9c958b !important; }

/* Partner page */
html[data-theme="light"] .partner-page,
html[data-theme="light"] .partner-main,
html[data-theme="light"] .partner-section { background: var(--theme-paper) !important; color: var(--theme-ink) !important; }
html[data-theme="light"] .partner-hero::before,
html[data-theme="light"] .partner-hero::after { opacity: .08 !important; filter: sepia(.25) saturate(.5) !important; }
html[data-theme="light"] .partner-intro,
html[data-theme="light"] .partner-eyebrow,
html[data-theme="light"] .partner-hero h1,
html[data-theme="light"] .partner-hero p { color: var(--theme-ink) !important; }
html[data-theme="light"] .partner-hero h1 em { color: var(--theme-coral) !important; }
html[data-theme="light"] .partner-eyebrow { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .partner-point,
html[data-theme="light"] .partner-aside,
html[data-theme="light"] .join-form {
  color: var(--theme-ink) !important;
  background: transparent !important;
  background-image: none !important;
  border-color: var(--theme-border) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .partner-points {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.78) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .partner-points:hover {
  background: var(--theme-paper-strong) !important;
  border-color: rgba(166,78,53,.40) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] .partner-points::before,
html[data-theme="light"] .join-form::after { background: linear-gradient(90deg,transparent,var(--theme-coral),transparent); }
html[data-theme="light"] .join-form {
  background: rgba(255,253,248,.78) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .join-form:hover {
  background: var(--theme-paper-strong) !important;
  border-color: rgba(166,78,53,.40) !important;
  box-shadow: var(--theme-shadow-medium) !important;
  transform: translateY(-3px);
}
html[data-theme="light"] .partner-point:hover,
html[data-theme="light"] .partner-aside:hover { background: transparent !important; border-color: var(--theme-border) !important; box-shadow: none !important; }
html[data-theme="light"] .partner-point h2,
html[data-theme="light"] .partner-point h3,
html[data-theme="light"] .partner-aside h3,
html[data-theme="light"] .form-title,
html[data-theme="light"] .field label { color: var(--theme-ink) !important; }

/* Supporting video cards use the same hover-only reading layer in light mode
   so their copy remains legible over both pale and saturated artwork. */
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small::after {
  background:
    linear-gradient(180deg, transparent 34%, rgba(31,30,28,.08) 48%, rgba(31,30,28,.92) 100%),
    linear-gradient(115deg, transparent 25%, rgba(166,78,53,.18) 48%, transparent 68%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: 0 0, -120% 0 !important;
  opacity: 0 !important;
  transition: background-position .75s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small:hover::after {
  background-position: 0 0, 100% 0 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small h4,
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small p {
  color: #fffdf8 !important;
}

html[data-theme="dark"] body #video-select .video-showcase > .story-stack > .story-small::after {
  background:
    linear-gradient(180deg, transparent 34%, rgba(8,8,8,.08) 48%, rgba(8,8,8,.94) 100%),
    linear-gradient(115deg, transparent 25%, rgba(174,187,217,.2) 48%, transparent 68%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: 0 0, -120% 0 !important;
  opacity: 0 !important;
  transition: background-position .75s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="dark"] body #video-select .video-showcase > .story-stack > .story-small:hover::after {
  background-position: 0 0, 100% 0 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .partner-point p,
html[data-theme="light"] .partner-aside > p,
html[data-theme="light"] .form-note,
html[data-theme="light"] .partner-aside small { color: var(--theme-muted) !important; }
html[data-theme="light"] .partner-point-index,
html[data-theme="light"] .partner-eyebrow { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .role { color: var(--theme-ink) !important; background: rgba(255,253,248,.54) !important; border-color: var(--theme-border) !important; }
html[data-theme="light"] .role.active,
html[data-theme="light"] .role:hover { color: #fffdf8 !important; background: var(--theme-coral) !important; border-color: var(--theme-coral) !important; }
html[data-theme="light"] .partner-submit { color: #fffdf8 !important; background: var(--theme-coral) !important; border-color: var(--theme-coral) !important; }

/* Partner page: light cards retain a quiet paper surface on hover. The
   legacy full-panel gradient lives on pseudo-elements, so neutralize it
   explicitly instead of merely replacing the panel background. */
html[data-theme="light"] body.partner-page .partner-points,
html[data-theme="light"] body.partner-page .join-form {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  border: 1px solid rgba(166, 78, 53, .28) !important;
  border-radius: 24px !important;
  background: var(--theme-paper-strong) !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(83, 65, 42, .07) !important;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), border-color .38s ease, box-shadow .38s ease !important;
}
html[data-theme="light"] body.partner-page .partner-points::before,
html[data-theme="light"] body.partner-page .join-form::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: 0 !important;
  width: auto !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(196, 87, 66, 0), rgba(196, 87, 66, .64) 46%, rgba(196, 87, 66, 0)) !important;
  background-size: 100% 100% !important;
  opacity: .52 !important;
  transform: scaleX(.78) !important;
  transform-origin: center !important;
  transition: opacity .38s ease, transform .38s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme="light"] body.partner-page .partner-points::after,
html[data-theme="light"] body.partner-page .join-form::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
html[data-theme="light"] body.partner-page .partner-points > *,
html[data-theme="light"] body.partner-page .join-form > * { position: relative; z-index: 1; }
html[data-theme="light"] body.partner-page .partner-points:hover,
html[data-theme="light"] body.partner-page .join-form:hover {
  background: var(--theme-paper-strong) !important;
  background-image: none !important;
  border-color: rgba(166, 78, 53, .46) !important;
  box-shadow: 0 15px 34px rgba(83, 65, 42, .11) !important;
  transform: translateY(-4px) !important;
}
html[data-theme="light"] body.partner-page .partner-points:hover::before,
html[data-theme="light"] body.partner-page .join-form:hover::before {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* Enterprise brain */
html[data-theme="light"] .brain-page,
html[data-theme="light"] .brain-system,
html[data-theme="light"] .brain-network-hero { background: var(--theme-paper) !important; color: var(--theme-ink) !important; }
html[data-theme="light"] .brain-network-hero::before,
html[data-theme="light"] .brain-network-hero::after { opacity: .10 !important; filter: sepia(.22) saturate(.6) !important; }
html[data-theme="light"] .network-copy h1,
html[data-theme="light"] .brain-title,
html[data-theme="light"] .system-heading h2 { color: var(--theme-ink) !important; }
html[data-theme="light"] .network-copy p,
html[data-theme="light"] .brain-lead,
html[data-theme="light"] .system-heading > p,
html[data-theme="light"] .system-note,
html[data-theme="light"] .map-node p { color: var(--theme-muted) !important; }
html[data-theme="light"] .network-kicker,
html[data-theme="light"] .brain-kicker,
html[data-theme="light"] .system-kicker,
html[data-theme="light"] .panel-heading small,
html[data-theme="light"] .flow-index { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .network-action,
html[data-theme="light"] .brain-actions .brain-main-action,
html[data-theme="light"] .brain-page .btn-primary { color: #fffdf8 !important; background: var(--theme-coral) !important; border-color: var(--theme-coral) !important; }
html[data-theme="light"] .brain-actions a,
html[data-theme="light"] .brain-page .btn-outline { color: var(--theme-ink) !important; border-color: var(--theme-border) !important; }
html[data-theme="light"] .lgpsm-hero { background: var(--theme-paper-strong) !important; color: var(--theme-ink) !important; }
html[data-theme="light"] .lgpsm-hero .lgpsm-bg-base,
html[data-theme="light"] .lgpsm-hero .lgpsm-bg-reveal { filter: sepia(.16) saturate(.60) brightness(1.12) !important; opacity: .16 !important; }
html[data-theme="light"] .lgpsm-hero .lgpsm-logo,
html[data-theme="light"] .lgpsm-hero .lgpsm-copy h1,
html[data-theme="light"] .lgpsm-hero .lgpsm-shop,
html[data-theme="light"] .lgpsm-hero .lgpsm-feature p { color: var(--theme-ink) !important; }
html[data-theme="light"] .brain-map,
html[data-theme="light"] .flow-card,
html[data-theme="light"] .infra-panel,
html[data-theme="light"] .command-panel,
html[data-theme="light"] .staff-panel,
html[data-theme="light"] .system-cloud,
html[data-theme="light"] .workforce-column {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.78) !important;
  background-image: none !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .flow-card:hover,
html[data-theme="light"] .infra-panel:hover,
html[data-theme="light"] .command-panel:hover,
html[data-theme="light"] .staff-panel:hover { background: var(--theme-paper-strong) !important; border-color: rgba(166,78,53,.40) !important; box-shadow: var(--theme-shadow-medium) !important; }
html[data-theme="light"] .flow-card h3,
html[data-theme="light"] .panel-heading h3,
html[data-theme="light"] .workforce-column header h3,
html[data-theme="light"] .map-node h2,
html[data-theme="light"] .brain-system b,
html[data-theme="light"] .brain-system strong { color: var(--theme-ink) !important; }
html[data-theme="light"] .flow-card p,
html[data-theme="light"] .flow-card ul,
html[data-theme="light"] .infra-panel > p,
html[data-theme="light"] .hardware-row small,
html[data-theme="light"] .command-primary small,
html[data-theme="light"] .staff-departments > div > small { color: var(--theme-muted) !important; }
html[data-theme="light"] .flow-card li::before,
html[data-theme="light"] .panel-link,
html[data-theme="light"] .system-endpoints span,
html[data-theme="light"] .system-cloud,
html[data-theme="light"] .live-dot { color: var(--theme-terracotta) !important; }
html[data-theme="light"] .command-primary,
html[data-theme="light"] .brain-command,
html[data-theme="light"] .brain-tasks button,
html[data-theme="light"] .brain-mini span,
html[data-theme="light"] .infra-benefits div { background: rgba(196,87,66,.06) !important; border-color: var(--theme-border) !important; color: var(--theme-ink) !important; }

/* Shared standalone footer */
html[data-theme="light"] .footer,
html[data-theme="light"] .wc-page-close {
  color: var(--theme-ink) !important;
  background: var(--theme-paper-soft) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] .footer::before,
html[data-theme="light"] .wc-page-close::before {
  background: linear-gradient(180deg, rgba(246,240,231,0), var(--theme-paper-soft)) !important;
}
html[data-theme="light"] .footer-cta,
html[data-theme="light"] .wc-page-close-panel {
  color: var(--theme-ink) !important;
  background: var(--theme-paper-strong) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] .footer-cta h2,
html[data-theme="light"] .wc-page-close h2,
html[data-theme="light"] .footer-brand,
html[data-theme="light"] .wc-page-close-brand { color: var(--theme-ink) !important; }
html[data-theme="light"] .footer-cta p,
html[data-theme="light"] .footer-cta > span,
html[data-theme="light"] .footer-desc,
html[data-theme="light"] .footer-note,
html[data-theme="light"] .wc-page-close-kicker,
html[data-theme="light"] .wc-page-close-panel > p:not(.wc-page-close-kicker),
html[data-theme="light"] .wc-page-close-brand small,
html[data-theme="light"] .wc-page-close-links b { color: var(--theme-muted) !important; }
html[data-theme="light"] .footer-cta a,
html[data-theme="light"] .wc-page-close a { color: #fffdf8 !important; background: var(--theme-coral) !important; border-color: var(--theme-coral) !important; }
html[data-theme="light"] .footer-cta a:hover,
html[data-theme="light"] .wc-page-close a:hover { background: var(--theme-terracotta) !important; }
html[data-theme="light"] .footer-grid a:not(.footer-cta a),
html[data-theme="light"] .wc-page-close-links span { color: var(--theme-ink) !important; }
html[data-theme="light"] .footer-cta::before,
html[data-theme="light"] .footer-content::before,
html[data-theme="light"] .wc-page-close::after,
html[data-theme="light"] .wc-page-close-meta::after { color: rgba(166,78,53,.10) !important; }
html[data-theme="light"] .footer-content,
html[data-theme="light"] .wc-page-close-meta,
html[data-theme="light"] .wc-page-close-note { background: transparent !important; border-color: var(--theme-border) !important; }

/* The private workbench does not mount the public navigation, but it shares
   the same persisted theme choice. Keep its login gate and panels in rhythm
   with the public light surface as well. */
html[data-theme="light"] #loginGate,
html[data-theme="light"] #dashboard,
html[data-theme="light"] .main { background: var(--theme-paper) !important; color: var(--theme-ink) !important; }
html[data-theme="light"] .login-bg {
  background: radial-gradient(ellipse 60% 40% at 30% 40%, rgba(196,87,66,.10), transparent 70%), radial-gradient(ellipse 40% 50% at 70% 60%, rgba(101,122,90,.08), transparent 60%) !important;
}
html[data-theme="light"] .login-box,
html[data-theme="light"] .card-panel,
html[data-theme="light"] .project-card,
html[data-theme="light"] .project-detail,
html[data-theme="light"] .msg-layout,
html[data-theme="light"] .asset-card,
html[data-theme="light"] .buyout-card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .comp-card {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.84) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] .topbar,
html[data-theme="light"] .sidebar {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.90) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] .topbar-logo,
html[data-theme="light"] .topbar-title strong,
html[data-theme="light"] .sidebar-item,
html[data-theme="light"] .page-head h2,
html[data-theme="light"] .act-text,
html[data-theme="light"] .act-text strong,
html[data-theme="light"] .project-body .title,
html[data-theme="light"] .detail-info h2 { color: var(--theme-ink) !important; }
html[data-theme="light"] .topbar-title,
html[data-theme="light"] .sidebar-label,
html[data-theme="light"] .sidebar-item:hover,
html[data-theme="light"] .project-body .client,
html[data-theme="light"] .detail-info .meta,
html[data-theme="light"] .act-time,
html[data-theme="light"] .login-subtitle,
html[data-theme="light"] .login-footer { color: var(--theme-muted) !important; }
html[data-theme="light"] .role-tabs,
html[data-theme="light"] .role-switch,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .msg-search input,
html[data-theme="light"] .progress-wrap,
html[data-theme="light"] .project-thumb,
html[data-theme="light"] .milestone { background: rgba(239,230,216,.72) !important; border-color: var(--theme-border) !important; color: var(--theme-ink) !important; }
html[data-theme="light"] .role-tab.active,
html[data-theme="light"] .role-switch-btn.active,
html[data-theme="light"] .login-btn { color: #fffdf8 !important; background: var(--theme-coral) !important; }
html[data-theme="light"] .role-tab,
html[data-theme="light"] .role-switch-btn,
html[data-theme="light"] .form-group label { color: var(--theme-muted) !important; }
html[data-theme="light"] .login-box .login-logo,
html[data-theme="light"] .login-box .login-logo span { color: var(--theme-ink) !important; }
html[data-theme="light"] .login-error { color: #a74437 !important; }
html[data-theme="light"] .stat-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .learning-card,
html[data-theme="light"] .exam-item { background: rgba(255,253,248,.78) !important; border-color: var(--theme-border) !important; color: var(--theme-ink) !important; }
html[data-theme="light"] .stat-card .num,
html[data-theme="light"] .stat-card .label,
html[data-theme="light"] .cc-title,
html[data-theme="light"] .ei-name,
html[data-theme="light"] .cr-name { color: var(--theme-ink) !important; }
html[data-theme="light"] .stat-card .label,
html[data-theme="light"] .cc-meta,
html[data-theme="light"] .ei-meta,
html[data-theme="light"] .cr-desc { color: var(--theme-muted) !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] *,
  html[data-theme="light"] *::before,
  html[data-theme="light"] *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Final light-theme pass for the homepage hero. These rules intentionally
   come last so the carousel stylesheet cannot restore the old framed caption. */
html[data-theme="light"] .hero-heading .hero-label {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Replace the dark hero-to-trust seam with a light paper transition. */
html[data-theme="light"] .hero + .trust-bar::before {
  background: linear-gradient(
    180deg,
    rgba(246,240,231,0) 0%,
    rgba(252, 248, 241, 0.88) 45%,
    var(--theme-paper-soft) 100%
  ) !important;
}

/* Product tiles sit directly on the light paper surface; remove the dark
   outer frame while keeping the image clipping and hover lift intact. */
html[data-theme="light"] #quality .product-card {
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] #quality .product-card:hover {
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(83,65,42,.12) !important;
}

/* Keep the three heritage craft tiles readable on the paper surface. The
   shared neutral pass colors their labels for dark backgrounds, which is too
   low-contrast when the light theme switches the tile to ivory. */
html[data-theme="light"] #heritage .craft b {
  color: #2c2925 !important;
}
html[data-theme="light"] #heritage .craft span {
  color: #625e57 !important;
}
html[data-theme="light"] #heritage .craft {
  color: #2c2925 !important;
  border-color: rgba(31,30,28,.14) !important;
  box-shadow: 0 2px 8px rgba(83,65,42,.06) !important;
}

/* Standalone pages: match the light footer treatment from the reference.
   These rules come last so they win over standalone-ending.css, which is
   shared by every creator subpage and otherwise paints the right column dark. */
html[data-theme="light"] .wc-page-close {
  background: var(--theme-paper-soft) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .wc-page-close::before {
  display: none !important;
  content: none !important;
}
html[data-theme="light"] .wc-page-close-panel {
  background: var(--theme-paper-strong) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .wc-page-close-meta,
html[data-theme="light"] .wc-page-close-note {
  background: var(--theme-paper-soft) !important;
  border-color: transparent !important;
  color: #625e57 !important;
}
html[data-theme="light"] .wc-page-close-brand,
html[data-theme="light"] .wc-page-close-links span {
  color: #2c2925 !important;
}
html[data-theme="light"] .wc-page-close-brand small,
html[data-theme="light"] .wc-page-close-note {
  color: #6f665e !important;
}
html[data-theme="light"] .wc-page-close-links b {
  color: #7a6659 !important;
}

/* Homepage footer: use the same two-tone paper composition as the reference
   instead of the dark fallback left by redesign.css. */
html[data-theme="light"] body > .page-shell > footer.footer {
  background: var(--theme-paper) !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html[data-theme="light"] body > .page-shell > footer.footer::before {
  display: none !important;
  content: none !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-layout {
  background: var(--theme-paper-soft) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-cta {
  background: var(--theme-paper-strong) !important;
  color: var(--theme-ink) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-cta::before,
html[data-theme="light"] body > .page-shell > footer.footer .footer-cta::after {
  display: none !important;
  content: none !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-cta p {
  color: #7a7168 !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-cta h2 {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-cta > span {
  color: #6f665e !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-cta a {
  color: #fffdf8 !important;
  background: var(--theme-coral) !important;
  border-color: var(--theme-coral) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-content {
  background: var(--theme-paper-soft) !important;
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-content::before {
  color: rgba(166, 78, 53, .10) !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-grid > div > h4 {
  color: #7a6659 !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-grid a:not(.footer-cta a) {
  color: #2c2925 !important;
}
html[data-theme="light"] body > .page-shell > footer.footer .footer-note {
  color: #6f665e !important;
  border-color: rgba(31, 30, 28, .14) !important;
  background: transparent !important;
}

/* Creator Academy hero: one explicit light-theme contract. This is kept at
   the end because academy-peak.css contains legacy !important declarations. */
html[data-theme="light"] body .page.hero,
html[data-theme="light"] body .offline-hero,
html[data-theme="light"] body #page-certified .hero {
  background: var(--theme-paper) !important;
  background-image: none !important;
  border: 0 !important;
}
html[data-theme="light"] body .page.hero .page-inner,
html[data-theme="light"] body .offline-hero .page-inner,
html[data-theme="light"] body #page-certified .hero .page-inner {
  background: transparent !important;
}
html[data-theme="light"] body .academy-hero {
  background: var(--theme-paper) !important;
  background-image: none !important;
}
html[data-theme="light"] body .page.hero + .page-inner,
html[data-theme="light"] body .offline-hero + .page-inner,
html[data-theme="light"] body .page.hero + .section-divider,
html[data-theme="light"] body .offline-hero + .section-divider {
  background: var(--theme-paper) !important;
  border-top: 0 !important;
}
html[data-theme="light"] body .page.hero::before,
html[data-theme="light"] body .page.hero::after,
html[data-theme="light"] body .offline-hero::before,
html[data-theme="light"] body .offline-hero::after,
html[data-theme="light"] body #page-certified .hero::before,
html[data-theme="light"] body #page-certified .hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}
/* The WebGL tunnel now renders with an alpha surface in light mode, so the
   existing paper color remains visible beneath the animated particle layer. */
html[data-theme="light"] body #page-certified .hero .academy-tunnel-canvas {
  display: block !important;
  opacity: .42 !important;
  filter: none !important;
}
html[data-theme="light"] body #page-certified .hero .hero-bg,
html[data-theme="light"] body #page-certified .hero .hero-grid-lines {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}
html[data-theme="light"] body .academy-hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}
html[data-theme="light"] body .page.hero + .page-inner::before,
html[data-theme="light"] body .offline-hero + .page-inner::before,
html[data-theme="light"] body .page.hero + .section-divider::before,
html[data-theme="light"] body .offline-hero + .section-divider::before,
html[data-theme="light"] body .academy-hero + .content-section::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
/* Certified creators wraps its hero in #page-certified, so the generic
   .page.hero sibling selector above does not reach this seam. */
html[data-theme="light"] body #page-certified .hero + .page-inner::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
html[data-theme="light"] body .academy-tunnel-canvas {
  opacity: .42 !important;
  filter: none !important;
}

/* The small hero label is a white paper chip; the hero itself stays on the
   warmer paper surface. Keep this selector more specific than academy-peak's
   legacy dark chip declaration. */
html[data-theme="light"] body .page.hero .hero-sub,
html[data-theme="light"] body .offline-hero .hero-sub,
html[data-theme="light"] body #page-certified .hero .hero-sub {
  color: var(--theme-terracotta) !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(166,78,53,.24) !important;
  box-shadow: 0 3px 12px rgba(83,65,42,.06) !important;
}
html[data-theme="light"] body .section-title .gold,
html[data-theme="light"] body .section-divider h2 .gold {
  color: var(--theme-coral) !important;
}

/* Academy hero actions use the platform coral in light mode, including the
   offline page's more-specific inline action rules. */
html[data-theme="light"] body .page.hero .hero-actions .btn-primary,
html[data-theme="light"] body .offline-hero .hero-actions .btn-primary,
html[data-theme="light"] body #page-certified .hero-actions .btn-primary {
  color: #fffdf8 !important;
  background: var(--theme-coral) !important;
  border-color: var(--theme-coral) !important;
}
html[data-theme="light"] body .page.hero .hero-actions .btn-primary:hover,
html[data-theme="light"] body .offline-hero .hero-actions .btn-primary:hover,
html[data-theme="light"] body #page-certified .hero-actions .btn-primary:hover {
  background: var(--theme-terracotta) !important;
  border-color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body .page.hero .hero-actions .btn-outline,
html[data-theme="light"] body .offline-hero .hero-actions .btn-outline,
html[data-theme="light"] body #page-certified .hero-actions .btn-outline {
  color: var(--theme-ink) !important;
  background: #fffdf8 !important;
  border-color: rgba(31,30,28,.14) !important;
}

/* Enterprise brain light surface. The page keeps its portrait and motion,
   while every technical overlay is remapped to the paper/coral palette. */
html[data-theme="light"] .brain-page,
html[data-theme="light"] .brain-page > main.brain-page {
  background: var(--theme-paper) !important;
  color: var(--theme-ink) !important;
}
html[data-theme="light"] .brain-page .lgpsm-hero {
  background: var(--theme-paper-strong) !important;
  color: var(--theme-ink) !important;
}
html[data-theme="light"] .brain-page .lgpsm-background {
  background: transparent !important;
}
html[data-theme="light"] .brain-page .lgpsm-bg-base {
  background-image: url('https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260802_074534_f0d9d476-3f86-4c67-9b12-dfc63d99da41.png&w=1920&q=85') !important;
  filter: sepia(.10) saturate(.82) brightness(.98) contrast(1.14) !important;
  opacity: .62 !important;
}
html[data-theme="light"] .brain-page .lgpsm-bg-reveal {
  filter: sepia(.10) saturate(.82) brightness(.98) contrast(1.14) !important;
  opacity: .17 !important;
}
html[data-theme="light"] .brain-page .lgpsm-background::after {
  background:
    linear-gradient(90deg, rgba(246,240,231,.66), rgba(246,240,231,.12) 46%, rgba(246,240,231,.42)),
    linear-gradient(180deg, rgba(255,253,248,.06), transparent 60%, rgba(246,240,231,.74) 87%, var(--theme-paper-strong) 100%) !important;
}
html[data-theme="light"] .brain-page .lgpsm-grid {
  opacity: .10 !important;
}
html[data-theme="light"] .brain-page .lgpsm-grid path {
  stroke: rgba(166,78,53,.24) !important;
}
html[data-theme="light"] .brain-page .lgpsm-copy h1 {
  color: var(--theme-ink) !important;
  text-shadow: none !important;
}
html[data-theme="light"] .brain-page .lgpsm-copy h1 span {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] .brain-page .lgpsm-corner,
html[data-theme="light"] .brain-page .lgpsm-feature .bracket,
html[data-theme="light"] .brain-page .lgpsm-globe {
  stroke: var(--theme-terracotta) !important;
}
html[data-theme="light"] .brain-page .lgpsm-checker g {
  fill: var(--theme-coral) !important;
}
html[data-theme="light"] .brain-page .lgpsm-shop {
  color: #fffdf8 !important;
  background: var(--theme-coral) !important;
  border-color: var(--theme-coral) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .brain-page .lgpsm-shop:hover {
  color: #fffdf8 !important;
  background: var(--theme-terracotta) !important;
  border-color: var(--theme-terracotta) !important;
}
html[data-theme="light"] .brain-page .lgpsm-feature {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.90) !important;
  border: 1px solid rgba(166,78,53,.28) !important;
  box-shadow: var(--theme-shadow-low) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .brain-page .lgpsm-feature p {
  color: var(--theme-ink) !important;
}

html[data-theme="light"] .brain-page .lgpsm-hero + .brain-system {
  background: var(--theme-paper) !important;
}
html[data-theme="light"] .brain-page .lgpsm-hero + .brain-system::before {
  background: linear-gradient(180deg, rgba(246,240,231,0), rgba(246,240,231,.58) 38%, rgba(246,240,231,.95) 80%, var(--theme-paper) 100%) !important;
}
html[data-theme="light"] .brain-page .system-heading {
  border-bottom-color: var(--theme-border) !important;
}
html[data-theme="light"] .brain-page .system-heading h2,
html[data-theme="light"] .brain-page .system-heading h2 em {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] .brain-page .system-heading h2 em {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] .brain-page .system-heading > p,
html[data-theme="light"] .brain-page .system-cloud small {
  color: var(--theme-muted) !important;
}
html[data-theme="light"] .brain-page .system-cloud {
  color: var(--theme-terracotta) !important;
  background: rgba(255,253,248,.92) !important;
  border-color: rgba(166,78,53,.28) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .brain-page .system-cloud::before {
  border-top-color: rgba(166,78,53,.28) !important;
  border-bottom-color: rgba(166,78,53,.16) !important;
}
html[data-theme="light"] .brain-page .flow-arrow {
  border-left-color: rgba(166,78,53,.46) !important;
}
html[data-theme="light"] .brain-page .flow-arrow::after {
  border-top-color: var(--theme-coral) !important;
}
html[data-theme="light"] .brain-page .flow-link {
  background: repeating-linear-gradient(90deg, rgba(166,78,53,.52) 0 7px, transparent 7px 13px) !important;
}
html[data-theme="light"] .brain-page .flow-link::before {
  border-color: rgba(166,78,53,.55) !important;
  background: var(--theme-paper-strong) !important;
}
html[data-theme="light"] .brain-page .flow-link::after {
  border-left-color: var(--theme-coral) !important;
}
html[data-theme="light"] .brain-page .flow-card,
html[data-theme="light"] .brain-page .infra-panel,
html[data-theme="light"] .brain-page .command-panel,
html[data-theme="light"] .brain-page .staff-panel {
  color: var(--theme-ink) !important;
  background: var(--theme-paper-strong) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] .brain-page .flow-card:hover,
html[data-theme="light"] .brain-page .infra-panel:hover,
html[data-theme="light"] .brain-page .command-panel:hover,
html[data-theme="light"] .brain-page .staff-panel:hover {
  background: #fffaf1 !important;
  border-color: rgba(166,78,53,.42) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] .brain-page .flow-card::before,
html[data-theme="light"] .brain-page .infra-panel::before,
html[data-theme="light"] .brain-page .command-panel::before,
html[data-theme="light"] .brain-page .staff-panel::before {
  background: linear-gradient(rgba(166,78,53,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(166,78,53,.07) 1px, transparent 1px) !important;
  opacity: .14 !important;
}
html[data-theme="light"] .brain-page .flow-card h3,
html[data-theme="light"] .brain-page .panel-heading h3,
html[data-theme="light"] .brain-page .brain-system b,
html[data-theme="light"] .brain-page .brain-system strong {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] .brain-page .flow-card p,
html[data-theme="light"] .brain-page .flow-card ul,
html[data-theme="light"] .brain-page .infra-panel > p,
html[data-theme="light"] .brain-page .hardware-row small,
html[data-theme="light"] .brain-page .infra-benefits small,
html[data-theme="light"] .brain-page .command-primary small,
html[data-theme="light"] .brain-page .staff-departments > div > small {
  color: var(--theme-muted) !important;
}
html[data-theme="light"] .brain-page .flow-card ul {
  border-top-color: var(--theme-border) !important;
}
html[data-theme="light"] .brain-page .flow-card li::before,
html[data-theme="light"] .brain-page .flow-index,
html[data-theme="light"] .brain-page .panel-heading small,
html[data-theme="light"] .brain-page .panel-link,
html[data-theme="light"] .brain-page .live-dot,
html[data-theme="light"] .brain-page .staff-departments i {
  color: var(--theme-terracotta) !important;
}
html[data-theme="light"] .brain-page .system-endpoints span {
  color: var(--theme-terracotta) !important;
  border-top-color: rgba(166,78,53,.30) !important;
}
html[data-theme="light"] .brain-page .system-endpoints span::before {
  background: var(--theme-coral) !important;
}
html[data-theme="light"] .brain-page .system-endpoints small {
  color: var(--theme-muted) !important;
}
html[data-theme="light"] .brain-page .panel-heading,
html[data-theme="light"] .brain-page .hardware-row,
html[data-theme="light"] .brain-page .staff-departments > div {
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] .brain-page .panel-symbol,
html[data-theme="light"] .brain-page .hardware-icon,
html[data-theme="light"] .brain-page .command-tools span,
html[data-theme="light"] .brain-page .staff-departments button span {
  color: var(--theme-terracotta) !important;
  background: rgba(196,87,66,.07) !important;
  border-color: rgba(166,78,53,.28) !important;
}
html[data-theme="light"] .brain-page .staff-departments button,
html[data-theme="light"] .brain-page .command-primary {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] .brain-page .command-primary {
  background: rgba(196,87,66,.06) !important;
  border-left-color: rgba(166,78,53,.28) !important;
  border-top-color: var(--theme-border) !important;
  border-right-color: var(--theme-border) !important;
  border-bottom-color: var(--theme-border) !important;
}
html[data-theme="light"] .brain-page .command-primary.is-active {
  background: rgba(196,87,66,.12) !important;
  border-color: rgba(166,78,53,.42) !important;
}
html[data-theme="light"] .brain-page .command-primary span {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] .brain-page .system-note {
  color: var(--theme-muted) !important;
  border-top-color: var(--theme-border) !important;
  border-bottom-color: var(--theme-border) !important;
}
html[data-theme="light"] .brain-page .system-note b {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] .brain-page .system-note .btn {
  color: var(--theme-terracotta) !important;
  background: transparent !important;
  border-color: rgba(166,78,53,.36) !important;
}
html[data-theme="light"] .brain-page .system-note .btn:hover {
  color: #fffdf8 !important;
  background: var(--theme-coral) !important;
  border-color: var(--theme-coral) !important;
}

/* Final light-theme palette pass for the two academy pages. The legacy
   academy sheet intentionally carries a cool blue/graphite treatment with
   high-specificity declarations; remap those remaining surfaces here so the
   light theme reads as one warm paper-and-coral system. */
html[data-theme="light"] body .offline-hero .hero-stats,
html[data-theme="light"] body #page-certified .hero-stats {
  background: rgba(255,253,248,.88) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] body .offline-hero .hero-stats::before,
html[data-theme="light"] body #page-certified .hero-stats::before {
  background: linear-gradient(115deg, transparent 24%, rgba(196,87,66,.12) 48%, transparent 68%) !important;
}
html[data-theme="light"] body .offline-hero .hero-stat,
html[data-theme="light"] body #page-certified .hero-stat {
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] body .offline-hero .hero-stat .num,
html[data-theme="light"] body #page-certified .hero-stat .num {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body .offline-hero .hero-stat .lbl,
html[data-theme="light"] body #page-certified .hero-stat .lbl {
  color: #6f665e !important;
}

/* Offline training cards and the contact panel. */
html[data-theme="light"] body .offline-hero + .page-inner .advantage-card,
html[data-theme="light"] body .offline-hero + .page-inner .campus-card,
html[data-theme="light"] body .offline-hero ~ .page-inner .advantage-card,
html[data-theme="light"] body .offline-hero ~ .page-inner .campus-card {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.86) !important;
  background-image: none !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] body .offline-hero + .page-inner .advantage-card:hover,
html[data-theme="light"] body .offline-hero + .page-inner .campus-card:hover,
html[data-theme="light"] body .offline-hero ~ .page-inner .advantage-card:hover,
html[data-theme="light"] body .offline-hero ~ .page-inner .campus-card:hover {
  background: var(--theme-paper-strong) !important;
  border-color: rgba(166,78,53,.40) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] body .offline-hero + .page-inner .advantage-card::after,
html[data-theme="light"] body .offline-hero + .page-inner .campus-card::after,
html[data-theme="light"] body .offline-hero ~ .page-inner .advantage-card::after,
html[data-theme="light"] body .offline-hero ~ .page-inner .campus-card::after {
  background: linear-gradient(135deg, rgba(196,87,66,.10), transparent 48%, rgba(255,255,255,.36)) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .advantage-card h3,
html[data-theme="light"] body .offline-hero ~ .page-inner .campus-card .city {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .advantage-card h3 {
  border-bottom-color: var(--theme-border) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .advantage-card p,
html[data-theme="light"] body .offline-hero ~ .page-inner .campus-card .desc {
  color: #625e57 !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .campus-card .addr {
  color: #6f665e !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .campus-card .icon,
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-item .emoji {
  color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section {
  background: rgba(255,253,248,.86) !important;
  background-image: none !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section::after {
  background: linear-gradient(115deg, transparent 24%, rgba(196,87,66,.16) 48%, transparent 68%) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section h2 {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section p,
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-item .label {
  color: var(--theme-muted) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-item .value {
  color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section .contact-actions .btn-primary {
  color: #fffdf8 !important;
  background: var(--theme-coral) !important;
  border-color: var(--theme-coral) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section .contact-actions .btn-primary:hover {
  background: var(--theme-terracotta) !important;
  border-color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section .contact-actions .btn-outline {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.72) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section .contact-actions .btn-outline:hover {
  color: var(--theme-terracotta) !important;
  background: rgba(196,87,66,.08) !important;
  border-color: rgba(166,78,53,.42) !important;
}

/* The offline contact panel follows the certified creator card finish in
   light mode: warm paper, a neutral white sheen, and no coral wash on hover.
   The CTA buttons keep their brand-red treatment independently. */
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section {
  background: linear-gradient(132deg, #fffdfa 0%, #f7f3ec 48%, #fffefa 100%) !important;
  background-image: linear-gradient(132deg, #fffdfa 0%, #f7f3ec 48%, #fffefa 100%) !important;
  border-color: rgba(117, 105, 93, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(111,96,80,.08), 0 14px 32px rgba(83,65,42,.10) !important;
  transition: transform .42s cubic-bezier(.22,1,.36,1), background .42s ease, border-color .42s ease, box-shadow .42s ease !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section:hover {
  background: linear-gradient(132deg, #fffefa 0%, #f1ece3 48%, #ffffff 100%) !important;
  background-image: linear-gradient(132deg, #fffefa 0%, #f1ece3 48%, #ffffff 100%) !important;
  border-color: rgba(105, 89, 75, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(111,96,80,.10), 0 22px 46px rgba(83,65,42,.15) !important;
  transform: translateY(-4px) !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section::after {
  inset: 0 !important;
  background: linear-gradient(112deg, transparent 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,.82) 48%, rgba(221,213,201,.24) 55%, transparent 72%) !important;
  background-size: 240% 100% !important;
  background-position: 0 0 !important;
  opacity: .22 !important;
  transition: background-position .9s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section:hover::after {
  background-position: 100% 0 !important;
  opacity: .70 !important;
}
html[data-theme="light"] body .offline-hero ~ .page-inner .contact-section > * {
  position: relative;
  z-index: 1;
}

/* Certified creator page: warm level accents replace the old blue/silver
   text, while the supplied level emblems remain visible in the badges. */
html[data-theme="light"] body #page-certified .featured-card,
html[data-theme="light"] body #page-certified .creator-card,
html[data-theme="light"] body #page-certified .trust-card {
  color: var(--theme-ink) !important;
  background: rgba(255,253,248,.86) !important;
  background-image: none !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] body #page-certified .featured-card:hover,
html[data-theme="light"] body #page-certified .creator-card:hover,
html[data-theme="light"] body #page-certified .trust-card:hover {
  background: var(--theme-paper-strong) !important;
  border-color: rgba(166,78,53,.40) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] body #page-certified .featured-card::after,
html[data-theme="light"] body #page-certified .creator-card::after,
html[data-theme="light"] body #page-certified .trust-card::after {
  background: linear-gradient(115deg, transparent 18%, rgba(196,87,66,.14) 48%, transparent 82%) !important;
}
html[data-theme="light"] body #page-certified .creator-card.diamond::before,
html[data-theme="light"] body #page-certified .creator-card.gold::before,
html[data-theme="light"] body #page-certified .creator-card.silver::before,
html[data-theme="light"] body #page-certified .creator-card.bronze::before {
  background: linear-gradient(90deg, transparent, var(--theme-coral), transparent) !important;
}
html[data-theme="light"] body #page-certified .featured-card h3,
html[data-theme="light"] body #page-certified .trust-card h4 {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body #page-certified .featured-right .bio,
html[data-theme="light"] body #page-certified .trust-card .level-desc {
  color: var(--theme-muted) !important;
}
html[data-theme="light"] body #page-certified .featured-badge {
  color: var(--theme-terracotta) !important;
  background: rgba(196,87,66,.08) !important;
  border-color: rgba(166,78,53,.24) !important;
}
html[data-theme="light"] body #page-certified .featured-avatar,
html[data-theme="light"] body #page-certified .creator-avatar {
  color: var(--theme-terracotta) !important;
  background: linear-gradient(135deg, #f0d8ca, #fffdf8) !important;
}
html[data-theme="light"] body #page-certified .creator-card.gold .creator-avatar { background: linear-gradient(135deg, #f2dfcf, #fffdf8) !important; }
html[data-theme="light"] body #page-certified .creator-card.silver .creator-avatar { background: linear-gradient(135deg, #e7e0d8, #fffdf8) !important; }
html[data-theme="light"] body #page-certified .creator-card.bronze .creator-avatar { background: linear-gradient(135deg, #ecd1c1, #fffdf8) !important; }
html[data-theme="light"] body #page-certified .featured-avatar span,
html[data-theme="light"] body #page-certified .creator-avatar span { color: var(--theme-terracotta) !important; }
html[data-theme="light"] body #page-certified .featured-avatar-ring.diamond,
html[data-theme="light"] body #page-certified .creator-card.diamond .creator-avatar-ring { border-color: var(--theme-coral) !important; }
html[data-theme="light"] body #page-certified .creator-card.gold .creator-avatar-ring { border-color: #b6603f !important; }
html[data-theme="light"] body #page-certified .creator-card.silver .creator-avatar-ring { border-color: #8a8177 !important; }
html[data-theme="light"] body #page-certified .creator-card.bronze .creator-avatar-ring { border-color: var(--theme-terracotta) !important; }
html[data-theme="light"] body #page-certified .featured-level.diamond,
html[data-theme="light"] body #page-certified .creator-level-badge.diamond {
  color: var(--theme-terracotta) !important;
  background: rgba(196,87,66,.10) !important;
  border-color: rgba(166,78,53,.28) !important;
}
html[data-theme="light"] body #page-certified .creator-level-badge.gold {
  color: #a64e35 !important;
  background: rgba(196,87,66,.08) !important;
  border-color: rgba(166,78,53,.24) !important;
}
html[data-theme="light"] body #page-certified .creator-level-badge.silver {
  color: #6f665e !important;
  background: rgba(111,102,94,.10) !important;
  border-color: rgba(111,102,94,.24) !important;
}
html[data-theme="light"] body #page-certified .creator-level-badge.bronze {
  color: #8d432f !important;
  background: rgba(166,78,53,.10) !important;
  border-color: rgba(166,78,53,.26) !important;
}
html[data-theme="light"] body #page-certified .skill-tag {
  color: #625e57 !important;
  background: rgba(196,87,66,.05) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] body #page-certified .skill-tag:hover {
  color: var(--theme-terracotta) !important;
  border-color: rgba(166,78,53,.36) !important;
}
html[data-theme="light"] body #page-certified .honor-badge {
  color: var(--theme-terracotta) !important;
  background: rgba(196,87,66,.07) !important;
  border-color: rgba(166,78,53,.18) !important;
}
html[data-theme="light"] body #page-certified .cert-story {
  color: #625e57 !important;
  background: rgba(196,87,66,.06) !important;
  border-left-color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body #page-certified .creator-name,
html[data-theme="light"] body #page-certified .creator-stat .num {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body #page-certified .creator-stat .lbl,
html[data-theme="light"] body #page-certified .rating-count,
html[data-theme="light"] body #page-certified .featured-stat .lbl {
  color: #6f665e !important;
}
html[data-theme="light"] body #page-certified .creator-stats {
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] body #page-certified .featured-stat .num,
html[data-theme="light"] body #page-certified .rating-stars,
html[data-theme="light"] body #page-certified .view-btn {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body #page-certified .featured-work-thumb {
  color: var(--theme-ink) !important;
  background: var(--theme-paper-soft) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] body #page-certified .view-btn:hover {
  color: #fffdf8 !important;
  background: var(--theme-coral) !important;
  border-color: var(--theme-coral) !important;
}
html[data-theme="light"] body #page-certified .btn-ghost {
  color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body #page-certified .trust-card .trust-icon {
  filter: sepia(.28) saturate(.82) !important;
}
html[data-theme="light"] body #page-certified .trust-req {
  color: #625e57 !important;
  background: rgba(239,230,216,.60) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="light"] body #page-certified .trust-req strong {
  color: var(--theme-terracotta) !important;
}

/* Keep each level card's sheen inside its own bounds. Without a positioned
   clipping context, the shared ::after sheen is laid out on the section and
   creates one large tinted panel behind the row. */
body #page-certified .trust-section,
body #page-certified .trust-grid {
  background: transparent !important;
  background-image: none !important;
}
body #page-certified .trust-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Transparent level assets keep the emblem clean on both light and dark
   cards. Normal compositing preserves their original color and edges. */
html[data-theme="light"] body #page-certified .creator-level-badge::before,
html[data-theme="light"] body #page-certified .featured-level::before,
html[data-theme="light"] body #page-certified .trust-icon {
  mix-blend-mode: normal !important;
}

/* Light certification cards follow the quiet silver-paper reference: a
   warm-white surface, restrained graphite edge, and a neutral gloss sweep on
   hover. Keep the coral only for text and controls, never as a card wash. */
html[data-theme="light"] body #page-certified .featured-card,
html[data-theme="light"] body #page-certified .creator-card,
html[data-theme="light"] body #page-certified .trust-card {
  background: linear-gradient(132deg, #fffdfa 0%, #f7f3ec 48%, #fffefa 100%) !important;
  background-image: linear-gradient(132deg, #fffdfa 0%, #f7f3ec 48%, #fffefa 100%) !important;
  border-color: rgba(117, 105, 93, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(111,96,80,.08), 0 14px 32px rgba(83, 65, 42, .10) !important;
}
html[data-theme="light"] body #page-certified .featured-card:hover,
html[data-theme="light"] body #page-certified .creator-card:hover,
html[data-theme="light"] body #page-certified .trust-card:hover {
  background: linear-gradient(132deg, #fffefa 0%, #f1ece3 48%, #ffffff 100%) !important;
  background-image: linear-gradient(132deg, #fffefa 0%, #f1ece3 48%, #ffffff 100%) !important;
  border-color: rgba(105, 89, 75, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(111,96,80,.10), 0 22px 46px rgba(83, 65, 42, .15) !important;
}
html[data-theme="light"] body #page-certified .featured-card::after,
html[data-theme="light"] body #page-certified .creator-card::after,
html[data-theme="light"] body #page-certified .trust-card::after {
  background: linear-gradient(112deg, transparent 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,.82) 48%, rgba(221,213,201,.24) 55%, transparent 72%) !important;
  background-size: 240% 100% !important;
  background-position: 0 0 !important;
  opacity: .22 !important;
  transition: background-position .9s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="light"] body #page-certified .featured-card:hover::after,
html[data-theme="light"] body #page-certified .creator-card:hover::after,
html[data-theme="light"] body #page-certified .trust-card:hover::after {
  background-position: 100% 0 !important;
  opacity: .70 !important;
}
html[data-theme="light"] body #page-certified .featured-card::before,
html[data-theme="light"] body #page-certified .creator-card::before {
  background: linear-gradient(90deg, transparent, rgba(106, 111, 114, .38), transparent) !important;
}

/* Enterprise cards use the same quiet paper treatment as certified creator
   cards in light mode. Keep the existing information architecture and grid
   details, but replace the cool technical surface with a warm-white card that
   lifts and catches a white sheen on hover. */
html[data-theme="light"] body .brain-page .flow-card,
html[data-theme="light"] body .brain-page .infra-panel,
html[data-theme="light"] body .brain-page .command-panel,
html[data-theme="light"] body .brain-page .staff-panel {
  background: linear-gradient(132deg, #fffdfa 0%, #f7f3ec 48%, #fffefa 100%) !important;
  background-image: linear-gradient(132deg, #fffdfa 0%, #f7f3ec 48%, #fffefa 100%) !important;
  border-color: rgba(117, 105, 93, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(111,96,80,.08), 0 14px 32px rgba(83,65,42,.10) !important;
  transition: transform .42s cubic-bezier(.22,1,.36,1), background .42s ease, border-color .42s ease, box-shadow .42s ease !important;
}
html[data-theme="light"] body .brain-page .flow-card:hover,
html[data-theme="light"] body .brain-page .infra-panel:hover,
html[data-theme="light"] body .brain-page .command-panel:hover,
html[data-theme="light"] body .brain-page .staff-panel:hover {
  background: linear-gradient(132deg, #fffefa 0%, #f1ece3 48%, #ffffff 100%) !important;
  background-image: linear-gradient(132deg, #fffefa 0%, #f1ece3 48%, #ffffff 100%) !important;
  border-color: rgba(105, 89, 75, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(111,96,80,.10), 0 22px 46px rgba(83,65,42,.15) !important;
  transform: translateY(-4px) !important;
}
html[data-theme="light"] body .brain-page .flow-card::before,
html[data-theme="light"] body .brain-page .infra-panel::before,
html[data-theme="light"] body .brain-page .command-panel::before,
html[data-theme="light"] body .brain-page .staff-panel::before {
  background-image:
    linear-gradient(rgba(166,78,53,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166,78,53,.06) 1px, transparent 1px),
    linear-gradient(112deg, transparent 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,.76) 48%, rgba(255,255,255,0) 62%, transparent 72%) !important;
  background-size: 24px 24px, 24px 24px, 240% 100% !important;
  background-position: 0 0, 0 0, 0 0 !important;
  opacity: .16 !important;
  transition: background-position .9s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="light"] body .brain-page .flow-card:hover::before,
html[data-theme="light"] body .brain-page .infra-panel:hover::before,
html[data-theme="light"] body .brain-page .command-panel:hover::before,
html[data-theme="light"] body .brain-page .staff-panel:hover::before {
  background-position: 0 0, 0 0, 100% 0 !important;
  opacity: .70 !important;
}
html[data-theme="light"] body .brain-page .flow-card::after {
  background: repeating-linear-gradient(90deg, var(--theme-coral) 0 5px, transparent 5px 10px) !important;
}
html[data-theme="light"] body .brain-page .infra-panel::after,
html[data-theme="light"] body .brain-page .command-panel::after,
html[data-theme="light"] body .brain-page .staff-panel::after {
  background: linear-gradient(112deg, transparent 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,.82) 48%, rgba(221,213,201,.24) 55%, transparent 72%) !important;
  background-size: 240% 100% !important;
  background-position: 0 0 !important;
  opacity: 0 !important;
  transition: background-position .9s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="light"] body .brain-page .infra-panel:hover::after,
html[data-theme="light"] body .brain-page .command-panel:hover::after,
html[data-theme="light"] body .brain-page .staff-panel:hover::after {
  background-position: 100% 0 !important;
  opacity: .70 !important;
}

html[data-theme="light"] body .brain-page .lgpsm-hero + .brain-system {
  background-color: var(--theme-paper) !important;
  background-image:
    linear-gradient(rgba(247,241,233,.90), rgba(247,241,233,.90)),
    url('images/ai-workforce/background.jpg') !important;
  background-size: cover, cover !important;
  background-position: center, center top !important;
}
/* Keep the supplied workstation images in both themes so the hardware row
   communicates the same products regardless of the active color scheme. */
html[data-theme="light"] body .brain-page .hardware-image,
html[data-theme="dark"] body .brain-page .hardware-image {
  display: block !important;
  width: min(100%, 104px) !important;
  height: 94px !important;
  margin: 0 auto 9px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 14px rgba(83,65,42,.08) !important;
}
html[data-theme="light"] body .brain-page .hardware-glyph,
html[data-theme="dark"] body .brain-page .hardware-glyph { display: none !important; }

/* Open the vertical rhythm between the flow diagram, endpoint row and the
   three detailed panels without changing the desktop column proportions. */
body .brain-page .system-endpoints { margin-top: 30px !important; }
body .brain-page .system-flow { margin-bottom: clamp(112px, 9vw, 156px) !important; }
body .brain-page .workspace-layout {
  column-gap: clamp(18px, 2vw, 28px) !important;
  row-gap: clamp(30px, 4vw, 52px) !important;
}
@media (max-width: 760px) {
  body .brain-page .system-flow { margin-bottom: 88px !important; }
  body .brain-page .workspace-layout { row-gap: 34px !important; }
}

/* Course catalog accents stay warm in light mode. The editorial academy
   stylesheet supplies a cool blue for these labels, including the inline
   course count and metadata, so remap all three to the platform red. */
html[data-theme="light"] body .course-section .course-cat-title,
html[data-theme="light"] body .course-section .course-cat-title > span:last-child,
html[data-theme="light"] body .course-section .course-card .course-meta {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body .course-section .course-card .course-meta {
  border-top-color: var(--theme-border) !important;
  font-style: italic !important;
}

/* The certificate preview should use the same paper-and-coral language as
   the other light cards. Remove the legacy blue sheen from its hover state
   and keep the certificate copy italic like the supplied reference. */
html[data-theme="light"] body .cert-display {
  background: linear-gradient(132deg, #fffdfa 0%, #f7f3ec 48%, #fffefa 100%) !important;
  background-image: linear-gradient(132deg, #fffdfa 0%, #f7f3ec 48%, #fffefa 100%) !important;
  border-color: rgba(117, 105, 93, .18) !important;
  box-shadow: var(--theme-shadow-low) !important;
}
html[data-theme="light"] body .cert-display:hover {
  background: linear-gradient(132deg, #fffefa 0%, #f1ece3 48%, #ffffff 100%) !important;
  background-image: linear-gradient(132deg, #fffefa 0%, #f1ece3 48%, #ffffff 100%) !important;
  border-color: rgba(117, 105, 93, .30) !important;
  box-shadow: var(--theme-shadow-medium) !important;
}
html[data-theme="light"] body .cert-display::before {
  background:
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,0) 36%, rgba(255,255,255,.72) 48%, rgba(255,255,255,0) 62%, transparent 82%),
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,255,255,.28), transparent 70%) !important;
  background-size: 220% 100%, auto !important;
  transition: background-position .8s cubic-bezier(.22,1,.36,1) !important;
}
html[data-theme="light"] body .cert-display:hover::before {
  background-position: 100% 0, 0 0 !important;
}
html[data-theme="light"] body .cert-display h3,
html[data-theme="light"] body .cert-display .cert-subtitle,
html[data-theme="light"] body .cert-display .cert-name,
html[data-theme="light"] body .cert-display .cert-level-text,
html[data-theme="light"] body .cert-display .cert-desc,
html[data-theme="light"] body .cert-display .cert-footer-text {
  font-style: italic !important;
}
html[data-theme="light"] body .cert-display h3,
html[data-theme="light"] body .cert-display .cert-level-text {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body .cert-display .cert-subtitle,
html[data-theme="light"] body .cert-display .cert-desc,
html[data-theme="light"] body .cert-display .cert-footer-text {
  color: var(--theme-muted) !important;
}

/* Homepage footer column titles use the same brand-red accent as the rest of
   the light navigation and section labels. */
html[data-theme="light"] body > .page-shell > footer.footer .footer-grid > div > h4 {
  color: var(--theme-coral) !important;
}

/* Homepage card finish: the editorial hover treatment must stay warm in the
   light palette. The legacy desktop rules below redesign.css use graphite
   overlays and pure-black shadows with a higher selector specificity, so
   these scoped selectors intentionally include the page section IDs. */
html[data-theme="light"] body #channels .channel-card {
  border-color: rgba(117, 89, 68, .24) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body #channels .channel-card::after {
  background: linear-gradient(
    0deg,
    rgba(86, 59, 42, .16) 0%,
    rgba(86, 59, 42, .045) 42%,
    transparent 78%
  ) !important;
  transition: background .42s ease !important;
}
html[data-theme="light"] body #channels .channel-card:hover {
  border-color: rgba(166, 78, 53, .42) !important;
  box-shadow: 0 18px 36px rgba(83, 65, 42, .18) !important;
}
html[data-theme="light"] body #channels .channel-card:hover::after {
  background: linear-gradient(
    0deg,
    rgba(78, 52, 37, .86) 0%,
    rgba(78, 52, 37, .58) 48%,
    rgba(78, 52, 37, .08) 78%
  ) !important;
}
html[data-theme="light"] body #channels .channel-card .channel-body {
  text-shadow: 0 2px 12px rgba(73, 50, 35, .60), 0 5px 24px rgba(73, 50, 35, .34) !important;
  filter: drop-shadow(0 9px 16px rgba(83, 65, 42, .22)) !important;
}
html[data-theme="light"] body #channels .channel-play {
  background: rgba(255, 253, 248, .24) !important;
  box-shadow: 0 0 0 1px rgba(166, 78, 53, .30), 0 10px 34px rgba(83, 65, 42, .18) !important;
}
html[data-theme="light"] body #channels .channel-card.featured:hover .channel-play {
  background: rgba(196, 87, 66, .46) !important;
  box-shadow: 0 0 0 1px rgba(255, 253, 248, .58), 0 0 30px rgba(196, 87, 66, .26), 0 12px 38px rgba(83, 65, 42, .24) !important;
}

/* The quality shelf reveals its copy over the image only on hover. Replace
   the old black reading gradient with a warm umber layer and keep all lift
   shadows in the same paper-brown family. */
html[data-theme="light"] body #quality .product-card {
  border-color: rgba(117, 89, 68, .24) !important;
  background: var(--theme-paper-strong) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] body #quality .product-card:hover {
  border-color: rgba(166, 78, 53, .42) !important;
  box-shadow: 0 16px 34px rgba(83, 65, 42, .18) !important;
}
html[data-theme="light"] body #quality .product-card .product-img {
  background: #eee6db !important;
}
html[data-theme="light"] body #quality .product-card .product-info {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(78, 52, 37, .62) 34%,
    rgba(78, 52, 37, .90) 100%
  ) !important;
  text-shadow: 0 2px 12px rgba(73, 50, 35, .58), 0 5px 20px rgba(73, 50, 35, .30) !important;
  filter: drop-shadow(0 8px 16px rgba(83, 65, 42, .20)) !important;
}
html[data-theme="light"] body #quality .product-card .pick-badge {
  color: #fffdf8 !important;
  background: rgba(78, 52, 37, .76) !important;
  border-color: rgba(255, 253, 248, .42) !important;
}

/* Video stories use the same warm reading layer and gloss sweep. The sweep
   remains hidden at rest and brightens only while the card is hovered. */
html[data-theme="light"] body #video-select .video-showcase > .big-story,
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small {
  border-color: rgba(117, 89, 68, .24) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body #video-select .video-showcase > .big-story:hover,
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small:hover,
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small.is-magnetic-active {
  border-color: rgba(166, 78, 53, .42) !important;
  box-shadow: 0 20px 40px rgba(83, 65, 42, .18) !important;
}
html[data-theme="light"] body #video-select .video-showcase > .big-story::after {
  background:
    linear-gradient(0deg, rgba(78, 52, 37, .82), rgba(78, 52, 37, .06) 68%),
    linear-gradient(115deg, transparent 25%, rgba(196, 87, 66, .12) 48%, transparent 68%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: 0 0, -120% 0 !important;
  opacity: 0 !important;
  transition: background-position .75s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="light"] body #video-select .video-showcase > .big-story:hover::after {
  background-position: 0 0, 100% 0 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small::after {
  background:
    linear-gradient(180deg, transparent 34%, rgba(78, 52, 37, .08) 48%, rgba(78, 52, 37, .90) 100%),
    linear-gradient(115deg, transparent 25%, rgba(196, 87, 66, .14) 48%, transparent 68%) !important;
  background-size: 100% 100%, 220% 100% !important;
  background-position: 0 0, -120% 0 !important;
  opacity: 0 !important;
  transition: background-position .75s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="light"] body #video-select .video-showcase > .story-stack > .story-small:hover::after {
  background-position: 0 0, 100% 0 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body #video-select .video-showcase .story-info,
html[data-theme="light"] body #video-select .video-showcase .story-small > div {
  text-shadow: 0 2px 14px rgba(73, 50, 35, .62), 0 6px 24px rgba(73, 50, 35, .34) !important;
}
html[data-theme="light"] body #video-select .video-showcase .story-small .rank {
  color: #fffdf8 !important;
  background: rgba(78, 52, 37, .74) !important;
  border-color: rgba(255, 253, 248, .42) !important;
  text-shadow: 0 2px 8px rgba(73, 50, 35, .60) !important;
}

/* The heritage image and the hero video still had their original graphite
   fades. Keep a little contrast for white copy while removing the cold black
   cast from the light theme. */
html[data-theme="light"] body #heritage .heritage-feature {
  box-shadow: 0 12px 28px rgba(83, 65, 42, .12) !important;
}
html[data-theme="light"] body #heritage .heritage-feature:hover {
  border-color: rgba(166, 78, 53, .34) !important;
  box-shadow: 0 20px 40px rgba(83, 65, 42, .18) !important;
}
html[data-theme="light"] body #heritage .heritage-feature::after,
html[data-theme="light"] body #heritage .craft::after {
  background: linear-gradient(
    115deg,
    transparent 24%,
    rgba(196, 87, 66, .12) 48%,
    transparent 70%
  ) !important;
  background-size: 220% 100% !important;
  background-position: -120% 0 !important;
  opacity: 0 !important;
  transition: background-position .75s cubic-bezier(.22,1,.36,1), opacity .42s ease !important;
}
html[data-theme="light"] body #heritage .heritage-feature:hover::after,
html[data-theme="light"] body #heritage .craft:hover::after {
  background-position: 100% 0 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body #heritage .craft {
  border-color: rgba(117, 89, 68, .24) !important;
  box-shadow: 0 2px 8px rgba(83, 65, 42, .06) !important;
}
html[data-theme="light"] body #heritage .craft:hover {
  border-color: rgba(166, 78, 53, .36) !important;
  box-shadow: 0 12px 24px rgba(83, 65, 42, .14) !important;
}
html[data-theme="light"] body #heritage .heritage-image::after {
  background: linear-gradient(90deg, transparent, rgba(78, 52, 37, .72)) !important;
}
html[data-theme="light"] body .video-stage {
  background: #eee6db !important;
  box-shadow: 0 24px 58px rgba(83, 65, 42, .16), inset 0 1px 0 rgba(255,255,255,.84) !important;
}
html[data-theme="light"] body .video-stage::after {
  background: linear-gradient(0deg, rgba(78, 52, 37, .68), transparent 48%), linear-gradient(90deg, rgba(78, 52, 37, .08), transparent) !important;
}
html[data-theme="light"] body .video-stage .play-toggle {
  background: rgba(255, 253, 248, .24) !important;
  box-shadow: 0 0 0 1px rgba(166, 78, 53, .28), 0 10px 30px rgba(83, 65, 42, .18) !important;
}

/* The partner page uses a flat paper treatment for these two content cards;
   remove the remaining gray outer glow in light mode while keeping the
   border and hover accent intact. */
html[data-theme="light"] body.partner-page .partner-points,
html[data-theme="light"] body.partner-page .join-form,
html[data-theme="light"] body.partner-page .partner-points:hover,
html[data-theme="light"] body.partner-page .join-form:hover {
  box-shadow: none !important;
}

/* Light modal surfaces. The video/product overlays are authored in the
   dark redesign layer with !important declarations, so keep these selectors
   scoped to each modal root to avoid changing the dark experience. */
html[data-theme="light"] body #heartViewerModal {
  background: rgba(82, 59, 43, .28) !important;
  backdrop-filter: blur(14px) !important;
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-modal {
  background: var(--theme-paper-strong) !important;
  border-color: rgba(166, 78, 53, .34) !important;
  box-shadow: 0 35px 90px rgba(83, 65, 42, .22), 0 0 0 1px rgba(255, 255, 255, .76) inset !important;
}
html[data-theme="light"] body #heartViewerModal .heart-modal-head {
  background: linear-gradient(90deg, #fffdf8, #f1e9df) !important;
  border-bottom-color: rgba(117, 89, 68, .18) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-modal-seal {
  background: var(--theme-coral) !important;
  border-color: rgba(166, 78, 53, .48) !important;
  color: #fffdf8 !important;
}
html[data-theme="light"] body #heartViewerModal .heart-modal-brand strong {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-modal-brand small {
  color: var(--theme-muted) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-custom-buy {
  background: var(--theme-coral) !important;
  border-color: var(--theme-coral) !important;
  color: #fffdf8 !important;
}
html[data-theme="light"] body #heartViewerModal .heart-close {
  background: rgba(255, 253, 248, .72) !important;
  border-color: rgba(117, 89, 68, .24) !important;
  color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-close:hover {
  background: rgba(196, 87, 66, .10) !important;
  border-color: rgba(166, 78, 53, .48) !important;
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-frame {
  background: var(--theme-paper) !important;
}

/* The full-screen uplink panel is the loading mask shown before the player
   appears. Replace the blue-black telemetry surface with warm paper while
   retaining its scan lines, brackets and progress animation. */
html[data-theme="light"] body #heartViewerModal .heart-uplink-loader {
  background: rgba(255, 253, 248, .97) !important;
  color: var(--theme-ink) !important;
  border-bottom-color: rgba(166, 78, 53, .20) !important;
  box-shadow: 0 12px 28px rgba(83, 65, 42, .12) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-loader::before {
  background: repeating-linear-gradient(0deg, rgba(166, 78, 53, .035) 0 1px, transparent 1px 4px) !important;
  opacity: .72 !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-loader::after {
  background:
    radial-gradient(ellipse at center, transparent 0 32%, rgba(246, 240, 231, .38) 70%, rgba(232, 219, 205, .70) 100%),
    linear-gradient(90deg, rgba(246, 240, 231, .58), transparent 20% 80%, rgba(246, 240, 231, .58)) !important;
  opacity: 1 !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-score {
  background: rgba(255, 253, 248, .88) !important;
  border-color: rgba(166, 78, 53, .42) !important;
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-score b {
  color: var(--theme-coral) !important;
  text-shadow: none !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-score small {
  color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-title {
  color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-status {
  color: var(--theme-muted) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-ticks i {
  background: rgba(166, 78, 53, .20) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-ticks i:nth-child(4n) {
  background: rgba(166, 78, 53, .34) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-ticks i.is-lit {
  background: var(--theme-coral) !important;
  opacity: .72 !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-ticks i.is-lit:nth-child(8n) {
  background: var(--theme-terracotta) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-ticks i.is-current {
  box-shadow: 0 0 12px rgba(196, 87, 66, .42) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-rail {
  background: rgba(166, 78, 53, .54) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-rail::before {
  background: var(--theme-coral) !important;
  box-shadow: 0 0 0 5px rgba(196, 87, 66, .10) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-target {
  border-color: rgba(166, 78, 53, .54) !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-target::before,
html[data-theme="light"] body #heartViewerModal .heart-uplink-target::after {
  background: #fffdf8 !important;
}
html[data-theme="light"] body #heartViewerModal .heart-uplink-target i {
  background: var(--theme-coral) !important;
}

/* Product detail popup: use the same paper surface and warm translucent
   backdrop as the video viewer instead of the legacy black modal treatment. */
html[data-theme="light"] body #productModal {
  background: rgba(82, 59, 43, .28) !important;
  backdrop-filter: blur(10px) !important;
}
html[data-theme="light"] body #productModal .product-modal {
  background: var(--theme-paper-strong) !important;
  border-color: rgba(166, 78, 53, .34) !important;
  box-shadow: 0 30px 78px rgba(83, 65, 42, .22) !important;
}
html[data-theme="light"] body #productModal .modal-img {
  background: var(--theme-paper-soft) !important;
}
html[data-theme="light"] body #productModal .modal-close {
  color: var(--theme-terracotta) !important;
}
html[data-theme="light"] body #productModal .modal-close:hover {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body #productModal .modal-body h2 {
  color: var(--theme-ink) !important;
}
html[data-theme="light"] body #productModal .modal-body > p,
html[data-theme="light"] body #productModal .option-title {
  color: var(--theme-muted) !important;
}
html[data-theme="light"] body #productModal .modal-price {
  color: var(--theme-coral) !important;
}
html[data-theme="light"] body #productModal .option {
  color: var(--theme-ink) !important;
  border-color: var(--theme-border) !important;
  background: rgba(239, 230, 216, .42) !important;
}
html[data-theme="light"] body #productModal .option.active,
html[data-theme="light"] body #productModal .option:hover {
  color: #fffdf8 !important;
  border-color: var(--theme-coral) !important;
  background: var(--theme-coral) !important;
}
html[data-theme="light"] body #productModal .btn-outline {
  color: var(--theme-ink) !important;
  border-color: var(--theme-border) !important;
  background: rgba(255, 253, 248, .60) !important;
}

/* Mobile completion pass for the two product pages with bespoke layouts.
   Keep these rules theme-neutral: light mode only remaps their colors. */
@media (max-width: 760px) {
  html body:has(#page-certified),
  html body:has(.brain-page) {
    width: 100%;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* Shared navigation: keep every control on one line and let the expanded
     menu scroll inside the viewport instead of running below the screen. */
  html body:has(#page-certified) .nc-nav,
  html body:has(.brain-page) .nc-nav {
    top: 10px !important;
    width: calc(100vw - 20px) !important;
    height: 50px !important;
    padding-inline: 9px !important;
  }
  html body:has(#page-certified) .nc-nav-inner,
  html body:has(.brain-page) .nc-nav-inner {
    min-width: 0;
    gap: 10px !important;
  }
  html body:has(#page-certified) .nc-nav .nc-logo,
  html body:has(.brain-page) .nc-nav .nc-logo {
    min-width: 0;
    gap: 7px !important;
    font-size: 18px !important;
  }
  html body:has(#page-certified) .nc-logo svg,
  html body:has(.brain-page) .nc-logo svg {
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
  }
  html body:has(#page-certified) .nc-actions,
  html body:has(.brain-page) .nc-actions {
    flex: 0 0 auto;
    gap: 6px !important;
  }
  html body:has(#page-certified) .nc-theme-toggle,
  html body:has(.brain-page) .nc-theme-toggle,
  html body:has(#page-certified) .nc-toggle,
  html body:has(.brain-page) .nc-toggle {
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px !important;
  }
  html body:has(#page-certified) .nc-links,
  html body:has(.brain-page) .nc-links {
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100dvh - 78px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 7px !important;
    border-radius: 10px !important;
  }
  html body:has(#page-certified) .nc-links.open,
  html body:has(.brain-page) .nc-links.open {
    display: flex !important;
  }
  html body:has(#page-certified) .nc-nav .nc-link,
  html body:has(.brain-page) .nc-nav .nc-link,
  html body:has(#page-certified) .nc-nav .nc-dropdown-item,
  html body:has(.brain-page) .nc-nav .nc-dropdown-item {
    min-height: 42px;
    padding: 10px 11px !important;
    font-size: 12px !important;
  }

  /* Certified creators */
  html body:has(#page-certified) #page-certified {
    width: 100%;
    overflow-x: clip;
  }
  html body:has(#page-certified) #page-certified > .hero {
    min-height: 0 !important;
    padding: 102px 16px 56px !important;
  }
  html body:has(#page-certified) #page-certified > .hero .page-inner {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body:has(#page-certified) #page-certified .hero h1 {
    max-width: 100%;
    margin-bottom: 18px !important;
    font-size: clamp(38px, 12vw, 54px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }
  html body:has(#page-certified) #page-certified .hero p {
    max-width: none !important;
    margin-bottom: 28px !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
  html body:has(#page-certified) #page-certified .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }
  html body:has(#page-certified) #page-certified .hero-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 12px !important;
    font-size: 13px !important;
  }
  html body:has(#page-certified) #page-certified .hero-stats {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 36px !important;
    padding: 18px !important;
  }
  html body:has(#page-certified) #page-certified .hero-stat {
    min-height: 86px !important;
    padding: 12px 10px !important;
  }
  html body:has(#page-certified) #page-certified .hero-stat .num {
    font-size: clamp(26px, 8vw, 38px) !important;
  }
  html body:has(#page-certified) #page-certified > .page-inner {
    width: 100% !important;
    max-width: none !important;
    padding: 42px 16px 64px !important;
  }
  html body:has(#page-certified) #page-certified .section-divider {
    margin-bottom: 24px !important;
    padding-top: 58px !important;
  }
  html body:has(#page-certified) #page-certified .section-divider h2 {
    font-size: clamp(32px, 10vw, 46px) !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }
  html body:has(#page-certified) #page-certified .section-divider p {
    max-width: none !important;
    font-size: 13px !important;
  }
  html body:has(#page-certified) #page-certified .featured-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 22px !important;
    margin-bottom: 36px !important;
  }
  html body:has(#page-certified) #page-certified .featured-left,
  html body:has(#page-certified) #page-certified .featured-right {
    min-width: 0;
  }
  html body:has(#page-certified) #page-certified .featured-right h3 {
    font-size: 19px !important;
    line-height: 1.4 !important;
  }
  html body:has(#page-certified) #page-certified .featured-right .bio {
    font-size: 13px !important;
    line-height: 1.8 !important;
  }
  html body:has(#page-certified) #page-certified .featured-works {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html body:has(#page-certified) #page-certified .featured-stats {
    justify-content: space-between;
    gap: 14px 10px !important;
  }
  html body:has(#page-certified) #page-certified .featured-stat {
    flex: 1 1 calc(50% - 10px);
  }
  html body:has(#page-certified) #page-certified .creator-grid,
  html body:has(#page-certified) #page-certified .trust-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: none !important;
    gap: 18px !important;
  }
  html body:has(#page-certified) #page-certified .creator-card {
    min-height: 0 !important;
    padding: 24px 18px 18px !important;
  }
  html body:has(#page-certified) #page-certified .trust-card {
    padding: 22px 18px !important;
  }
  html body:has(#page-certified) #page-certified .filter-row {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  html body:has(#page-certified) #page-certified .filter-row::-webkit-scrollbar {
    display: none;
  }
  html body:has(#page-certified) #page-certified .filter-label,
  html body:has(#page-certified) #page-certified .filter-btn {
    flex: 0 0 auto;
  }
  html body:has(#page-certified) #page-certified .filter-divider {
    display: none !important;
  }

  /* Enterprise Brain */
  html body:has(.brain-page) .brain-page,
  html body:has(.brain-page) .brain-page > .container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body:has(.brain-page) .brain-page {
    padding-bottom: 40px !important;
    overflow-x: clip !important;
  }
  html body:has(.brain-page) .lgpsm-hero {
    width: 100% !important;
    min-height: 0 !important;
  }
  html body:has(.brain-page) .lgpsm-main {
    box-sizing: border-box;
    width: 100%;
    min-height: 0 !important;
    gap: 0 !important;
    padding: 92px 20px 48px !important;
  }
  html body:has(.brain-page) .lgpsm-copy {
    width: 100% !important;
    max-width: none !important;
  }
  html body:has(.brain-page) .lgpsm-copy h1 {
    margin: 20px 0 16px !important;
    font-size: clamp(38px, 13vw, 54px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }
  html body:has(.brain-page) .lgpsm-shop {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    justify-content: space-between;
    margin-top: 24px !important;
    padding-inline: 16px !important;
    font-size: 12px !important;
  }
  html body:has(.brain-page) .lgpsm-feature {
    box-sizing: border-box;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 96px;
    margin-top: 54px !important;
    padding: 16px !important;
    gap: 14px !important;
  }
  html body:has(.brain-page) .lgpsm-feature p {
    font-size: 12px !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
  }
  html body:has(.brain-page) .lgpsm-globe {
    flex: 0 0 48px;
    width: 48px !important;
    height: 48px !important;
  }
  html body:has(.brain-page) .lgpsm-mobile-image {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 20px 48px !important;
    aspect-ratio: 4 / 5 !important;
    background-position: center !important;
  }
  html body:has(.brain-page) .brain-page .brain-system {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-top: 72px !important;
  }
  html body:has(.brain-page) .system-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding-bottom: 20px !important;
  }
  html body:has(.brain-page) .system-heading h2 {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  html body:has(.brain-page) .system-heading > p {
    max-width: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
  }
  html body:has(.brain-page) .system-flow {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 40px 0 56px !important;
    padding-top: 62px !important;
  }
  html body:has(.brain-page) .system-cloud {
    width: 100% !important;
    padding: 11px 14px !important;
    box-sizing: border-box;
    line-height: 1.55 !important;
  }
  html body:has(.brain-page) .flow-card {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  html body:has(.brain-page) .flow-card h3 {
    font-size: 23px !important;
  }
  html body:has(.brain-page) .flow-card p {
    font-size: 12px !important;
    line-height: 1.8 !important;
  }
  html body:has(.brain-page) .flow-card ul {
    font-size: 11px !important;
  }
  html body:has(.brain-page) .system-endpoints {
    grid-column: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body:has(.brain-page) .system-endpoints span {
    min-width: 0;
    padding: 11px 10px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
  html body:has(.brain-page) .workspace-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    margin-top: 0 !important;
  }
  html body:has(.brain-page) .command-panel {
    grid-column: auto !important;
    order: 0 !important;
  }
  html body:has(.brain-page) .infra-panel,
  html body:has(.brain-page) .command-panel,
  html body:has(.brain-page) .staff-panel {
    min-width: 0 !important;
    padding: 20px !important;
    border-radius: 16px !important;
  }
  html body:has(.brain-page) .panel-heading {
    min-width: 0;
    gap: 10px !important;
  }
  html body:has(.brain-page) .panel-heading > div {
    min-width: 0;
  }
  html body:has(.brain-page) .panel-heading h3 {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  html body:has(.brain-page) .infra-benefits,
  html body:has(.brain-page) .hardware-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html body:has(.brain-page) .infra-benefits div {
    min-height: 0 !important;
    padding: 10px 6px !important;
  }
  html body:has(.brain-page) .infra-benefits b {
    font-size: 11px !important;
  }
  html body:has(.brain-page) .infra-benefits small,
  html body:has(.brain-page) .hardware-row small {
    font-size: 8px !important;
    overflow-wrap: anywhere;
  }
  html body:has(.brain-page) .hardware-row b {
    font-size: 9px !important;
    overflow-wrap: anywhere;
  }
  html body:has(.brain-page) .hardware-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    object-fit: contain;
  }
  html body:has(.brain-page) .command-primary {
    padding: 13px 28px 13px 13px !important;
  }
  html body:has(.brain-page) .command-tools {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html body:has(.brain-page) .system-note {
    display: block !important;
    padding: 16px !important;
    line-height: 1.8 !important;
  }
  html body:has(.brain-page) .system-note span {
    display: block !important;
    margin-top: 6px !important;
  }
  html body:has(.brain-page) .system-note .btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 14px 0 0 !important;
  }
  html body:has(.brain-page) .wc-page-close {
    width: auto !important;
    margin-top: 56px !important;
    padding: 12px !important;
  }
}

@media (max-width: 380px) {
  html body:has(#page-certified) .nc-nav .nc-cta,
  html body:has(.brain-page) .nc-nav .nc-cta {
    display: none !important;
  }
  html body:has(#page-certified) .nc-nav .nc-logo,
  html body:has(.brain-page) .nc-nav .nc-logo {
    font-size: 16px !important;
  }
  html body:has(#page-certified) #page-certified .hero-actions {
    grid-template-columns: 1fr;
  }
  html body:has(.brain-page) .infra-benefits,
  html body:has(.brain-page) .hardware-row {
    grid-template-columns: 1fr !important;
  }
}

/* National atmosphere uses the supplied Great Wall artwork directly. The
   drawing is identical in both themes; only the palette is mapped per theme. */
:root {
  --national-red: #b63832;
  --national-gold: #b98a52;
  --national-wall: url("images/chinese/great-wall-reference-dark.png");
}
html[data-theme="light"] {
  --national-red: var(--theme-coral);
  --national-gold: #a87948;
  --national-wall: url("images/chinese/great-wall-reference-light.png");
}
body.national-atmosphere-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    radial-gradient(circle at 82% 14%, rgba(235, 190, 104, .92) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 85% 18%, rgba(235, 190, 104, .66) 0 1px, transparent 2.2px),
    radial-gradient(circle at 79% 20%, rgba(182, 56, 50, .62) 0 1px, transparent 2.4px),
    var(--national-wall),
    url("images/chinese/yun.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
  /* The artwork has a large transparent left side; keep its visible wall
     tucked into the right half instead of spanning the whole page. */
  background-size: auto, auto, auto, min(58vw, 1180px) auto, auto 86px;
  /* Keep the Great Wall anchored on the right like the reference layout. */
  background-position: 82% 14%, 85% 18%, 79% 20%, right 4% top 4%, center bottom;
  mix-blend-mode: screen;
  filter: saturate(.72) contrast(1.03);
  animation: none;
}
html[data-theme="light"] body.national-atmosphere-page::after {
  opacity: .18;
  mix-blend-mode: multiply;
  filter: saturate(.78) sepia(.10) contrast(1.02);
}
@media (max-width: 760px) {
  body.national-atmosphere-page::after {
    opacity: .12;
    background-size: auto, auto, auto, min(136vw, 860px) auto, auto 62px;
    background-position: 76% 12%, 80% 17%, 73% 20%, right -8% top 10%, center bottom;
  }
  html[data-theme="light"] body.national-atmosphere-page::after { opacity: .14; }
}
@media (prefers-reduced-motion: reduce) {
  body.national-atmosphere-page::after { animation: none; }
}

/* Keep the supplied national artwork in the page atmosphere, not on top of
   card content. Raising each card into its own stacking context prevents the
   wall/云纹 layer from washing out photos, labels, and text cards while it
   remains visible in the surrounding paper background. */
body.national-atmosphere-page :is(
  .channel-card,
  .product-card,
  .tool-card,
  .heritage-feature,
  .big-story,
  .story-small,
  .travel-card,
  .partner-points,
  .partner-point,
  .join-form,
  .craft,
  .how-step,
  .trust-bar,
  .trust-intro,
  .trust-item,
  .academy-main,
  .academy-card,
  .course-grid article,
  .course-card,
  .cert-card,
  .advantage-card,
  .campus-card,
  .creator-card,
  .exam-card,
  .learn-card,
  .featured-card,
  .trust-card,
  .stat-card,
  .panel,
  .chart-card,
  .table-card,
  .content-card,
  .cert-req,
  .contact-section,
  .card-panel,
  .project-card,
  .asset-card,
  .buyout-card,
  .review-card,
  .comp-card
) {
  position: relative;
  z-index: 45;
  isolation: isolate;
}
body.national-atmosphere-page .picked-card {
  z-index: 45;
  isolation: isolate;
}

/* Scroll motion applies transform to section containers, which otherwise
   traps their card z-index below the fixed atmosphere layer. Lift the actual
   content containers as a group so the wall remains visible only in the open
   paper around them. */
body.national-atmosphere-page .page-shell > .section > .container,
body.national-atmosphere-page .hero-grid,
body.national-atmosphere-page > .partner-main {
  position: relative;
  z-index: 41;
}

/* Light-theme text cards should read as warm paper rather than translucent
   glass. Keep photo cards' image layers and hover treatments unchanged; this
   only strengthens the surface underneath their copy and metadata. */
html[data-theme="light"] body :is(
  .picked-card,
  .travel-card,
  .partner-points,
  .partner-point,
  .join-form,
  .how-step,
  .trust-bar,
  .trust-intro,
  .trust-item,
  .academy-card,
  .course-grid article,
  .course-card,
  .cert-card,
  .advantage-card,
  .campus-card,
  .creator-card,
  .exam-card,
  .learn-card,
  .featured-card,
  .trust-card,
  .stat-card,
  .panel,
  .chart-card,
  .table-card,
  .content-card,
  .cert-req,
  .contact-section,
  .card-panel,
  .project-card,
  .asset-card,
  .buyout-card,
  .review-card,
  .comp-card
) {
  background-color: rgba(255, 253, 248, .94) !important;
}

/* Labels and controls that sit as compact cards need the same solid reading
   surface, otherwise the atmosphere layer remains visible through them. */
html[data-theme="light"] body :is(.role, .role-tab, .role-switch-btn, .trust-req, .milestone, .exam-item) {
  background-color: rgba(255, 253, 248, .94) !important;
}

/* Quality shelf: keep each card fixed and apply the hover response inside
   the clipped cover image only. Do not let the legacy magnetic variables
   change the card width, height, margins, or outer transform. */
body #quality .product-card,
body #quality .product-card:hover,
body #quality .product-card.is-magnetic-active {
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
body #quality .product-card .product-img {
  overflow: hidden !important;
}
body #quality .product-card .product-img img {
  transform: scale(1) !important;
  transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease !important;
}
body #quality .product-card:hover .product-img img {
  transform: scale(1.035) !important;
  filter: saturate(1.03) contrast(1.02) !important;
}
@media (min-width: 901px) {
  body #quality .product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(44px, 5vw, 84px) 14px !important;
    overflow: visible !important;
    padding: 10px 0 24px !important;
  }
  body #quality .product-card {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: 404px !important;
    min-height: 404px !important;
    transition: border-color .3s ease !important;
  }
  body #quality .product-card .product-img {
    height: 100% !important;
  }
}

/* All homepage card rails use a fixed footprint. Hover never moves or scales
   the outer card; the clipped cover artwork provides the subtle zoom instead. */
body #channels .channel-card,
body #channels .channel-card:hover,
body #channels .channel-card.is-magnetic-active,
body #video-select .video-showcase > .big-story,
body #video-select .video-showcase > .big-story:hover,
body #video-select .video-showcase > .story-stack > .story-small,
body #video-select .video-showcase > .story-stack > .story-small:hover,
body #video-select .video-showcase > .story-stack > .story-small.is-magnetic-active {
  transform: none !important;
}
body #channels .channel-card:hover,
body #video-select .video-showcase > .big-story:hover,
body #video-select .video-showcase > .story-stack > .story-small:hover {
  box-shadow: none !important;
}
body #channels .channel-card > img,
body #video-select .video-showcase > .big-story > img,
body #video-select .video-showcase > .story-stack > .story-small > img {
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .45s ease !important;
}
body #channels .channel-card:hover > img,
body #video-select .video-showcase > .big-story:hover > img,
body #video-select .video-showcase > .story-stack > .story-small:hover > img {
  transform: scale(1.035) !important;
  filter: saturate(1.03) contrast(1.02) !important;
}
@media (min-width: 901px) {
  body #channels .channel-grid {
    display: grid !important;
    grid-template-columns: .86fr 1.28fr .86fr !important;
    align-items: center !important;
    gap: 18px !important;
    height: auto !important;
    overflow: visible !important;
  }
  body #channels .channel-card,
  body #channels .channel-card.featured {
    flex: none !important;
    width: auto !important;
    height: 450px !important;
    min-height: 450px !important;
    margin: 0 !important;
  }
  body #channels .channel-card.featured {
    height: 540px !important;
    min-height: 540px !important;
  }
}
@media (min-width: 901px) {
  body #video-select .video-showcase > .big-story:hover,
  body #video-select .video-showcase > .story-stack > .story-small:hover {
    flex: none !important;
  }
}

/* Light homepage card surfaces stay solid while the national artwork remains
   visible in the surrounding paper. The scroll script still moves/scales each
   section, but its group opacity must not wash out the cards, photos, or copy. */
html[data-theme="light"] body.national-atmosphere-page .page-shell > .section > .container {
  opacity: 1 !important;
}

/* Let the trust rail sit directly on the page paper. The previous light
   surface and hero-to-rail gradient created an extra white band behind the
   labels; the rail items themselves remain unchanged. */
html[data-theme="light"] body.national-atmosphere-page > .page-shell > .trust-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.national-atmosphere-page > .page-shell > .trust-bar::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
/* Apply the same clean, borderless rail treatment in dark mode. */
body.national-atmosphere-page > .page-shell > .trust-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.national-atmosphere-page > .page-shell > .trust-bar::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
html[data-theme="light"] body.national-atmosphere-page :is(
  .picked-card,
  .channel-card,
  .product-card,
  .tool-card,
  .heritage-feature,
  .big-story,
  .story-small,
  .travel-card,
  .partner-points,
  .partner-point,
  .join-form,
  .craft,
  .how-step,
  .certificate,
  .trust-bar,
  .trust-intro,
  .trust-item,
  .academy-card,
  .course-card,
  .cert-card,
  .advantage-card,
  .campus-card,
  .creator-card,
  .exam-card,
  .learn-card,
  .featured-card,
  .trust-card,
  .stat-card,
  .panel,
  .chart-card,
  .table-card,
  .content-card,
  .card-panel,
  .project-card,
  .asset-card,
  .buyout-card,
  .review-card,
  .comp-card
) {
  background-color: #fffdf8 !important;
}

/* Keep the atmosphere artwork in the open paper around a card, never above
   the card surface itself. Transformed section containers form their own
   stacking context, so lift that context (and the cards inside it) above the
   fixed wall layer instead of allowing the artwork to wash through. */
body.national-atmosphere-page .page-shell > .section > .container,
body.national-atmosphere-page > .partner-main {
  z-index: 60 !important;
}
body.national-atmosphere-page :is(
  .picked-card,
  .channel-card,
  .product-card,
  .tool-card,
  .heritage-feature,
  .big-story,
  .story-small,
  .travel-card,
  .partner-points,
  .partner-point,
  .join-form,
  .craft,
  .how-step,
  .certificate,
  .trust-bar,
  .trust-intro,
  .trust-item,
  .academy-card,
  .course-card,
  .cert-card,
  .advantage-card,
  .campus-card,
  .creator-card,
  .exam-card,
  .learn-card,
  .featured-card,
  .trust-card,
  .stat-card,
  .panel,
  .chart-card,
  .table-card,
  .content-card,
  .card-panel,
  .project-card,
  .asset-card,
  .buyout-card,
  .review-card,
  .comp-card
) {
  z-index: 65 !important;
}

/* Keep the legacy full-page layer disabled. The artwork is reintroduced below
   as a section-scoped mid-layer, without the old cloud strip or decorative
   dots. */
body.national-atmosphere-page::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
/* Keep the supplied Great Wall visible in the homepage hero as well as in
   section backgrounds. It remains a decorative layer below hero content. */
body.national-atmosphere-page .page-shell > .hero > .national-hero-wall {
  display: block !important;
  background-position: left -30% top 120% !important;
}
.national-hero-wall {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--national-wall);
  background-repeat: no-repeat;
  background-size: min(58vw, 1180px) auto;
  background-position: right -4% top 4%;
  opacity: .27;
  filter: saturate(.90) sepia(.30) contrast(1.10)
    drop-shadow(0 0 1.5px rgba(213, 169, 87, .98))
    drop-shadow(0 0 6px rgba(194, 147, 72, .46));
}
html[data-theme="dark"] .national-hero-wall {
  opacity: .23;
  filter: saturate(.84) contrast(1.10)
    drop-shadow(0 0 1.5px rgba(213, 165, 79, .94))
    drop-shadow(0 0 6px rgba(213, 165, 79, .40));
}
@media (max-width: 760px) {
  body.national-atmosphere-page .page-shell > .hero > .national-hero-wall {
    background-position: left -12% top 10% !important;
  }
  .national-hero-wall {
    background-size: min(136vw, 860px) auto;
    background-position: right -12% top 10%;
    opacity: .20;
  }
  html[data-theme="dark"] .national-hero-wall {
    opacity: .17;
    filter: saturate(.84) contrast(1.10)
      drop-shadow(0 0 1.5px rgba(213, 165, 79, .88))
      drop-shadow(0 0 5px rgba(213, 165, 79, .34));
  }
}
body.national-atmosphere-page .partner-hero-grid {
  position: relative;
  z-index: 3;
}

/* In the homepage sections, the supplied Great Wall is a mid-layer: above
   the paper section background, below every section container and card. This
   keeps the artwork visible in the open space without tinting photographs or
   reducing copy contrast. */
body.national-atmosphere-page .page-shell > .section {
  isolation: isolate;
}
body.national-atmosphere-page .page-shell > .section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--national-wall);
  background-repeat: no-repeat;
  background-size: min(58vw, 1180px) auto;
  background-position: right -4% top 3%;
  opacity: .19;
  mix-blend-mode: normal;
  filter: saturate(.90) sepia(.30) contrast(1.08)
    drop-shadow(0 0 1.5px rgba(213, 169, 87, .88))
    drop-shadow(0 0 5px rgba(194, 147, 72, .32));
}
html[data-theme="dark"] body.national-atmosphere-page .page-shell > .section::before {
  opacity: .16;
  filter: saturate(.84) contrast(1.08)
    drop-shadow(0 0 1.5px rgba(213, 165, 79, .82))
    drop-shadow(0 0 5px rgba(213, 165, 79, .30));
  mix-blend-mode: screen;
}
body.national-atmosphere-page .page-shell > .section > .container {
  position: relative;
  z-index: 2;
}
@media (max-width: 760px) {
  body.national-atmosphere-page .page-shell > .section::before {
    background-size: min(136vw, 860px) auto;
    background-position: right -12% top 5%;
    opacity: .16;
  }
  html[data-theme="dark"] body.national-atmosphere-page .page-shell > .section::before {
    opacity: .13;
  }
}