/* Hanten vertical rhythm — one source for spacing between page blocks (Oct 30 2026).
   A  text on the blue background -> white box below it ....... 22px desktop / 18px phone
   B  white box -> next section's text on the blue background .. 40px / 34px
   C  white box -> white box that starts a new section ......... 22px / 18px
   D  boxes side by side or stacked within one group ........... 14px
   No divider lines on the blue map background (they fight the map's grid lines).
   The title block above (kicker 10px, title 20px, line under title) is set per page family. */
:root { --rh-a: 22px; --rh-b: 40px; --rh-c: 22px; --rh-d: 14px; }
@media (max-width: 640px) { :root { --rh-a: 18px; --rh-b: 34px; --rh-c: 18px; } }

/* Pages that start with a play-hero / browse-header title block:
   Start here, /see, Free samples, Explore by theme, Browse, Flip, Trick, Challenge. */
body.hanten-phase1 .site > header.play-hero + main,
body.hanten-phase1 .site > header.browse-header + main { margin-top: 0 !important; padding-top: 0 !important; }
body.hanten-phase1 .play-more,
body.hanten-phase1 .themes-foot { margin-top: var(--rh-b) !important; }
body.hanten-phase1 .start-list,
body.hanten-phase1 .idea-grid,
body.hanten-phase1 .sample-grid { gap: var(--rh-d) !important; }

/* Lessons, Interactives, Lesson Kits */
body.hanten-use main.wrap > .mp-already { margin: 0 auto var(--rh-a) !important; }
body.hanten-use main.wrap > section.aprut { margin-bottom: 0 !important; }
body.hanten-use main.wrap > section.in-class { margin-top: var(--rh-b) !important; }
body.hanten-use main.wrap > section.you-get { margin-top: var(--rh-b) !important; margin-bottom: var(--rh-c) !important; }
body.hanten-use main.wrap > section.free-sample { margin-bottom: 0 !important; }
body.hanten-use main.wrap > section.pricing { margin-top: var(--rh-b) !important; margin-bottom: 0 !important; }
body.hanten-use .license-promo { margin-top: var(--rh-a) !important; margin-bottom: 0 !important; }
body.hanten-use .license-promo + .license-promo { margin-top: var(--rh-d) !important; }
body.hanten-use main.wrap > details.teacher-note { margin: var(--rh-b) auto 0 !important; }
body.hanten-use main.wrap > section.library-head { margin-top: var(--rh-b) !important; }
body.hanten-use main.wrap > div.shop-layout { margin-bottom: var(--rh-b) !important; }
body.hanten-use .teacher-note { border-top: 0 !important; }

/* Experiences, Games, Workshops */
body.hanten-use main > section.demo,
body.hanten-use main > section.agenda,
body.hanten-use main > section.philosophy { margin-top: var(--rh-c) !important; }
body.hanten-use main > section.more { margin-top: var(--rh-b) !important; }

/* School & District Licensing */
.license-page .license-options { gap: var(--rh-d) !important; }
.license-page .terms { margin-top: var(--rh-b) !important; }

/* Fine-tuning (measured) */
body.hanten-phase1 main.browse-page > section.browse-controls { margin-top: 0 !important; }
body.hanten-use section.in-class > h2,
body.hanten-use section.you-get > h2 { margin-bottom: var(--rh-a) !important; }
body.hanten-use .run-steps,
body.hanten-use .price-grid,
body.hanten-use .shop-layout,
body.hanten-use .demo-grid { gap: var(--rh-d) !important; }
body.hanten-use .price-grid + .price-card { margin-top: var(--rh-d) !important; }
body.hanten-use section.pricing > p.pricing-sub { margin-bottom: var(--rh-a) !important; }
body.hanten-use section.pricing > p:not(.pricing-sub) { margin-bottom: 0 !important; }
body.hanten-use nav.theme-nav { margin-bottom: var(--rh-a) !important; }
body.hanten-use .teacher-note { padding-top: 0 !important; }
body.hanten-use main > section.more { padding-top: 0 !important; }
body.hanten-use .shop-layout .theme-section { margin-top: 0 !important; margin-bottom: 0 !important; }
body.hanten-use .theme-content { gap: var(--rh-d) !important; }

/* ---- Oct 30 standards decisions (see Website Design Standards v1.3) ---- */
/* E2: Free samples cards use the standard white-card type. */
body.hanten-phase1 .sample-card h3 { font-size: 20px !important; line-height: 1.25 !important; color: #1A3E6E; }
body.hanten-phase1 .sample-card p:not(.sample-kind) { font-size: 16px !important; line-height: 1.5 !important; color: #53636B !important; }
body.hanten-phase1 .sample-kind { font-size: .78rem !important; color: #8F5E00 !important; }
@media (max-width: 640px) {
  body.hanten-phase1 .sample-card h3 { font-size: 18px !important; }
  body.hanten-phase1 .sample-card p:not(.sample-kind) { font-size: 15px !important; }
}
/* E6: every Select button is 14px so it is easy to read and tap. */
body.hanten-use .select-btn { font-size: 14px !important; }
/* E7: Workshop agenda text uses the standard card gray. */
body.hanten-use.hanten-workshops .agenda .lede,
body.hanten-use.hanten-workshops .agenda li span { color: #53636B !important; }
/* A2: small amber text on white uses dark amber #8F5E00 (bright #E59E12 is too faint at small sizes). */
body.hanten-use main .row-id,
body.hanten-use main .license-kicker,
body.hanten-use main .free-sample .eyebrow { color: #8F5E00 !important; }
/* Small card labels (category · H###) share one size: 0.78rem (12.5px). */
body.hanten-phase1 .play-kind { font-size: .78rem !important; }
/* The "Choose your …" button sits 14px above the never-expire line. */
body.hanten-use section.pricing > p.pricing-go { margin: var(--rh-a) 0 var(--rh-d) !important; }
body.hanten-use section.pricing > p.pricing-go > a { display: inline-block; }
body.hanten-use section.pricing > p.pricing-terms { margin-top: 0 !important; }
body.hanten-use .pricing-terms { color: #fff; font-size: .95rem; text-align: center; margin-bottom: 0; }
body.hanten-use .pricing-terms a { color: #fff; font-weight: 800; text-decoration: underline; }

/* Experiences, Games, Workshops: same labels and closing as the product pages. */
body.hanten-use.hanten-experiences main .demo-card > .eyebrow,
body.hanten-use.hanten-experiences main .detail-card > .eyebrow,
body.hanten-use.hanten-experiences main .philosophy .eyebrow,
body.hanten-use.hanten-games main .demo-card > .eyebrow,
body.hanten-use.hanten-games main .detail-card > .eyebrow,
body.hanten-use.hanten-games main .philosophy .eyebrow,
body.hanten-use.hanten-workshops main .agenda > .eyebrow,
body.hanten-use.hanten-workshops main .demo-card > .eyebrow,
body.hanten-use.hanten-workshops main .detail-card > .eyebrow,
body.hanten-use.hanten-workshops main .philosophy .eyebrow {
  font-size: 14px !important; font-weight: 800 !important; color: #8F5E00 !important;
  text-transform: uppercase !important; letter-spacing: 1.4px !important; line-height: 1.3 !important;
}
body.hanten-use main > section.more > .eyebrow {
  font-size: 20px !important; font-weight: 700 !important; color: #E59E12 !important;
  text-transform: uppercase !important; letter-spacing: .8px !important; line-height: 1.3 !important; margin: 0 0 6px !important;
}
body.hanten-use main > section.more > h2 { font-size: 24px !important; color: #fff !important; margin: 0 0 7px !important; }
body.hanten-use main > section.more > p { font-size: 16px !important; color: #fff !important; margin: 0 !important; }
body.hanten-use main > section.more > .button { margin-top: var(--rh-a) !important; }
body.hanten-use main > section.more { padding-bottom: var(--rh-b) !important; }

/* "Coming soon" stands in for a product button until the item is ready. */
.coming-soon { background: #E3E8EE !important; color: #53636B !important; border-color: #E3E8EE !important; cursor: default !important; pointer-events: none; box-shadow: none !important; }