/* ANANFX Academy — Home mobile reference rebuild — Scene 1 / shared shell */
@media (max-width: 767px) {
  body[data-page-key="home"] {
    --home-shell: calc(100% - 36px);
    --home-radius: 18px;
    --home-shadow: 0 14px 38px var(--ananfx-page-shadow);
  }

  * { box-sizing: border-box; }
  html { min-width: 320px; background: #0B0B0C; color-scheme: dark; -webkit-text-size-adjust: 100%; }
  body[data-page-key="home"] { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ananfx-page-bg-primary); color: var(--ananfx-page-text-primary); }
  img { display: block; max-width: 100%; }
  button, input { font: inherit; }
  a { color: inherit; }
  body[data-page-key="home"] .mobile-only { min-height: 100svh; background: var(--ananfx-page-bg-primary); }
  .home-shell { width: var(--home-shell); max-width: 700px; margin-inline: auto; }
  body[data-page-key="home"] .home-story-flow { overflow: clip; background: var(--ananfx-page-bg-primary); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  .site-header {
    position: sticky; top: 0; z-index: 30; display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center;
    min-height: calc(62px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
    border-bottom: 1px solid var(--ananfx-page-divider); background: rgba(11,11,12,.94);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .site-header .brand { position: static; display: flex; min-height: 44px; align-items: center; width: 146px; max-width: 46vw; justify-self: center; transform: none; line-height: 0; }
  .site-header .brand img { width: 100%; height: auto; }
  .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
  .icon-button {
    position: relative; display: grid; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    padding: 8px; place-items: center; border: 0; border-radius: 12px; background: transparent;
    color: var(--ananfx-page-text-primary); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body[data-page-key="home"] .site-header .icon-button img { width: 28px; height: 28px; object-fit: contain; }
  .notification-dot { position: absolute; top: 8px; right: 7px; width: 8px; height: 8px; border: 2px solid var(--ananfx-page-bg-primary); border-radius: 50%; background: var(--ananfx-page-gold-bright); }
  .icon-button:active { background: var(--ananfx-page-surface-hover); transform: scale(.98); }

  .home-hero { position: relative; padding: 34px 0 38px; background: var(--ananfx-page-bg-primary); }
  .home-hero::after {
    content: ""; position: absolute; right: -20%; bottom: 3%; width: 78%; aspect-ratio: 1;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,208,0,.08), rgba(255,208,0,0) 68%); pointer-events: none;
  }
  .home-hero__inner { position: relative; z-index: 1; display: grid; gap: 20px; }
  .home-hero__copy { min-width: 0; }
  .home-eyebrow { margin: 0 0 10px; color: var(--ananfx-page-gold-primary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .home-hero h1 { margin: 0; max-width: 13em; color: var(--ananfx-page-text-primary); }
  .home-hero__description { margin: 16px 0 0; max-width: 34em; color: var(--ananfx-page-text-secondary); }
  .home-hero__actions { display: grid; gap: 11px; margin-top: 22px; }
  .home-button {
    display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px;
    padding: 12px 20px; border: 1px solid transparent; border-radius: 10px; text-decoration: none;
    font-weight: 700; text-align: center; transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  }
  .home-button span { font-size: 24px; line-height: 1; }
  .home-button:active { transform: translateY(1px); }
  .home-button--primary { background: var(--ananfx-page-gold-primary); color: var(--ananfx-page-bg-primary); box-shadow: 0 12px 24px rgba(255, 208, 0, .16); }
  .home-button--secondary { border-color: var(--ananfx-page-gold-primary); background: var(--ananfx-page-surface-primary); color: var(--ananfx-page-text-primary); }
  .home-button--dark { border-color: var(--ananfx-page-gold-primary); background: transparent; color: var(--ananfx-page-text-primary); }
  .home-hero__visual { position: relative; width: 100%; max-width: 500px; margin: -6px auto -10px; }
  .home-hero__visual img { width: 100%; height: auto; object-fit: contain; filter: saturate(.96) contrast(1.02); }

  .home-button:focus-visible, .icon-button:focus-visible, .home-feature-card:focus-visible,
  .home-quick-entry__grid a:focus-visible, .home-resource-card:focus-visible,
  .home-highlight-card a:focus-visible, .home-text-link:focus-visible,
  .site-footer-scene a:focus-visible, .site-footer-scene button:focus-visible,
  .text-close:focus-visible, .search-suggestions button:focus-visible, .notification-card:focus-visible {
    outline: 3px solid var(--ananfx-page-focus-ring); outline-offset: 3px;
  }

  .panel-backdrop { position: fixed; inset: 0; z-index: 70; background: var(--ananfx-page-overlay); opacity: 0; transition: opacity .2s ease; }
  .panel-backdrop.is-visible { opacity: 1; }
  .bottom-panel {
    position: fixed; inset: auto 0 0; z-index: 71; max-height: min(76svh, 640px); padding: 22px 18px calc(24px + env(safe-area-inset-bottom));
    overflow: auto; border-radius: 24px 24px 0 0; background: var(--ananfx-page-surface-elevated); box-shadow: 0 -20px 60px var(--ananfx-page-shadow);
    transform: translateY(105%); transition: transform .22s ease;
  }
  .bottom-panel.is-open { transform: translateY(0); }
  .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .panel-header h2 { margin: 2px 0 0; }
  .panel-kicker { margin: 0; color: var(--ananfx-page-gold-primary); font-weight: 700; }
  .text-close { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ananfx-page-border-primary); border-radius: 10px; background: var(--ananfx-page-surface-primary); color: var(--ananfx-page-text-primary); }
  .search-field { display: flex; min-height: 50px; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--ananfx-page-border-primary); border-radius: 12px; background: var(--ananfx-page-surface-primary); }
  body[data-page-key="home"] .search-field img { width: 24px; height: 24px; }
  .search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ananfx-page-text-primary); caret-color: var(--ananfx-page-gold-primary); }
  .search-field input::placeholder { color: var(--ananfx-page-text-muted); }
  .search-field:focus-within { border-color: var(--ananfx-page-gold-primary); box-shadow: 0 0 0 3px var(--ananfx-page-focus-ring); }
  .search-suggestions { display: grid; gap: 8px; margin-top: 14px; }
  .search-suggestions button { min-height: 46px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--ananfx-page-surface-secondary); color: var(--ananfx-page-text-primary); text-align: left; }
  .notification-card { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 16px; border: 1px solid var(--home-card-border-primary); border-radius: 14px; background-color: var(--home-card-bg-primary); color: var(--ananfx-page-text-primary); }
  body[data-page-key="home"] .notification-card:hover { background-color: var(--home-card-bg-hover); border-color: var(--home-card-border-hover); }
  .notification-card-dot { width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--ananfx-page-gold-primary); }
  .notification-card p { margin: 4px 0 0; color: var(--ananfx-page-text-muted); }
  .route-toast { position: fixed; left: 18px; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90; padding: 13px 16px; border-radius: 12px; background: var(--ananfx-page-surface-elevated); color: var(--ananfx-page-text-primary); text-align: center; box-shadow: var(--home-shadow); }

  @media (hover: hover) {
    body[data-page-key="home"] .home-button--primary:hover { background: var(--ananfx-page-gold-bright); }
    body[data-page-key="home"] .home-button--secondary:hover,
    body[data-page-key="home"] .home-button--dark:hover,
    body[data-page-key="home"] .icon-button:hover,
    body[data-page-key="home"] .search-suggestions button:hover,
    body[data-page-key="home"] .text-close:hover { background: var(--ananfx-page-surface-hover); }
  }

  @media (min-width: 540px) {
    .home-hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(240px, .98fr); align-items: center; column-gap: 24px; }
    .home-hero__visual { margin: 0; }
    .home-hero__actions { grid-template-columns: 1fr; max-width: 360px; }
  }
}
@media (min-width: 768px) { .mobile-only { display: none !important; } }

/* V141 — HOME LATEST YELLOW COLOR CLEANUP (page scoped) */
body[data-page-key="home"] {
  --page-bg-primary:#0B0B0C;
  --page-bg-secondary:#101011;
  --page-bg-tertiary:#141415;
  --page-card-primary:#1C1C1E;
  --page-card-secondary:#222224;
  --page-card-elevated:#28282B;
  --page-card-hover:#2D2D30;
  --page-card-selected:#252527;
  --page-border-primary:#38383C;
  --page-border-secondary:#303034;
  --page-divider:#28282B;
  --page-border-hover:#4A4A4F;
  --page-yellow-primary:#FFD000;
  --page-yellow-bright:#FFE066;
  --page-yellow-hover:#FFE066;
  --page-yellow-dark:#D9A800;
  --page-text-primary:#F5F5F7;
  --page-text-secondary:#B8B8BD;
  --page-text-muted:#8E8E93;
  --page-text-disabled:#636366;
  --page-success:#42D392;
  --page-danger:#EF5A4C;
  --page-warning:#FFD000;
  --page-info:#4EA1FF;
  --page-overlay:rgba(0,0,0,.74);
  --page-shadow-color:rgba(0,0,0,.34);
  --page-focus-ring:rgba(255,208,0,.32);
  --ananfx-page-bg-primary:var(--page-bg-primary);
  --ananfx-page-bg-secondary:var(--page-bg-secondary);
  --ananfx-page-bg-tertiary:var(--page-bg-tertiary);
  --ananfx-page-surface-primary:var(--page-card-primary);
  --ananfx-page-surface-secondary:var(--page-card-secondary);
  --ananfx-page-surface-elevated:var(--page-card-elevated);
  --ananfx-page-surface-hover:var(--page-card-hover);
  --ananfx-page-border-primary:var(--page-border-primary);
  --ananfx-page-border-secondary:var(--page-border-secondary);
  --ananfx-page-divider:var(--page-divider);
  --ananfx-page-gold-primary:var(--page-yellow-primary);
  --ananfx-page-gold-bright:var(--page-yellow-bright);
  --ananfx-page-text-primary:var(--page-text-primary);
  --ananfx-page-text-secondary:var(--page-text-secondary);
  --ananfx-page-text-muted:var(--page-text-muted);
  --ananfx-page-text-disabled:var(--page-text-disabled);
  --ananfx-page-success:var(--page-success);
  --ananfx-page-danger:var(--page-danger);
  --ananfx-page-warning:var(--page-warning);
  --ananfx-page-info:var(--page-info);
  --ananfx-page-overlay:var(--page-overlay);
  --ananfx-page-shadow:var(--page-shadow-color);
  --ananfx-page-focus-ring:var(--page-focus-ring);
  --home-card-bg-primary:var(--page-card-primary);
  --home-card-bg-secondary:var(--page-card-secondary);
  --home-card-bg-elevated:var(--page-card-elevated);
  --home-card-bg-hover:var(--page-card-hover);
  --home-card-bg-active:var(--page-card-selected);
  --home-card-border-primary:var(--page-border-primary);
  --home-card-border-secondary:var(--page-border-secondary);
  --home-card-border-hover:var(--page-border-hover);
  --home-card-shadow-color:var(--page-shadow-color);
  --ananfx-yellow:var(--page-yellow-primary);
  --ananfx-yellow-hover:var(--page-yellow-hover);
  --ananfx-yellow-pressed:var(--page-yellow-dark);
  --ananfx-yellow-soft:var(--page-card-selected);
  --ananfx-text-primary:var(--page-text-primary);
  --ananfx-text-black:var(--page-bg-primary);
  --ananfx-text-secondary:var(--page-text-secondary);
  --ananfx-background:var(--page-bg-primary);
  --ananfx-surface:var(--page-card-secondary);
  --ananfx-border:var(--page-border-secondary);
  --ananfx-overlay:var(--page-overlay);
  --ananfx-mobile-menu-icon:var(--page-text-primary);
  background-color:var(--page-bg-primary);
  color:var(--page-text-primary);
}
body[data-page-key="home"] :is(.mobile-only,.home-story-flow,.home-hero,.home-section,.home-highlights,.home-ecosystem,.home-benefits,.home-trust,.home-journey-preview,.home-resources,.home-final-cta,.site-header,.site-footer-scene){background-color:var(--page-bg-primary);}
body[data-page-key="home"] :is(.home-feature-card,.home-czs-card,.home-highlight-card,.home-benefit-item,.home-trust__grid > *, .home-quick-entry__grid > *, .home-resource-card,.home-final-cta__card,.notification-card,.search-field,.text-close){background-color:var(--page-card-primary);border-color:var(--page-border-primary);}
body[data-page-key="home"] :is(.bottom-panel,.route-toast,.search-panel,.notification-panel){background-color:var(--page-card-elevated);border-color:var(--page-border-primary);}
body[data-page-key="home"] :is(.search-suggestions button,.site-footer-accordion__panel,.site-footer-contact__icon,.site-footer-social){background-color:var(--page-card-secondary);border-color:var(--page-border-secondary);}
body[data-page-key="home"] :is(.home-feature-card,.home-czs-card,.home-highlight-card,.home-benefit-item,.home-trust__grid > *, .home-quick-entry__grid > *, .home-resource-card,.notification-card):hover{background-color:var(--page-card-hover);border-color:var(--page-border-hover);}
body[data-page-key="home"] :is(h1,h2,h3,h4,strong,.home-section__heading,.panel-header h2,.site-footer-scene__brand){color:var(--page-text-primary);}
body[data-page-key="home"] :is(p,.home-hero__description,.home-highlight-card__body,.home-feature-card p,.home-benefit-item p,.site-footer-scene__description,.site-footer-contact__copy){color:var(--page-text-secondary);}
body[data-page-key="home"] :is(.home-highlight-card__meta,.notification-card p,.site-footer-scene__copyright){color:var(--page-text-muted);}
body[data-page-key="home"] :is(.home-eyebrow,.home-text-link,.site-footer-link:hover,.panel-kicker){color:var(--page-yellow-primary);}
body[data-page-key="home"] .home-button--primary{background-color:var(--page-yellow-primary);border-color:var(--page-yellow-primary);color:var(--page-bg-primary);}
body[data-page-key="home"] .home-button--primary:hover{background-color:var(--page-yellow-bright);border-color:var(--page-yellow-bright);}
body[data-page-key="home"] :is(.home-button--secondary,.home-button--dark){background-color:var(--page-card-primary);border-color:var(--page-yellow-primary);color:var(--page-text-primary);}
body[data-page-key="home"] :is(.icon-button,.site-footer-link,.site-footer-accordion__toggle){color:var(--page-text-primary);}
body[data-page-key="home"] :is(button,a,input):focus-visible{outline-color:var(--page-yellow-primary);}
body[data-page-key="home"] :is(button,input):disabled{background-color:var(--page-card-secondary);border-color:var(--page-border-secondary);color:var(--page-text-disabled);}
body[data-page-key="home"] .panel-backdrop{background-color:var(--page-overlay);}



/* V160 — HOME LEARNING BENEFITS STRIP TYPOGRAPHY AND TOKEN REFINEMENT */
body[data-page-key="home"] .home-statistics-strip {
  background-color: var(--page-bg-primary);
  border-top: 1px solid var(--page-divider);
  border-bottom: 1px solid var(--page-divider);
}
body[data-page-key="home"] .home-statistics-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  padding-block: 18px;
}
body[data-page-key="home"] .home-statistics-strip__item {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 0 8px;
  text-align: center;
}
body[data-page-key="home"] .home-statistics-strip__item + .home-statistics-strip__item::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 0;
  width: 1px;
  background-color: var(--page-divider);
}
body[data-page-key="home"] .home-statistics-strip__item img {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  object-fit: contain;
}
body[data-page-key="home"] .home-statistics-strip__item strong {
  display: block;
  margin: 0;
  color: var(--page-text-primary);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}
body[data-page-key="home"] .home-statistics-strip__item span {
  display: block;
  margin-top: 6px;
  color: var(--page-text-secondary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: normal;
}
@media (max-width: 599px) {
  body[data-page-key="home"] .home-statistics-strip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 0;
  }
  body[data-page-key="home"] .home-statistics-strip__item {
    min-height: 150px;
    justify-content: center;
    padding: 18px 12px;
  }
  body[data-page-key="home"] .home-statistics-strip__item:nth-child(odd)::before {
    content: none;
  }
  body[data-page-key="home"] .home-statistics-strip__item:nth-child(even)::before {
    content: "";
    position: absolute;
    inset: 14px auto 14px 0;
    width: 1px;
    background-color: var(--page-divider);
  }
  body[data-page-key="home"] .home-statistics-strip__item:nth-child(n + 3)::after {
    content: "";
    position: absolute;
    inset: 0 12px auto 12px;
    height: 1px;
    background-color: var(--page-divider);
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  body[data-page-key="home"] .home-statistics-strip__item {
    padding-inline: 8px;
  }
}
@media (min-width: 768px) {
  body[data-page-key="home"] .home-statistics-strip__inner { max-width: 1120px; padding-block: 24px; }
  body[data-page-key="home"] .home-statistics-strip__item img { width: 34px; height: 34px; }
  body[data-page-key="home"] .home-statistics-strip__item strong { font-size: 22px; }
  body[data-page-key="home"] .home-statistics-strip__item span { font-size: 15px; }
}

body[data-page-key="home"] .notification-card small {
  color: var(--page-text-secondary);
  line-height: 1.45;
}

/* V172 — HOME COLOR SYSTEM FINAL AUDIT AND REPAIR */
body[data-page-key="home"] .auth-mobile-drawer-trigger:focus-visible,
body[data-page-key="home"] .ananfx-mobile-drawer :is(a, button):focus-visible {
  outline-color: var(--page-focus-ring);
}
body[data-page-key="home"] .ananfx-mobile-drawer {
  box-shadow: 22px 0 60px var(--page-shadow-color);
}
body[data-page-key="home"] .home-button--primary:active {
  background-color: var(--page-yellow-dark);
  border-color: var(--page-yellow-dark);
}
body[data-page-key="home"] :is(.home-button--secondary, .home-button--dark):active {
  background-color: var(--page-card-selected);
  border-color: var(--page-yellow-dark);
}
body[data-page-key="home"] #siteFooter button.site-footer-direct-action[data-footer-status-message] {
  background-color: var(--page-card-secondary);
  border-color: var(--page-border-secondary);
  color: var(--page-text-muted);
}
body[data-page-key="home"] #siteFooter button.site-footer-direct-action[data-footer-status-message]:hover {
  background-color: var(--page-card-hover);
  border-color: var(--page-border-hover);
  color: var(--page-text-secondary);
}
body[data-page-key="home"] #siteFooter button.site-footer-direct-action[data-footer-status-message]:active {
  background-color: var(--page-card-selected);
  border-color: var(--page-yellow-dark);
  color: var(--page-text-primary);
}