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

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

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

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

      --brand: #165daa;
      --brand-dark: #124c89;
      --brand-light: #2f79c7;
      --brand-soft: #eaf3fd;

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

      --white: #ffffff;
      --soft: #f8fafc;
      --soft-blue: #f5f9fd;
      --border: #e2e8f0;
      --border-blue: #c7d9ec;

      --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 14px 38px rgba(15, 23, 42, 0.055),
        0 2px 8px rgba(15, 23, 42, 0.035);

      --transition: 180ms ease;
    }

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

      padding:
        clamp(30px, 2.7vw, 50px)
        0
        clamp(42px, 4vw, 70px);

      background: var(--white);
    }

    /* =========================================================
       04. INTRO
    ========================================================= */
    .intro {
      display: grid;
      grid-template-columns:
        minmax(0, 1.04fr)
        minmax(540px, 0.96fr);

      gap: clamp(48px, 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.76rem;
      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. INTRO 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.67rem;
      line-height: 1.3;

      white-space: nowrap;
    }

    /* =========================================================
       06. MAIN GRID
    ========================================================= */
    .engineering-grid {
      display: grid;
      grid-template-columns:
        minmax(0, 2.45fr)
        minmax(395px, 0.97fr);

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

    /* =========================================================
       07. ENGINEERING BOARD
    ========================================================= */
    .engineering-board {
      position: relative;
      align-self: start;

      width: 100%;
      aspect-ratio: 1750 / 899;

      overflow: hidden;

      border: 0;

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

      background:
        linear-gradient(
          135deg,
          #fbfdff 0%,
          #f4f8fc 100%
        );

      box-shadow:
        inset 0 0 0 1px var(--border),
        var(--shadow);
    }

    .engineering-board__media {
      position: absolute;
      inset: 0;
    }

    .engineering-board__media img {
      width: 100%;
      height: 100%;

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

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

    .engineering-board::after {
      content: "";

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

      pointer-events: none;

      background:
        linear-gradient(
          90deg,
          rgba(248, 250, 252, 0.12),
          transparent 28%,
          transparent 68%,
          rgba(245, 249, 253, 0.12)
        );
    }

    /* =========================================================
       08. PROJECT INPUT PANEL
    ========================================================= */
    .project-input {
      position: absolute;
      top: 15%;
      left: 1.1%;
      z-index: 5;

      width: 15.1%;

      padding: 15px 12px 14px;

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

      border:
        1px solid
        rgba(190, 208, 227, 0.86);

      border-radius: 7px;

      box-shadow:
        0 8px 22px
        rgba(31, 72, 117, 0.05);

      backdrop-filter: blur(3px);
    }

    .project-input__eyebrow {
      margin-bottom: 12px;

      color: var(--brand);

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

    .project-input__items {
      display: grid;
      gap: 11px;
    }

    .input-item {
      display: grid;
      grid-template-columns:
        24px
        minmax(0, 1fr);

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

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

      width: 23px;
      height: 23px;

      color: var(--brand);
    }

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

    .input-item__name {
      color: var(--text-2);

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

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

      color: var(--muted);

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

    .project-input__connector {
      position: absolute;
      left: 50%;
      bottom: -58px;

      width: 1px;
      height: 49px;

      background: var(--brand);
    }

    .project-input__connector::after {
      content: "→";

      position: absolute;
      left: -2px;
      bottom: -14px;

      color: var(--brand);

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

      transform: rotate(90deg);
    }

    .project-input__model {
      position: absolute;
      left: 29%;
      bottom: -76px;

      width: 150px;

      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: 0.62rem;
      line-height: 1.25;
      font-weight: 800;

      white-space: nowrap;
    }

    .project-input__model small {
      display: block;

      margin-top: 3px;

      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif;

      font-size: 0.59rem;
      font-weight: 700;
    }

    /* =========================================================
       09. ENGINEERING CALLOUTS
    ========================================================= */
    .eng-callout {
      position: absolute;
      z-index: 5;

      display: grid;
      grid-template-columns: 26px minmax(0, auto);
      column-gap: 8px;
      row-gap: 2px;
      align-items: start;

      color: var(--text);
    }

    .eng-callout__head {
      display: contents;
    }

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

      grid-column: 1;
      grid-row: 1 / span 2;

      width: 26px;
      height: 26px;

      color: var(--white);
      background: var(--brand);

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

      border-radius: 50%;

      box-shadow:
        0 2px 6px
        rgba(17, 75, 137, 0.18);

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

    .eng-callout__title {
      grid-column: 2;
      grid-row: 1;

      color: #24476c;

      font-family: Arial, sans-serif;
      font-size: 0.62rem;
      line-height: 1.15 !important;
      font-weight: 800;
    }

    .eng-callout__desc {
      grid-column: 2;
      grid-row: 2;

      margin: 0;

      color: var(--text-2);

      font-size: 0.58rem;
      line-height: 1.3 !important;
      font-weight: 700;

      white-space: pre-line;
    }

    .eng-callout__leader {
      position: absolute;

      width: 1px;

      background: #5fa0df;
    }

    .eng-callout__leader::after {
      content: "";

      position: absolute;
      left: 50%;
      bottom: -2px;

      width: 5px;
      height: 5px;

      background: var(--brand-light);

      border-radius: 50%;

      transform:
        translateX(-50%);
    }

    .eng-callout--wind {
      top: 6%;
      left: 21.7%;
    }

    .eng-callout--wind
    .eng-callout__leader {
      top: 31px;
      left: 52px;

      height: 92px;
    }

    .eng-callout--snow {
      top: 5%;
      left: 52%;
    }

    .eng-callout--snow
    .eng-callout__leader {
      top: 30px;
      left: 13px;

      height: 78px;
    }

    .eng-callout--member {
      top: 45%;
      left: 52%;
    }

    .eng-callout--member
    .eng-callout__leader {
      top: 28px;
      left: 13px;

      height: 65px;
    }

    .eng-callout--deflection {
      left: 26%;
      bottom: 23%;
    }

    .eng-callout--deflection
    .eng-callout__leader {
      bottom: 28px;
      left: 13px;

      height: 50px;
    }

    .eng-callout--node {
      left: 52%;
      bottom: 20%;
    }

    .eng-callout--node
    .eng-callout__leader {
      bottom: 29px;
      left: 13px;

      height: 48px;
    }

    /* =========================================================
       10. WIND / SNOW ARROWS
    ========================================================= */
    .wind-arrows {
      position: absolute;
      top: 11%;
      left: 17%;
      z-index: 4;

      width: 14%;
      height: 20%;
    }

    .snow-arrows {
      position: absolute;
      top: 11%;
      left: 51%;
      z-index: 4;

      width: 20%;
      height: 19%;
    }

    .wind-arrows svg,
    .snow-arrows svg {
      width: 100%;
      height: 100%;
    }

    /* =========================================================
       11. NODE DETAIL CARD
    ========================================================= */
    .node-detail {
      position: absolute;
      top: 7.3%;
      right: 1.3%;
      z-index: 6;

      width: 21.8%;

      padding: 13px 12px 12px;

      background:
        rgba(248, 251, 255, 0.96);

      border:
        1px solid
        #a9c8e8;

      border-radius: 8px;

      box-shadow:
        0 12px 30px
        rgba(31, 81, 132, 0.08);
    }

    .node-detail__eyebrow {
      color: var(--brand);

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

    .node-detail__title {
      margin-top: 6px;

      color: var(--brand-dark);

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

    .node-detail__media {
      width: 100%;
      aspect-ratio: 1456 / 1080;

      margin-top: 9px;

      overflow: hidden;

      border-radius: 5px;

      background: #dfe9f2;
    }

    .node-detail__media img {
      width: 100%;
      height: 100%;

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

    .node-detail__items {
      display: grid;
      gap: 9px;

      margin-top: 12px;
    }

    .node-detail__item {
      display: grid;
      grid-template-columns:
        23px
        minmax(0, 1fr);

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

    .node-detail__icon {
      display: grid;
      place-items: center;

      width: 22px;
      height: 22px;

      color: var(--brand);
    }

    .node-detail__icon svg {
      width: 100%;
      height: 100%;
    }

    .node-detail__name {
      color: var(--brand-dark);

      font-size: 0.6rem;
      line-height: 1.15;
      font-weight: 800;
    }

    .node-detail__desc {
      margin-top: 2px;

      color: var(--muted);

      font-size: 0.53rem;
      line-height: 1.25;
    }

    /* =========================================================
       12. BOARD BOTTOM PROCESS
    ========================================================= */
    .board-flow {
      position: absolute;
      left: 17.8%;
      bottom: 5.6%;
      z-index: 5;

      display: flex;
      align-items: center;

      width: 52%;
    }

    .board-flow__step {
      display: flex;
      align-items: center;
      gap: 8px;

      min-width: 0;

      color: var(--brand);
    }

    .board-flow__step:not(:last-child)::after {
      content: "→";

      margin: 0 20px;

      color: var(--brand);

      font-size: 1rem;
    }

    .board-flow__line {
      width: 22px;

      border-top:
        1px dashed
        var(--brand);
    }

    .board-flow__title {
      font-family: Arial, sans-serif;

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

    .board-flow__desc {
      margin-top: 4px;

      color: var(--text-2);

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

    /* =========================================================
       13. WORKFLOW CARD
    ========================================================= */
    .workflow {
      height: 100%;

      padding:
        22px
        24px
        20px;

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

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

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

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

    .workflow__eyebrow {
      margin-bottom: 7px;

      color: var(--brand);

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

    .workflow__title {
      margin: 0;

      color: var(--text);

      font-size: clamp(1.45rem, 1.55vw, 1.72rem);
      line-height: 1.15;
      letter-spacing: -0.025em;

      font-weight: 900;
    }

    .workflow-list {
      position: relative;

      display: grid;

      margin-top: 23px;
    }

    .workflow-list::before {
      content: "";

      position: absolute;
      top: 20px;
      bottom: 32px;
      left: 18px;

      border-left:
        1px dashed
        #83aeda;
    }

    .workflow-step {
      position: relative;

      display: grid;
      grid-template-columns:
        40px
        51px
        minmax(0, 1fr);

      gap: 13px;

      min-height: 112px;

      padding: 0 0 18px;
    }

    .workflow-step:not(:last-child) {
      margin-bottom: 10px;

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

    .workflow-step:last-child {
      min-height: 96px;
      padding-bottom: 0;
    }

    .workflow-step__number {
      position: relative;
      z-index: 2;

      display: grid;
      place-items: center;

      align-self: start;

      width: 36px;
      height: 36px;

      color: var(--white);
      background: var(--brand);

      border-radius: 3px;

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

      box-shadow:
        0 2px 6px
        rgba(22, 93, 170, 0.18);
    }

    .workflow-step__icon {
      display: grid;
      place-items: center;

      width: 48px;
      height: 48px;

      color: var(--brand);
    }

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

    .workflow-step__copy {
      min-width: 0;

      padding-top: 3px;
    }

    .workflow-step__heading {
      display: flex;
      align-items: baseline;
      gap: 8px;

      color: var(--brand-dark);
    }

    .workflow-step__en {
      font-family: Arial, sans-serif;

      font-size: 0.66rem;
      line-height: 1.15;
      font-weight: 800;
    }

    .workflow-step__divider {
      color: #8ca4bd;

      font-size: 0.67rem;
    }

    .workflow-step__cn {
      font-size: 0.78rem;
      line-height: 1.2;
      font-weight: 800;
    }

    .workflow-step__description {
      margin-top: 8px;

      color: var(--text-2);

      font-size: 0.68rem;
      line-height: 1.55;
    }

    /* =========================================================
       14. DELIVERABLES
    ========================================================= */
    .deliverables {
      display: grid;
      grid-template-columns:
        260px
        minmax(0, 1fr)
        190px;

      gap: 18px;
      align-items: center;

      margin-top: 14px;

      padding:
        18px
        20px
        18px
        25px;

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

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

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

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

    .deliverables__eyebrow {
      margin-bottom: 8px;

      color: var(--brand);

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

    .deliverables__title {
      margin: 0;

      color: var(--brand);

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

      font-weight: 900;
    }

    .deliverables-list {
      display: grid;
      grid-template-columns:
        repeat(5, minmax(0, 1fr));

      align-items: center;
    }

    .deliverable {
      position: relative;

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

      gap: 10px;
      align-items: center;

      min-width: 0;

      padding: 0 16px;
    }

    .deliverable:first-child {
      padding-left: 0;
    }

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

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

      width: 1px;
      height: 52px;

      background: var(--border);
    }

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

      width: 47px;
      height: 47px;

      color: var(--brand);
    }

    .deliverable__icon svg {
      width: 100%;
      height: 100%;
    }

    .deliverable__title {
      color: var(--text);

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

      white-space: nowrap;
    }

    .deliverable__en {
      margin-top: 4px;

      color: var(--brand-dark);

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

    .deliverable__desc {
      margin-top: 5px;

      color: var(--muted);

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

      white-space: nowrap;
    }

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

      min-height: 55px;

      padding: 11px 15px;

      color: var(--white);
      background:
        linear-gradient(
          135deg,
          #1767c9,
          #1158a9
        );

      border-radius: 7px;

      cursor: pointer;
      text-decoration: none;

      font-size: 0.79rem;
      line-height: 1.35;
      font-weight: 800;

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

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

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

    .deliverables__cta-arrow {
      margin-left: 12px;

      font-size: 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 - 1280
    ========================================================= */
    @media (max-width: 1280px) {
  .page {
        width: 90%;
      }

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

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

      .engineering-grid {
        grid-template-columns:
          minmax(0, 1.7fr)
          minmax(370px, 1fr);
      }

      .project-input {
        display: none;
      }

      .node-detail {
        padding: 9px;
      }

      .node-detail__items {
        display: none;
      }

      .deliverables {
        grid-template-columns:
          220px
          1fr;
      }

      .deliverables__cta {
        grid-column: 1 / -1;

        min-height: 50px;
      }
    }

    /* =========================================================
       17. TABLET
    ========================================================= */
    @media (max-width: 1050px) {
      .engineering-grid {
        grid-template-columns: 1fr;
      }

      .engineering-board {
        aspect-ratio: 1750 / 899;
      }

      .workflow {
        padding-bottom: 23px;
      }

      .workflow-list {
        grid-template-columns:
          repeat(2, 1fr);

        gap: 18px;
      }

      .workflow-list::before {
        display: none;
      }

      .workflow-step {
        min-height: auto;

        padding: 15px;

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

        border-radius: 8px;
      }

      .workflow-step:not(:last-child) {
        margin-bottom: 0;
      }

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

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

        row-gap: 22px;
      }

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

    /* =========================================================
       18. SMALL TABLET
    ========================================================= */
    @media (max-width: 820px) {
      .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;
      }

      .engineering-board {
        aspect-ratio: 1750 / 899;
      }

      .project-input {
        top: 12%;
        width: 22%;
      }

      .node-detail {
        width: 27%;
      }

      .eng-callout__desc {
        display: none;
      }

      .eng-callout__title {
        font-size: 0.55rem;
      }

      .board-flow {
        left: 22%;
        width: 53%;
      }

      .board-flow__step:not(:last-child)::after {
        margin-inline: 10px;
      }
    }

    /* =========================================================
       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,
            9vw,
            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);
      }

      .engineering-board {
        aspect-ratio: 0.77 / 1;
      }

      .engineering-board__media img {
        object-position: 50% center;
      }

      .project-input {
        top: 4%;
        left: 4%;

        width: 46%;

        padding: 11px 10px;
      }

      .project-input__items {
        gap: 7px;
      }

      .project-input__items
      .input-item:nth-child(n+4) {
        display: none;
      }

      .project-input__connector,
      .project-input__model {
        display: none;
      }

      .node-detail {
        top: 4%;
        right: 4%;

        width: 42%;

        padding: 10px;
      }

      .node-detail__items {
        display: none;
      }

      .node-detail__title {
        font-size: 0.6rem;
      }

      .eng-callout__number {
        width: 23px;
        height: 23px;

        font-size: 0.58rem;
      }

      .eng-callout__title {
        display: none;
      }

      .eng-callout__leader {
        height: 35px !important;
      }

      .eng-callout--wind {
        top: 37%;
        left: 14%;
      }

      .eng-callout--snow {
        top: 34%;
        left: 70%;
      }

      .eng-callout--member {
        top: 61%;
        left: 72%;
      }

      .eng-callout--deflection {
        bottom: 20%;
        left: 17%;
      }

      .eng-callout--node {
        bottom: 21%;
        left: 69%;
      }

      .wind-arrows {
        top: 33%;
        left: 9%;
        width: 24%;
      }

      .snow-arrows {
        top: 31%;
        left: 55%;
        width: 30%;
      }

      .board-flow {
        left: 5%;
        bottom: 4%;

        width: 90%;

        justify-content: space-between;
      }

      .board-flow__line {
        display: none;
      }

      .board-flow__desc {
        display: none;
      }

      .board-flow__step:not(:last-child)::after {
        margin-inline: 5px;

        font-size: 0.8rem;
      }

      .board-flow__title {
        font-size: 0.48rem;
      }

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

      .workflow-step {
        grid-template-columns:
          38px
          47px
          minmax(0, 1fr);
      }

      .deliverables {
        padding: 20px 16px;
      }

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

      .deliverable {
        min-height: 62px;

        padding: 0;
      }

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

        width: 100%;
        height: 1px;
      }

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

      .deliverable__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;
      }
    }
}