/* Neogen palette for the inner pages.
 *
 * Loaded after bx-tokens.css and bx-shared.css, and only on pages that carry
 * .bx-theme-neogen on their .bx-page wrapper (see bx_head.twig). Pages are
 * moved across one at a time; a page without the class is untouched.
 *
 * Colour and type only. Layout, spacing and breakpoints stay bx-shared.css's.
 * Everything comes from the homepage frame (Figma NEOGEN / Home Page,
 * "Color 2"), which bx-home.css implements:
 *
 *   #031E8E  navy   — text on light, bands, filled buttons on light
 *   #29F0FF  cyan   — accents, and the filled button on navy
 *   #EDF9FD  mist   — light sections
 *   #FBFEFF  paper  — nav and footer
 *
 * Part one re-points the --bx-* tokens, which carries most of the page.
 * Part two covers what bx-shared.css draws with literals instead of tokens.
 */

.bx-page.bx-theme-neogen {
  --ng-navy: #031E8E;
  --ng-navy-deep: #011771;
  --ng-cyan: #29F0FF;
  --ng-mist: #EDF9FD;
  --ng-paper: #FBFEFF;
  --ng-line: #DCE6EF;

  /* surfaces */
  --bx-dark: var(--ng-navy);
  --bx-black: var(--ng-navy);
  --bx-cta: var(--ng-navy);
  --bx-light: var(--ng-mist);
  --bx-blue: var(--ng-navy);
  --bx-blue-deep: var(--ng-navy-deep);
  --bx-blue-hover: #0A36D6;

  /* ink */
  --bx-on-dark-muted: rgba(255, 255, 255, 0.86);
  --bx-on-dark-faint: rgba(255, 255, 255, 0.66);
  --bx-on-light: var(--ng-navy);
  /* Navy at 78% on mist: 8.6:1. */
  --bx-on-light-muted: rgba(3, 30, 142, 0.78);
  --bx-on-blue-muted: rgba(255, 255, 255, 0.86);
  --bx-accent: var(--ng-cyan);

  /* lines */
  --bx-line-light: rgba(3, 30, 142, 0.16);

  /* type — the frame is Poppins throughout, with no mono face */
  --bx-font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --bx-font-mono: 'Poppins', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* bx-shared uses this one token for buttons AND for cards, inputs and
     product pictures. The frame's cards are 24px; the buttons are made pills
     by name below, so a form card does not come out as an ellipse. */
  --bx-radius-btn: 24px;
}
.bx-page.bx-theme-neogen .bx-btn,
.bx-page.bx-theme-neogen .btn,
.bx-page.bx-theme-neogen .bx-btn-checkout,
.bx-page.bx-theme-neogen #product #button-cart,
.bx-page.bx-theme-neogen .cart-checkout,
.bx-page.bx-theme-neogen .dc-cta,
.bx-page.bx-theme-neogen .store-filter,
.bx-page.bx-theme-neogen .store-sort select,
.bx-page.bx-theme-neogen .sci-pill,
.bx-page.bx-theme-neogen .sci-filter,
.bx-page.bx-theme-neogen .signin-seg,
.bx-page.bx-theme-neogen .signin-seg__btn,
.bx-page.bx-theme-neogen .acct-signedin { border-radius: 999px; }
.bx-page.bx-theme-neogen input:not([type="checkbox"]):not([type="radio"]),
.bx-page.bx-theme-neogen select:not(.store-sort select),
.bx-page.bx-theme-neogen textarea { border-radius: 12px; }

/* ------------------------------------------------------------------ nav --
   The frame's nav is a paper bar with navy links and a navy pill. */
.bx-page.bx-theme-neogen .site-nav,
.bx-page.bx-theme-neogen .site-nav.is-stuck,
.bx-page.bx-theme-neogen .site-nav--solid {
  background: var(--ng-paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 var(--ng-line);
}
.bx-page.bx-theme-neogen .site-nav.is-stuck { box-shadow: 0 1px 0 var(--ng-line), 0 10px 30px rgba(3, 30, 142, 0.10); }
.bx-page.bx-theme-neogen .brand img { width: 113px; }
.bx-page.bx-theme-neogen .nav-links { color: var(--ng-navy); font-weight: 500; }
.bx-page.bx-theme-neogen .nav-links a:hover,
.bx-page.bx-theme-neogen .nav-links a.is-active { color: #0A36D6; }
.bx-page.bx-theme-neogen .nav-drop__menu,
.bx-page.bx-theme-neogen .nav-login__menu {
  background: var(--ng-paper);
  border-color: var(--ng-line);
  color: var(--ng-navy);
  box-shadow: 0 14px 34px rgba(3, 30, 142, 0.14);
}
.bx-page.bx-theme-neogen .nav-drop__menu a,
.bx-page.bx-theme-neogen .nav-login__menu a { color: var(--ng-navy); }
.bx-page.bx-theme-neogen .nav-drop__menu a:hover,
.bx-page.bx-theme-neogen .nav-login__menu a:hover { background: var(--ng-mist); color: var(--ng-navy); }
.bx-page.bx-theme-neogen .nav-account {
  background: var(--ng-navy);
  border-color: var(--ng-navy);
  color: #fff;
  font-weight: 600;
}
.bx-page.bx-theme-neogen .nav-account:hover { background: #0A36D6; border-color: #0A36D6; }
.bx-page.bx-theme-neogen .nav-toggle,
.bx-page.bx-theme-neogen .nav-tool { color: var(--ng-navy); }

/* -------------------------------------------------------------- buttons --
   Navy on the light sections; on navy the filled button turns cyan, as
   "Get Started" does in the frame's How it Works block. */
.bx-page.bx-theme-neogen .bx-btn { font-weight: 600; }
.bx-page.bx-theme-neogen .hero .bx-btn-primary,
.bx-page.bx-theme-neogen .band-blue .bx-btn-primary,
.bx-page.bx-theme-neogen .band-dark .bx-btn-primary,
.bx-page.bx-theme-neogen .contact-band .bx-btn-primary,
.bx-page.bx-theme-neogen .cta-band .bx-btn-primary {
  background: var(--ng-cyan);
  color: var(--ng-navy);
}
.bx-page.bx-theme-neogen .hero .bx-btn-primary:hover,
.bx-page.bx-theme-neogen .band-blue .bx-btn-primary:hover,
.bx-page.bx-theme-neogen .band-dark .bx-btn-primary:hover,
.bx-page.bx-theme-neogen .contact-band .bx-btn-primary:hover,
.bx-page.bx-theme-neogen .cta-band .bx-btn-primary:hover {
  background: #7CF6FF;
  color: var(--ng-navy);
}
.bx-page.bx-theme-neogen .bx-btn-outline { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.bx-page.bx-theme-neogen .bx-btn-outline-dark { border-color: var(--ng-navy); color: var(--ng-navy); }

/* ----------------------------------------------------------------- hero --
   The photograph stays; it is washed navy instead of black. */
.bx-page.bx-theme-neogen .hero .bg { filter: grayscale(1); }
/* bx-shared.css only draws this overlay below the mobile breakpoint
   (content: none above it), so it is declared in full here. .hero-content is
   already z-index 1 and the nav is fixed above both. */
.bx-page.bx-theme-neogen .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 35, 165, 0.82) 0%, rgba(1, 23, 113, 0.94) 100%);
}
.bx-page.bx-theme-neogen .eyebrow { font-weight: 600; }

/* ------------------------------------------------------- light sections */
.bx-page.bx-theme-neogen .band-light .eyebrow,
.bx-page.bx-theme-neogen .standards-copy .eyebrow { color: var(--ng-navy); }
.bx-page.bx-theme-neogen .gov-card {
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(3, 30, 142, 0.07);
}

/* --------------------------------------------------------- navy sections */
.bx-page.bx-theme-neogen .band-blue {
  background: linear-gradient(to bottom, #0423A5, #011B85);
}
.bx-page.bx-theme-neogen .hero + .band-blue { border-color: rgba(255, 255, 255, 0.10); }
.bx-page.bx-theme-neogen .contact-band {
  background: linear-gradient(to bottom, var(--ng-navy), var(--ng-navy-deep));
}
.bx-page.bx-theme-neogen .contact-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 24px;
}
.bx-page.bx-theme-neogen .contact-card input,
.bx-page.bx-theme-neogen .contact-card textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
}
.bx-page.bx-theme-neogen .contact-card input::placeholder,
.bx-page.bx-theme-neogen .contact-card textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.bx-page.bx-theme-neogen .contact-list__icon { background: rgba(255, 255, 255, 0.12); }

.bx-page.bx-theme-neogen .cta-band .bg { filter: grayscale(1); opacity: 0.45; }
.bx-page.bx-theme-neogen .cta-band::after { background: rgba(3, 30, 142, 0.72); }

/* --------------------------------------------------------------- footer --
   Paper with navy type, as the frame's footer is; the photograph goes. */
.bx-page.bx-theme-neogen .site-footer {
  background: var(--ng-paper);
  color: var(--ng-navy);
  border-top: 1px solid var(--ng-line);
}
.bx-page.bx-theme-neogen .site-footer .bg { display: none; }
.bx-page.bx-theme-neogen .footer-mark img { width: 150px; height: auto; }
.bx-page.bx-theme-neogen .site-footer h4,
.bx-page.bx-theme-neogen .footer-col h4 { color: var(--ng-navy); font-weight: 600; }
.bx-page.bx-theme-neogen .footer-tagline,
.bx-page.bx-theme-neogen .footer-col a,
.bx-page.bx-theme-neogen .footer-col p { color: var(--ng-navy); }
.bx-page.bx-theme-neogen .footer-col a:hover { color: #0A36D6; }
.bx-page.bx-theme-neogen .footer-bottom { border-top-color: var(--ng-line); color: var(--ng-navy); }
.bx-page.bx-theme-neogen .footer-bottom p { color: rgba(3, 30, 142, 0.78); }
.bx-page.bx-theme-neogen .footer-legal { font-family: var(--bx-font-sans); }

/* The folded menu below the mobile breakpoint sits on the same paper bar. */
.bx-page.bx-theme-neogen .mobile-menu,
.bx-page.bx-theme-neogen .mobile-menu a { color: var(--ng-navy); }

/* ------------------------------------------------------ programmes rail --
   The tiles carry the Neogen artwork, which is light and in colour, so the
   rest-state desaturation goes: it turned a pale image into a grey one. */
/* The "Our Programs 07/09" counter is plain text, not a pill (requested). */
.bx-page.bx-theme-neogen .programs-counter {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ng-navy);
  font-weight: 500;
}
.bx-page.bx-theme-neogen .programs-counter b { color: rgba(3, 30, 142, 0.66); }
.bx-page.bx-theme-neogen .program-tile { border-radius: 16px; }
.bx-page.bx-theme-neogen .program-tile:hover,
.bx-page.bx-theme-neogen .program-tile:focus-visible,
.bx-page.bx-theme-neogen .program-tile.is-current { box-shadow: 0 12px 30px rgba(3, 30, 142, 0.14); }
.bx-page.bx-theme-neogen .program-tile__media { border-radius: 12px; background: #fff; }
.bx-page.bx-theme-neogen .program-tile__media img { filter: none; opacity: 0.82; }
.bx-page.bx-theme-neogen .program-tile:hover .program-tile__media img,
.bx-page.bx-theme-neogen .program-tile:focus-visible .program-tile__media img,
.bx-page.bx-theme-neogen .program-tile.is-current .program-tile__media img { opacity: 1; }
.bx-page.bx-theme-neogen .program-tile__panel { border-radius: 16px; }
.bx-page.bx-theme-neogen .program-tile__label { font-weight: 600; }
.bx-page.bx-theme-neogen .program-tile__more { color: var(--ng-navy); font-weight: 600; }

/* The pair of buttons under the rail are drawn with literals in bx-shared. */
.bx-page.bx-theme-neogen .btn-row--programs .bx-btn-primary { background: var(--ng-navy); border-color: var(--ng-navy); color: #fff; }
.bx-page.bx-theme-neogen .btn-row--programs .bx-btn-primary:hover { background: #0A36D6; border-color: #0A36D6; }
.bx-page.bx-theme-neogen .btn-row--programs .bx-btn-outline-dark { background: transparent; border: 1px solid var(--ng-navy); color: var(--ng-navy); }
.bx-page.bx-theme-neogen .btn-row--programs .bx-btn-outline-dark:hover { background: rgba(3, 30, 142, 0.06); }

/* -------------------------------------------------------------- journey --
   The black band becomes the frame's navy block. */
.bx-page.bx-theme-neogen .band-dark { background: linear-gradient(to bottom, #0423A5, #011B85); }
.bx-page.bx-theme-neogen .step-num { font-weight: 700; }

/* ------------------------------------------------------------------ faq */
.bx-page.bx-theme-neogen .faq-q { font-weight: 500; }
.bx-page.bx-theme-neogen .faq-q .icon { color: var(--ng-navy); }

/* ------------------------------------------------------ programme detail --
   bx-shared draws the Outcomes block's second button as a near-black fill and
   the hero's "Designed around" markers in grey; both are literals there. */
.bx-page--program.bx-theme-neogen .standards .bx-btn-outline-dark {
  background: transparent;
  border-color: var(--ng-navy);
  color: var(--ng-navy);
}
.bx-page--program.bx-theme-neogen .standards .bx-btn-outline-dark:hover {
  background: rgba(3, 30, 142, 0.06);
  border-color: var(--ng-navy);
}
.bx-page--program.bx-theme-neogen .hero-aside__label,
.bx-page--program.bx-theme-neogen .hero-aside__list li::marker { color: var(--ng-cyan); }
.bx-page--program.bx-theme-neogen .journey-note { color: rgba(255, 255, 255, 0.78); }

/* ============================================================ remaining pages
   Store, product, science, assessment, calculator, account, cart and checkout.
   Everything below replaces a literal in bx-shared.css: its one brand blue
   (#074A77, hover #095C93), its grey field fill and its near-black cards. */

/* ---- filled buttons on light ground ---- */
.bx-page.bx-theme-neogen .cart-checkout,
.bx-page.bx-theme-neogen .dc-cta,
.bx-page--assessment.bx-theme-neogen .bxa-nav-next,
.bx-page--assessment.bx-theme-neogen .bxa-btn:not(.bxa-btn--outline):not(.bxa-btn--wa),
.bx-page--assessment.bx-theme-neogen .bxa-capture__btn,
.bx-page--assessment.bx-theme-neogen .bxa-gate__submit,
.bx-page--checkout.bx-theme-neogen .btn-primary,
.bx-page--checkout.bx-theme-neogen .bxt-confirm-btn {
  background: var(--ng-navy);
  border-color: var(--ng-navy);
  color: #fff;
}
.bx-page.bx-theme-neogen .cart-checkout:hover,
.bx-page.bx-theme-neogen .dc-cta:hover,
.bx-page--assessment.bx-theme-neogen .bxa-nav-next:hover,
.bx-page--assessment.bx-theme-neogen .bxa-btn:not(.bxa-btn--outline):not(.bxa-btn--wa):hover,
.bx-page--assessment.bx-theme-neogen .bxa-capture__btn:hover,
.bx-page--assessment.bx-theme-neogen .bxa-gate__submit:hover,
.bx-page--checkout.bx-theme-neogen .btn-primary:hover,
.bx-page--checkout.bx-theme-neogen .bxt-confirm-btn:hover {
  background: #0A36D6;
  border-color: #0A36D6;
}

/* ---- assessment: links, outlines and focus rings ---- */
.bx-page--assessment.bx-theme-neogen .bxa-capture__link,
.bx-page--assessment.bx-theme-neogen .bxa-picker__skip,
.bx-page--assessment.bx-theme-neogen .bxa-gate__signin-link { color: var(--ng-navy); }
.bx-page--assessment.bx-theme-neogen .bxa-skip { border-color: var(--ng-navy); color: var(--ng-navy); }
.bx-page--assessment.bx-theme-neogen .bxa-skip:hover { background: var(--ng-navy); color: #fff; }
.bx-page--assessment.bx-theme-neogen #bxa-capture-email:focus-visible,
.bx-page--assessment.bx-theme-neogen .bxa-picker__option:hover,
.bx-page--assessment.bx-theme-neogen .bxa-picker__option:focus-visible,
.bx-page--assessment.bx-theme-neogen .bxa-gate__form input:focus-visible,
.bx-page--assessment.bx-theme-neogen .bxa-gate__form select:focus-visible { border-color: var(--ng-navy); }

/* ---- fields: the grey fill becomes white with the frame's hairline ---- */
.bx-page.bx-theme-neogen .signin-form input,
.bx-page.bx-theme-neogen .dc-card input,
.bx-page.bx-theme-neogen .dc-card select,
.bx-page--checkout.bx-theme-neogen .form-control,
.bx-page--checkout.bx-theme-neogen .form-select {
  background-color: #fff;
  border: 1px solid var(--ng-line);
  color: var(--ng-navy);
}

/* ---- cards and asides ---- */
.bx-page.bx-theme-neogen .signin-aside { background: #fff; border: 1px solid var(--ng-line); }
.bx-page.bx-theme-neogen .contact-card { background: var(--ng-navy-deep); }
.bx-page.bx-theme-neogen .program { background: var(--ng-navy-deep); }
.bx-page.bx-theme-neogen .bx-prod__desc { color: rgba(3, 30, 142, 0.66); }
.bx-page.bx-theme-neogen .footer-bottom p { color: var(--bx-on-light-muted); }

/* ---- phone width ----
   Poppins sets wider than Geist, which pushed two blocks past a 375px
   screen: the four sign-in tabs, and the calculator card (a grid child that
   could not shrink below its content). */
.bx-page.bx-theme-neogen .signin-seg { max-width: 100%; }
.bx-page.bx-theme-neogen .dc-grid > * { min-width: 0; }
.bx-page.bx-theme-neogen .dc-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bx-page.bx-theme-neogen .dc-card input,
.bx-page.bx-theme-neogen .dc-card select { max-width: 100%; box-sizing: border-box; }
@media (max-width: 480px) {
  .bx-page.bx-theme-neogen .signin-seg { display: flex; gap: 2px; }
  .bx-page.bx-theme-neogen .signin-seg__btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13px; }
}
@media (max-width: 480px) {
  /* The calculator's "Not sure about your dose?" button is one long line. */
  .bx-page.bx-theme-neogen .dc-cta {
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 47px;
    padding-block: 10px;
    white-space: normal;
    text-align: center;
    border-radius: 24px;
  }
}

/* ============================================================== about us --
   Figma NEOGEN, frames "ABOUT US-1" to "ABOUT US-4" (1440 wide). The pillars
   and the contact form are not in those frames and keep their current look. */

/* US-1 hero: 535 under the 77px nav, the cyan profile washed 75% navy. */
.bx-page--about.bx-theme-neogen .hero--about { min-height: calc(77px + clamp(420px, 37.15vw, 535px)); align-items: stretch; }
.bx-page--about.bx-theme-neogen .hero--about .bg { filter: none; object-position: center; }
.bx-page--about.bx-theme-neogen .hero--about::after { background: rgba(3, 30, 142, 0.75); }
.bx-page--about.bx-theme-neogen .hero--about .hero-content {
  padding-top: calc(77px + clamp(48px, 8.9vw, 128px));
  padding-bottom: var(--bx-space-7);
  padding-inline-start: clamp(20px, 9.1vw, 131px);
}
.bx-page--about.bx-theme-neogen .hero--about .hero-content > * { max-width: 420px; }
.bx-page--about.bx-theme-neogen .hero--about .eyebrow {
  font-family: 'DM Sans', 'Poppins', sans-serif;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 700;
  color: var(--ng-cyan);
}
.bx-page--about.bx-theme-neogen .hero--about .eyebrow::before { width: 22px; height: 1.5px; background: var(--ng-cyan); }
.bx-page--about.bx-theme-neogen .hero--about h1 {
  margin: 12px 0 10px;
  font-size: clamp(34px, 3.125vw, 45px);
  line-height: 1.29;
  font-weight: 400;
}
.bx-page--about.bx-theme-neogen .hero--about .lede {
  margin-bottom: 0;
  font-size: 13.2px;
  line-height: 20px;
  color: #D5DDF2;
}
.bx-page--about.bx-theme-neogen .hero--about .btn-row { margin-top: 44px; gap: 17px; max-width: none; }
.bx-page--about.bx-theme-neogen .hero--about .bx-btn {
  height: 41px;
  min-width: 187px;
  padding: 0 24px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}
.bx-page--about.bx-theme-neogen .hero--about .btn-row .bx-btn { width: 187px; }
.bx-page--about.bx-theme-neogen .hero--about .btn-row .bx-btn-primary { width: 190px; }
.bx-page--about.bx-theme-neogen .hero--about .bx-btn-primary { min-width: 190px; background: var(--ng-cyan); border: 1px solid #00D4EE; color: #082578; }
.bx-page--about.bx-theme-neogen .hero--about .bx-btn-outline { border-color: #92A6D1; color: #fff; }

/* US-2: the left panel is navy, with the orb picture (1043x823 at -311,-42 in
   a 733x739 panel) cropped the way the frame crops it. */
.bx-page--about.bx-theme-neogen .standards--flip { grid-template-columns: 733fr 707fr; }
.bx-page--about.bx-theme-neogen .standards-visual--orb { min-height: clamp(360px, 51.3vw, 739px); overflow: hidden; background: var(--ng-navy); }
.bx-page--about.bx-theme-neogen .standards-visual--orb img {
  inset: auto;
  left: -42.43%;
  top: -5.68%;
  width: 142.29%;
  height: 111.37%;
  max-width: none;
  object-fit: cover;
  opacity: 0.94;
}

/* US-4: governance cards. */
.bx-page--about.bx-theme-neogen .about-gov .section-head .eyebrow { font-size: 9px; line-height: 13px; font-weight: 600; letter-spacing: 0.16em; color: var(--ng-navy); }
.bx-page--about.bx-theme-neogen .about-gov .section-head .eyebrow::before { width: 22px; height: 1px; background: #8299E1; }
.bx-page--about.bx-theme-neogen .about-gov .section-head h2 { font-size: clamp(28px, 2.38vw, 34.3px); line-height: 1.37; font-weight: 400; color: var(--ng-navy); }
.bx-page--about.bx-theme-neogen .about-gov .section-head p { max-width: 515px; font-size: 12px; line-height: 19px; color: #4056BC; }
.bx-page--about.bx-theme-neogen .about-gov .gov-grid { gap: 20px; margin-top: 40px; }
.bx-page--about.bx-theme-neogen .about-gov .gov-card {
  gap: 12px;
  padding: 19px 20px 18px;
  border-radius: 21px;
  box-shadow: 0 10px 26px rgba(21, 42, 102, 0.063);
}
.bx-page--about.bx-theme-neogen .about-gov .gov-card h3 { margin-bottom: 3px; font-size: 12.5px; line-height: 19px; font-weight: 600; color: var(--ng-navy); }
.bx-page--about.bx-theme-neogen .about-gov .gov-card p { font-size: 11px; line-height: 18px; color: #4056BC; }
.bx-page--about.bx-theme-neogen .about-gov .gov-card__img--logo { width: 47px; height: 35px; object-fit: contain; }
.bx-page--about.bx-theme-neogen .about-gov .gov-card__icon { width: 47px; display: flex; justify-content: center; }
.bx-page--about.bx-theme-neogen .about-gov .gov-card__img--pin { width: 24px; height: 27px; object-fit: contain; }
.bx-page--about.bx-theme-neogen .about-gov .gov-card__img--network { width: 32px; height: 31px; object-fit: contain; }

/* US-3: closing band — plain navy, the wireframe hands at 10%, no wash. */
.bx-page.bx-theme-neogen .cta-band--art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(380px, 37.15vw, 535px);
  padding-block: 64px;
  background: var(--ng-navy);
}
.bx-page.bx-theme-neogen .cta-band--art::after { content: none; }
.bx-page.bx-theme-neogen .cta-band--art .bg { filter: none; opacity: 0.1; object-fit: cover; object-position: center 52%; }
.bx-page.bx-theme-neogen .cta-band--art h2 { margin-bottom: 24px; font-size: clamp(32px, 3.33vw, 48px); line-height: 1.9; font-weight: 600; color: #fff; }
.bx-page.bx-theme-neogen .cta-band--art .btn-row { gap: 18px; }
.bx-page.bx-theme-neogen .cta-band--art .bx-btn { width: 230px; height: 47px; padding: 0 20px; font-size: 14px; line-height: 21px; font-weight: 600; }
.bx-page.bx-theme-neogen .cta-band--art .bx-btn-primary { background: #6AE8FA; border-color: #6AE8FA; color: #041E78; }
.bx-page.bx-theme-neogen .cta-band--art .bx-btn-primary:hover { background: #9BF1FC; border-color: #9BF1FC; color: #041E78; }
.bx-page.bx-theme-neogen .cta-band--art .bx-btn-outline { border-color: #BAC5EF; color: #fff; }

@media (max-width: 1000px) {
  .bx-page--about.bx-theme-neogen .standards--flip { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .bx-page--about.bx-theme-neogen .hero--about .btn-row .bx-btn,
  .bx-page.bx-theme-neogen .cta-band--art .bx-btn { width: 100%; min-width: 0; }
}

/* ------------------------------------------- programmes landing: alignment --
   The FAQ was held to an 872px column starting at x=316 (bx-shared), while the
   Journey above it runs the full content width. Both now share the page's
   content edges, so their headings, rules and paragraphs start and end on the
   same lines. */
.bx-page--programs.bx-theme-neogen .band-light.section:not(.programs-band) > .wrap {
  width: 100%;
  max-width: var(--bx-max);
  margin-inline: auto;
  padding-inline: var(--bx-gutter);
}
.bx-page--programs.bx-theme-neogen #faq .faq-a p { max-width: 76ch; }

/* ============================================================ science ==== */

/* Article hero — Figma 4309-55 (1440 x 723; the solid nav sits in flow above it): the cover on the
   left 806, the copy on the light ground beside it. */
.bx-page--article.bx-theme-neogen .sa-hero {
  display: grid;
  grid-template-columns: 806fr 634fr;
  min-height: clamp(420px, 50.2vw, 723px);
  background: var(--ng-mist);
}
.bx-page--article.bx-theme-neogen .sa-hero__visual { position: relative; overflow: hidden; background: #fff; }
.bx-page--article.bx-theme-neogen .sa-hero__visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
}
.bx-page--article.bx-theme-neogen .sa-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(20px, 3.3vw, 48px) 48px clamp(20px, 2.7vw, 39px);
  color: var(--ng-navy);
}
.bx-page--article.bx-theme-neogen .sa-hero__copy .eyebrow { color: var(--ng-cyan); font-size: 10.5px; letter-spacing: 0.16em; }
.bx-page--article.bx-theme-neogen .sa-hero__copy .eyebrow::before { background: var(--ng-cyan); }
.bx-page--article.bx-theme-neogen .sa-hero__copy h1 {
  margin: 14px 0 12px;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.25;
  font-weight: 400;
  color: var(--ng-navy);
}
.bx-page--article.bx-theme-neogen .sa-hero__copy > p { max-width: 46ch; margin-bottom: 40px; font-size: 13px; line-height: 20px; color: #4056BC; }
.bx-page--article.bx-theme-neogen .sa-hero .sci-pill { min-width: 86px; height: 42px; border-color: var(--ng-line); background: rgba(255, 255, 255, 0.6); color: var(--ng-navy); font-size: 12px; }
.bx-page--article.bx-theme-neogen .sa-hero .sci-read { width: 210px; height: 43px; font-size: 13px; box-shadow: 0 12px 26px rgba(3, 30, 142, 0.18); }
@media (max-width: 900px) {
  .bx-page--article.bx-theme-neogen .sa-hero { grid-template-columns: 1fr; min-height: 0; }
  .bx-page--article.bx-theme-neogen .sa-hero__visual { min-height: 300px; }
}

/* Index filter bar — Figma 4305-2: on the light ground, two dropdowns of
   checkboxes on the left and a search box on the right. */
.bx-page--science.bx-theme-neogen .sci-bar { background: var(--ng-mist); color: var(--ng-navy); }
.bx-page--science.bx-theme-neogen .sci-bar__inner { padding-block: 40px 8px; align-items: flex-start; }
.bx-page--science.bx-theme-neogen .sci-dds { display: flex; gap: 16px; flex-wrap: wrap; }
.bx-page--science.bx-theme-neogen .sci-dd { position: relative; }
.bx-page--science.bx-theme-neogen .sci-dd summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 140px;
  height: 34px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--ng-line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--ng-navy);
  list-style: none;
  cursor: pointer;
  transition: border-color .2s ease;
}
.bx-page--science.bx-theme-neogen .sci-dd summary::-webkit-details-marker { display: none; }
.bx-page--science.bx-theme-neogen .sci-dd summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.bx-page--science.bx-theme-neogen .sci-dd[open] summary,
.bx-page--science.bx-theme-neogen .sci-dd summary:hover { border-color: var(--ng-navy); }
.bx-page--science.bx-theme-neogen .sci-dd[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.bx-page--science.bx-theme-neogen .sci-dd__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  padding: 12px 16px 14px 14px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(3, 30, 142, 0.12);
  white-space: nowrap;
}
.bx-page--science.bx-theme-neogen .sci-dd__label { margin-bottom: 8px; font-size: 10.5px; color: rgba(3, 30, 142, 0.55); }
.bx-page--science.bx-theme-neogen .sci-dd__panel label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--ng-navy);
  cursor: pointer;
}
.bx-page--science.bx-theme-neogen .sci-dd__panel input { width: 16px; height: 16px; margin: 0; accent-color: var(--ng-navy); border-radius: 4px; }
.bx-page--science.bx-theme-neogen .sci-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  max-width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ng-line);
  border-radius: 6px;
  background: #fff;
  color: rgba(3, 30, 142, 0.5);
}
.bx-page--science.bx-theme-neogen .sci-search svg { flex: none; width: 15px; height: 15px; }
.bx-page--science.bx-theme-neogen .sci-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ng-navy);
  outline: none;
}
.bx-page--science.bx-theme-neogen .sci-search:focus-within { border-color: var(--ng-navy); }
@media (max-width: 640px) {
  .bx-page--science.bx-theme-neogen .sci-search { width: 100%; }
}
/* The light filter bar sits on the same ground as the grid, so the grid's own
   top padding (sized for the old navy bar) would leave a hole. */
.bx-page--science.bx-theme-neogen .sci-grid-band { padding-top: 40px; }
/* Programme pages: same alignment as the Programs landing — the FAQ (872px
   from x=324 in bx-shared) takes the page content width like the Journey. */
.bx-page--program.bx-theme-neogen .band-light.section:not(.programs-band) > .wrap {
  width: 100%;
  max-width: var(--bx-max);
  margin-inline: auto;
  padding-inline: var(--bx-gutter);
}
.bx-page--program.bx-theme-neogen #faq .faq-a p { max-width: 76ch; }

/* Programme pages: the stats strip under the hero splits the FULL band width
   into three equal cells, each figure centred in its own third (it was a
   centred 1560px column, so on wide screens the cells sat off the thirds). */
.bx-page--program.bx-theme-neogen .hero + .band-blue > .wrap { max-width: none; padding-inline: 0; }

/* "Designed around" in the hero: 4px larger throughout, by request. */
.bx-page--program.bx-theme-neogen .hero-aside { left: auto; right: clamp(20px, 2.15vw, 31px); width: auto; min-width: 211px; }
.bx-page--program.bx-theme-neogen .hero-aside__label { font-size: calc(var(--bx-text-eyebrow) + 4px); }
.bx-page--program.bx-theme-neogen .hero-aside__list li { font-size: calc(var(--bx-text-sm) + 4px); line-height: 35px; }

/* The Insight Score footnote under the journey starts at the left edge, with
   the steps above it, rather than ranged right. */
.bx-page--program.bx-theme-neogen .journey-note { text-align: left; }

/* ============================================================ phone fixes ==
   From a page-by-page audit at 360, 390 and 768px (2026-10-27). */

/* Programme pages: "Designed around" is pinned to the hero's right edge at a
   desktop y position, so on narrow screens it slid under the stats strip and
   was hidden. Below 900px it follows the hero copy instead. */
@media (max-width: 900px) {
  .bx-page--program.bx-theme-neogen .hero { flex-direction: column; align-items: stretch; justify-content: center; }
  .bx-page--program.bx-theme-neogen .hero-aside {
    position: relative; left: auto; right: auto; top: auto;
    width: auto; min-width: 0;
    padding: 0 var(--bx-gutter) 48px;
    margin: -16px 0 0;
    transform: none;
  }
  .bx-page--program.bx-theme-neogen .hero-aside__list { columns: 2; column-gap: 24px; }
  .bx-page--program.bx-theme-neogen .hero-aside__list li { line-height: 30px; font-size: calc(var(--bx-text-sm) + 2px); }
}

/* "Built around your goals" shared its row with the counter and was squeezed
   to a three-word column. Stack them on small screens. */
@media (max-width: 700px) {
  .bx-page .section-head.programs-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bx-page .section-head.programs-head > div:first-child { max-width: none; }
}

/* Footer: the stacked groups ran into each other with no space between. */
@media (max-width: 760px) {
  .bx-page.bx-theme-neogen .footer-grid { gap: 32px 24px; }
  .bx-page.bx-theme-neogen .footer-mark { grid-column: 1 / -1; }
  .bx-page.bx-theme-neogen .footer-tagline { margin-top: 4px; }
}
@media (max-width: 460px) {
  .bx-page.bx-theme-neogen .footer-grid { grid-template-columns: 1fr 1fr; }
  .bx-page.bx-theme-neogen .footer-grid > :last-child { grid-column: 1 / -1; }
}

/* About's closing band: the 1.9 line height is the Figma's single desktop
   line; wrapped onto two lines on a phone it left a large gap between them. */
@media (max-width: 700px) {
  .bx-page.bx-theme-neogen .cta-band--art h2 { line-height: 1.2; margin-bottom: 28px; }
}

/* Product page: full-width buttons on phones, and a readable breadcrumb. */
.bx-page--product.bx-theme-neogen .pdp-crumbs,
.bx-page--product.bx-theme-neogen .pdp-crumbs a { color: rgba(3, 30, 142, 0.62); }
.bx-page--product.bx-theme-neogen .pdp-crumbs a:hover { color: var(--ng-navy); }
@media (max-width: 600px) {
  .bx-page--product.bx-theme-neogen .pdp-buy { flex-direction: column; align-items: stretch; gap: 10px; }
  .bx-page--product.bx-theme-neogen .pdp-buy #product,
  .bx-page--product.bx-theme-neogen .pdp-buy #product #button-cart,
  .bx-page--product.bx-theme-neogen .pdp-buy .bx-btn-checkout { width: 100%; flex: 1 1 auto; }
}

/* ---------------------------------------- information pages and site map --
   Admin-written HTML (delivery, terms, privacy) and the site map, moved off
   the old store layout. */
.bx-page.bx-theme-neogen .bx-prose { color: var(--ng-navy); font-size: 15px; line-height: 1.7; }
.bx-page.bx-theme-neogen .bx-prose h2,
.bx-page.bx-theme-neogen .bx-prose h3 { margin: 32px 0 12px; color: var(--ng-navy); font-weight: 500; }
.bx-page.bx-theme-neogen .bx-prose p,
.bx-page.bx-theme-neogen .bx-prose ul,
.bx-page.bx-theme-neogen .bx-prose ol { margin: 0 0 16px; color: rgba(3, 30, 142, 0.82); }
.bx-page.bx-theme-neogen .bx-prose a { color: #0A36D6; text-decoration: underline; }
.bx-page.bx-theme-neogen .bx-sitemap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.bx-page.bx-theme-neogen .bx-sitemap h2 { margin: 0 0 12px; font-size: 20px; font-weight: 500; color: var(--ng-navy); }
.bx-page.bx-theme-neogen .bx-sitemap h2 + ul { margin-bottom: 28px; }
.bx-page.bx-theme-neogen .bx-sitemap ul { margin: 0; padding-left: 18px; line-height: 2; }
.bx-page.bx-theme-neogen .bx-sitemap ul ul { padding-left: 18px; line-height: 1.9; }
.bx-page.bx-theme-neogen .bx-sitemap a { color: var(--ng-navy); }
.bx-page.bx-theme-neogen .bx-sitemap a:hover { color: #0A36D6; }
@media (max-width: 640px) {
  .bx-page.bx-theme-neogen .bx-sitemap { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ phone menu groups --
   Conditional Programs and Login fold into tap-to-open groups (<details>),
   so the drawer is short. The arrow turns when a group is open. */
.bx-page .mobile-menu__group { display: flex; flex-direction: column; }
.bx-page .mobile-menu__group > summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none; cursor: pointer;
}
.bx-page .mobile-menu__group > summary::-webkit-details-marker { display: none; }
.bx-page .mobile-menu__group > summary::after {
  content: ''; width: 8px; height: 8px; margin-right: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.bx-page .mobile-menu__group[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.bx-page .mobile-menu__group[open] > summary { margin-bottom: 4px; }
.bx-page .mobile-menu__group { width: 100%; }
.bx-page .mobile-menu__group > summary { width: 100%; }
/* <details> lays its contents out inline, so each entry needs its own line. */
.bx-page .mobile-menu__group > .mobile-menu__sub { display: block; padding-block: 8px; }
.bx-page.bx-theme-neogen .mobile-menu summary { color: var(--ng-navy); }

/* --------------------------------------------------- connect wearables --
   Placeholder page: benefit cards, metric chips and "Coming soon" devices. */
.bx-page--wearables .wear-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px;
}
.bx-page--wearables .wear-card {
  background: #fff; border: 1px solid var(--ng-line); border-radius: 20px; padding: 32px;
}
.bx-page--wearables .wear-card__num { display: block; color: #0A36D6; font-weight: 600; font-size: 14px; letter-spacing: .08em; }
.bx-page--wearables .wear-card h3 { margin: 12px 0 10px; color: var(--ng-navy); font-size: 22px; font-weight: 500; }
.bx-page--wearables .wear-card p { color: rgba(3, 30, 142, .78); }
.bx-page--wearables .wear-metrics { margin-top: 48px; text-align: center; }
.bx-page--wearables .wear-metrics ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  list-style: none; margin: 16px 0 0; padding: 0;
}
.bx-page--wearables .wear-metrics li {
  padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--ng-line);
  color: var(--ng-navy); font-size: 15px;
}
.bx-page--wearables .wear-devices { background: #fff; }
.bx-page--wearables .wear-devices__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px;
}
.bx-page--wearables .wear-device {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 28px; border-radius: 20px; background: var(--ng-mist); border: 1px solid var(--ng-line);
}
.bx-page--wearables .wear-device__name { color: var(--ng-navy); font-size: 20px; font-weight: 500; }
.bx-page--wearables .wear-device__tag {
  padding: 4px 12px; border-radius: 999px; background: var(--ng-cyan); color: var(--ng-deep);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.bx-page--wearables .wear-device .bx-btn { margin-top: 8px; opacity: .45; cursor: not-allowed; }
.bx-page--wearables .wear-privacy { margin-top: 32px; text-align: center; color: rgba(3, 30, 142, .7); font-size: 14px; }
@media (max-width: 900px) {
  .bx-page--wearables .wear-devices__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bx-page--wearables .wear-grid, .bx-page--wearables .wear-devices__grid { grid-template-columns: 1fr; }
  .bx-page--wearables .wear-card, .bx-page--wearables .wear-device { padding: 24px; }
}

/* Desktop menu: six links plus Login. Labels never wrap; between the phone
   menu (860px) and a wide screen the gaps and the Login button shrink so the
   row still fits. */
.bx-page .nav-links a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1400px) {
  .bx-page .nav-links { gap: 22px; }
  .bx-page .nav-account { width: auto; padding-inline: 28px; }
}
@media (min-width: 861px) and (max-width: 1150px) {
  .bx-page .nav-bar { gap: 18px; }
  .bx-page .nav-links { gap: 14px; font-size: 13px; }
  .bx-page .brand img { width: 108px; }
  .bx-page .nav-account { padding-inline: 18px; }
}
/* Below 1000px the six links no longer fit, so the phone menu takes over
   from here rather than at 860px (same rules as bx-shared.css at 860px). */
@media (min-width: 861px) and (max-width: 1000px) {
  .bx-page .nav-links, .bx-page .nav-account { display: none; }
  .bx-page .nav-toggle { display: block; margin-left: auto; }
  .bx-page .mobile-menu {
    flex-direction: column; gap: var(--bx-space-4);
    padding-bottom: var(--bx-space-5); font-size: var(--bx-text-sm);
  }
  .bx-page .mobile-menu.open { display: flex; }
}