/* Hobby Pulse — hobbypulse.io marketing site */
html { scroll-behavior: smooth; }
  html, body { margin: 0; background: #ffffff; }
  /* clip (not hidden) on html only: hidden on both html and body turns body into
     a scroll container, which breaks the sticky header */
  html { overflow-x: hidden; overflow-x: clip; }
  #home, #why, #features, #pricing, #about, #support { scroll-margin-top: 93px; }
  @media (max-width: 1080px) { #home, #why, #features, #pricing, #about, #support { scroll-margin-top: 152px; } }
  a { color: #17375e; text-decoration: none; }
  a:hover { color: #0f2745; }
  h1, h2, h3, h4 { font-weight: 500; }
  ::selection { background: rgba(23,26,33,0.12); }
  :focus-visible { outline: 2px solid #17375e; outline-offset: 2px; }
  @keyframes hp-pulse { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }
  #hp-header, #hp-header .hp-navlink, #hp-header .hp-brand-a, #hp-header .hp-brand-b, #hp-header .hp-cta {
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  #hp-header .hp-mark { transition: opacity .25s ease; }
  #hp-header .hp-mark-light { opacity: 0; }
  #hp-header .hp-navlink:hover { background: rgba(23,26,33,0.05); color: #0c0e14; }
  #hp-header .hp-cta:hover { background: #0f2745; }
  #hp-header[data-stuck="true"] { background: rgba(15,32,56,0.96) !important; border-bottom-color: rgba(255,255,255,0.14) !important; box-shadow: 0 10px 30px rgba(15,32,56,0.20); }
  #hp-header[data-stuck="true"] .hp-navlink { color: #e8edf4 !important; }
  #hp-header[data-stuck="true"] .hp-navlink:hover { background: rgba(255,255,255,0.10); color: #ffffff !important; }
  #hp-header[data-stuck="true"] .hp-brand-a { color: #ffffff !important; }
  #hp-header[data-stuck="true"] .hp-brand-b { color: #94bce3 !important; }
  #hp-header[data-stuck="true"] .hp-mark-ink { opacity: 0; }
  #hp-header[data-stuck="true"] .hp-mark-light { opacity: 1; }
  #hp-header[data-stuck="true"] .hp-cta { background: #ffffff !important; color: #0f2038 !important; }
  #hp-header[data-stuck="true"] .hp-cta:hover { background: #dbe4ef !important; }
  @media (min-width: 981px) { .hp-plan-blurb { min-height: 66px; } }
  @media (max-width: 1140px) { .hp-flow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .hp-flow > *:last-child { grid-column: 1 / -1; } }
  @media (max-width: 640px) { .hp-flow { grid-template-columns: minmax(0,1fr) !important; } }
  @media (max-width: 980px) { .hp-trio { grid-template-columns: minmax(0,1fr) !important; } }
  @media (max-width: 1140px) { .hp-quad { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
  @media (max-width: 560px) { .hp-quad { grid-template-columns: minmax(0,1fr) !important; } }
  @media (max-width: 1000px) { #hp-why-hero, #hp-why-band, #hp-feat-hero, #hp-about-hero { grid-template-columns: minmax(0,1fr) !important; } #hp-why-band > div:first-child { padding: 72px 0 40px !important; } }
  @media (max-width: 1000px) { #hp-hero-grid { grid-template-columns: minmax(0,1fr) !important; } }
  @media (max-width: 1080px) { #hp-nav { order: 3; flex: 1 0 100% !important; margin-left: 0 !important; } }
  @keyframes hp-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- image placeholders: drop a real <img class="hp-shot"> in place of .hp-slot --- */
.hp-slot { width: 100%; height: 100%; min-height: 160px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; box-sizing: border-box; background: rgba(23,26,33,0.03); border: 1px dashed rgba(23,26,33,0.18); color: #6d7280; font-size: 13.5px; line-height: 1.45; }
.hp-slot span { max-width: 32ch; }
.hp-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
[style*="#0f2038"] .hp-slot, [style*="#17273f"] .hp-slot { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.28); color: #dbe4ef; }

/* --- billing cycle toggle --- */
.hp-cycle { background: transparent; color: #454956; transition: background-color .2s ease, color .2s ease; }
.hp-cycle:hover { color: #0c0e14; }
.hp-cycle.is-on { background: #17375e; color: #ffffff; font-weight: 500; }

/* --- generated hover states --- */
.hx1:hover { background:#0f2745 !important; }
.hx2:hover { background:rgba(23,26,33,0.05) !important; }
.hx3:hover { background:#dbe4ef !important; }
.hx4:hover { background:#0f2745 !important; }
.hx5:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx6:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx7:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx8:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx9:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx10:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx11:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx12:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx13:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx14:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx15:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx16:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx17:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx18:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx19:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx20:hover { box-shadow:0 18px 40px rgba(23,26,33,0.10) !important; }
.hx21:hover { background:rgba(23,26,33,0.05) !important; }
.hx22:hover { background:#0f2745 !important; }
.hx23:hover { background:rgba(23,26,33,0.05) !important; }
.hx24:hover { background:#dbe4ef !important; }
.hx25:hover { background:rgba(255,255,255,0.10) !important; }
.hx26:hover { background:rgba(255,255,255,0.10) !important; }
.hx27:hover { background:rgba(255,255,255,0.10) !important; }
.hx28:hover { background:#0f2745 !important; }
.hx29:hover { color:#94bce3 !important; }
.hx30:hover { color:#94bce3 !important; }
.hx31:hover { color:#94bce3 !important; }
.hx32:hover { color:#94bce3 !important; }
.hx33:hover { color:#94bce3 !important; }
.hx34:hover { color:#94bce3 !important; }
.hx35:hover { color:#94bce3 !important; }
.hx36:hover { color:#94bce3 !important; }
.hx37:hover { color:#94bce3 !important; }
.hx38:hover { color:#94bce3 !important; }
.hx39:hover { color:#94bce3 !important; }

/* --- legal pages (/terms, /privacy) --- */
.hp-legal { max-width: 760px; margin: 0 auto; padding: 72px 28px 96px; color: #454956; font-size: 16px; line-height: 1.7; }
.hp-legal h1 { font-size: clamp(38px, 5vw, 52px); letter-spacing: -0.035em; line-height: 1.04; color: #171a21; font-weight: 500; margin: 0 0 20px; }
.hp-legal h2 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; color: #171a21; font-weight: 600; margin: 0 0 12px; }
.hp-legal section { margin-top: 44px; scroll-margin-top: 110px; }
@media (max-width: 1080px) { .hp-legal section { scroll-margin-top: 170px; } }
.hp-legal p { margin: 0 0 14px; }
.hp-legal ul { margin: 0 0 14px; padding-left: 22px; }
.hp-legal li { margin-bottom: 8px; }
.hp-legal strong { color: #171a21; font-weight: 600; }
.hp-legal a { color: #17375e; text-decoration: underline; text-underline-offset: 3px; }
.hp-legal code { font-size: 0.9em; background: #f0f2f5; border-radius: 5px; padding: 1px 6px; }
.hp-legal-meta { font-size: 12px !important; letter-spacing: 0.09em; text-transform: uppercase; color: #616674; margin-bottom: 14px !important; }
.hp-legal-lede { font-size: 18px; color: #454956; }
.hp-legal-toc { margin: 36px 0 8px; padding: 22px 26px; border-radius: 16px; background: #f4f5f7; border: 1px solid rgba(23,26,33,0.09); }
.hp-legal-toc-label { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: #616674; margin-bottom: 10px; }
.hp-legal-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; font-size: 15px; }
.hp-legal-toc li { margin: 0 0 6px; break-inside: avoid; }
.hp-legal-toc a { text-decoration: none; }
.hp-legal-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .hp-legal-toc ol { columns: 1; } }
.hp-legal-fine { margin-top: 56px !important; padding-top: 22px; border-top: 1px solid rgba(23,26,33,0.10); font-size: 13px; color: #616674; }