/* Shared readability and progressive enhancement for the three campaign pages. */
body:is(.campaign-top, .campaign-features, .campaign-guide) {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
}

body:is(.campaign-top, .campaign-features, .campaign-guide) :is(a, button, summary, input):focus-visible {
  outline: 3px solid #a47607;
  outline-offset: 4px;
}

body:is(.campaign-top, .campaign-features, .campaign-guide) :is(p, dd, figcaption) {
  overflow-wrap: anywhere;
}

/* Keep the design's heading sizes; raise the explanatory text underneath them. */
body.campaign-top :is(.hero-description, .after p, .before > p,
  .section-heading > p:last-child, .story-copy > p, .feature-note p,
  .bridge-brand p, .video-cta p > span, .inline-conversion > p,
  .start-intro > p:not(.section-label), .start-step p, .recurring-note p,
  .price-promise > p:not(.section-label), .faq-list details > div,
  .closing-copy > p:not(.section-label)) {
  font-size: 16px;
  line-height: 1.85;
}

body.campaign-features :is(.sf-intro-lead, .sf-lead, .sf-detail-list dd,
  .sf-condition-grid p, .sf-generation-copy > p:last-child,
  .sf-save-grid article > p:not(.sf-small-label), .sf-export p,
  .sf-other-grid article > div > p:not(.sf-small-label),
  .sf-scope-inner > div > p, .sf-download-inner > div > p:not(.sf-kicker)) {
  font-size: 16px;
  line-height: 1.85;
}

body.campaign-guide :is(.sg-intro-lead, .sg-chapter-heading > p:last-child,
  .sg-step-copy p, .sg-save-items p, .sg-small-steps, .sg-input-tools p,
  .sg-voice p:not(.sg-kicker), .sg-download-inner > div > p:not(.sg-kicker)) {
  font-size: 16px;
  line-height: 1.85;
}

body.campaign-top :is(.price-footnote, .purchase-footnote, .billing-notes p,
  .trial > span, .trial-pill, .closing-trial > span, .conversion-label,
  .hero-caption, .story-figure figcaption, .screens-note,
  .mini-foot, .hero-screen-bottom, .hero-screen-title > span) {
  font-size: 14px;
  line-height: 1.8;
}

body.campaign-top :is(.text-link, .story-copy > .text-link,
  .price-details > .text-link, .faq-list .all-faq) {
  font-size: 14px;
}

body.campaign-features :is(.sf-price-note, .sf-card-note),
body.campaign-guide :is(.sg-price-note, .sg-note p, .sg-inline-note, .sg-tip) {
  /* Override the imported page's explicit small-note rules. */
  font-size: 14px !important;
  line-height: 1.85;
}

body.campaign-features :is(.sf-trial > span, .sf-figure figcaption),
body.campaign-guide :is(.sg-trial > span, .sg-figure figcaption, .sg-screens-note) {
  font-size: 14px;
  line-height: 1.8;
}

body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.campaign-conditions, .campaign-price-notes) {
  font-size: 14px;
  line-height: 1.85;
  margin-top: 12px;
}

body.campaign-top .campaign-price-notes p + p { margin-top: 8px; }
body:is(.campaign-top, .campaign-features, .campaign-guide) .anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: 100px;
}
body.campaign-top .hero-caption { font-size: 12px; bottom: -16px; }
body.campaign-top .mini-foot { font-size: 11px; }
body.campaign-top .hero-screen-bottom { font-size: 12px; line-height: 1.5; }
body.campaign-top .hero-screen-title > span { font-size: 11px; }

body.campaign-top :is(.trial, .trial-pill),
body.campaign-features .sf-trial,
body.campaign-guide .sg-trial {
  flex-wrap: wrap;
  white-space: normal;
  row-gap: 7px;
}

/* Whole screenshots remain visible; clicking opens the original at readable size. */
body:is(.campaign-top, .campaign-features, .campaign-guide) .campaign-proof {
  width: 100%;
  max-width: 540px;
  min-width: 0;
  grid-column: 1 / -1;
  margin: 24px auto 0;
}

body:is(.campaign-top, .campaign-features, .campaign-guide) .campaign-proof > a {
  display: block;
  padding: 12px;
  border: 1px solid #cadccf;
  border-radius: 12px;
  background: #f4f8f3;
  cursor: zoom-in;
}

body:is(.campaign-top, .campaign-features, .campaign-guide) .campaign-proof img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 260px;
  object-fit: contain;
  margin-inline: auto;
}

body:is(.campaign-top, .campaign-features, .campaign-guide) .campaign-proof figcaption {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  color: #3e5751;
}

body.campaign-top.has-dialog { overflow: hidden; }

body.campaign-top .campaign-video {
  width: min(92vw, 560px);
  max-width: min(92vw, 560px);
  max-height: 88dvh;
  padding: 16px;
  border: 1px solid #cadccf;
  border-radius: 14px;
  background: #fff;
  color: #173f39;
  overflow: auto;
}

body.campaign-top .campaign-video::backdrop { background: #102d26d9; }

body.campaign-top .campaign-video video {
  display: block;
  width: 100%;
  max-height: 68dvh;
  object-fit: contain;
  background: #102d26;
  margin-top: 12px;
}

body.campaign-top .campaign-video-close {
  display: block;
  margin-left: auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #cadccf;
  border-radius: 7px;
  background: #fff;
  font-size: 14px;
}
body.campaign-top .footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}
body.campaign-top .footer :is(small, p) { font-size: 12px; }

body:is(.campaign-top, .campaign-features, .campaign-guide):not(.campaign-ui-ready)
  :is(.menu-toggle, .sf-menu-toggle, .sg-menu-toggle) {
  display: none;
}

/* Navigation remains available when scripts are disabled or fail to load. */
@media (max-width: 900px) {
  body.campaign-features:not(.campaign-ui-ready) .sf-header,
  body.campaign-guide:not(.campaign-ui-ready) .sg-header {
    height: auto;
  }
  body.campaign-features:not(.campaign-ui-ready) .sf-header-inner,
  body.campaign-guide:not(.campaign-ui-ready) .sg-header-inner {
    flex-wrap: wrap;
    padding-block: 14px;
  }
  body.campaign-features:not(.campaign-ui-ready) .sf-desktop-nav,
  body.campaign-guide:not(.campaign-ui-ready) .sg-desktop-nav {
    display: flex;
    flex-wrap: wrap;
    order: 3;
    flex-basis: 100%;
    margin: 0;
    gap: 8px 20px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  body.campaign-top .hero-product { height: 270px; }
  body.campaign-top .hero-caption { bottom: 0; }
  body.campaign-top:not(.campaign-ui-ready) .header { height: auto; }
  body.campaign-top:not(.campaign-ui-ready) .header-inner {
    flex-wrap: wrap;
    padding-block: 14px;
  }
  body.campaign-top:not(.campaign-ui-ready) .desktop-nav {
    display: flex;
    flex-wrap: wrap;
    order: 3;
    flex-basis: 100%;
    margin: 0;
    gap: 8px 20px;
    font-size: 14px;
  }
  body.campaign-top :is(.story-row, .price-card, .closing-action) { min-width: 0; }
  body.campaign-top .price-footnote > span { white-space: normal; }
  body.campaign-top .billing-notes p { align-items: flex-start; }
  body.campaign-top .billing-notes .check { margin-top: 5px; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) .campaign-proof {
    max-width: 100%;
    margin-top: 20px;
  }
  body:is(.campaign-top, .campaign-features, .campaign-guide) .campaign-proof > a { padding: 10px; }
}
@media (max-width: 360px) {
  body.campaign-top .hero-product { height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body:is(.campaign-top, .campaign-features, .campaign-guide)) {
    scroll-behavior: auto;
  }
  body:is(.campaign-top, .campaign-features, .campaign-guide) *,
  body:is(.campaign-top, .campaign-features, .campaign-guide) *::before,
  body:is(.campaign-top, .campaign-features, .campaign-guide) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Keep navigation available throughout the page and across tablet widths. */
body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header, .sf-header, .sg-header) {
  position: sticky;
  top: 0;
  height: 80px;
  z-index: 40;
}
body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header-inner, .sf-header-inner, .sg-header-inner) { gap: 20px; }
body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.desktop-nav, .sf-desktop-nav, .sg-desktop-nav) { gap: 20px; font-size: 14px; }
body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.desktop-nav, .sf-desktop-nav, .sg-desktop-nav) a { display: inline-flex; align-items: center; min-height: 44px; }
.campaign-header-stores { display: flex; gap: 8px; }
.campaign-header-stores a, .campaign-menu-stores a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 12px; border-radius: 7px;
  background: #17624b; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
}
body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header-cta, .sf-header-cta, .sg-header-cta) { display: none; }
.campaign-menu-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-column: 1 / -1; border-top: 1px solid #d5e3d9; padding-top: 12px; margin-top: 8px; }
body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.mobile-menu, .sf-mobile-nav, .sg-mobile-nav) { max-height: calc(100dvh - 72px); overflow-y: auto; }
body:is(.campaign-top, .campaign-features, .campaign-guide) .campaign-back-top { display: flex; width: fit-content; min-height: 44px; align-items: center; margin: 16px auto 0; font-size: 14px; text-decoration: underline; }
body.campaign-features .sf-footer-groups a, body.campaign-guide .sg-footer-groups a { font-size: 14px; min-height: 44px; }
body.campaign-features main [id], body.campaign-top main [id] { scroll-margin-top: 100px; }
body.campaign-top .campaign-price-facts { display: grid; gap: 10px; margin: 0 0 16px; font-size: 14px; }
body.campaign-top .campaign-price-facts div { display: grid; grid-template-columns: 5em 1fr; gap: 12px; }
body.campaign-top .campaign-price-facts dt { color: #526960; }
body.campaign-top .campaign-price-facts dd { margin: 0; font-weight: 700; }
body.campaign-top .campaign-price-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
body.campaign-top .campaign-price-notes > div { padding: 16px 0; border-top: 1px solid #d5e3d9; }
body.campaign-top .campaign-price-notes h3 { font-size: 16px; margin-bottom: 6px; }
body.campaign-features .campaign-screen-detail { width: min(540px, calc(100% - 40px)); margin: 24px auto 0; border: 1px solid #cadccf; border-radius: 10px; padding: 12px 16px; background: #fff; }
body.campaign-features .campaign-screen-detail summary { cursor: pointer; font-size: 14px; min-height: 44px; align-content: center; }
@media (max-width: 1050px) {
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header, .sf-header, .sg-header) { height: 72px; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.desktop-nav, .sf-desktop-nav, .sg-desktop-nav), .campaign-header-stores { display: none; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header-cta, .sf-header-cta, .sg-header-cta) { display: inline-flex; margin-left: auto; min-height: 44px; }
  body:is(.campaign-top, .campaign-features, .campaign-guide).campaign-ui-ready :is(.menu-toggle, .sf-menu-toggle, .sg-menu-toggle) { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; flex-shrink: 0; padding: 9px; border: 1px solid #cadccf; border-radius: 7px; background: #fff; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.menu-toggle, .sf-menu-toggle, .sg-menu-toggle) span { width: 19px; height: 2px; background: #17624b; }
  body:is(.campaign-top, .campaign-features, .campaign-guide):not(.campaign-ui-ready) :is(.header, .sf-header, .sg-header) { height: auto; position: relative; }
  body:is(.campaign-top, .campaign-features, .campaign-guide):not(.campaign-ui-ready) :is(.header-inner, .sf-header-inner, .sg-header-inner) { flex-wrap: wrap; padding-block: 14px; }
  body:is(.campaign-top, .campaign-features, .campaign-guide):not(.campaign-ui-ready) :is(.desktop-nav, .sf-desktop-nav, .sg-desktop-nav) { display: flex; flex-wrap: wrap; order: 3; flex-basis: 100%; margin: 0; gap: 4px 20px; }
}
@media (max-width: 700px) {
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header-inner, .sf-header-inner, .sg-header-inner) { gap: 10px; }
  body.campaign-top .campaign-price-notes { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 360px) {
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header-inner, .sf-header-inner, .sg-header-inner) { gap: 8px; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header-cta, .sf-header-cta, .sg-header-cta) { font-size: 10px; padding-inline: 7px; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header-cta, .sf-header-cta, .sg-header-cta) svg { display: none; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header, .sf-header, .sg-header) :is(.brand, .sf-brand, .sg-brand) { gap: 7px; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header, .sf-header, .sg-header) :is(.brand, .sf-brand, .sg-brand) strong { font-size: 20px; }
  body:is(.campaign-top, .campaign-features, .campaign-guide) :is(.header, .sf-header, .sg-header) :is(.brand, .sf-brand, .sg-brand) img { width: 32px; height: 32px; }
}