/* Nova Home - page styles from the Claude Design "Nova Home" file.
 *
 * Layout and colours live inline in templates/pages/home.html, exactly as in
 * the design. This sheet carries what inline styles cannot: the keyframes,
 * the hover states (the design's style-hover attributes) and the small-screen
 * header fallback. Hover declarations use !important because they must win
 * over the inline base style, which is how the design runtime applies them.
 */
body { background: var(--nv-f6f6fa); -webkit-font-smoothing: antialiased; }

.nh { line-height: normal; }
.nh * { box-sizing: border-box; }
.nh a { color: #DD3D4F; text-decoration: none; }
.nh a:hover { color: var(--nv-b4202f); }
.nh input::placeholder { color: var(--nv-9a9cb4); }
.nh-links::-webkit-scrollbar,
.nh [role="tablist"]::-webkit-scrollbar { display: none; }

@keyframes novaMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes novaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,106,.45) } 70% { box-shadow: 0 0 0 7px rgba(22,163,106,0) } }
@keyframes novaFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes novaRise { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: translateY(0) } }

/* -- hover states ----------------------------------------------------------- */
.nh .nh-h-navlink:hover { background: var(--nv-f0f0f7) !important; color: var(--nv-0e0f1f-text) !important; }
.nh .nh-h-iconbtn:hover { border-color: var(--nv-f3c4ca) !important; color: #DD3D4F !important; background: var(--nv-fff5f6) !important; }
.nh .nh-h-ghost:hover { border-color: var(--nv-f3c4ca) !important; background: var(--nv-fff5f6) !important; }
.nh .nh-h-ghost-lift:hover { border-color: var(--nv-f3c4ca) !important; background: var(--nv-fff5f6) !important; transform: translateY(-2px) !important; }
.nh .nh-h-navcta:hover { background: #B4202F !important; transform: translateY(-1px) !important; box-shadow: 0 12px 22px -8px rgba(221,61,79,.7) !important; color: #fff !important; }
.nh .nh-h-herocta:hover { background: #B4202F !important; transform: translateY(-2px) !important; box-shadow: 0 20px 34px -12px rgba(221,61,79,.75) !important; color: #fff !important; }
.nh .nh-h-cta:hover { background: #B4202F !important; transform: translateY(-2px) !important; color: #fff !important; }
.nh .nh-h-stat:hover { border-color: var(--nv-f3c4ca) !important; box-shadow: 0 18px 34px -24px rgba(24,20,80,.3) !important; }
.nh .nh-h-gap:hover { gap: 14px !important; }
.nh .nh-h-row:hover { background: var(--nv-f8f8fc) !important; }
.nh .nh-h-lift:hover { transform: translateY(-2px) !important; color: #fff !important; }
.nh .nh-h-feature:hover { border-color: var(--nv-f3c4ca) !important; transform: translateY(-3px) !important; }
.nh .nh-h-card:hover { transform: translateY(-5px) !important; box-shadow: 0 26px 44px -26px rgba(24,20,80,.35) !important; border-color: var(--nv-f3c4ca) !important; }
.nh .nh-h-rule:hover { background: var(--nv-fff-bg) !important; border-color: var(--nv-f3c4ca) !important; box-shadow: 0 18px 34px -24px rgba(24,20,80,.35) !important; }
.nh .nh-h-tab:hover { color: var(--nv-0e0f1f-text) !important; }
.nh .nh-h-program:hover { transform: translateY(-4px) !important; border-color: var(--nv-f3c4ca) !important; box-shadow: 0 26px 44px -28px rgba(24,20,80,.36) !important; color: var(--nv-0e0f1f-text) !important; }
.nh .nh-h-tab[aria-selected="true"]:hover { color: #fff !important; }
.nh .nh-h-review:hover { border-color: var(--nv-f3c4ca) !important; box-shadow: 0 22px 40px -28px rgba(24,20,80,.35) !important; }
.nh .nh-h-faq:hover { color: #DD3D4F !important; }
.nh .nh-h-white:hover { transform: translateY(-2px) !important; box-shadow: 0 22px 36px -14px rgba(0,0,0,.45) !important; color: var(--nv-b4202f) !important; }
.nh .nh-h-foot:hover { color: #DD3D4F !important; }

.nh button:focus-visible, .nh a:focus-visible, .nh [role="button"]:focus-visible, .nh input:focus-visible {
  outline: 2px solid #DD3D4F; outline-offset: 2px;
}

/* -- small screens -----------------------------------------------------------
   The design's single-row header needs ~560px. Below that the links move to a
   second, scrollable row so no control is ever clipped.                      */
/* Same breakpoints as the shared header (app-shell.css): tighter spacing from 1024 to 1279px,
   and at 1023px and below the links move to their own full-width row. */
.nh .nh-links > a { flex: none; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nh .nh-bar { gap: 18px !important; }
  .nh .nh-links > a { padding-left: 9px !important; padding-right: 9px !important; }
}
@media (max-width: 1023.98px) {
  .nh .nh-bar { height: auto !important; flex-wrap: wrap; column-gap: 12px !important; row-gap: 0 !important; padding-top: 12px !important; }
  .nh .nh-actions { margin-left: auto; }
  .nh .nh-links { order: 3; flex: 1 1 100% !important; margin: 8px -12px 0; padding: 0 0 8px; scroll-snap-type: x proximity; }
  .nh .nh-links > a { scroll-snap-align: start; }
  .nh .nh-sticky { top: calc(var(--nv-header-h, 112px) + 20px) !important; }
}
@media (max-width: 760px) {
  .nh .nh-sticky { position: static !important; }
  .nh .nh-plan-side { border-left: 0 !important; border-top: 1px solid var(--nv-eeeef4); }
}
@media (max-width: 420px) {
  .nh .nh-bar { padding-left: 16px !important; padding-right: 16px !important; }
  .nh .nh-theme { display: none !important; }
  .nh .nh-actions { gap: 8px !important; }
  .nh .nh-login, .nh .nh-signup { padding: 9px 12px !important; font-size: 14px !important; }
  .nh section { padding-left: 16px !important; padding-right: 16px !important; }
  .nh footer { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Motion runs exactly as in the design, including when the OS asks for reduced
   motion (Windows "Show animations" off): the design does not opt out. */

/* -- 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) {
  .nh .nv-tap { min-height: 44px; }
  .nh [data-pct] { min-height: 44px; }
  .nh .nh-logo { min-height: 44px; }
  .nh .nh-login, .nh .nh-signup { display: inline-flex; align-items: center; min-height: 44px; }
  .nh .nh-theme { width: 44px !important; height: 44px !important; }
  .nh .nh-h-navlink { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .nh [data-tf] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .nh .nh-h-tab { min-height: 44px; }
  /* Range sliders: the whole 44px-tall box takes the finger, the track stays the design's thin line. */
  .nh input[type="range"] { height: 44px; }
  .nh footer .nh-h-foot { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .nh footer div:has(> .nh-h-foot) { gap: 0 !important; align-items: flex-start; }
}
/* 320px phones: logo, Log in and Get started share one row (the design's sizes need ~324px). */
@media (max-width: 360px) {
  .nh .nh-bar { column-gap: 8px !important; }
  .nh .nh-actions { gap: 6px !important; }
  .nh .nh-login, .nh .nh-signup { padding-left: 10px !important; padding-right: 10px !important; }
}