:root {
  --cos-ink: #202523;
  --cos-ink-soft: #3d4743;
  --cos-muted: #78817c;
  --cos-paper: #f5f3ee;
  --cos-surface: #fffdf9;
  --cos-line: #dedbd2;
  --cos-teal: #16766d;
  --cos-teal-soft: #e4f0eb;
  --cos-coral: #d9684d;
  --cos-coral-soft: #f7e6df;
  --cos-blue: #46658f;
  --cos-yellow: #d5a64a;
  --cos-shadow: 0 12px 30px rgba(42, 48, 43, .08);
}

/* Keep catalog fallback covers on the same real-artwork track as the
   interactive hierarchy cards. */
.courseos-app .cover-mint,
.courseos-app .entity-cover.cover-mint,
.courseos-app .institution-explorer-cover.cover-mint,
.courseos-app .institution-lesson-cover.cover-mint {
  background-image: url("site-assets/course-art/creative-art-03.jpg");
}
.courseos-app .cover-coral,
.courseos-app .entity-cover.cover-coral,
.courseos-app .institution-explorer-cover.cover-coral,
.courseos-app .institution-lesson-cover.cover-coral {
  background-image: url("site-assets/course-art/derived/creative-paint-banner.jpg");
}
.courseos-app .cover-indigo,
.courseos-app .entity-cover.cover-indigo,
.courseos-app .institution-explorer-cover.cover-indigo,
.courseos-app .institution-lesson-cover.cover-indigo {
  background-image: url("site-assets/course-art/derived/creative-studio-banner.jpg");
}

* { letter-spacing: 0; }

/* Public site: editorial, product-led and image-first. */
.courseos-site {
  background: var(--cos-paper);
  color: var(--cos-ink);
  font-family: "Noto Sans SC", "Manrope", sans-serif;
}

.courseos-site .wrap { width: min(1210px, calc(100% - 80px)); }
.courseos-site .site-header {
  background: rgba(255, 253, 249, .96);
  border-bottom: 1px solid var(--cos-line);
  backdrop-filter: blur(12px);
}
.courseos-site .nav { height: 72px; }
.courseos-site .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  background: var(--cos-ink);
  color: #f6c9a2;
  transform: none;
}
.courseos-site .brand-copy { color: var(--cos-ink); }
.courseos-site .brand-copy small { color: var(--cos-muted); }
.courseos-site .nav-links { gap: 28px; }
.courseos-site .nav-links a { color: var(--cos-muted); }
.courseos-site .nav-links a.active:after { background: var(--cos-coral); height: 3px; }
.courseos-site .nav-login,
.courseos-site .button-dark {
  border-radius: 3px;
  background: var(--cos-ink);
}
.courseos-site .nav-login:hover,
.courseos-site .button-dark:hover { background: var(--cos-coral); }
.courseos-site .button-light { border-radius: 3px; border-color: #c9c7bf; }

.courseos-site .hero {
  padding: 84px 0 78px;
  background: var(--cos-paper);
}
.courseos-site .hero-grid { grid-template-columns: .83fr 1.17fr; gap: 72px; }
.courseos-site .hero h1 {
  color: var(--cos-ink);
  font-size: clamp(46px, 5.3vw, 78px);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 800;
}
.courseos-site .hero h1 em { color: var(--cos-coral); white-space: nowrap; }
.courseos-site .hero-kicker i { background: var(--cos-coral); }
.courseos-site .hero-kicker span { color: var(--cos-teal); }
.courseos-site .hero-lede { color: var(--cos-ink-soft); line-height: 1.85; }
.courseos-site .hero-proof { border-color: var(--cos-line); }
.courseos-site .hero-proof i { background: var(--cos-teal-soft); color: var(--cos-teal); }

.courseos-site .hero-demo-shell {
  transform: none;
  border: 1px solid var(--cos-line);
  border-radius: 3px;
  background: var(--cos-surface);
  box-shadow: var(--cos-shadow);
}
.courseos-site .hero-demo-bar { border-color: var(--cos-line); }
.courseos-site .hero-demo-body { background: #f0eee8; }
.courseos-site .demo-sidebar { background: #fbfaf6; border-color: var(--cos-line); }
.courseos-site .demo-side-link.active { background: var(--cos-teal-soft); color: var(--cos-teal); }
.courseos-site .demo-workspace { background: #f0eee8; }
.courseos-site .demo-mode-tabs button { border-radius: 3px; }
.courseos-site .demo-mode-tabs button.active { background: var(--cos-ink); border-color: var(--cos-ink); }
.courseos-site .demo-hero-card { border-radius: 3px; background: var(--cos-ink); }
.courseos-site .demo-hero-art {
  background-color: #bf765b;
  background-image: url("site-assets/course-art/derived/creative-paint-banner.jpg");
  background-position: center;
  background-size: cover;
}
.courseos-site .demo-hero-art:before,
.courseos-site .demo-hero-art:after { display: none; }
.courseos-site .demo-card {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  color: #fff;
  border-color: transparent;
  background-size: cover;
  background-position: center;
}
.courseos-site .demo-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 26, .48);
}
.courseos-site .demo-card > * { position: relative; z-index: 1; }
.courseos-site .demo-card.art { background-image: url("site-assets/course-art/creative-art-03.jpg"); }
.courseos-site .demo-card.mint { background-image: url("site-assets/course-art/creative-art-03.jpg"); }
.courseos-site .demo-card.yellow { background-image: url("site-assets/course-art/creative-art-04.jpg"); }
.courseos-site .demo-card .num { color: #f6d0a9; }
.courseos-site .demo-note { color: var(--cos-muted); }
.courseos-site .hero-float {
  right: 12px;
  bottom: 18px;
  border-radius: 3px;
  border-left: 3px solid var(--cos-coral);
  background: var(--cos-ink);
}

.courseos-site .stats-band { background: var(--cos-ink); }
.courseos-site .stats-grid { border-color: rgba(255,255,255,.15); }
.courseos-site .stat { border-color: rgba(255,255,255,.15); }
.courseos-site .stat strong { color: #f6c9a2; }

.courseos-site .section,
.courseos-site .path-section,
.courseos-site .course-section,
.courseos-site .cta-section { padding-top: 104px; padding-bottom: 104px; }
.courseos-site .section-head h2,
.courseos-site .path-title,
.courseos-site .cta-box h2 {
  letter-spacing: 0;
  color: var(--cos-ink);
}
.courseos-site .value-grid { gap: 0; border-top: 1px solid var(--cos-line); border-left: 1px solid var(--cos-line); }
.courseos-site .value-card {
  min-height: 245px;
  border: 0;
  border-right: 1px solid var(--cos-line);
  border-bottom: 1px solid var(--cos-line);
  border-radius: 0;
  background: var(--cos-surface);
  box-shadow: none;
}
.courseos-site .value-card:hover { transform: none; background: #fff; box-shadow: none; border-color: var(--cos-line); }
.courseos-site .value-card .value-num { color: var(--cos-coral); }
.courseos-site .value-card .value-icon { border-radius: 3px; }
.courseos-site .system-section { background: #ebe9e2; }
.courseos-site .system-tabs { border-color: var(--cos-ink); }
.courseos-site .system-tab { border-color: #d3d0c6; color: var(--cos-muted); }
.courseos-site .system-tab.active { color: var(--cos-ink); }
.courseos-site .system-tab.active span { color: var(--cos-coral); }
.courseos-site .system-copy { border-radius: 3px; background: var(--cos-ink); }
.courseos-site .system-copy .eyebrow { color: #f6c9a2; }
.courseos-site .system-visual { border-color: var(--cos-line); border-radius: 3px; }
.courseos-site .dash-block { border-radius: 3px; }
.courseos-site .path-section { background: var(--cos-paper); }
.courseos-site .path-step { border-radius: 3px; border-color: var(--cos-line); box-shadow: none; }
.courseos-site .path-step:hover,
.courseos-site .path-step.active { transform: translateX(4px); border-color: var(--cos-coral); box-shadow: none; }
.courseos-site .path-step i { color: var(--cos-coral); }
.courseos-site .path-detail { background: var(--cos-coral-soft); border-left-color: var(--cos-coral); color: var(--cos-ink-soft); }

.courseos-site .course-section { background: var(--cos-surface); }
.courseos-site .course-grid { gap: 0; border-top: 1px solid var(--cos-line); border-left: 1px solid var(--cos-line); }
.courseos-site .course-card {
  border: 0;
  border-right: 1px solid var(--cos-line);
  border-bottom: 1px solid var(--cos-line);
  border-radius: 0;
  box-shadow: none;
}
.courseos-site .course-card:hover { transform: none; box-shadow: none; }
.courseos-site .course-cover {
  height: 206px;
  background-color: var(--cos-ink);
  background-position: center;
  background-size: cover;
}
.courseos-site .course-cover:after { display: none; }
.courseos-site .course-cover:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 27, 25, .34);
}
.courseos-site .course-cover > * { position: relative; z-index: 1; }
.courseos-site .course-card:nth-child(1) .course-cover { background-image: url("site-assets/course-art/derived/creative-paint-banner.jpg"); }
.courseos-site .course-card:nth-child(2) .course-cover { background-image: url("site-assets/course-art/creative-art-03.jpg"); }
.courseos-site .course-card:nth-child(3) .course-cover { background-image: url("site-assets/course-art/creative-art-04.jpg"); }
.courseos-site .course-card:nth-child(4) .course-cover { background-image: url("site-assets/course-art/creative-art-05.jpg"); }
.courseos-site .course-body { min-height: 186px; }
.courseos-site .course-meta span { border-radius: 2px; background: #eeece5; }
.courseos-site .course-link { color: var(--cos-coral); }
.courseos-site .roles-section { background: var(--cos-ink); }
.courseos-site .role-mock { border-radius: 3px; }
.courseos-site .trust-section { background: var(--cos-surface); }
.courseos-site .cta-box { border-radius: 3px; background: #e7d3c8; }
.courseos-site .cta-box:after { border-color: rgba(255,255,255,.55); }
.courseos-site .cta-actions .button-dark { background: var(--cos-ink); }
.courseos-site .site-footer { border-color: var(--cos-line); }

/* Product UI: shared shell, flatter surfaces, clearer hierarchy. */
.courseos-app {
  background: var(--cos-paper);
  color: var(--cos-ink);
  font-family: "Noto Sans SC", "Manrope", sans-serif;
}
.courseos-app .app { grid-template-columns: 248px minmax(0, 1fr); }
.courseos-app .sidebar {
  background: #fbfaf6;
  border-color: var(--cos-line);
  padding: 24px 14px;
}
.courseos-app .brand { padding: 0 10px 32px; }
.courseos-app .brand-mark {
  border-radius: 3px;
  background: var(--cos-ink);
  color: #f6c9a2;
  transform: none;
}
.courseos-app .brand b { color: var(--cos-ink); }
.courseos-app .brand small { color: var(--cos-muted); }
.courseos-app .section-label { color: #9b9e96; letter-spacing: .08em; }
.courseos-app .nav { gap: 2px; }
.courseos-app .nav button {
  border-radius: 3px;
  border-left: 3px solid transparent;
  color: #626c66;
  padding: 11px 12px 11px 9px;
}
.courseos-app .nav button:hover { background: #f2f0e9; color: var(--cos-ink); }
.courseos-app .nav button.active {
  background: #fff;
  border-left-color: var(--cos-coral);
  color: var(--cos-ink);
  box-shadow: 0 2px 8px rgba(42,48,43,.05);
}
.courseos-app .side-bottom { border-color: var(--cos-line); }
.courseos-app .main { background: var(--cos-paper); }
.courseos-app .topbar {
  background: rgba(255,253,249,.95);
  border-color: var(--cos-line);
  box-shadow: 0 2px 10px rgba(42,48,43,.03);
}
.courseos-app .crumb strong { color: var(--cos-ink); }
.courseos-app .top-icon { border-radius: 3px; border-color: var(--cos-line); color: var(--cos-muted); }
.courseos-app .content { max-width: 1540px; }
.courseos-app .eyebrow { color: var(--cos-coral); }
.courseos-app .headline h1 { letter-spacing: 0; color: var(--cos-ink); }
.courseos-app .headline p { color: var(--cos-muted); }
.courseos-app .primary,
.courseos-app .inst-primary {
  border-radius: 3px;
  background: var(--cos-ink);
  box-shadow: none;
}
.courseos-app .primary:hover,
.courseos-app .inst-primary:hover { background: var(--cos-coral); transform: none; }
.courseos-app .ghost,
.courseos-app .inst-ghost { border-radius: 3px; border-color: var(--cos-line); color: var(--cos-ink-soft); }
.courseos-app .ghost:hover,
.courseos-app .inst-ghost:hover { border-color: var(--cos-coral); color: var(--cos-coral); background: #fff; }
.courseos-app .panel,
.courseos-app .stat,
.courseos-app .course-card,
.courseos-app .inst-panel,
.courseos-app .inst-metrics > div,
.courseos-app .homework-summary div,
.courseos-app .homework-list,
.courseos-app .prep-board,
.courseos-app .material-card,
.courseos-app .product-large,
.courseos-app .product-overview-bar,
.courseos-app .overview-subject,
.courseos-app .hierarchy-column,
.courseos-app .builder-preview {
  border-radius: 3px;
  border-color: var(--cos-line);
  box-shadow: none;
}
.courseos-app .stat-mark { border-radius: 3px; background: var(--cos-coral-soft); color: var(--cos-coral); }
.courseos-app .stats { gap: 10px; }
.courseos-app .course-grid { gap: 12px; }
.courseos-app .course-card:hover { transform: translateY(-2px); box-shadow: var(--cos-shadow); }
.courseos-app .cover { position: relative; background-color: var(--cos-ink); background-size: cover; background-position: center; }
.courseos-app .cover:after { display: none; }
.courseos-app .cover:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 27, 25, .3);
}
.courseos-app .cover > * { position: relative; z-index: 1; }
.courseos-app .course-card:nth-child(1) .cover,
.courseos-app .course-grid .course-card:first-child .cover.art { background-image: url("site-assets/course-art/derived/creative-paint-banner.jpg"); }
.courseos-app .course-card:nth-child(2) .cover { background-image: url("site-assets/course-art/creative-art-03.jpg"); }
.courseos-app .course-card:nth-child(3) .cover { background-image: url("site-assets/course-art/creative-art-04.jpg"); }
.courseos-app .course-card:nth-child(4) .cover { background-image: url("site-assets/course-art/creative-art-05.jpg"); }
.courseos-app .cover h3 { letter-spacing: 0; }
.courseos-app .badge { border-radius: 2px; background: var(--cos-teal-soft); color: var(--cos-teal); }
.courseos-app .badge.orange { background: var(--cos-coral-soft); color: var(--cos-coral); }
.courseos-app .toolbar .search input,
.courseos-app select,
.courseos-app .search input { border-radius: 3px; border-color: var(--cos-line); }
.courseos-app .level-tab,
.courseos-app .product-tabs button,
.courseos-app .material-filter button { border-radius: 3px; }
.courseos-app .level-tab.active,
.courseos-app .product-tabs button.active,
.courseos-app .material-filter button.active { background: var(--cos-ink); border-color: var(--cos-ink); }
.courseos-app .entity-cover,
.courseos-app .subsubject-cover,
.courseos-app .level-cover,
.courseos-app .institution-explorer-cover,
.courseos-app .institution-lesson-cover,
.courseos-app .institution-unit-cover { background-size: cover; background-position: center; }
.courseos-app .entity-cover:after,
.courseos-app .institution-explorer-cover:after,
.courseos-app .institution-lesson-cover:after { display: none; }

/* Institution workspace follows the same paper, ink and coral system. */
.courseos-app .institution-shell { background: var(--cos-paper); }
.courseos-app .institution-side { background: #fbfaf6; border-color: var(--cos-line); }
.courseos-app .institution-user { border-radius: 3px; background: #f0eee8; }
.courseos-app .institution-nav { border-left: 3px solid transparent; border-radius: 3px; }
.courseos-app .institution-nav:hover,
.courseos-app .institution-nav.active { background: #fff; border-left-color: var(--cos-coral); color: var(--cos-ink); }
.courseos-app .institution-top { background: rgba(255,253,249,.96); border-color: var(--cos-line); }
.courseos-app .institution-content { max-width: 1400px; }
.courseos-app .inst-welcome h2,
.courseos-app .inst-page-head h2 { letter-spacing: 0; color: var(--cos-ink); }
.courseos-app .inst-panel-note { border-radius: 3px; background: var(--cos-teal-soft); border-color: #b8d9d0; }
.courseos-app .product-large { border: 1px solid var(--cos-line); }
.courseos-app .product-large.art { background: #b96d56; }
.courseos-app .product-large.music { background: var(--cos-blue); }
.courseos-app .product-large.code { background: var(--cos-teal); }
.courseos-app .schedule-cover,
.courseos-app .prep-icon,
.courseos-app .class-icon { border-radius: 3px; }

/* The classroom is a light teaching surface, with the slide as the focus. */
.courseos-app .classroom-screen { background: #ebe9e2 !important; color: var(--cos-ink); }
.courseos-app .classroom-top { border-bottom: 1px solid var(--cos-line); padding-bottom: 14px; }
.courseos-app .classroom-top span { color: var(--cos-teal); }
.courseos-app .slide-stage {
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(42,48,43,.1);
  background: var(--cos-surface);
}
.courseos-app .slide-stage:after { background: var(--cos-coral-soft); }
.courseos-app .slide-label { color: var(--cos-coral); }
.courseos-app .slide-stage h2 span { color: var(--cos-coral); }
.courseos-app .classroom-tools { border-radius: 3px; background: var(--cos-surface); border-color: var(--cos-line); box-shadow: var(--cos-shadow); }
.courseos-app .classroom-tools button { border-radius: 3px; }
.courseos-app .classroom-tools button:hover,
.courseos-app .classroom-tools .tool-active { background: var(--cos-teal-soft); color: var(--cos-teal); }

/* Full-screen teacher workbench used during a live class. */
.courseos-app .courseos-workbench {
  background: var(--cos-paper) !important;
  color: var(--cos-ink) !important;
}
.courseos-app .courseos-wb-topbar,
.courseos-app .courseos-wb-stage-head { background: var(--cos-surface) !important; border-color: var(--cos-line) !important; }
.courseos-app .courseos-wb-brand,
.courseos-app .courseos-wb-context strong,
.courseos-app .courseos-wb-stage-head h2 { color: var(--cos-ink) !important; }
.courseos-app .courseos-wb-mark { border-radius: 3px; background: var(--cos-ink) !important; color: #f6c9a2 !important; }
.courseos-app .courseos-wb-live { color: var(--cos-teal) !important; background: var(--cos-teal-soft) !important; border-color: #b8d9d0 !important; }
.courseos-app .courseos-wb-button { border-radius: 3px; background: var(--cos-surface) !important; border-color: var(--cos-line) !important; color: var(--cos-ink-soft) !important; box-shadow: none !important; }
.courseos-app .courseos-wb-button.primary { background: var(--cos-ink) !important; border-color: var(--cos-ink) !important; color: #fff !important; }
.courseos-app .courseos-wb-layout { background: var(--cos-paper) !important; }
.courseos-app .courseos-wb-rail,
.courseos-app .courseos-wb-right { background: #fbfaf6 !important; border-color: var(--cos-line) !important; }
.courseos-app .courseos-wb-rail-head { border-color: var(--cos-line) !important; }
.courseos-app .courseos-wb-rail-head b,
.courseos-app .courseos-wb-panel h3 { color: var(--cos-ink) !important; }
.courseos-app .courseos-wb-nav button { border-radius: 3px; color: var(--cos-ink-soft) !important; }
.courseos-app .courseos-wb-nav button.active { background: var(--cos-teal-soft) !important; border-color: #b8d9d0 !important; color: var(--cos-teal) !important; }
.courseos-app .courseos-wb-main { background: #ebe9e2 !important; }
.courseos-app .courseos-wb-center { background: #ebe9e2 !important; }
.courseos-app .courseos-wb-canvas { border-radius: 3px; background: var(--cos-surface) !important; border-color: var(--cos-line) !important; box-shadow: var(--cos-shadow) !important; }
.courseos-app .courseos-wb-transport { border-radius: 3px; background: var(--cos-surface) !important; border-color: var(--cos-line) !important; box-shadow: none !important; }
.courseos-app .courseos-wb-transport button { color: var(--cos-ink-soft) !important; }
.courseos-app .courseos-wb-resource,
.courseos-app .courseos-wb-tool { border-radius: 3px; background: var(--cos-surface) !important; border-color: var(--cos-line) !important; color: var(--cos-ink-soft) !important; }
.courseos-app .courseos-wb-resource.active { background: var(--cos-teal-soft) !important; border-color: #9fcfc1 !important; color: var(--cos-teal) !important; }
.courseos-app .courseos-wb-resource-icon,
.courseos-app .courseos-wb-tool-icon { border-radius: 3px; background: var(--cos-coral-soft) !important; color: var(--cos-coral) !important; }
.courseos-app .courseos-wb-callout { border-radius: 3px; background: var(--cos-teal-soft) !important; border-color: #b8d9d0 !important; color: var(--cos-teal) !important; }

@media (max-width: 900px) {
  .courseos-site .wrap { width: min(100% - 36px, 680px); }
  .courseos-site .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .courseos-site .hero { padding-top: 52px; }
  .courseos-site .hero-demo { max-width: 680px; margin: 0 auto; }
  .courseos-site .value-grid,
  .courseos-site .course-grid { grid-template-columns: repeat(2, 1fr); }
  .courseos-site .system-grid,
  .courseos-site .path-layout,
  .courseos-site .role-grid { grid-template-columns: 1fr; gap: 30px; }
  .courseos-site .system-tabs,
  .courseos-site .role-tabs-dark { display: grid; grid-template-columns: repeat(2, 1fr); }
  .courseos-site .trust-row { grid-template-columns: 1fr 1fr; }
  .courseos-app .app { grid-template-columns: 72px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .courseos-site .nav-links,
  .courseos-site .nav-demo { display: none; }
  .courseos-site .nav-toggle { display: block; }
  .courseos-site .hero h1 { font-size: 43px; }
  .courseos-site .hero-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .courseos-site .hero-float { display: none; }
  .courseos-site .value-grid,
  .courseos-site .course-grid,
  .courseos-site .system-tabs,
  .courseos-site .role-tabs-dark,
  .courseos-site .trust-row { grid-template-columns: 1fr; }
  .courseos-site .section,
  .courseos-site .path-section,
  .courseos-site .course-section,
  .courseos-site .cta-section { padding-top: 72px; padding-bottom: 72px; }
  .courseos-site .cta-box { display: block; padding: 32px 26px; }
  .courseos-site .cta-box h2 { font-size: 39px; }
  .courseos-app .content { padding: 24px 16px 44px; }
  .courseos-app .app { grid-template-columns: 1fr; }
  .courseos-app .sidebar { display: none; }
}