.showcase-page {
          display: grid;
          gap: 24px;
          color: #383831;
        }

        .showcase-hero {
          display: grid;
          grid-template-columns: minmax(0, 0.94fr) minmax(320px, 0.56fr);
          gap: clamp(24px, 5vw, 62px);
          align-items: center;
          padding: clamp(40px, 6vw, 76px) 0 clamp(28px, 5vw, 52px);
          border-bottom: 1px solid rgba(186, 186, 176, 0.28);
        }

        .showcase-hero > *,
        .showcase-player,
        .showcase-player > *,
        .showcase-store,
        .showcase-store > *,
        .showcase-store__body > *,
        .showcase-store__lower > * {
          min-width: 0;
        }

        .showcase-eyebrow,
        .showcase-label,
        .showcase-player__step span,
        .showcase-store__crumbs,
        .showcase-store__chips span {
          color: #29695b;
          font-size: 12px;
          font-weight: 800;
          letter-spacing: 0.11em;
          text-transform: uppercase;
        }

        .showcase-eyebrow {
          margin: 0 0 12px;
        }

        .showcase-hero h1 {
          margin: 0;
          max-width: 900px;
          font-size: clamp(42px, 6vw, 78px);
          font-weight: 800;
          line-height: 1;
          letter-spacing: 0;
          overflow-wrap: break-word;
        }

        .showcase-hero p,
        .showcase-panel p,
        .showcase-player p,
        .showcase-store p {
          margin: 0;
          color: #65655c;
          line-height: 1.62;
        }

        .showcase-lede {
          max-width: 760px;
          margin-top: 18px;
          font-size: clamp(17px, 1.8vw, 22px);
        }

        .showcase-hero__links {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-top: 24px;
        }

        .showcase-hero__links a {
          display: inline-flex;
          min-height: 44px;
          align-items: center;
          justify-content: center;
          padding: 12px 16px;
          border-radius: 999px;
          font-size: 14px;
          font-weight: 800;
          text-decoration: none;
        }

        .showcase-hero__links a:first-child {
          background: #29695b;
          color: #fff;
        }

        .showcase-hero__links a:last-child {
          background: #f0eee5;
          color: #383831;
        }

        .showcase-metrics {
          display: grid;
          gap: 12px;
          padding: 18px;
          border-radius: 12px;
          background: #fcf9f3;
          box-shadow: inset 0 0 0 1px rgba(186, 186, 176, 0.2);
        }

        .showcase-metrics div {
          display: flex;
          justify-content: space-between;
          gap: 18px;
          padding-bottom: 12px;
          border-bottom: 1px solid #ded8cc;
        }

        .showcase-metrics div:last-child {
          padding-bottom: 0;
          border-bottom: 0;
        }

        .showcase-metrics span {
          color: #818178;
          font-size: 13px;
          font-weight: 800;
        }

        .showcase-metrics strong {
          text-align: right;
        }

        .showcase-player {
          display: grid;
          grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
          gap: 18px;
          align-items: start;
          border-radius: 12px;
          background: #f0eee5;
          box-shadow: inset 0 0 0 1px rgba(186, 186, 176, 0.22);
          overflow: hidden;
        }

        .showcase-player__story {
          display: grid;
          gap: 20px;
          align-content: start;
          padding: clamp(22px, 4vw, 34px);
        }

        .showcase-player__step {
          display: grid;
          gap: 18px;
          align-content: start;
        }

        .showcase-player__step h2 {
          margin: 0;
          font-size: clamp(30px, 3.4vw, 48px);
          font-weight: 800;
          line-height: 1.05;
          letter-spacing: 0;
        }

        .showcase-player__controls,
        .showcase-player__dots {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .showcase-player__controls button,
        .showcase-player__dots button {
          min-height: 40px;
          border: 0;
          border-radius: 999px;
          font: inherit;
          font-size: 13px;
          font-weight: 800;
          cursor: pointer;
        }

        .showcase-player__controls button {
          padding: 10px 13px;
          background: #29695b;
          color: #fff;
        }

        .showcase-player__dots button {
          padding: 9px 12px;
          background: #fffdf8;
          color: #65655c;
          box-shadow: inset 0 0 0 1px rgba(186, 186, 176, 0.22);
        }

        .showcase-player__dots button[aria-current="step"] {
          background: rgba(175, 239, 221, 0.36);
          color: #29695b;
        }

        .showcase-player__visual {
          display: grid;
          padding: clamp(18px, 3vw, 28px);
          background: #fcf9f3;
        }

        .showcase-slide-frame {
          grid-area: 1 / 1;
          border-radius: 10px;
          opacity: 0;
          pointer-events: none;
          transition: opacity 180ms ease;
          visibility: hidden;
        }

        .showcase-slide-frame[data-showcase-active="true"] {
          opacity: 1;
          pointer-events: auto;
          visibility: visible;
        }

        .showcase-slide-frame > .showcase-store {
          min-height: 100%;
        }

        .showcase-store ul {
          display: grid;
          gap: 8px;
          margin: 0;
          padding: 0;
          list-style: none;
        }

        .showcase-store li {
          display: grid;
          grid-template-columns: 16px 1fr;
          gap: 8px;
          color: #65655c;
          line-height: 1.45;
        }

        .showcase-store li::before {
          content: "";
          width: 7px;
          height: 7px;
          margin-top: 8px;
          border-radius: 999px;
          background: #29695b;
        }

        .showcase-store {
          display: grid;
          gap: 18px;
          align-content: start;
          padding: clamp(18px, 3vw, 26px);
          border-radius: 10px;
          background: #fff;
          color: #151515;
          box-shadow: 0 14px 36px rgba(56, 56, 49, 0.08);
        }

        .showcase-store--before {
          background: #fffdf8;
          box-shadow: inset 0 0 0 1px rgba(186, 186, 176, 0.38);
        }

        .showcase-store h3 {
          margin: 0;
          font-size: clamp(28px, 3.4vw, 44px);
          line-height: 1.08;
          letter-spacing: 0;
        }

        .showcase-store h4 {
          margin: 0 0 8px;
          font-size: 21px;
          line-height: 1.2;
          letter-spacing: 0;
        }

        .showcase-store__chips {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 8px;
        }

        .showcase-store__chips span {
          padding: 7px 10px;
          border-radius: 999px;
          background: #f0eee5;
          color: #383831;
          letter-spacing: 0;
          text-transform: none;
        }

        .showcase-store__body {
          display: grid;
          grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
          gap: 22px;
          align-items: start;
        }

        .showcase-store figure {
          margin: 0;
          padding: 20px;
          border: 1px solid #ded8cc;
          border-radius: 8px;
          background: #fff;
        }

        .showcase-store img {
          display: block;
          width: 100%;
          max-height: 320px;
          object-fit: contain;
        }

        .showcase-store__copy {
          display: grid;
          gap: 18px;
        }

        .showcase-store__lower {
          display: grid;
          grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.8fr);
          gap: 22px;
          padding-top: 18px;
          border-top: 1px solid #ded8cc;
        }

        .showcase-store__faq {
          display: grid;
          gap: 12px;
        }

        .showcase-store__faq article {
          display: grid;
          gap: 4px;
          padding-top: 12px;
          border-top: 1px solid #ded8cc;
        }

        .showcase-store table {
          width: 100%;
          border-collapse: collapse;
          font-size: 14px;
        }

        .showcase-store th,
        .showcase-store td {
          padding: 9px 0;
          border-bottom: 1px solid #ded8cc;
          text-align: left;
          vertical-align: top;
        }

        .showcase-store th {
          width: 42%;
          padding-right: 14px;
          color: #65655c;
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }

        @media (max-width: 980px) {
          .showcase-hero,
          .showcase-player,
          .showcase-store__body,
          .showcase-store__lower {
            grid-template-columns: minmax(0, 1fr);
          }

          .showcase-player__visual {
            padding: clamp(14px, 4vw, 20px);
          }
        }