@media (max-width: 767px) {

  /* ---- Tokens ---- */
  :root {
    --text-h1:    36px;
    --text-h2:    28px;
    --text-h3:    24px;
    --text-h4:    18px;
    --text-p:     16px;
    --text-small: 14px;
    --text-label: 12px;

    --container-pad: 16px;
    --radius-card: 24px;
  }

  /* ---- Hero ---- */
  .hero__inner {
    padding: 64px 0 40px;
    gap: 32px;
  }

  .hero__top {
    gap: 24px;
  }

  /* ---- Logo ---- */
  .logo__sign {
    width: 64px;
    height: 64px;
  }

  .logo__sign svg {
    width: 36px;
    height: 36px;
  }

  /* ---- Points ---- */
  .points {
    flex-direction: column;
    padding: 40px 0 64px;
    gap: 32px;
  }

  /* ---- Features ---- */
  .features {
    padding: 44px 0 0;
  }

  .features__title {
    font-size: var(--text-h2);
    margin-bottom: 24px;
  }

  .features__cards {
    gap: 12px;
  }

  .feature-card--pad-top {
    padding: 40px 20px;
    gap: 24px;
  }

  .feature-card--pad-none {
    padding: 0 20px 40px;
    gap: 24px;
  }

  .feature-card--pad-top-only {
    padding: 40px 20px 0;
    gap: 24px;
  }

  .feature-card__image,
  .story-viewer {
    max-width: 240px;
  }

  .curated-wrap {
    max-width: 240px;
  }

  .curated-wrap .story-viewer {
    max-width: 100%;
  }

  .feature-card__h3 {
    font-size: var(--text-h3);
  }

  .feature-card__h4 {
    font-size: var(--text-h4);
  }

  /* ---- Premium / Sources ---- */
  .premium {
    padding: 72px 0 64px;
    gap: 56px;
  }

  .premium__h2 {
    font-size: var(--text-h2);
  }

  .premium__grid {
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
    gap: 16px;
  }

  @media (min-width: 480px) {
    .premium__grid {
      grid-template-columns: repeat(3, minmax(0, 300px));
    }
  }

  /* ---- Pricing ---- */
  .pricing {
    padding: 40px 0 24px;
    gap: 20px;
  }

  .pricing__h2 {
    font-size: var(--text-h2);
  }

  .pricing__cards {
    flex-direction: column;
    gap: 12px;
  }

  .pricing-card {
    padding: 40px 32px;
    border-radius: 24px;
  }

  .pricing-card__name {
    font-size: var(--text-h3);
  }

  .pricing-card__price {
    font-size: var(--text-h4);
  }

  /* ---- FAQ ---- */
  .faq {
    padding: 64px 0 80px;
    gap: 16px;
  }

  .faq__h2 {
    font-size: var(--text-h2);
  }

  .accordion-item__head {
    padding: 16px 0;
    gap: 8px;
  }

  .accordion-item__q {
    font-size: var(--text-h4);
  }

  .accordion-item__icon {
    width: 16px;
    height: 16px;
  }

  .accordion-item__icon::before {
    width: 10px;
    height: 1.5px;
  }

  .accordion-item__icon::after {
    width: 1.5px;
    height: 10px;
  }

  /* ---- CTA ---- */
  .cta-section {
    padding: 56px 24px 48px;
    gap: 24px;
    border-radius: 24px;
  }

  .cta-section__h2 {
    font-size: var(--text-h2);
  }

  .cta-section__icon {
    width: 48px;
    height: 48px;
  }

  /* ---- Button ---- */
  .btn {
    height: 48px;
    font-size: 16px;
    padding: 0 32px;
  }

  /* ---- Footer ---- */
  footer {
    padding: 80px 0 40px;
  }

  .footer__inner {
    gap: 32px;
  }

  .footer__links {
    flex-direction: column;
    gap: 32px;
  }

  .footer__label {
    font-size: var(--text-label);
  }

  .footer__link {
    font-size: var(--text-p);
  }


}