/*  Landing base responsive rules · source-order-preserving landing stylesheet.  */

      @media (max-width: 1120px) {
        :root {
          --margin-width: 154px;
        }
        .brand span {
          display: none;
        }
        .nav-links {
          gap: 18px;
        }
        .chapter-body {
          padding-left: 42px;
          padding-right: 42px;
        }
        .workflow-grid {
          grid-template-columns: 1fr;
        }
        .workflow-step {
          min-height: 230px;
          border-right: 0;
          border-bottom: 1px solid var(--line-dark);
        }
        .workflow-step:last-child {
          border-bottom: 0;
        }
        .workflow-step h4 {
          margin-top: 70px;
        }
        .memory-row,
        .memory-row:nth-child(even) {
          grid-template-columns: 1fr;
          gap: 30px;
        }
        .memory-row:nth-child(even) .memory-copy,
        .memory-row:nth-child(even) .memory-media {
          order: initial;
        }
        .meme-layout,
        .meme-layout.is-portrait {
          grid-template-columns: 1fr;
        }
        .meme-stage {
          height: 400px;
        }
        .meme-copy {
          align-items: center;
          text-align: center;
        }
        .guide-grid {
          grid-template-columns: 1fr 1fr;
        }
        .guide-card:first-child {
          grid-row: span 2;
        }
        .price-row {
          grid-template-columns: 48px 1fr 1fr 52px;
        }
        .price-row p {
          grid-column: 2 / 4;
          padding-bottom: 18px;
        }
        .price-row a {
          grid-column: 4;
          grid-row: 1 / 3;
        }
      }

      @media (max-width: 820px) {
        :root {
          --nav-height: 64px;
        }

        .nav-inner {
          width: calc(100% - 34px);
        }
        .brand img {
          width: 92px;
        }
        .nav-links,
        .nav-cta {
          display: none;
        }

        .menu-button {
          margin-left: auto;
          width: 38px;
          height: 38px;
          display: grid;
          place-items: center;
          border: 1px solid rgba(237, 185, 76, 0.46);
          background: transparent;
          color: var(--amber);
          cursor: pointer;
        }

        .mobile-menu {
          position: fixed;
          z-index: 99;
          top: var(--nav-height);
          left: 0;
          right: 0;
          padding: 18px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: rgba(9, 10, 14, 0.98);
          border-bottom: 1px solid var(--line-dark);
          transform: translateY(-120%);
          transition: transform 0.3s var(--ease);
        }

        .mobile-menu.open {
          transform: none;
        }

        .mobile-menu a {
          min-height: 46px;
          display: grid;
          place-items: center;
          border: 1px solid rgba(238, 234, 227, 0.06);
          color: #aaa59d;
          font-size: 12px;
        }

        .shell {
          width: calc(100% - 34px);
        }
        .hero-inner {
          width: calc(100% - 34px);
          padding-top: 92px;
        }
        .hero h1 {
          font-size: clamp(4rem, 17vw, 7rem);
        }

        .chapter {
          grid-template-columns: 1fr;
        }

        .chapter-margin {
          min-height: 0;
          padding: 24px 22px;
          border-right: 0;
          border-bottom: 1px solid var(--line-dark);
        }

        .chapter.light .chapter-margin {
          border-color: var(--line-light);
        }

        .chapter-margin-inner {
          position: static;
          display: grid;
          grid-template-columns: 56px 1fr;
          gap: 18px;
          align-items: center;
        }

        .chapter-number {
          font-size: 2.3rem;
        }
        .chapter-margin h2 {
          margin: 0;
          font-size: 18px;
        }
        .chapter-margin p {
          grid-column: 2;
          margin-top: -8px;
        }

        .chapter-body {
          padding: 0 18px 76px;
        }
        .chapter-heading {
          min-height: 0;
          padding: 72px 8px 44px;
        }
        .chapter-heading h3 {
          font-size: clamp(2.45rem, 11vw, 4.4rem);
        }

        .screen-caption {
          grid-template-columns: 45px 1fr;
        }
        .screen-caption p {
          grid-column: 2;
        }
        .meme-stage {
          height: 340px;
          padding: 12px;
        }
        .benefit-item {
          grid-template-columns: 44px 1fr;
          gap: 16px;
        }
        .benefit-item p {
          grid-column: 2;
        }
        .price-row {
          grid-template-columns: 34px 1fr 46px;
          gap: 12px;
        }
        .price-row h4,
        .price-row strong,
        .price-row p {
          grid-column: 2;
        }
        .price-row a {
          grid-column: 3;
          grid-row: 1 / 5;
        }
        .guide-grid {
          grid-template-columns: 1fr;
        }
        .guide-card,
        .guide-card:first-child {
          min-height: 340px;
          grid-row: auto;
        }
        .cta .chapter-body {
          min-height: 540px;
        }
        .cta-panel {
          padding: 72px 10px;
        }
        .cta-panel h3 {
          font-size: clamp(3.3rem, 15vw, 6rem);
        }
        .footer-inner {
          width: calc(100% - 34px);
        }
        .footer-inner strong {
          width: 100%;
        }
      }

      @media (max-width: 520px) {
        .hero h1 {
          font-size: 4rem;
        }
        .hero p {
          font-size: 14px;
        }
        .button-primary,
        .button-secondary {
          width: 100%;
          max-width: 280px;
        }
        .mobile-menu {
          grid-template-columns: repeat(2, 1fr);
        }
        .chapter-heading h3 {
          font-size: 2.8rem;
        }
        .meme-stage {
          height: 310px;
        }
        .memory-media img,
        .screen-frame img {
          aspect-ratio: 1.25 / 1;
        }
        details p {
          margin-left: 54px;
        }
        summary {
          grid-template-columns: 38px 1fr 22px;
          font-size: 18px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
        }
        .reveal {
          opacity: 1;
          transform: none;
        }
      }