/* Hero Hub presentation page: the Shopify Hero Hub page, without the waitlist. Titles stay dark blue like the home page.
   The comparison table and the Pro plan cards come from hub-pro.css. */
.hero-hub-page { background: var(--v2-bg); }
.hub-main { padding-top: 96px; }
.hero-hub-page .h3-root { padding-bottom: 20px; }
/* The Hero Hub logo stands above the title in place of the old text eyebrow. */
.hub-logo { display: block; width: min(230px, 48vw); height: auto; margin: 0 auto 16px; filter: drop-shadow(0 8px 14px rgba(20, 42, 70, .18)); }
.hero-hub-page .h3-title-accent { color: inherit; }
.hero-hub-page .h3-devices .h3-hub-cta-wrap { margin-top: 8px; }

/* Free vs Pro section. */
.hub-compare { width: min(760px, calc(100% - 88px)); margin: 40px auto 0; text-align: center; }
.hub-compare h2, .hub-faq h2 {
  max-width: 900px; margin: 0 auto; color: var(--v2-ink);
  font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; letter-spacing: -.055em; line-height: 1.02; text-transform: uppercase; text-wrap: balance;
}
.home-v2 .hub-compare > .h3-hero-desc { max-width: 52ch; margin: 16px auto 0; }
.hub-compare .hub-compare-card { margin-top: 36px; }
.hub-plans-title { margin: 56px 0 0; color: var(--v2-ink); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; }
/* The plans row is wider than the 760px comparison so each price fits on one line. */
.hub-compare .hub-plans { position: relative; left: 50%; width: min(1020px, calc(100vw - 88px)); margin-top: 34px; transform: translateX(-50%); }

/* FAQ. */
.hub-faq { width: min(860px, calc(100% - 88px)); margin: 90px auto 100px; }
.hub-faq h2 { text-align: center; }
.hub-faq-list { display: grid; gap: 12px; margin-top: 32px; }
.hub-faq details { border: 2px solid var(--v2-ink); border-radius: 18px; background: var(--v2-paper); box-shadow: 4px 4px 0 var(--v2-ink); }
.hub-faq summary {
  position: relative; padding: 20px 56px 20px 22px;
  color: var(--v2-ink); font-size: 1.02rem; font-weight: 800; list-style: none; cursor: pointer;
}
.hub-faq summary::-webkit-details-marker { display: none; }
/* Same chevron as the program FAQs. */
.hub-faq summary::after {
  content: ''; position: absolute; top: 50%; right: 22px; width: 20px; height: 20px; margin-top: -10px;
  background: var(--v2-purple); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m5 14 18.38 20.722a.827.827 0 0 0 1.238 0L43 14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m5 14 18.38 20.722a.827.827 0 0 0 1.238 0L43 14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s ease;
}
.hub-faq details[open] summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .hub-faq summary::after { transition: none; } }
.hub-faq summary:focus-visible { outline: 3px solid var(--v2-purple); outline-offset: 3px; border-radius: 16px; }
.hub-faq details p { margin: 0; padding: 0 22px 20px; color: var(--v2-copy); line-height: 1.6; }
.hub-faq details p + p { margin-top: -10px; }

@media (max-width: 900px) {
  .hub-main { padding-top: 84px; }
  .hub-compare, .hub-faq { width: calc(100% - 32px); }
  .hub-compare .hub-plans { left: auto; width: auto; transform: none; }
}
/* The Try for free button between the comparison and the plans is a little wider. */
.home-v2 .hub-compare-cta .h3-hub-cta { min-width: 240px; justify-content: center; }
/* More Pro features stage, before the Free vs Pro comparison (shared styles in pro-features.css). */
.hub-pro-features { width: min(1020px, calc(100% - 32px)); margin: 64px auto 0; }
.hub-pro-features .pro-stage-title { margin-top: 0; }