/* =========================================================
   styleHomePageNew.css -- NEW HOME PAGE (Road Map it_afa2c4d642), 3 Oct 2026.
   Markup: homePageAssets/homePage.php. Behaviour: js/homePageNew.js.
   Loaded by functions.php on the front page (THE home page, live 3 Oct 2026) and its test page home-new.
   RULES: every colour, font, size, weight, border and radius is a --bsm3-*
   var from css/brand.css. No box-shadow anywhere. No dark backgrounds
   except small buttons (max 300px wide / 50px tall). Everything scoped to
   #bsm-hn so nothing leaks into the rest of the site.
   ========================================================= */

/* ---------- full width: cancel the theme's 20px content margins (common.css .is-layout-constrained puts
   margin 20px !important on every direct child). The page's content area is already full width on the
   body-menu template, so margin 0 fills it exactly. (100vw was tried first: it counts the scrollbar,
   so the page sat 7.5px off to the left -- live check 3 Oct 2026.) ---------- */
#bsm-hn.hn-root { width: 100%; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
body.page-slug-home-new, body.home { overflow-x: clip; }
/* the member bar is switched off on this page (menus/menu_global_top_bar.php), so drop the space
   styleGlobalNav.css keeps for it (body.logged-in padding-top) */
body.page-slug-home-new.logged-in, body.home.logged-in { padding-top: 0; }
/* while the big phone is open on a phone screen, the page behind it doesn't scroll */
@media (max-width: 560px) { body.hn-phone-open { overflow: hidden; } }
/* admins only: keep the page menu below the WordPress admin bar (32px) when it sticks */
body.admin-bar #bsm-hn .hn-menu { top: var(--bsm3-space-xxl); }

/* ---------- reset inside the page ---------- */
#bsm-hn, #bsm-hn * { box-sizing: border-box; }
#bsm-hn { display: block; font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-body-use-on-reading-text); font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); line-height: 1.5; }
#bsm-hn h2, #bsm-hn h3, #bsm-hn h4, #bsm-hn p, #bsm-hn ol, #bsm-hn li { margin: 0; padding: 0; }
#bsm-hn ol { list-style: none; }
#bsm-hn a { text-decoration: none; }
#bsm-hn .hn-icon { display: block; width: var(--bsm3-icon-size-card); height: var(--bsm3-icon-size-card); stroke-width: var(--bsm3-icon-stroke); }

/* ---------- 1. MENU -- never collapses, fits at 360px ---------- */
#bsm-hn .hn-menu { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--bsm3-space-md); padding: var(--bsm3-space-md) var(--bsm3-space-xl); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border-bottom: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); }
#bsm-hn .hn-logo { display: inline-flex; align-items: center; gap: var(--bsm3-space-sm); flex: 0 0 auto; color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
/* the logo itself: menus/bsm_logo.php + css/styleLogo.css (same as the site header) */
#bsm-hn .hn-menu-links { display: flex; align-items: center; gap: var(--bsm3-space-md); flex: 0 1 auto; }
#bsm-hn .hn-menu-btn { display: inline-flex; align-items: center; justify-content: center; max-width: var(--bsm3-dark-background-max-width); padding: var(--bsm3-space-sm) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); font-family: var(--bsm3-font-body); font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); line-height: 1.2; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; }
#bsm-hn .hn-menu-btn-main { background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
#bsm-hn .hn-menu-btn-main:hover { background-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); border-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); }
#bsm-hn .hn-menu-btn-line { background-color: var(--bsm3-transparent); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#bsm-hn .hn-menu-btn-line:hover { background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); }
#bsm-hn .hn-menu-link { font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); white-space: nowrap; }
#bsm-hn .hn-menu-link:hover { color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon); }

/* ---------- 2. VIDEO SLIDES ---------- */
#bsm-hn .hn-stage { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); }
/* Stage 2 sequence (js/homePageNew.js): the next slide slides in from the right over the current one
   (.hn-slide-in), then becomes the current slide (.hn-slide-on); its word then slides in from the
   right edge to the centre (.hn-word-go). Slides that are not showing sit off to the right. */
#bsm-hn .hn-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; visibility: hidden; transform: translateX(100%); }
#bsm-hn .hn-slide.hn-slide-on { z-index: 1; visibility: visible; transform: translateX(0); }
#bsm-hn .hn-slide.hn-slide-in { z-index: 2; visibility: visible; transform: translateX(0); transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
#bsm-hn .hn-slide-words { transform: translateX(100vw); }
#bsm-hn .hn-slide.hn-word-go .hn-slide-words { transform: translateX(0); transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1); }
#bsm-hn .hn-slide-poster, #bsm-hn .hn-slide-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#bsm-hn .hn-slide-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--bsm3-color-black-000000-use-on-bg-sleep); opacity: var(--bsm3-opacity-low); pointer-events: none; }
#bsm-hn .hn-slide-words { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bsm3-space-lg); padding: var(--bsm3-space-xl); text-align: center; }
#bsm-hn .hn-word { font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-home-page-titles-use-on-home-page-titles); font-weight: var(--bsm3-weight-bold-700-use-on-h1); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); line-height: 1; letter-spacing: 0; }
#bsm-hn .hn-word-label { display: inline-flex; padding: var(--bsm3-pill-chip-padding); border-radius: var(--bsm3-radius-pills); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); border: var(--bsm3-border-default) solid var(--bsm3-transparent); }
#bsm-hn .hn-pillar-body .hn-word-label { background-color: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background); color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong); border-color: var(--bsm3-color-body-outline-light-green-86EFAC-use-on-body-pillar-outline); }
#bsm-hn .hn-pillar-sleep .hn-word-label { background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); }
#bsm-hn .hn-pillar-mind .hn-word-label { background-color: var(--bsm3-color-mind-light-sky-blue-DBEAFE-use-on-mind-pillar-background); color: var(--bsm3-color-mind-deep-navy-blue-1E40AF-use-on-mind-pillar-strong); border-color: var(--bsm3-color-mind-outline-light-blue-93C5FD-use-on-mind-pillar-outline); }
#bsm-hn .hn-pillar-personal .hn-word-label { background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); border-color: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); }
#bsm-hn .hn-scroll-cue { position: absolute; left: 50%; bottom: var(--bsm3-space-xl); transform: translateX(-50%); z-index: 2; padding: var(--bsm3-pill-chip-padding); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }

/* ---------- 3. LIVE PHONE (the real Scheduler in a phone frame) ----------
   Every screen size starts with the small phone picture (a teaser); tapped, the big phone opens with the
   product running inside it. Desktop/tablet: half the screen, in the video area. Phones: centred over the
   page, --bsm3-home-phone-mobile-width-use-on-home-page-phone wide. */
#bsm-hn .hn-phone { position: absolute; top: var(--bsm3-space-xl); right: var(--bsm3-space-xl); z-index: 5; display: flex; flex-direction: column; align-items: flex-end; }
#bsm-hn .hn-phone-body { display: none; position: relative; flex: 1 1 auto; width: 100%; overflow: hidden; background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border: var(--bsm3-border-thick) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); border-radius: calc(var(--bsm3-radius-primary-cards) * 3); }
#bsm-hn .hn-phone-notch { position: absolute; top: var(--bsm3-space-sm); left: 50%; z-index: 2; transform: translateX(-50%); width: calc(var(--bsm3-icon-size-container) * 2); height: var(--bsm3-space-md); border-radius: var(--bsm3-radius-pills); background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
/* the product inside the phone is drawn smaller by --bsm3-home-phone-shrink-use-on-home-page-phone (brand.css):
   the frame is made bigger by the same amount and then scaled down, so it still fills the phone exactly */
#bsm-hn .hn-phone-screen { position: absolute; top: var(--bsm3-space-xl); left: 0; display: block; width: calc(100% / var(--bsm3-home-phone-shrink-use-on-home-page-phone)); height: calc((100% - var(--bsm3-space-xl)) / var(--bsm3-home-phone-shrink-use-on-home-page-phone)); border: 0; max-width: none; max-height: none; transform: scale(var(--bsm3-home-phone-shrink-use-on-home-page-phone)); transform-origin: 0 0; background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); } /* max-width: none -- the theme caps every iframe at 100% wide, which stopped the shrink filling the phone (live check 3 Oct 2026) */
/* the [x] that closes the big phone: on the phone itself, top right beside the notch */
#bsm-hn .hn-phone-close { display: none; position: absolute; top: calc(var(--bsm3-border-thick) + var(--bsm3-space-xs)); right: calc(var(--bsm3-border-thick) + var(--bsm3-space-md)); z-index: 6; align-items: center; justify-content: center; width: var(--bsm3-icon-size-container); height: var(--bsm3-icon-size-container); padding: 0; line-height: 1; border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); cursor: pointer; }
/* the small phone picture (the teaser) */
#bsm-hn .hn-phone-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bsm3-space-sm); width: calc(var(--bsm3-icon-size-container) * 2); height: calc(var(--bsm3-icon-size-container) * 3.5); padding: var(--bsm3-space-sm); cursor: pointer; font-family: var(--bsm3-font-body); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border: var(--bsm3-border-thick) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); border-radius: calc(var(--bsm3-radius-primary-cards) * 1.5); transition: transform 0.2s ease; }
#bsm-hn .hn-phone-link:hover { transform: translateY(calc(var(--bsm3-space-xs) * -1)); }
#bsm-hn .hn-phone-link .hn-phone-notch { top: var(--bsm3-space-xs); width: var(--bsm3-icon-size-card); height: var(--bsm3-space-xs); }
#bsm-hn .hn-phone-link-label { font-size: var(--bsm3-text-tiny-10px-use-on-text); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); text-align: center; line-height: 1.2; }
/* tapped (desktop/tablet): the big phone, half the screen, in the video area */
#bsm-hn .hn-phone.hn-phone-big { width: 50%; height: calc(100% - var(--bsm3-space-xl) * 2); }
#bsm-hn .hn-phone.hn-phone-big .hn-phone-body { display: block; }
#bsm-hn .hn-phone.hn-phone-big .hn-phone-close { display: inline-flex; }
#bsm-hn .hn-phone.hn-phone-big .hn-phone-link { display: none; }

/* ---------- shared section layout ---------- */
#bsm-hn .hn-section { padding: var(--bsm3-space-xl) var(--bsm3-space-xl); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border-top: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); } /* 3 Oct 2026 (Chris): ~80% less vertical white space, a divider between sections */
#bsm-hn .hn-section-tint { background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); }
#bsm-hn .hn-wrap { width: 100%; max-width: var(--bsm3-width-wide); margin: 0 auto; }
#bsm-hn .hn-eyebrow { display: block; margin-bottom: var(--bsm3-space-xs); font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); letter-spacing: var(--bsm3-section-label-tracking); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); text-align: center; }
#bsm-hn .hn-h2 { font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-section-heading-22px-use-on-h2); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); text-align: center; line-height: 1.3; margin-bottom: var(--bsm3-space-md); }
#bsm-hn .hn-lead { max-width: var(--bsm3-width-standard); margin: 0 auto var(--bsm3-space-md); font-size: var(--bsm3-text-body-use-on-reading-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); text-align: center; }

/* ---------- cards + icon boxes ---------- */
#bsm-hn .hn-card { display: flex; flex-direction: column; gap: var(--bsm3-space-md); height: 100%; padding: var(--bsm3-space-xl); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); border-radius: var(--bsm3-radius-primary-cards); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#bsm-hn .hn-card-title { font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); line-height: 1.3; }
#bsm-hn .hn-card-text { font-size: var(--bsm3-text-body-use-on-reading-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#bsm-hn .hn-icon-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--bsm3-icon-size-container); height: var(--bsm3-icon-size-container); border-radius: var(--bsm3-radius-status-cards); background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#bsm-hn .hn-card-body { border-color: var(--bsm3-color-body-outline-light-green-86EFAC-use-on-body-pillar-outline); }
#bsm-hn .hn-card-body .hn-icon-box { background-color: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background); color: var(--bsm3-color-body-core-green-16A34A-use-on-body-pillar-accent-icon); }
#bsm-hn .hn-card-sleep { border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); }
#bsm-hn .hn-card-sleep .hn-icon-box { background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); }
#bsm-hn .hn-card-mind { border-color: var(--bsm3-color-mind-outline-light-blue-93C5FD-use-on-mind-pillar-outline); }
#bsm-hn .hn-card-mind .hn-icon-box { background-color: var(--bsm3-color-mind-light-sky-blue-DBEAFE-use-on-mind-pillar-background); color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon); }

/* ---------- 4. BUILT FOR EVERY CONTEXT -- three equal boxes ---------- */
#bsm-hn .hn-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--bsm3-space-lg); }

/* ---------- 5. HOW IT WORKS ---------- */
#bsm-hn .hn-how-video { width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--bsm3-space-md); overflow: hidden; background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); border-radius: var(--bsm3-radius-primary-cards); }
#bsm-hn .hn-how-player { display: block; width: 100%; height: 100%; object-fit: cover; }
#bsm-hn .hn-how-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bsm3-space-sm); width: 100%; height: 100%; padding: var(--bsm3-space-lg); text-align: center; }
/* until the How It Works video exists, the placeholder is a slim strip, not a big empty 16:9 box */
#bsm-hn .hn-how-video:has(.hn-how-placeholder) { aspect-ratio: auto; }
#bsm-hn .hn-cta-row { display: flex; justify-content: center; margin-top: var(--bsm3-space-lg); }

/* ---------- card buttons (Chris, 3 Oct 2026): one coloured button per card, in the card's pillar colour ---------- */
#bsm-hn .hn-card-btn { display: inline-flex; align-items: center; gap: var(--bsm3-space-sm); align-self: flex-start; margin-top: auto; max-width: var(--bsm3-dark-background-max-width); padding: var(--bsm3-space-sm) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-transparent); font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); line-height: 1.2; transition: background-color 0.2s ease, transform 0.2s ease; }
#bsm-hn .hn-card-btn:hover { transform: translateX(var(--bsm3-space-xs)); }
#bsm-hn .hn-card-body .hn-card-btn { background-color: var(--bsm3-color-body-core-green-16A34A-use-on-body-pillar-accent-icon); }
#bsm-hn .hn-card-body .hn-card-btn:hover { background-color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong); }
#bsm-hn .hn-card-sleep .hn-card-btn { background-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); }
#bsm-hn .hn-card-sleep .hn-card-btn:hover { background-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); }
#bsm-hn .hn-card-mind .hn-card-btn { background-color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon); }
#bsm-hn .hn-card-mind .hn-card-btn:hover { background-color: var(--bsm3-color-mind-deep-navy-blue-1E40AF-use-on-mind-pillar-strong); }

/* ---------- HOW IT WORKS SLIDER (Chris, 3 Oct 2026) ---------- */
#bsm-hn .hn-slider { display: flex; flex-direction: column; gap: var(--bsm3-space-md); }
#bsm-hn .hn-slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: calc(var(--bsm3-radius-primary-cards) * 2); }
#bsm-hn .hn-slider-track::-webkit-scrollbar { display: none; }
#bsm-hn .hn-step-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--bsm3-space-xxl); padding: var(--bsm3-space-xl) var(--bsm3-space-xxl); border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); border-radius: calc(var(--bsm3-radius-primary-cards) * 2); background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); }
#bsm-hn .hn-step-art { display: flex; justify-content: center; }
#bsm-hn .hn-step-tile { display: flex; align-items: center; justify-content: center; width: calc(var(--bsm3-icon-size-container) * 4); height: calc(var(--bsm3-icon-size-container) * 4); border-radius: calc(var(--bsm3-radius-primary-cards) * 2); border: var(--bsm3-border-thick) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#bsm-hn .hn-step-tile .hn-icon { width: calc(var(--bsm3-icon-size-empty-states) * 2.4); height: calc(var(--bsm3-icon-size-empty-states) * 2.4); }
#bsm-hn .hn-step-copy { display: flex; flex-direction: column; gap: var(--bsm3-space-md); }
#bsm-hn .hn-step-count { font-family: var(--bsm3-font-mono); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-regular-400-use-on-h5-or-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); }
#bsm-hn .hn-step-title { font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-section-heading-22px-use-on-h2); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); line-height: 1.25; }
#bsm-hn .hn-step-text { font-size: var(--bsm3-text-large-16px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); line-height: 1.6; }
#bsm-hn .hn-step-chips { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-sm); }
#bsm-hn .hn-step-chip { display: inline-flex; padding: var(--bsm3-pill-chip-padding); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-transparent); font-size: var(--bsm3-text-small-12px-use-on-text); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); }
#bsm-hn .hn-chip-body { background-color: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background); border-color: var(--bsm3-color-body-outline-light-green-86EFAC-use-on-body-pillar-outline); color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong); }
#bsm-hn .hn-chip-sleep { background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); }
#bsm-hn .hn-chip-mind { background-color: var(--bsm3-color-mind-light-sky-blue-DBEAFE-use-on-mind-pillar-background); border-color: var(--bsm3-color-mind-outline-light-blue-93C5FD-use-on-mind-pillar-outline); color: var(--bsm3-color-mind-deep-navy-blue-1E40AF-use-on-mind-pillar-strong); }
/* the five tones: orange (your study), green (body), violet (sleep), blue (mind), all three (scheduler) */
#bsm-hn .hn-step-slide.hn-tone-amber { background-color: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background); border-color: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high); }
#bsm-hn .hn-tone-amber .hn-step-tile { border-color: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high); color: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high); }
#bsm-hn .hn-step-slide.hn-tone-body { background-color: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background); border-color: var(--bsm3-color-body-outline-light-green-86EFAC-use-on-body-pillar-outline); }
#bsm-hn .hn-tone-body .hn-step-tile { border-color: var(--bsm3-color-body-outline-light-green-86EFAC-use-on-body-pillar-outline); color: var(--bsm3-color-body-core-green-16A34A-use-on-body-pillar-accent-icon); }
#bsm-hn .hn-step-slide.hn-tone-sleep { background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); }
#bsm-hn .hn-tone-sleep .hn-step-tile { border-color: var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline); color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); }
#bsm-hn .hn-step-slide.hn-tone-mind { background-color: var(--bsm3-color-mind-light-sky-blue-DBEAFE-use-on-mind-pillar-background); border-color: var(--bsm3-color-mind-outline-light-blue-93C5FD-use-on-mind-pillar-outline); }
#bsm-hn .hn-tone-mind .hn-step-tile { border-color: var(--bsm3-color-mind-outline-light-blue-93C5FD-use-on-mind-pillar-outline); color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon); }
#bsm-hn .hn-tone-all .hn-step-tile { border-color: var(--bsm3-color-ink-navy-1E1B48-use-on-border); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
/* arrows + dots */
#bsm-hn .hn-slider-nav { display: flex; align-items: center; justify-content: center; gap: var(--bsm3-space-lg); }
#bsm-hn .hn-slider-arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--bsm3-icon-size-container); height: var(--bsm3-icon-size-container); padding: 0; border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-large-16px-use-on-text); cursor: pointer; }
#bsm-hn .hn-slider-arrow:hover { background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); }
#bsm-hn .hn-slider-arrow[disabled] { opacity: var(--bsm3-opacity-medium); cursor: default; }
#bsm-hn .hn-slider-dots { display: flex; align-items: center; gap: var(--bsm3-space-sm); }
#bsm-hn .hn-dot { width: var(--bsm3-space-md); height: var(--bsm3-space-md); padding: 0; border-radius: var(--bsm3-radius-pills); border: 0; cursor: pointer; transition: width 0.3s ease; background-color: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); }
#bsm-hn .hn-dot.hn-dot-on { width: var(--bsm3-space-xxl); }
#bsm-hn .hn-dot.hn-tone-amber { background-color: var(--bsm3-color-status-high-orange-F2994A-use-on-status-high); }
#bsm-hn .hn-dot.hn-tone-body { background-color: var(--bsm3-color-body-core-green-16A34A-use-on-body-pillar-accent-icon); }
#bsm-hn .hn-dot.hn-tone-sleep { background-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); }
#bsm-hn .hn-dot.hn-tone-mind { background-color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon); }
#bsm-hn .hn-dot.hn-tone-all { background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#bsm-hn .hn-dot:not(.hn-dot-on) { opacity: var(--bsm3-opacity-medium); }

/* ---------- 6. FOOTER ---------- */
#bsm-hn .hn-footer { padding: var(--bsm3-space-xl) var(--bsm3-space-xl) var(--bsm3-space-lg); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border-top: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); }
#bsm-hn .hn-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--bsm3-space-xl); }
#bsm-hn .hn-footer-brand { display: flex; flex-direction: column; gap: var(--bsm3-space-md); }
#bsm-hn .hn-footer-col { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); }
#bsm-hn .hn-footer-h { font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); letter-spacing: var(--bsm3-section-label-tracking); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); margin-bottom: var(--bsm3-space-xs); }
#bsm-hn .hn-footer-text { font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); max-width: var(--bsm3-width-standard); }
#bsm-hn .hn-footer-link { font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
#bsm-hn .hn-footer-link:hover { color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon); }
#bsm-hn .hn-footer-bottom { display: flex; flex-direction: column; gap: var(--bsm3-space-sm); margin-top: var(--bsm3-space-lg); padding-top: var(--bsm3-space-lg); border-top: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); }
#bsm-hn .hn-footer-small { font-size: var(--bsm3-text-small-12px-use-on-text); color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text); }
#bsm-hn .hn-footer-strong { font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }

/* ---------- tablet ---------- */
@media (max-width: 860px) {
  #bsm-hn .hn-context-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  #bsm-hn .hn-phone.hn-phone-big { width: calc(100% - var(--bsm3-space-xl) * 2); }
  #bsm-hn .hn-footer-cols { grid-template-columns: 1fr 1fr; }
  #bsm-hn .hn-footer-brand { grid-column: 1 / -1; }
}

/* ---------- phones: the menu stays one row, it never turns into a hamburger ---------- */
@media (max-width: 560px) {
  /* phones: two rows -- logo + title on top (the title is NEVER hidden, Chris 3 Oct 2026), the three links below */
  #bsm-hn .hn-menu { flex-wrap: wrap; justify-content: center; padding: var(--bsm3-space-sm) var(--bsm3-space-md); gap: var(--bsm3-space-sm); }
  #bsm-hn .hn-menu .hn-logo { flex: 0 0 100%; justify-content: center; }
  #bsm-hn .hn-menu-links { flex: 0 0 100%; justify-content: center; gap: var(--bsm3-space-sm); }
  #bsm-hn .hn-menu-btn { padding: var(--bsm3-pill-chip-padding); font-size: var(--bsm3-text-small-12px-use-on-text); }
  #bsm-hn .hn-menu-link { font-size: var(--bsm3-text-small-12px-use-on-text); }
  #bsm-hn .hn-section { padding: var(--bsm3-space-lg) var(--bsm3-space-lg); }
  #bsm-hn .hn-step-slide { grid-template-columns: minmax(0, 1fr); gap: var(--bsm3-space-lg); padding: var(--bsm3-space-xl); text-align: left; }
  #bsm-hn .hn-step-art { justify-content: flex-start; }
  #bsm-hn .hn-step-tile { width: calc(var(--bsm3-icon-size-container) * 2.5); height: calc(var(--bsm3-icon-size-container) * 2.5); }
  #bsm-hn .hn-step-tile .hn-icon { width: calc(var(--bsm3-icon-size-empty-states) * 1.6); height: calc(var(--bsm3-icon-size-empty-states) * 1.6); }
  #bsm-hn .hn-step-text { font-size: var(--bsm3-text-body-use-on-reading-text); }
  /* phones: the small phone picture top right; tapped, the big phone opens centred over the page
     (same page, same address), --bsm3-home-phone-mobile-width-use-on-home-page-phone wide */
  #bsm-hn .hn-phone { top: var(--bsm3-space-lg); right: var(--bsm3-space-lg); }
  #bsm-hn .hn-phone.hn-phone-big { position: fixed; top: var(--bsm3-space-sm); bottom: var(--bsm3-space-sm); left: 50%; right: auto; z-index: 100000; transform: translateX(-50%); width: var(--bsm3-home-phone-mobile-width-use-on-home-page-phone); height: auto; align-items: stretch; }
  #bsm-hn .hn-footer { padding: var(--bsm3-space-lg); }
}

/* ---------- reduced motion: no fades ---------- */
@media (prefers-reduced-motion: reduce) {
  #bsm-hn .hn-slide, #bsm-hn .hn-slide.hn-slide-in { transition: none; }
  #bsm-hn .hn-slider-track { scroll-behavior: auto; }
  #bsm-hn .hn-card-btn, #bsm-hn .hn-dot { transition: none; }
  #bsm-hn .hn-slide-words, #bsm-hn .hn-slide.hn-word-go .hn-slide-words { transform: none; transition: none; }
}
/* no JavaScript: show the first slide with its word, still */
#bsm-hn.hn-nojs .hn-slide-words { transform: none; }