/*  Landing component layout foundation · source-order-preserving landing stylesheet.  */.chapter-body {
        padding-bottom: 92px;
      }.chapter-heading {
        width: min(100%, 900px);
        min-height: auto;
        padding: 68px 24px 44px;
      }.chapter-heading h3 {
        max-width: 780px;
        font-size: clamp(2.35rem, 3.8vw, 4.35rem);
        line-height: 1.14;
        letter-spacing: -0.045em;
      }.chapter-heading p {
        max-width: 620px;
        margin-top: 18px;
        font-size: 13px;
        line-height: 1.9;
      }.workflow::before {
        width: 42%;
        height: 260px;
        right: -8%;
        top: 5%;
        opacity: 0.7;
        transform: rotate(3deg);
      }.workflow::after {
        width: 260px;
        height: 190px;
        right: 4%;
        bottom: 4%;
        background: url("/res/writeflow_svg/icons/landing/workflow-connected-nodes.svg")
          center / contain no-repeat;
        filter: none;
        opacity: 0.055;
        transform: rotate(-6deg);
      }.product::before {
        inset: 0 -9% auto 58%;
        height: 280px;
        opacity: 0.68;
      }.product::after {
        width: 210px;
        height: 210px;
        left: auto;
        right: 5%;
        bottom: 4%;
        background: url("/res/writeflow_svg/icons/landing/workflow-writer-pen.svg")
          center / contain no-repeat;
        opacity: 0.055;
        transform: rotate(8deg);
      }.memory::before {
        width: 390px;
        height: 390px;
        right: -150px;
        top: 90px;
        border-radius: 0;
        background: url("/res/writeflow_svg/icons/landing/benefit-world-network.svg")
          center / contain no-repeat;
        opacity: 0.045;
      }.memory::after {
        width: 36%;
        height: 260px;
        left: 29%;
        bottom: 2%;
        opacity: 0.68;
      }.meme::before {
        width: 42%;
        height: 58%;
        left: 11%;
        top: 18%;
        opacity: 0.65;
      }.meme::after {
        width: 250px;
        height: 250px;
        right: 4%;
        bottom: 3%;
        background: url("/res/writeflow_svg/icons/landing/illustration-writer-chaos.svg")
          center / contain no-repeat;
        filter: none;
        opacity: 0.045;
      }.features::before {
        width: 38%;
        height: 270px;
        right: -5%;
        top: 3%;
        opacity: 0.62;
      }.features::after {
        width: 235px;
        height: 235px;
        left: auto;
        right: 4%;
        bottom: 3%;
        background: url("/res/writeflow_svg/icons/landing/benefit-world-network.svg")
          center / contain no-repeat;
        opacity: 0.055;
        transform: rotate(-7deg);
      }.pricing::before {
        width: 34%;
        height: 54%;
        left: 30%;
        top: 20%;
        opacity: 0.58;
      }.pricing::after {
        width: 230px;
        height: 230px;
        right: 4%;
        bottom: 3%;
        background: url("/res/writeflow_svg/icons/landing/plan-pro-world-orbit.svg")
          center / contain no-repeat;
        filter: none;
        opacity: 0.05;
        transform: rotate(5deg);
      }.faq::before {
        width: 34%;
        height: 230px;
        right: 6%;
        top: 7%;
        opacity: 0.62;
      }.faq::after {
        width: 190px;
        height: 190px;
        left: auto;
        right: 5%;
        bottom: 3%;
        background: url("/res/writeflow_svg/icons/landing/faq-help-circle.svg")
          center / contain no-repeat;
        opacity: 0.055;
        transform: none;
      }.guides::before {
        width: 39%;
        height: 55%;
        right: -6%;
        top: 16%;
        opacity: 0.65;
      }.guides::after {
        width: 210px;
        height: 210px;
        left: auto;
        right: 4%;
        bottom: 3%;
        background: url("/res/writeflow_svg/icons/landing/guide-doc-home.svg")
          center / contain no-repeat;
        filter: none;
        opacity: 0.05;
        transform: rotate(5deg);
      }.workflow-grid {
        background: rgba(9, 10, 14, 0.58);
      }.workflow-step {
        min-height: 278px;
        padding: 28px 30px 32px;
        display: grid;
        grid-template-rows: auto auto 1fr;
        align-content: start;
      }.step-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }.step-icon {
        width: 46px;
        height: 46px;
        object-fit: contain;
        opacity: 0.92;
      }.workflow-step h4 {
        margin: 31px 0 14px;
        font-size: clamp(2rem, 2.9vw, 3.15rem);
        line-height: 1;
      }.workflow-step p {
        align-self: end;
        max-width: 340px;
        line-height: 1.85;
      }.meme-layout,
      .meme-layout.is-portrait {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
      }.meme-stage {
        width: min(100%, 980px);
        height: 460px;
        padding: 16px;
      }.meme-layout.is-portrait .meme-stage {
        width: min(100%, 620px);
      }.meme-copy {
        width: 100%;
        align-items: center;
      }.meme-controls {
        margin-top: 0;
      }.benefit-item {
        min-height: 132px;
        grid-template-columns: 52px 50px minmax(0, 1fr);
        gap: 22px;
        padding: 24px 0;
      }.benefit-icon {
        width: 42px;
        height: 42px;
        object-fit: contain;
      }.benefit-item > div {
        display: grid;
        grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
        gap: 32px;
        align-items: center;
      }.benefit-item h4 {
        font-size: clamp(1.65rem, 2.4vw, 2.45rem);
      }.guide-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }.guide-card,
      .guide-card:first-child {
        min-height: 315px;
        padding: 30px;
      }.guide-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }.guide-head img {
        width: 48px;
        height: 48px;
        object-fit: contain;
      }.guide-card h4 {
        font-size: clamp(1.8rem, 2.7vw, 2.8rem);
      }.cta-icon {
        width: 66px;
        height: 66px;
        margin: 0 auto 22px;
        object-fit: contain;
      }@media (max-width: 980px) {
        .workflow-step {
          min-height: 230px;
        }

        .benefit-item > div {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .guide-grid {
          grid-template-columns: 1fr 1fr;
        }
      }@media (max-width: 720px) {
        .chapter-heading {
          padding: 52px 8px 34px;
        }

        .chapter-heading h3 {
          font-size: clamp(2.1rem, 10vw, 3.3rem);
        }

        .workflow-step {
          min-height: 220px;
        }

        .meme-stage {
          height: 330px;
          padding: 10px;
        }

        .benefit-item {
          grid-template-columns: 38px 44px 1fr;
          gap: 14px;
        }

        .benefit-item > div {
          grid-template-columns: 1fr;
        }

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

        .guide-card,
        .guide-card:first-child {
          min-height: 270px;
        }
      }