/* The homepage and paid media landing pages share the same sales layout. */
.hero-copy .sales-hero-price {
  margin-top: var(--space-4);
  color: var(--color-ink);
  font: var(--type-ui);
}
.hero-actions .hero-booking-note {
  flex: 1 0 100%;
  order: 1;
  font: var(--type-ui);
  font-weight: 400;
}
.hero-secondary, .sales-proof-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: var(--type-ui);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.hero-bottom .review-highlight, .sales-report-proof {
  grid-column: 1 / -1;
  margin: 0;
}
.sales-report-proof {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-white);
}
.sales-report-proof h2 { font: var(--type-card); }
.sales-report-proof p { margin-top: var(--space-2); color: var(--color-muted); }
.sales-report-proof .sales-proof-cta { margin-top: var(--space-2); }
.plan-disclosure-panel, .plan-actions { display: contents; }
.plan-disclosure, .plan-choose-short { display: none; }
.landing-plans .plan-actions > .btn { margin-top: var(--space-6); }

@media (min-width: 901px) {
  .hero-bottom > .art, .hero-bottom > .landing-emblem { grid-area: 1 / 2; }
}

@media (max-width: 700px) {
  :root { --header-height: calc(64px + env(safe-area-inset-top, 0px)); }
  .hero { padding-block: var(--space-5); }
  .hero-eyebrow { display: none; }
  .hero h1 { margin-bottom: var(--space-3); }
  .hero .title-capsule { display: none; }
  .hero-bottom { gap: var(--space-5); }
  .hero-copy .sales-hero-price { margin-top: var(--space-3); }
  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    margin-top: var(--space-4);
  }
  .hero-actions .hero-booking-note { order: 0; margin-top: var(--space-1); }
  .hero-actions .hero-secondary { width: fit-content; }
  .hero-bottom .review-highlight, .sales-report-proof { padding: var(--space-4); }
  .hero-bottom .review-highlight figcaption { column-gap: var(--space-4); }
  .hero .art { max-width: 260px; }
  .hero .shape-pill { width: auto; height: 44px; }
  .hero .channel-switch { inset: 8px 8px 20px; }
  .hero .channel strong { font: var(--type-ui); }
  .hero .channel-dots { bottom: 10px; }
  .hero .landing-emblem {
    flex-direction: row;
    max-width: 260px;
    min-height: 120px;
    margin-top: 0;
    padding: var(--space-4);
  }
  .hero .landing-emblem img { width: 112px; }
  .hero .landing-emblem .hero-search-art { width: 128px; height: 70px; }
  #pricing { padding-block: var(--space-6); }
  #pricing .section-head { gap: var(--space-3); margin-bottom: var(--space-5); }
  #pricing .plans { gap: var(--space-3); }
  #pricing .plan:has(.plan-disclosure) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3) var(--space-2);
    padding: var(--space-4);
  }
  #pricing .plan .plan-top { min-height: 0; justify-content: start; }
  #pricing .plan .price {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    font: var(--type-section);
    text-align: right;
    white-space: nowrap;
  }
  #pricing .plan .price small { display: block; }
  .plan > p, .plan-disclosure-panel, .plan-actions { grid-column: 1 / -1; }
  .plan-disclosure-panel { display: none; }
  .plan-expanded .plan-disclosure-panel { display: block; }
  .plan-disclosure-panel .plan-facts { margin-top: 0; }
  .plan-disclosure-panel .creative-limit { margin: var(--space-3) 0 0; color: var(--text-secondary); }
  .plan-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  #pricing .plan-actions .btn, .plan-disclosure {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: var(--space-2);
    font: var(--type-ui);
    text-align: center;
  }
  .plan-disclosure {
    gap: var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: .25em;
  }
  .plan-disclosure::after {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }
  .plan-disclosure[aria-expanded="true"]::after { transform: rotate(225deg); }
  .plan-choose-full { display: none; }
  .plan-choose-short { display: inline; }
  #comparePanel, #comparePanel .table-wrap { overflow: visible; }
  #comparison, #comparison thead, #comparison tbody { display: block; min-width: 0; }
  #comparison thead { position: sticky; top: var(--header-height); z-index: 1; }
  #comparison tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #comparison th, #comparison td { width: auto; padding: var(--space-2); overflow-wrap: anywhere; }
  #comparison thead th:first-child { display: none; }
  #comparison tbody td:first-child { grid-column: 1 / -1; background: var(--color-soft); }
  #comparison thead th, #comparison tbody td:not(:first-child) { text-align: center; }
}