/* Nova Programs - page styles from the Claude Design "Nova Programs" file.
 *
 * Layout and colours live inline in templates/pages/plans.html, exactly as in
 * the design. This sheet carries what inline styles cannot: keyframes and the
 * design's style-hover states (which must beat the inline base style, hence
 * !important). Motion runs as in the design even when the OS asks for reduced
 * motion - the design does not opt out.
 */
body { background: var(--nv-f6f6fa); -webkit-font-smoothing: antialiased; }

.npg { line-height: normal; }
.npg * { box-sizing: border-box; }
.npg a { color: #DD3D4F; text-decoration: none; }
.npg a:hover { color: var(--nv-b4202f); }
.npg ::-webkit-scrollbar { height: 6px; width: 6px; }
.npg ::-webkit-scrollbar-thumb { background: var(--nv-dcdce6); border-radius: 9px; }

@keyframes novaRise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: translateY(0) } }

.npg .npg-h-cta:hover { background: #DD3D4F !important; transform: translateY(-2px) !important; color: #fff !important; }
.npg .npg-h-cta:disabled { opacity: .55; cursor: not-allowed !important; }
.npg .npg-h-cta:disabled:hover { background: var(--nv-0e0f1f-bg) !important; transform: none !important; }
.npg .npg-cta-off { opacity: .55; cursor: not-allowed; user-select: none; }
.npg .npg-h-card:hover { transform: translateY(-4px) !important; box-shadow: 0 26px 44px -28px rgba(24,20,80,.36) !important; border-color: var(--nv-f3c4ca) !important; }
.npg .npg-tab { text-decoration: none; }
.npg .npg-tab[aria-selected="false"]:hover { background: var(--nv-fff5f6) !important; color: var(--nv-b4202f) !important; }
.npg .npg-h-ghost:hover { border-color: var(--nv-f3c4ca) !important; background: var(--nv-fff5f6) !important; color: var(--nv-b4202f) !important; }
.npg button:focus-visible, .npg a:focus-visible { outline: 2px solid #DD3D4F; outline-offset: 2px; }

@media (max-width: 480px) {
  .npg .npg-main { padding: 28px 16px 56px !important; }
}

/* -- program switcher and program intro ----------------------------------------
   Five tabs sit in one row on wide screens; phones stack them two across (the
   last one full width) so nothing scrolls sideways at 320px. */
@media (max-width: 1023px) {
  .npg .npg-intro { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 767px) {
  .npg .npg-switch { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .npg .npg-switch .npg-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .npg .npg-tab { min-height: 54px !important; }
  .npg .npg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .npg .npg-intro { padding: 20px !important; }
}

/* -- touch targets -------------------------------------------------------------
   Phones get finger-sized hit areas on small links and toggles; wider screens
   keep the design's exact sizes. */
@media (max-width: 767px) {
  .npg .nv-tap { display: inline-flex; align-items: center; min-height: 44px; }
}