/* Hanten Use pages — approved shared presentation (October 2026).
   Loaded after legacy page styles. Scoped to .hanten-use so drafts can
   migrate one page at a time without unintended changes. */
body.hanten-use {
  --navy: #1A3E6E;
  --accent: #E59E12;
  --canvas: #6688AD;
  --ink: #1C2733;
  --muted: #586979;
  --line: #D9DEE3;
  background: var(--canvas) !important;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}
body.hanten-use::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/Media/branding/hanten-south-up-world.svg') center center / cover no-repeat;
  opacity: .72;
}
body.hanten-use > main { position: relative; z-index: 1; }
body.hanten-use .hero {
  text-align: center;
  padding: 42px 20px 22px;
}
body.hanten-use .hero > .eyebrow {
  display: block;
  color: #E59E12;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: none;
  margin: 0 auto;
}
body.hanten-use .hero h1 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 10px auto 0;
  max-width: none;
}
body.hanten-use .hero p {
  color: rgba(255,255,255,.95);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  margin: 20px auto 0;
  max-width: 760px;
}
/* Keep classroom cards, price tiles, selections, and checkout text dark. */
body.hanten-use .aprut,
body.hanten-use .free-sample,
body.hanten-use .card,
body.hanten-use .aprut-list,
body.hanten-use .run-steps li,
body.hanten-use .price-card,
body.hanten-use #checkoutNotice {
  color: #1C2733;
}
body.hanten-use .library-head h2,
body.hanten-use .library-head p,
body.hanten-use .pricing > h2,
body.hanten-use .pricing-sub,
body.hanten-use .in-class > h2,
body.hanten-use .you-get > h2,
body.hanten-use .teacher-note h2,
body.hanten-use .teacher-note p,
body.hanten-use .theme-heading h2,
body.hanten-use .theme-count { color: #fff; }
body.hanten-use .theme-heading { border-bottom-color: rgba(255,255,255,.55); }
body.hanten-use .teacher-note { border-top-color: rgba(255,255,255,.55); }
/* Shared label color; size depends on whether it is a section or card label. */
body.hanten-use .eyebrow { color: #F6C35E; }
body.hanten-classroom .free-sample .eyebrow {
  color: #E59E12;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .10em;
}
body.hanten-use .pricing > .eyebrow,
body.hanten-use .library-head > .eyebrow,
body.hanten-use .in-class > .eyebrow { color: #F6C35E; }
body.hanten-use .free-action,
body.hanten-use .pricing-go a { background: #1A3E6E; color: #fff; border-radius: 999px; }
body.hanten-use .free-action:hover,
body.hanten-use .pricing-go a:hover { background: #24528F; }
/* Nine approved pastel theme colors, matching the shared Explore menu. */
body.hanten-classroom [data-theme="perspective"] { --theme-bg: #EDE7F4; }
body.hanten-classroom [data-theme="time"] { --theme-bg: #F4ECDF; }
body.hanten-classroom [data-theme="scale"] { --theme-bg: #E2EEF5; }
body.hanten-classroom [data-theme="measurement"] { --theme-bg: #E6EFE2; }
body.hanten-classroom [data-theme="distribution"] { --theme-bg: #F5E6DF; }
body.hanten-classroom [data-theme="statistics"] { --theme-bg: #E4E8F0; }
body.hanten-classroom [data-theme="probability"] { --theme-bg: #DFF0EB; }
body.hanten-classroom [data-theme="optimization"] { --theme-bg: #F1EFD8; }
body.hanten-classroom [data-theme="systems"] { --theme-bg: #F3E4EA; }
body.hanten-classroom .theme-nav a[data-theme] { background: var(--theme-bg); }
body.hanten-classroom .theme-section[data-theme] .theme-heading h2 {
  color: #1A3E6E;
  background: var(--theme-bg);
  border-radius: 10px;
  padding: 6px 13px;
}
@media (max-width: 640px) {
  body.hanten-use .hero { padding: 28px 16px 18px; }
  body.hanten-use .hero > .eyebrow { font-size: 22px; }
  body.hanten-use .hero h1 { font-size: 32px; }
}

/* Classroom typography: section labels, section titles, and content cards. */
body.hanten-classroom .in-class > .eyebrow,
body.hanten-classroom .pricing > .eyebrow,
body.hanten-classroom .library-head > .eyebrow {
  color: #F6C35E;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
}
body.hanten-classroom .in-class > h2,
body.hanten-classroom .you-get > h2,
body.hanten-classroom .pricing > h2,
body.hanten-classroom .library-head > h2 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
body.hanten-classroom .run-steps strong,
body.hanten-classroom .you-get .get-grid strong,
body.hanten-classroom .free-sample h2,
body.hanten-classroom .price-card h3 {
  color: #1A3E6E;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
body.hanten-classroom .run-steps span,
body.hanten-classroom .you-get .get-grid span,
body.hanten-classroom .free-sample p,
body.hanten-classroom .price-card .price-each,
body.hanten-classroom .price-card li {
  color: #53636b;
  font-size: 16px;
  line-height: 1.5;
}
/* Prices intentionally retain their larger emphasis. */
body.hanten-classroom .price-card .price-amt { color: #172536; }
body.hanten-classroom .run-steps li {
  min-height: 0;
  padding: 13px 14px;
}
body.hanten-classroom .run-steps li::before { margin-bottom: 7px; }
body.hanten-classroom .you-get .get-grid > div {
  background: #fff;
  color: #1C2733;
  border: 1px solid #D9DEE3;
  border-radius: 16px;
  padding: 18px 16px;
}
@media (max-width: 640px) {
  body.hanten-classroom .in-class > .eyebrow,
  body.hanten-classroom .pricing > .eyebrow,
  body.hanten-classroom .library-head > .eyebrow { font-size: 18px; }
  body.hanten-classroom .in-class > h2,
  body.hanten-classroom .you-get > h2,
  body.hanten-classroom .pricing > h2,
  body.hanten-classroom .library-head > h2 { font-size: 24px; }
  body.hanten-classroom .run-steps strong,
  body.hanten-classroom .you-get .get-grid strong,
  body.hanten-classroom .free-sample h2,
  body.hanten-classroom .price-card h3 { font-size: 18px; }
  body.hanten-classroom .run-steps span,
  body.hanten-classroom .you-get .get-grid span,
  body.hanten-classroom .free-sample p,
  body.hanten-classroom .price-card .price-each,
  body.hanten-classroom .price-card li { font-size: 15px; }
}

/* Classroom collection: one theme at a time, without map-crossing rules. */
body.hanten-classroom .theme-section[hidden] { display: none !important; }
body.hanten-classroom .theme-heading { border-bottom: 0; }
body.hanten-classroom .theme-nav button[data-theme] {
  appearance: none; font: inherit; font-size: 13px; font-weight: 900;
  color: #1A3E6E; background: var(--theme-bg);
  border: 2px solid transparent; border-radius: 999px;
  padding: 8px 13px; cursor: pointer;
}
body.hanten-classroom .theme-nav button[aria-pressed="true"] {
  border-color: #1A3E6E; box-shadow: 0 0 0 2px rgba(255,255,255,.65);
}
body.hanten-classroom .theme-nav button:focus-visible { outline: 3px solid #F6C35E; outline-offset: 3px; }
body.hanten-classroom .featured-label { color: #8F5E00; font-size: 13px; letter-spacing: .06em; }
body.hanten-classroom .featured-card h3 { color: #1A3E6E; font-size: 20px !important; }
body.hanten-classroom .featured-card p { color: #53636b; font-size: 16px !important; line-height: 1.5; }
body.hanten-classroom .featured-card .eyebrow { color: #8F5E00; font-size: 14px; }
@media (max-width: 640px) {
  body.hanten-classroom .featured-card h3 { font-size: 18px !important; }
  body.hanten-classroom .featured-card p { font-size: 15px !important; }
}

/* Classroom: fit all nine themes in one desktop row; wrap naturally on phones. */
@media (min-width: 1050px) {
  body.hanten-classroom .theme-nav { max-width: 1200px; flex-wrap: nowrap; gap: 6px; }
  body.hanten-classroom .theme-nav button[data-theme] { flex: 1 1 auto; min-width: 0; padding: 9px 8px; font-size: 12px; white-space: nowrap; }
}
body.hanten-classroom .theme-section { margin-top: 8px; }

/* Compact selection summary; expanded list remains scrollable within the sidebar. */
body.hanten-classroom .selection-list {max-height:260px!important;overflow-y:auto!important;}
body.hanten-classroom .selection-toggle {display:block;width:100%;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:8px;padding:8px;font-weight:800;cursor:pointer;}
body.hanten-classroom .selection-toggle[hidden] {display:none!important;}
body.hanten-classroom .license-promo {max-width:980px;margin:0 auto 38px;padding:22px 25px;border-radius:17px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#1A3E6E;box-shadow:0 6px 22px rgba(18,46,77,.09);text-align:left;}
body.hanten-classroom .license-kicker {color:#996500;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
body.hanten-classroom .license-promo h3 {margin:5px 0 7px;font-size:22px;}
body.hanten-classroom .license-promo p {margin:0;color:#53636b;font-size:15px;line-height:1.5;}
body.hanten-classroom .license-link {background:#1A3E6E;color:#fff;padding:12px 16px;border-radius:9px;font-size:14px;font-weight:800;white-space:nowrap;text-decoration:none;}
@media(max-width:760px){body.hanten-classroom .license-promo{flex-direction:column;align-items:stretch;margin:0 15px 32px;}body.hanten-classroom .license-link{text-align:center;white-space:normal;}}

/* Licensing banner: use approved amber label and consistent type hierarchy. */
body.hanten-classroom .license-kicker{color:#E59E12;font-size:14px;font-weight:800;line-height:1.3;letter-spacing:.10em;}
body.hanten-classroom .license-promo h3{font-size:20px;font-weight:700;line-height:1.25;}
body.hanten-classroom .license-promo p{font-size:16px;line-height:1.5;}
@media(max-width:640px){body.hanten-classroom .license-promo h3{font-size:18px;}body.hanten-classroom .license-promo p{font-size:15px;}}

/* Pricing cards share one border treatment; no single package is highlighted. */
body.hanten-classroom .price-grid .price-card{border:1px solid #d8d4ca;}

/* Classroom headings: approved Hanten brand amber. Scoped to this page
   so other Use pages and interactive/focus colors remain unchanged. */
body.hanten-classroom.hanten-use .hero > .eyebrow,
body.hanten-classroom.hanten-use .in-class > .eyebrow,
body.hanten-classroom.hanten-use .pricing > .eyebrow,
body.hanten-classroom.hanten-use .library-head > .eyebrow {
  color: #E59E12;
}

/* White-card standard (Oct 30 2026): card headings 20px/18px bold navy,
   card text 16px/15px gray. Applies to the "What is ..." card on
   Lessons, Interactives and Kits. */
body.hanten-use .aprut h2 { font-size: 20px; color: #1A3E6E; }
body.hanten-use .aprut-explain { font-size: 16px; color: #53636B; }
@media (max-width: 640px) {
  body.hanten-use .aprut h2 { font-size: 18px; }
  body.hanten-use .aprut-explain { font-size: 15px; }
}