/*  Landing workflow and CTA components · source-order-preserving landing stylesheet.  */

      .chapter-margin-inner {
        justify-content: flex-start;
        gap: 0;
      }

      .margin-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 24px;
        object-fit: contain;
      }

      .chapter-margin h2 {
        max-width: 132px;
        font-size: clamp(1.45rem, 1.9vw, 2rem);
        line-height: 1.32;
      }

      .chapter-margin p {
        max-width: 138px;
        margin-top: 16px;
        line-height: 1.8;
      }

      .screen-caption {
        grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr);
      }

      .screen-caption strong {
        grid-column: 1;
      }

      .screen-caption p {
        grid-column: 2;
      }

      .workflow .chapter-body {
        padding-bottom: 118px;
        overflow: hidden;
      }

      .workflow-intro {
        width: min(1180px, calc(100% - 76px));
        margin: 0 auto 20px;
        padding: 70px 0 18px;
        display: grid;
        grid-template-columns: minmax(0, 720px) 160px;
        justify-content: space-between;
        align-items: end;
        text-align: left;
      }

      .workflow-intro h3 {
        max-width: 690px;
        margin: 0;
        font-family: var(--serif);
        font-size: clamp(3rem, 5vw, 5.6rem);
        line-height: 1.08;
        letter-spacing: -0.055em;
      }

      .workflow-intro p {
        max-width: 610px;
        margin: 22px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.95;
      }

      .workflow-intro > img {
        width: 118px;
        height: 118px;
        justify-self: end;
        opacity: 0.48;
      }

      .workflow-composition {
        min-height: 590px;
        margin-top: 0;
        position: relative;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: repeat(5, 82px);
        gap: 14px;
        overflow: visible;
      }

      .workflow-composition::before {
        content: "";
        position: absolute;
        inset: 14% 14% 8% 18%;
        background: url("/res/writeflow_svg/icons/landing/workflow-connected-nodes.svg")
          center / contain no-repeat;
        opacity: 0.045;
        pointer-events: none;
      }

      .flow-card {
        --flow-accent: var(--amber);
        position: relative;
        z-index: 2;
        min-height: 246px;
        padding: 26px 28px 24px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(238, 234, 227, 0.14);
        border-radius: 22px;
        background: rgba(17, 18, 24, 0.96);
        box-shadow: 0 20px 52px rgba(0, 0, 0, 0.16);
      }

      .flow-card::before {
        content: "";
        position: absolute;
        z-index: 0;
        width: 150px;
        height: 150px;
        right: -74px;
        top: -82px;
        border-radius: 52px;
        background: color-mix(in srgb, var(--flow-accent) 11%, transparent);
        transform: rotate(20deg);
        pointer-events: none;
      }

      .flow-card > * {
        position: relative;
        z-index: 1;
      }

      .flow-planner {
        grid-column: 1 / 6;
        grid-row: 1 / 4;
      }

      .flow-writer {
        --flow-accent: var(--teal);
        grid-column: 5 / 10;
        grid-row: 2 / 5;
      }

      .flow-maintainer {
        --flow-accent: var(--coral);
        grid-column: 8 / 13;
        grid-row: 3 / 6;
      }

      .flow-card-head {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .flow-card-head img {
        width: 44px;
        height: 44px;
        padding: 8px;
        border: 1px solid
          color-mix(in srgb, var(--flow-accent) 28%, transparent);
        border-radius: 13px;
        background: color-mix(
          in srgb,
          var(--flow-accent) 8%,
          rgba(255, 255, 255, 0.015)
        );
      }

      .flow-card-head span {
        color: color-mix(in srgb, var(--flow-accent) 84%, white);
        font-size: 12px;
        letter-spacing: 0.08em;
      }

      .flow-card h4 {
        margin: 24px 0 12px;
        font-family: var(--serif);
        font-size: clamp(2.2rem, 3.25vw, 3.7rem);
        line-height: 1;
        letter-spacing: -0.035em;
      }

      .flow-card p {
        max-width: 470px;
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.85;
      }

      .flow-result {
        width: fit-content;
        margin-top: auto;
        padding: 7px 11px;
        border-radius: 10px;
        color: color-mix(in srgb, var(--flow-accent) 86%, white);
        background: color-mix(in srgb, var(--flow-accent) 8%, transparent);
        font-size: 10px;
      }

      .flow-bridge {
        position: absolute;
        z-index: 4;
        padding: 8px 12px;
        border: 1px solid rgba(238, 234, 227, 0.12);
        border-radius: 12px;
        color: #8e8981;
        background: rgba(9, 10, 14, 0.95);
        font-size: 10px;
        white-space: nowrap;
      }

      .flow-bridge b {
        margin-left: 8px;
        color: var(--amber);
        font-weight: 400;
      }

      .bridge-planner {
        left: 34%;
        top: 35%;
      }

      .bridge-writer {
        right: 26%;
        bottom: 28%;
      }

      .benefit-item .index,
      .price-row .index,
      .guide-card .index,
      .faq-list summary .index,
      .chapter-number,
      .step-index {
        display: none !important;
      }

      .faq-list summary {
        grid-template-columns: 1fr 30px;
      }

      .faq-list details p {
        margin-left: 22px;
      }

      .guide-head {
        justify-content: flex-start;
      }

      .meme-dots {
        min-width: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      .meme-dots button {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(238, 234, 227, 0.2);
        cursor: pointer;
        transition:
          width 0.2s ease,
          background 0.2s ease;
      }

      .meme-dots button.is-active {
        width: 25px;
        background: var(--amber);
      }

      .cta .chapter-body {
        padding: 48px clamp(34px, 5vw, 88px) 76px;
      }

      .cta-stage {
        min-height: 470px;
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
        align-items: stretch;
        overflow: hidden;
        border: 1px solid rgba(238, 234, 227, 0.15);
        border-radius: 28px;
        background: #111218;
        box-shadow: 0 28px 78px rgba(0, 0, 0, 0.2);
      }

      .cta-stage::before {
        content: "";
        position: absolute;
        inset: 0 -8% 0 57%;
        background: linear-gradient(
          150deg,
          rgba(237, 185, 76, 0.2),
          rgba(237, 185, 76, 0.055) 55%,
          rgba(77, 184, 176, 0.045)
        );
        clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
        pointer-events: none;
      }

      .cta-stage::after {
        content: "";
        position: absolute;
        right: 2%;
        bottom: -14%;
        width: 380px;
        height: 380px;
        background: url("/res/company_logo_cn.svg") center / contain no-repeat;
        opacity: 0.035;
        pointer-events: none;
      }

      .cta-copy,
      .cta-aside {
        position: relative;
        z-index: 1;
      }

      .cta-copy {
        padding: 68px clamp(38px, 5vw, 78px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
      }

      .cta-copy .cta-icon {
        width: 52px;
        height: 52px;
        margin: 0 0 28px;
      }

      .cta-copy h3 {
        max-width: 670px;
        margin: 0;
        font-family: var(--serif);
        font-size: clamp(3.6rem, 6vw, 7rem);
        line-height: 1;
        letter-spacing: -0.065em;
      }

      .cta-copy p {
        max-width: 630px;
        margin: 24px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.9;
      }

      .cta-actions {
        margin-top: 34px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .cta-aside {
        padding: 58px 48px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
      }

      .cta-aside > img {
        width: min(270px, 78%);
        margin: auto auto 28px;
        opacity: 0.78;
      }

      .cta-mini-copy {
        max-width: 280px;
        display: grid;
        gap: 8px;
      }

      .cta-mini-copy strong {
        color: var(--paper);
        font-family: var(--serif);
        font-size: 22px;
      }

      .cta-mini-copy span {
        color: #938e86;
        font-size: 12px;
      }

      @media (max-width: 1100px) {
        .workflow-intro {
          width: min(100% - 44px, 900px);
          grid-template-columns: 1fr 110px;
        }

        .workflow-composition {
          min-height: 780px;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .flow-card {
          width: min(78%, 680px);
          min-height: 230px;
        }

        .flow-planner {
          align-self: flex-start;
        }
        .flow-writer {
          align-self: center;
        }
        .flow-maintainer {
          align-self: flex-end;
        }
        .flow-bridge {
          display: none;
        }

        .cta-stage {
          grid-template-columns: 1fr;
        }

        .cta-stage::before {
          inset: 52% -12% 0 12%;
          clip-path: polygon(18% 0, 100% 12%, 100% 100%, 0 100%);
        }

        .cta-aside {
          min-height: 250px;
          padding-top: 12px;
        }
      }

      @media (max-width: 720px) {
        .margin-icon {
          width: 34px;
          height: 34px;
          margin: 0;
        }

        .chapter-margin-inner {
          grid-template-columns: 42px minmax(0, 1fr);
          align-items: center;
        }

        .chapter-margin h2 {
          max-width: none;
        }

        .chapter-margin p {
          grid-column: 2;
          max-width: none;
        }

        .workflow-intro {
          width: calc(100% - 34px);
          padding-top: 52px;
          grid-template-columns: 1fr;
        }

        .workflow-intro > img {
          display: none;
        }

        .workflow-composition {
          min-height: 0;
        }

        .flow-card {
          width: 100%;
          min-height: 220px;
          align-self: stretch;
        }

        .screen-caption {
          grid-template-columns: 1fr;
        }

        .screen-caption strong,
        .screen-caption p {
          grid-column: 1;
        }

        .cta-stage {
          min-height: 0;
        }

        .cta-copy {
          padding: 54px 24px;
        }

        .cta-aside {
          padding: 28px 24px 42px;
        }

        .cta-aside > img {
          width: 190px;
        }
      }