/* 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; }
  /* trial banner above the header (scrolls away; the header below stays sticky) */
  .hp-banner { background: #17375e; text-align: center; }
  .hp-banner-link { display: flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 6px 16px; color: #ffffff; font-size: 14.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; }
  .hp-banner-link:hover { color: #ffffff; text-decoration: underline; }
  .hp-banner-link:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; text-decoration: underline; }
  .hp-banner-short { display: none; }
  @media (max-width: 374px) { .hp-banner-long { display: none; } .hp-banner-short { display: inline; } }
  @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 {
    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[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; }
  @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; }

/* --- phones (<640px): compact header, stacked footer, 16px body text, 48px tap targets --- */
@media (max-width: 640px) {
  #home, #why, #features, #pricing, #about, #support { scroll-margin-top: 186px; }
  .hp-legal section { scroll-margin-top: 200px; }

  /* nav links and Log in flow as wrapping rows under the brand row (no sideways scrolling) */
  #hp-header > div { gap: 6px 2px !important; padding: 10px 6px !important; }
  #hp-header > div > a:first-child { gap: 7px !important; min-height: 48px; margin-left: 10px; }
  #hp-header > div > a:first-child > span:first-child { height: 32px !important; width: 33px !important; }
  #hp-header .hp-mark { height: 32px !important; }
  #hp-header .hp-brand-a, #hp-header .hp-brand-b { font-size: 26px !important; }
  #hp-header > div > div:last-of-type { display: contents !important; }
  #hp-header > div::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  #hp-nav { display: contents !important; }
  #hp-nav > .hp-navlink { order: 3; }
  #hp-header .hp-navlink { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 10px !important; }
  #hp-header > div > div:last-of-type > .hp-navlink { order: 4; flex: none; }

  .hp-foot-grid { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; padding: 44px 20px 28px !important; }
  .hp-foot-grid > div > div:last-child { gap: 0 !important; }
  .hp-foot-grid a { display: inline-flex; align-items: center; min-height: 48px; }
  .hp-foot-base { padding: 20px 20px 32px !important; }

  body > div[style*="font-size:15px"],
  p[style*="font-size:13px"], p[style*="font-size:13.5px"], p[style*="font-size:14px"], p[style*="font-size:14.5px"], p[style*="font-size:15px"],
  div[style*="font-size:14.5px"], div[style*="font-size:15px"], span[style*="font-size:15px"], table[style*="font-size:14.5px"],
  .hp-legal-toc ol { font-size: 16px !important; }

  .hp-legal-toc li { margin: 0; }
  .hp-legal-toc a { display: inline-flex; align-items: center; min-height: 48px; }
  .hp-cycle { min-height: 48px; }
  a[style*="display:inline-block"] { min-height: 48px; line-height: 48px; }
}

/* --- hamburger menu: hidden until phone widths with JS; without JS the links above stay a visible list --- */
#hp-nav .hp-nav-login, .hp-menu-btn { display: none; }
@media (max-width: 768px) and (scripting: enabled) {
  #home, #why, #features, #pricing, #about, #support { scroll-margin-top: 84px; }
  .hp-legal section { scroll-margin-top: 96px; }

  /* one row: logo, hamburger */
  #hp-header > div { position: relative; flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 8px 8px 16px !important; }
  #hp-header > div::after { content: none; }
  #hp-header > div > a:first-child { gap: 7px !important; min-height: 48px; margin-left: 0; min-width: 0; }
  #hp-header > div > a:first-child > span:first-child { height: 32px !important; width: 33px !important; }
  #hp-header .hp-mark { height: 32px !important; }
  #hp-header .hp-brand-a, #hp-header .hp-brand-b { font-size: 24px !important; }
  #hp-header > div > a:first-child > span:last-child { gap: 6px !important; }
  #hp-header > div > div:last-of-type { display: flex !important; margin-left: auto; }
  #hp-header .hp-head-login { display: none !important; }

  .hp-menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #171a21; cursor: pointer; }
  .hp-menu-btn:hover { background: rgba(23,26,33,0.05); }
  #hp-header[data-stuck="true"] .hp-menu-btn { color: #ffffff; }
  #hp-header[data-stuck="true"] .hp-menu-btn:hover { background: rgba(255,255,255,0.10); }

  /* menu panel drops below the header row, full width */
  #hp-nav { display: none !important; position: absolute; top: 100%; left: 0; right: 0; margin: 0 !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 8px; background: #ffffff; border-bottom: 1px solid rgba(23,26,33,0.09); box-shadow: 0 16px 30px rgba(23,26,33,0.12); }
  #hp-header.is-menu-open #hp-nav { display: flex !important; }
  #hp-header[data-stuck="true"] #hp-nav { background: #0f2038; border-bottom-color: rgba(255,255,255,0.14); }
  #hp-nav > .hp-navlink, #hp-nav .hp-nav-login { display: flex; align-items: center; order: 0; min-height: 48px; box-sizing: border-box; padding: 0 14px !important; border-radius: 10px; color: #454956; font-size: 16px !important; white-space: nowrap; }
}
@media (max-width: 374px) and (scripting: enabled) {
  #hp-header > div { gap: 4px !important; padding: 8px 6px 8px 10px !important; }
  #hp-header .hp-brand-a, #hp-header .hp-brand-b { font-size: 21px !important; }
}