/*  Landing product story sections · source-order-preserving landing stylesheet.  */

      .workflow::before {
        content: "";
        position: absolute;
        z-index: 0;
        width: 57%;
        height: 55%;
        right: -11%;
        top: 7%;
        background: linear-gradient(
          135deg,
          rgba(237, 185, 76, 0.12),
          rgba(212, 122, 107, 0.035)
        );
        clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 76%);
        transform: rotate(5deg);
      }

      .workflow::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 560px;
        height: 190px;
        right: 6%;
        bottom: 2%;
        background: var(--logo) center / contain no-repeat;
        filter: brightness(0) invert(1);
        opacity: 0.025;
        transform: rotate(-7deg);
      }

      .workflow-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid var(--line-dark);
        background: rgba(9, 10, 14, 0.5);
      }

      .workflow-step {
        min-height: 330px;
        padding: 34px 34px 38px;
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--line-dark);
      }

      .workflow-step:last-child {
        border-right: 0;
      }

      .step-index {
        color: var(--amber);
        font-size: 11px;
        letter-spacing: 0.12em;
      }

      .workflow-step:nth-child(2) .step-index {
        color: var(--teal);
      }
      .workflow-step:nth-child(3) .step-index {
        color: var(--coral);
      }

      .workflow-step h4 {
        margin: auto 0 18px;
        font-family: var(--serif);
        font-size: clamp(2.25rem, 3.7vw, 4rem);
        line-height: 1;
        font-weight: 600;
      }

      .workflow-step p {
        margin: 0;
        color: #8d8981;
        font-size: 13px;
        line-height: 2;
      }
      .product::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0 -13% auto 42%;
        height: 410px;
        background: linear-gradient(
          135deg,
          rgba(237, 185, 76, 0.22),
          rgba(237, 185, 76, 0.04)
        );
        clip-path: polygon(17% 0, 100% 0, 78% 100%, 0 72%);
      }

      .product::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 500px;
        height: 180px;
        left: calc(var(--margin-width) + 5vw);
        bottom: 2%;
        background: var(--logo) center / contain no-repeat;
        opacity: 0.035;
        transform: rotate(4deg);
      }

      .screen-frame {
        padding: 12px;
        border: 1px solid rgba(23, 22, 27, 0.2);
        background: #111218;
        box-shadow: 0 28px 70px rgba(37, 31, 22, 0.15);
      }

      .screen-frame img {
        width: 100%;
        aspect-ratio: 16 / 8.65;
        object-fit: cover;
        object-position: top;
      }

      .screen-caption {
        margin-top: 22px;
        display: grid;
        grid-template-columns: 58px 170px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
        color: #5f5a52;
      }

      .screen-caption span {
        color: var(--amber-deep);
        font-family: var(--serif);
        font-size: 19px;
      }

      .screen-caption strong {
        font-family: var(--serif);
        font-size: 20px;
        font-weight: 600;
      }

      .screen-caption p {
        margin: 0;
        font-size: 13px;
        line-height: 2;
      }
      .memory::before {
        content: "";
        position: absolute;
        z-index: 0;
        width: 720px;
        height: 720px;
        right: -340px;
        top: 140px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 35% 35%,
          rgba(77, 184, 176, 0.11),
          rgba(77, 184, 176, 0.015) 58%,
          transparent 59%
        );
      }

      .memory::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 48%;
        height: 340px;
        left: 19%;
        bottom: 4%;
        background: linear-gradient(
          145deg,
          rgba(212, 122, 107, 0.09),
          rgba(237, 185, 76, 0.025)
        );
        clip-path: polygon(0 17%, 88% 0, 100% 76%, 14% 100%);
        transform: rotate(-3deg);
      }

      .memory-list {
        border-top: 1px solid var(--line-dark);
      }

      .memory-row {
        padding: 58px 0;
        display: grid;
        grid-template-columns: minmax(270px, 0.65fr) minmax(0, 1.35fr);
        gap: 56px;
        align-items: center;
        border-bottom: 1px solid var(--line-dark);
      }

      .memory-row:nth-child(even) {
        grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
      }

      .memory-row:nth-child(even) .memory-copy {
        order: 2;
      }
      .memory-row:nth-child(even) .memory-media {
        order: 1;
      }

      .memory-copy h4 {
        margin: 0 0 18px;
        font-family: var(--serif);
        font-size: clamp(2.3rem, 4vw, 4rem);
        line-height: 1.15;
      }

      .memory-copy p {
        margin: 0;
        color: #8d8981;
        font-size: 13px;
        line-height: 2;
      }

      .memory-copy small {
        display: block;
        margin-top: 24px;
        color: var(--teal);
        font-size: 11px;
      }

      .memory-media {
        padding: 10px;
        border: 1px solid var(--line-dark);
        background: #08090c;
      }

      .memory-media img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: top;
      }
      .meme::before {
        content: "";
        position: absolute;
        z-index: 0;
        width: 52%;
        height: 74%;
        left: 13%;
        top: 13%;
        background: linear-gradient(
          135deg,
          rgba(237, 185, 76, 0.15),
          rgba(237, 185, 76, 0.02)
        );
        clip-path: polygon(0 8%, 88% 0, 100% 88%, 12% 100%);
        transform: rotate(-2deg);
      }

      .meme::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 420px;
        height: 155px;
        right: 4%;
        bottom: 4%;
        background: var(--logo) center / contain no-repeat;
        filter: brightness(0) invert(1);
        opacity: 0.022;
      }

      .meme-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);
        gap: clamp(38px, 5vw, 76px);
        align-items: center;
      }

      .meme-layout.is-portrait {
        grid-template-columns: minmax(340px, 560px) minmax(310px, 1fr);
      }

      .meme-stage {
        width: 100%;
        height: 460px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #f4f4f1;
        border: 1px solid rgba(238, 234, 227, 0.16);
      }

      .meme-stage img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
        transition: opacity 0.22s ease;
      }

      .meme-stage img.is-switching {
        opacity: 0;
      }

      .meme-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .meme-copy h4 {
        margin: 0;
        font-family: var(--serif);
        font-size: clamp(2.7rem, 4.8vw, 5rem);
        line-height: 1.12;
        letter-spacing: -0.05em;
      }

      .meme-copy p {
        max-width: 460px;
        margin: 24px 0 0;
        color: #8d8981;
        font-size: 14px;
        line-height: 2;
      }

      .meme-controls {
        margin-top: 30px;
        display: flex;
        align-items: center;
        gap: 18px;
      }

      .meme-controls button {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line-dark);
        background: transparent;
        cursor: pointer;
        transition:
          border-color 0.2s ease,
          color 0.2s ease;
      }

      .meme-controls button:hover {
        color: var(--amber);
        border-color: rgba(237, 185, 76, 0.55);
      }

      .meme-count {
        min-width: 64px;
        color: #aaa59d;
        text-align: center;
        font-size: 11px;
        letter-spacing: 0.12em;
      }
      .features::before {
        content: "";
        position: absolute;
        z-index: 0;
        width: 58%;
        height: 430px;
        right: -12%;
        top: 2%;
        background: linear-gradient(
          145deg,
          rgba(237, 185, 76, 0.2),
          rgba(237, 185, 76, 0.025)
        );
        clip-path: polygon(22% 0, 100% 0, 84% 100%, 0 68%);
      }

      .features::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 510px;
        height: 170px;
        left: calc(var(--margin-width) + 6%);
        bottom: 2%;
        background: var(--logo) center / contain no-repeat;
        opacity: 0.03;
        transform: rotate(-5deg);
      }

      .benefit-list {
        border-top: 1px solid var(--line-light);
      }

      .benefit-item {
        min-height: 145px;
        padding: 30px 0;
        display: grid;
        grid-template-columns: 70px minmax(220px, 0.58fr) minmax(0, 1.42fr);
        gap: 28px;
        align-items: center;
        border-bottom: 1px solid var(--line-light);
      }

      .benefit-item .index {
        color: var(--amber-deep);
        font-family: var(--serif);
        font-size: 17px;
      }

      .benefit-item h4 {
        margin: 0;
        font-family: var(--serif);
        font-size: clamp(1.8rem, 2.8vw, 2.8rem);
        font-weight: 600;
      }

      .benefit-item p {
        margin: 0;
        color: #615c54;
        font-size: 13px;
        line-height: 2;
      }