/* Fluid storefront sizing. Keep browser zoom and the user's base font intact. */
:root {
  --op-page-width: clamp(80rem, 84vw, 104rem);
  --op-section-width: clamp(71.25rem, 75vw, 94rem);
  --op-gutter: clamp(1rem, 3vw, 3rem);
}

/* Use one breakpoint for navigation, the menu button and its open sheet. */
@media (max-width: 959px) {
  .site-header .header-nav { display: none !important; }
  .site-header .menu-toggle { display: grid !important; }
  body .menu-sheet:not([hidden]) { display: block !important; }
}
@media (min-width: 960px) {
  .site-header .header-nav { display: flex !important; }
  .site-header .menu-toggle { display: none !important; }

  body .page-width,
  body .page-width--wide {
    width: min(calc(100% - 2 * var(--op-gutter)), var(--op-page-width));
  }
  body .pn .pn__wrap:not(.pn__wrap--narrow),
  body .ov4 .ov4__w {
    width: min(calc(100% - 2 * var(--op-gutter)), var(--op-section-width));
    max-width: none;
    padding-inline: 0;
  }

  .site-header .header__inner { min-height: clamp(4.5rem, 4.4vw, 5.25rem); }
  .site-header .brand-logo { font-size: clamp(1.5rem, 1.4vw, 1.875rem); }
  .site-header .header-nav { font-size: clamp(.875rem, .9vw, 1.0625rem); }
  .site-header .header-nav .btn { font-size: inherit; }

  body .hero { padding-block: clamp(4rem, 4.2vw, 6rem); }
  .hero .hero__grid { gap: clamp(2rem, 3vw, 4rem); }
  .hero .hero__title { font-size: clamp(3.75rem, 3.5vw, 4.5rem); }
  .hero .hero__copy { font-size: clamp(1.125rem, 1.05vw, 1.25rem); max-width: 56ch; }
  .hero .button-row .btn { font-size: clamp(1rem, .95vw, 1.125rem); min-height: 3.5rem; }
  .hero .chip { font-size: clamp(.75rem, .7vw, .875rem); }

  .template-index .section-heading,
  .template-index .pn-head h2 { font-size: clamp(2.625rem, 2.6vw, 3.25rem); }
  .template-index .section-copy,
  .template-index .pn-head p { font-size: clamp(1.0625rem, 1vw, 1.25rem); }
  .template-index .pn-card__title { font-size: clamp(1.25rem, 1.2vw, 1.5rem); }
  .template-index .pn-card__pitch { font-size: clamp(.9375rem, .9vw, 1.0625rem); }
  .template-index .pn-card__points li { font-size: clamp(.875rem, .85vw, 1rem); }
  .template-index .pn-card__media { max-height: none; }
  .template-index .pn-card__cta { font-size: clamp(.9375rem, .9vw, 1.0625rem); min-height: 2.875rem; }

  .merchant-footer p,
  .merchant-footer address,
  .merchant-footer__grid > div > a:not(.brand-logo) { font-size: 14px; }
}

/* Product information should grow along with the product media on wide displays. */
@media (min-width: 1440px) {
  body .ov4 h1 { font-size: clamp(3.5rem, 3.2vw, 4.25rem); }
  body .ov4 .ov4__hero .sub { font-size: clamp(1.0625rem, 1vw, 1.25rem); }
  body .ov4 .ov4__tname { font-size: clamp(1.03125rem, 1vw, 1.25rem); }
  body .ov4 .ov4__tname small { font-size: clamp(.84375rem, .8vw, 1rem); }
  body .ov4 .ov4__tprice { font-size: clamp(1.375rem, 1.35vw, 1.625rem); }
  body .pn-hero .pn-buy__title { font-size: clamp(2.625rem, 3vw, 3.5rem); }
  body .pn-hero .pn-benefits li { font-size: clamp(1rem, .95vw, 1.125rem); }
  .op-subscription__label strong { font-size: clamp(15px, 1vw, 18px); }
  .op-subscription__description { font-size: 14px; }
  .op-subscription p { font-size: 14px !important; }
}

/* Give the story room on desktop while keeping policy text at a readable width. */
.op-about-hero p + p,
.op-about-grid p + p { margin-top: 1rem; }
@media (min-width: 960px) {
  body .op-info:has(.op-about-hero) {
    width: min(calc(100% - 2 * var(--op-gutter)), var(--op-section-width));
    max-width: none;
    padding-inline: 0;
  }
  .op-about-hero p,
  .op-about-grid p,
  .op-about-panel p { font-size: clamp(1rem, .95vw, 1.125rem); }
}

@media (max-width: 959px) {
  .hero .hero__copy { font-size: 1rem; }
  .hero .hero__grid > * { min-width: 0; }
}