/* Home screen 08 — migrated from 模板素材/08.html */
.home08-inline {
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: #0f172a;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}

.home08-inline *,
.home08-inline *::before,
.home08-inline *::after {
  box-sizing: border-box;
}

.home08-inline button {
  margin: 0;
  font: inherit;
}

@scope (.home08-inline) {
/* =========================================================
       01. DESIGN TOKENS
       1920px × 85% = 1632px
    ========================================================= */
    :scope {
      --design-width: 1920px;
      --content-max: 1632px;

      --brand: #165daa;
      --brand-dark: #124c89;
      --brand-light: #2473c5;
      --brand-bright: #0f6fdd;
      --brand-soft: #eaf3fd;

      --text: #0f172a;
      --text-2: #334155;
      --muted: #5d6775;
      --muted-2: #7b8796;

      --white: #ffffff;
      --soft: #f8fafc;
      --soft-blue: #f4f8fd;
      --border: #e2e8f0;
      --border-blue: #cadced;

      --navy: #04172d;
      --navy-2: #072746;

      --green: #23a879;

      --body: 1rem;
      --lead: 0.9rem;
      --small: 0.82rem;
      --tiny: 0.74rem;

      --section-title:
        clamp(1.7rem, 2.45vw, 2.5rem);

      --radius-lg: 10px;
      --radius-md: 10px;
      --radius-sm: 10px;

      --shadow:
        0 15px 42px rgba(15, 23, 42, 0.055),
        0 2px 8px rgba(15, 23, 42, 0.035);

      --transition: 180ms ease;
    }

    /* =========================================================
       03. PAGE
       No nav / no global header / no footer
    ========================================================= */
  .page {
      width: 85%;
      max-width: var(--content-max);
      margin: 0 auto;

      padding:
        clamp(30px, 2.6vw, 50px)
        0
        clamp(42px, 4vw, 72px);

      background: var(--white);
    }

    /* =========================================================
       04. INTRO
    ========================================================= */
    .intro {
      display: grid;

      grid-template-columns:
        minmax(0, 1.02fr)
        minmax(530px, 0.98fr);

      gap: clamp(46px, 5vw, 88px);
      align-items: end;

      margin-bottom: 20px;
    }

    .intro__eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;

      margin-bottom: 18px;

      color: var(--brand);

      font-size: var(--tiny);
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0.018em;
    }

    .intro__number {
      font-size:
        clamp(
          2rem,
          2.55vw,
          2.7rem
        );

      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.045em;
    }

    .intro__slash {
      font-size: 1.18rem;
    }

    .intro__label {
      font-size: 0.77rem;
      letter-spacing: 0.02em;
    }

    .intro__title {
      margin: 0;

      color: #111315;

      font-size:
        clamp(
          2.3rem,
          3.05vw,
          3.25rem
        );

      line-height: 1.08;
      letter-spacing: -0.045em;

      font-weight: 900;
    }

    .intro__title strong {
      color: var(--brand);
      font-weight: inherit;
    }

    .intro__description {
      max-width: none;

      margin: 17px 0 0;

      color: var(--muted);

      font-size: var(--lead);
      line-height: 1.74;
    }

    /* =========================================================
       05. TOP FEATURES
    ========================================================= */
    .intro-features {
      display: grid;
      grid-template-columns:
        repeat(4, minmax(0, 1fr));

      align-items: stretch;
    }

    .intro-feature {
      position: relative;

      display: grid;

      grid-template-columns:
        43px
        minmax(0, 1fr);

      gap: 11px;
      align-items: center;

      min-height: 68px;

      padding: 4px 20px;
    }

    .intro-feature:first-child {
      padding-left: 0;
    }

    .intro-feature:last-child {
      padding-right: 0;
    }

    .intro-feature:not(:last-child)::after {
      content: "";

      position: absolute;
      top: 8px;
      right: 0;

      width: 1px;
      height: 52px;

      background: var(--border);
    }

    .intro-feature__icon {
      display: grid;
      place-items: center;

      width: 41px;
      height: 41px;

      color: var(--brand);
    }

    .intro-feature__icon svg {
      width: 100%;
      height: 100%;
    }

    .intro-feature__title {
      margin-bottom: 4px;

      color: var(--text);

      font-size: 0.82rem;
      line-height: 1.15;
      font-weight: 800;

      white-space: nowrap;
    }

    .intro-feature__desc {
      color: var(--muted);

      font-size: 0.66rem;
      line-height: 1.3;

      white-space: nowrap;
    }

    /* =========================================================
       06. MAIN QUALITY GRID
    ========================================================= */
    .quality-grid {
      display: grid;

      grid-template-columns:
        205px
        minmax(0, 1fr)
        345px;

      gap: 14px;
      align-items: stretch;
    }

    /* =========================================================
       07. QUALITY INPUT
    ========================================================= */
    .quality-input {
      overflow: hidden;

      background:
        linear-gradient(
          145deg,
          #fbfdff 0%,
          #f5f9fd 100%
        );

      border:
        1px solid
        var(--border);

      border-radius: var(--radius-lg);

      box-shadow: var(--shadow);
    }

    .quality-input__main {
      padding:
        20px
        19px
        18px;
    }

    .quality-input__eyebrow {
      margin-bottom: 5px;

      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: 0.69rem;
      line-height: 1;
      font-weight: 800;
    }

    .quality-input__title {
      margin-bottom: 18px;

      color: var(--brand);

      font-size: 0.78rem;
      line-height: 1.3;
      font-weight: 800;
    }

    .quality-input__list {
      display: grid;
      gap: 17px;
    }

    .quality-input-item {
      display: grid;

      grid-template-columns:
        29px
        minmax(0, 1fr);

      gap: 9px;
      align-items: start;
    }

    .quality-input-item__icon {
      display: grid;
      place-items: center;

      width: 27px;
      height: 27px;

      color: var(--brand);
    }

    .quality-input-item__icon svg {
      width: 100%;
      height: 100%;
    }

    .quality-input-item__title {
      color: var(--text);

      font-size: 0.68rem;
      line-height: 1.2;
      font-weight: 800;
    }

    .quality-input-item__desc {
      margin-top: 3px;

      color: var(--muted);

      font-size: 0.58rem;
      line-height: 1.35;
    }

    /* =========================================================
       08. INPUT FOOTER
    ========================================================= */
    .quality-input__footer {
      display: grid;
      justify-items: center;

      gap: 8px;

      padding:
        18px
        16px;

      color: var(--white);

      background:
        linear-gradient(
          155deg,
          #135db0,
          #0c4388
        );

      text-align: center;
    }

    .quality-input__footer-icon {
      width: 35px;
      height: 35px;

      color: var(--white);
    }

    .quality-input__footer-icon svg {
      width: 100%;
      height: 100%;
    }

    .quality-input__footer-en {
      font-family: Arial, sans-serif;

      font-size: 0.64rem;
      line-height: 1.1;
      font-weight: 800;
    }

    .quality-input__footer-cn {
      font-size: 0.68rem;
      line-height: 1.2;
      font-weight: 800;
    }

    .quality-input__footer-arrow {
      font-size: 1.25rem;
      line-height: 1;
    }

    /* =========================================================
       09. MAIN VISUAL
    ========================================================= */
    .quality-scene {
      position: relative;
      isolation: isolate;

      width: 100%;
      aspect-ratio: 1672 / 940;

      overflow: hidden;

      border:
        1px solid
        var(--border-blue);

      border-radius: var(--radius-lg);

      background: #697989;

      box-shadow: var(--shadow);
    }

    .quality-scene__media {
      position: absolute;
      inset: 0;
      z-index: -3;

      width: 100%;
      height: 100%;
    }

    .quality-scene__media img {
      width: 100%;
      height: 100%;

      object-fit: contain;
      object-position: center;

      user-select: none;
      pointer-events: none;
    }

    .quality-scene::before {
      content: "";

      position: absolute;
      inset: 0;
      z-index: -2;

      background:
        linear-gradient(
          90deg,
          rgba(7, 24, 42, 0.26) 0%,
          rgba(7, 25, 44, 0.04) 36%,
          rgba(4, 19, 36, 0.08) 68%,
          rgba(3, 17, 32, 0.28) 100%
        ),
        linear-gradient(
          0deg,
          rgba(3, 17, 30, 0.27) 0%,
          transparent 44%
        );

      pointer-events: none;
    }

    /* Keep the module locked to the generated asset's natural ratio at
       every breakpoint: full image, no crop, no letterbox and no overflow. */
    .quality-scene {
      aspect-ratio: 1672 / 940;
      align-self: start;
    }

    .quality-scene__media {
      overflow: hidden;
    }

    .quality-scene__media img {
      display: block;
      object-fit: contain;
    }

    /* =========================================================
       10. QUALITY CALLOUTS
    ========================================================= */
    .quality-callout {
      position: absolute;
      z-index: 5;

      color: var(--white);

      text-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.48);
    }

    .quality-callout__head {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .quality-callout__number {
      display: grid;
      place-items: center;

      width: 30px;
      height: 30px;

      flex: 0 0 auto;

      color: var(--white);
      background: rgba(18, 91, 175, 0.96);

      border:
        2px solid
        rgba(255, 255, 255, 0.92);

      border-radius: 50%;

      font-family: Arial, sans-serif;
      font-size: 0.7rem;
      line-height: 1;
      font-weight: 800;
    }

    .quality-callout__en {
      font-family: Arial, sans-serif;

      font-size: 0.7rem;
      line-height: 1;
      font-weight: 800;
    }

    .quality-callout__cn {
      margin-top: 6px;

      color: var(--white);

      font-size: 0.72rem;
      line-height: 1.25;
      font-weight: 800;
    }

    .quality-callout__desc {
      margin-top: 4px;

      color:
        rgba(255, 255, 255, 0.84);

      font-size: 0.62rem;
      line-height: 1.42;

      white-space: pre-line;
    }

    .quality-callout__status {
      display: flex;
      align-items: center;
      justify-content: space-between;

      width: 128px;

      margin-top: 9px;
      padding:
        5px
        7px;

      color: var(--white);

      background:
        rgba(9, 30, 51, 0.58);

      border:
        1px solid
        rgba(255, 255, 255, 0.43);

      border-radius: 4px;

      font-family: Arial, sans-serif;
      font-size: 0.48rem;
      line-height: 1.25;

      text-shadow: none;
    }

    .quality-callout__status small {
      display: block;

      font-size: 0.45rem;
    }

    .quality-callout__check {
      display: grid;
      place-items: center;

      width: 18px;
      height: 18px;

      color: #67e2af;

      border:
        1px solid
        #67e2af;

      border-radius: 50%;

      font-size: 0.56rem;
      line-height: 1;
    }

    .quality-callout__leader {
      position: absolute;

      height: 1px;

      background:
        rgba(255, 255, 255, 0.78);

      transform-origin: left center;
    }

    .quality-callout__leader::before,
    .quality-callout__leader::after {
      content: "";

      position: absolute;
      top: 50%;

      width: 6px;
      height: 6px;

      background: var(--white);

      border-radius: 50%;

      transform:
        translateY(-50%);
    }

    .quality-callout__leader::before {
      left: -2px;
    }

    .quality-callout__leader::after {
      right: -2px;
    }

    .quality-callout--1 {
      top: 4%;
      left: 4.2%;
    }

    .quality-callout--1
    .quality-callout__leader {
      left: calc(100% + 9px);
      top: 18px;

      width: 136px;

      transform: rotate(1deg);
    }

    .quality-callout--2 {
      top: 36%;
      left: 4.2%;
    }

    .quality-callout--2
    .quality-callout__leader {
      left: calc(100% + 9px);
      top: 18px;

      width: 131px;

      transform: rotate(0deg);
    }

    .quality-callout--3 {
      bottom: 10%;
      left: 4.2%;
    }

    .quality-callout--3
    .quality-callout__leader {
      left: calc(100% + 9px);
      top: 18px;

      width: 148px;

      transform: rotate(2deg);
    }

    .quality-callout--4 {
      top: 5%;
      right: 3.4%;
    }

    .quality-callout--4
    .quality-callout__leader {
      right: calc(100% + 9px);
      top: 18px;

      width: 130px;

      transform: rotate(-2deg);
    }

    .quality-callout--5 {
      top: 35%;
      right: 3.4%;
    }

    .quality-callout--5
    .quality-callout__leader {
      right: calc(100% + 9px);
      top: 18px;

      width: 119px;

      transform: rotate(0deg);
    }

    .quality-callout--6 {
      bottom: 9%;
      right: 3.4%;
    }

    .quality-callout--6
    .quality-callout__leader {
      right: calc(100% + 9px);
      top: 18px;

      width: 113px;

      transform: rotate(-2deg);
    }

    /* =========================================================
       11. QUALITY SIDE
    ========================================================= */
    .quality-side {
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      gap: 13px;
      align-content: stretch;
    }

    /* =========================================================
       12. QUALITY GATES
    ========================================================= */
    .quality-gates {
      height: 100%;
      box-sizing: border-box;

      padding:
        22px
        23px
        19px;

      background:
        linear-gradient(
          145deg,
          #fbfdff 0%,
          #f5f9fd 100%
        );

      border:
        1px solid
        var(--border);

      border-radius: var(--radius-lg);

      box-shadow: var(--shadow);
    }

    .quality-gates__eyebrow {
      margin-bottom: 5px;

      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: 0.68rem;
      line-height: 1;
      font-weight: 800;
    }

    .quality-gates__title {
      color: var(--brand);

      font-size: 0.78rem;
      line-height: 1.25;
      font-weight: 800;
    }

    .gate-list {
      display: grid;
      gap: 13px;

      margin-top: 20px;
    }

    .gate {
      position: relative;

      display: grid;

      grid-template-columns:
        88px
        minmax(0, 1fr);

      gap: 15px;
      align-items: center;

      min-height: 104px;
    }

    .gate:not(:last-child)::after {
      content: "↓";

      position: absolute;
      left: 40px;
      bottom: -16px;

      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: 1.15rem;
      line-height: 1;
    }

    .gate__icon {
      display: grid;
      place-items: center;

      width: 84px;
      height: 66px;

      color: var(--brand);

      background:
        rgba(248, 250, 252, 0.82);

      border:
        1px solid
        var(--border);

      border-radius: 8px;
    }

    .gate__icon svg {
      width: 45px;
      height: 45px;
    }

    .gate__en {
      color: var(--brand-dark);

      font-family: Arial, sans-serif;
      font-size: 0.68rem;
      line-height: 1.2;
      font-weight: 800;
    }

    .gate__title {
      margin-top: 4px;

      color: var(--brand);

      font-size: 0.76rem;
      line-height: 1.25;
      font-weight: 800;
    }

    .gate__description {
      margin-top: 5px;

      color: var(--text-2);

      font-size: 0.63rem;
      line-height: 1.45;
    }

    /* =========================================================
       13. TRACEABILITY
    ========================================================= */
    .traceability {
      padding:
        15px
        15px
        14px;

      background:
        linear-gradient(
          145deg,
          #fbfdff,
          #f6fafe
        );

      border:
        1px solid
        var(--border);

      border-radius: var(--radius-lg);

      box-shadow: var(--shadow);
    }

    .traceability__head {
      display: flex;
      align-items: center;

      gap: 11px;

      margin-bottom: 13px;
    }

    .traceability__head::before,
    .traceability__head::after {
      content: "";

      flex: 1;

      height: 1px;

      background: #bcd2e8;
    }

    .traceability__title {
      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: 0.66rem;
      line-height: 1;
      font-weight: 800;

      white-space: nowrap;
    }

    .trace-flow {
      display: grid;

      grid-template-columns:
        repeat(6, minmax(0, 1fr));

      gap: 2px;
      align-items: start;
    }

    .trace-step {
      position: relative;

      display: grid;
      justify-items: center;

      min-width: 0;

      text-align: center;
    }

    .trace-step:not(:last-child)::after {
      content: "→";

      position: absolute;
      top: 15px;
      right: -5px;

      color: var(--brand);

      font-size: 0.8rem;
      line-height: 1;
    }

    .trace-step__icon {
      width: 31px;
      height: 31px;

      color: var(--brand);
    }

    .trace-step__icon svg {
      width: 100%;
      height: 100%;
    }

    .trace-step__name {
      margin-top: 6px;

      color: var(--text);

      font-size: 0.51rem;
      line-height: 1.15;
      font-weight: 800;

      white-space: nowrap;
    }

    .trace-step__en {
      margin-top: 3px;

      color: var(--muted);

      font-family: Arial, sans-serif;
      font-size: 0.43rem;
      line-height: 1;
    }

    /* =========================================================
       14. QUALITY EVIDENCE
    ========================================================= */
    .evidence {
      display: grid;

      grid-template-columns:
        180px
        minmax(0, 1fr)
        190px;

      gap: 18px;
      align-items: center;

      margin-top: 14px;

      padding:
        18px
        19px
        18px
        24px;

      background:
        linear-gradient(
          90deg,
          #fbfdff 0%,
          #ffffff 55%,
          #f6f9fd 100%
        );

      border:
        1px solid
        var(--border);

      border-radius: var(--radius-lg);

      box-shadow: var(--shadow);
    }

    .evidence__eyebrow {
      margin-bottom: 8px;

      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: 0.67rem;
      line-height: 1;
      font-weight: 800;
    }

    .evidence__title {
      margin: 0;

      color: var(--brand);

      font-size: 1.28rem;
      line-height: 1.2;
      letter-spacing: -0.025em;

      font-weight: 900;
    }

    .evidence-list {
      display: grid;

      grid-template-columns:
        repeat(6, minmax(0, 1fr));

      align-items: center;
    }

    .evidence-item {
      position: relative;

      display: grid;

      grid-template-columns:
        45px
        minmax(0, 1fr);

      gap: 9px;
      align-items: center;

      min-width: 0;

      padding: 0 15px;
    }

    .evidence-item:first-child {
      padding-left: 0;
    }

    .evidence-item:not(:last-child)::after {
      content: "";

      position: absolute;
      top: 5px;
      right: 0;

      width: 1px;
      height: 51px;

      background: var(--border);
    }

    .evidence-item__icon {
      width: 43px;
      height: 43px;

      color: var(--brand);
    }

    .evidence-item__icon svg {
      width: 100%;
      height: 100%;
    }

    .evidence-item__title {
      color: var(--text);

      font-size: 0.66rem;
      line-height: 1.2;
      font-weight: 800;

      white-space: nowrap;
    }

    .evidence-item__en {
      margin-top: 3px;

      color: var(--muted);

      font-family: Arial, sans-serif;
      font-size: 0.52rem;
      line-height: 1.15;
    }

    .evidence-item__desc {
      margin-top: 4px;

      color: var(--muted);

      font-size: 0.52rem;
      line-height: 1.25;

      white-space: nowrap;
    }

    .evidence__cta {
      display: flex;
      align-items: center;
      justify-content: center;

      min-height: 55px;

      padding: 10px 14px;

      color: var(--white);

      background:
        linear-gradient(
          135deg,
          #1769cd,
          #1056a7
        );

      border-radius: 7px;

      cursor: pointer;
      text-decoration: none;

      font-size: 0.78rem;
      line-height: 1.3;
      font-weight: 800;

      transition:
        transform var(--transition),
        background var(--transition);
    }

    .evidence__cta:hover {
      transform: translateY(-1px);

      background:
        linear-gradient(
          135deg,
          #1e78e4,
          #124c89
        );
    }

    .evidence__cta-arrow {
      margin-left: 11px;

      font-size: 1.1rem;
    }

    /* =========================================================
       15. TOAST
    ========================================================= */
    .toast {
      position: fixed;
      left: 50%;
      bottom: 28px;
      z-index: 100;

      max-width:
        calc(100% - 30px);

      padding: 10px 17px;

      color: var(--white);

      background:
        rgba(15, 23, 42, 0.95);

      border-radius: 8px;

      font-size: var(--small);
      line-height: 1.4;

      box-shadow:
        0 12px 36px
        rgba(15, 23, 42, 0.22);

      opacity: 0;
      visibility: hidden;

      transform:
        translate(-50%, 10px);

      transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
    }

    .toast.is-visible {
      opacity: 1;
      visibility: visible;

      transform:
        translate(-50%, 0);
    }

    /* =========================================================
       16. RESPONSIVE ≤ 1320
    ========================================================= */
    @media (max-width: 1320px) {
  .page {
        width: 90%;
      }

      .intro {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .intro-features {
        max-width: 930px;
      }

      .quality-grid {
        grid-template-columns:
          190px
          minmax(0, 1fr)
          310px;
      }

      .evidence {
        grid-template-columns:
          165px
          minmax(0, 1fr);
      }

      .evidence__cta {
        grid-column: 1 / -1;
      }
    }

    /* =========================================================
       17. RESPONSIVE ≤ 1100
    ========================================================= */
    @media (max-width: 1100px) {
      .quality-grid {
        grid-template-columns:
          1fr
          320px;
      }

      .quality-input {
        grid-column: 1 / -1;
      }

      .quality-input__main {
        display: grid;

        grid-template-columns:
          180px
          minmax(0, 1fr);

        gap: 20px;
        align-items: center;
      }

      .quality-input__list {
        grid-template-columns:
          repeat(3, 1fr);

        gap:
          14px
          22px;
      }

      .quality-input__footer {
        display: flex;
        justify-content: flex-start;

        text-align: left;
      }

      .quality-input__footer-arrow {
        margin-left: auto;
      }

      .quality-scene {
        aspect-ratio: 1672 / 940;
      }

      .quality-side {
        grid-column: 2;
      }

      .trace-flow {
        grid-template-columns:
          repeat(3, 1fr);

        row-gap: 15px;
      }

      .trace-step:nth-child(3)::after {
        display: none;
      }

      .evidence-list {
        grid-template-columns:
          repeat(3, 1fr);

        row-gap: 22px;
      }

      .evidence-item:nth-child(3)::after {
        display: none;
      }
    }

    /* =========================================================
       18. RESPONSIVE ≤ 850
    ========================================================= */
    @media (max-width: 850px) {
      .intro__title {
        font-size:
          clamp(
            2.1rem,
            7vw,
            2.95rem
          );
      }

      .intro-features {
        grid-template-columns:
          repeat(2, 1fr);

        border-top:
          1px solid
          var(--border);

        border-bottom:
          1px solid
          var(--border);
      }

      .intro-feature {
        padding:
          15px
          18px;
      }

      .intro-feature:first-child {
        padding-left: 18px;
      }

      .intro-feature:last-child {
        padding-right: 18px;
      }

      .intro-feature:nth-child(1),
      .intro-feature:nth-child(2) {
        border-bottom:
          1px solid
          var(--border);
      }

      .intro-feature:nth-child(2)::after {
        display: none;
      }

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

      .quality-input,
      .quality-scene,
      .quality-side {
        grid-column: auto;
      }

      .quality-scene {
        aspect-ratio: 1672 / 940;
      }

      .quality-side {
        grid-template-columns:
          1fr
          1fr;
      }

      .quality-callout__desc {
        display: none;
      }

      .quality-callout__status {
        width: 108px;
      }

      .quality-callout__leader {
        width: 65px !important;
      }
    }

    /* =========================================================
       19. MOBILE
    ========================================================= */
    @media (max-width: 620px) {
  .page {
        width:
          calc(100% - 28px);

        padding-top: 26px;
        padding-bottom: 42px;
      }

      .intro {
        margin-bottom: 17px;
      }

      .intro__eyebrow {
        gap: 9px;
        margin-bottom: 13px;
      }

      .intro__number {
        font-size: 2rem;
      }

      .intro__title {
        font-size:
          clamp(
            1.95rem,
            9.3vw,
            2.55rem
          );
      }

      .intro__description {
        font-size: 0.9rem;
        line-height: 1.68;
      }

      .intro-features {
        grid-template-columns: 1fr;
      }

      .intro-feature {
        min-height: 67px;
      }

      .intro-feature:not(:last-child)::after {
        display: none;
      }

      .intro-feature:nth-child(1),
      .intro-feature:nth-child(2),
      .intro-feature:nth-child(3) {
        border-bottom:
          1px solid
          var(--border);
      }

      .quality-input__main {
        display: block;
      }

      .quality-input__list {
        grid-template-columns:
          repeat(2, 1fr);

        margin-top: 17px;
      }

      .quality-scene {
        aspect-ratio: 1672 / 940;
      }

      .quality-scene__media img {
        object-position: center;
      }

      .quality-callout__number {
        width: 24px;
        height: 24px;

        font-size: 0.58rem;
      }

      .quality-callout__en {
        font-size: 0.55rem;
      }

      .quality-callout__cn {
        font-size: 0.59rem;
      }

      .quality-callout__status {
        display: none;
      }

      .quality-callout__leader {
        width: 43px !important;
      }

      .quality-callout--1 {
        top: 5%;
        left: 3%;
      }

      .quality-callout--2 {
        top: 34%;
        left: 3%;
      }

      .quality-callout--3 {
        bottom: 8%;
        left: 3%;
      }

      .quality-callout--4 {
        top: 6%;
        right: 3%;
      }

      .quality-callout--5 {
        top: 35%;
        right: 3%;
      }

      .quality-callout--6 {
        bottom: 8%;
        right: 3%;
      }

      .quality-side {
        grid-template-columns: 1fr;
      }

      .gate {
        grid-template-columns:
          72px
          minmax(0, 1fr);

        min-height: 94px;
      }

      .gate__icon {
        width: 68px;
        height: 58px;
      }

      .gate:not(:last-child)::after {
        left: 31px;
      }

      .trace-flow {
        grid-template-columns:
          repeat(2, 1fr);
      }

      .trace-step:nth-child(2)::after,
      .trace-step:nth-child(4)::after {
        display: none;
      }

      .trace-step:nth-child(3)::after {
        display: block;
      }

      .evidence {
        grid-template-columns: 1fr;

        padding:
          20px
          16px;
      }

      .evidence-list {
        grid-template-columns: 1fr;
      }

      .evidence-item {
        min-height: 61px;

        padding: 0;
      }

      .evidence-item:not(:last-child)::after {
        top: auto;
        left: 0;
        right: 0;
        bottom: -10px;

        width: 100%;
        height: 1px;
      }

      .evidence-item:nth-child(3)::after {
        display: block;
      }

      .evidence-item__desc {
        white-space: normal;
      }
    }

    /* =========================================================
       20. REDUCED MOTION
    ========================================================= */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior:
          auto !important;

        transition-duration:
          0.001ms !important;

        animation-duration:
          0.001ms !important;
      }
    }
}