/* Screen 4: upload/data. */

.upload h2 {
  font-size: clamp(52px, 3.8vw, 64px);
  line-height: 1.12;
}

.upload-dashboard {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 958px);
}

.upload-list {
  position: absolute;
  left: -13%;
  bottom: 2%;
  width: min(78%, 742px);
  transform: rotate(-4.5deg);
}

@media (max-width: 740px) {
  .upload-list {
      margin-top: -4px;
    }
}

@media (min-width: 741px) {
  .upload {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
      min-height: 100svh;
    }

  .upload::before {
      inset: 3.2% -9% -8% 46.5%;
      background: rgba(223, 244, 235, 0.78);
      transform: rotate(-7deg);
    }

  .upload::after {
      inset: auto -14% -18% 35%;
      height: 31%;
      background: rgba(217, 246, 232, 0.66);
    }

  .upload > .molecule--tr {
      top: -1.4%;
      right: -0.5%;
      width: min(18.7vw, 312px);
    }

  .upload > .molecule--upload-mid {
      top: 51%;
      left: 20.2%;
      width: min(14vw, 235px);
      opacity: 0.18;
    }

  .upload__inner {
      container-type: inline-size;
      display: block;
      position: relative;
      width: min(100vw, calc(100svh * 1672 / 941));
      max-width: 1672px;
      aspect-ratio: 1672 / 941;
      min-height: 0;
      height: auto;
      padding: 0;
      margin: 0;
    }

  @supports not (height: 100svh) {
    .upload__inner {
          width: min(100vw, calc(100vh * 1672 / 941));
        }
  }

  .upload__copy {
      position: absolute;
      left: 3.58%;
      top: 6.08%;
      width: 40.8%;
      max-width: none;
    }

  .upload .eyebrow {
      gap: 1.08cqw;
      margin: 0 0 1.82cqw;
      font-size: 1.02cqw;
      line-height: 1.2;
    }

  .upload .eyebrow::before {
      flex-basis: 2.87cqw;
      width: 2.87cqw;
      height: 0.18cqw;
    }

  .upload h2 {
      font-size: 3.72cqw;
      line-height: 1.14;
    }

  .upload .lead {
      max-width: 32.2cqw;
      margin-top: 1.82cqw;
      font-size: 1.32cqw;
      line-height: 1.5;
    }

  .upload__visual {
      position: absolute;
      inset: 0;
      width: 100%;
      min-height: 0;
      pointer-events: none;
    }

  .upload .product-shot {
      border-radius: 0;
      filter: none;
    }

  .upload-dashboard {
      position: absolute;
      top: 5.53%;
      left: 41.39%;
      right: auto;
      width: 57.3%;
    }

  .upload-list {
      position: absolute;
      top: 61.75%;
      left: 34.45%;
      bottom: auto;
      width: 44.38%;
      transform: none;
    }

  .upload__details {
      position: absolute;
      left: 3.58%;
      top: 49.84%;
      width: 37.2%;
      display: grid;
      gap: 1.85cqw;
      margin: 0;
      padding: 0;
    }

  .upload .feature-row {
      grid-template-columns: 5.55cqw 1fr;
      align-items: start;
      gap: 1.12cqw;
      max-width: none;
      padding-bottom: 1.86cqw;
    }

  .upload .icon-card {
      width: 4.78cqw;
      height: 4.78cqw;
      border-radius: 0.54cqw;
    }

  .upload .icon-card svg {
      width: 2.04cqw;
      height: 2.04cqw;
    }

  .upload .feature-row h3 {
      font-size: 1.5cqw;
      line-height: 1.2;
    }

  .upload .feature-row > div {
      padding-top: 0.72cqw;
    }

  .upload .feature-row p {
      margin-top: 0.58cqw;
      font-size: 1.18cqw;
      line-height: 1.4;
    }
}

.upload h2 {
  color: #0b1425;
  font-family: var(--font-body);
  font-weight: 800;
}

.upload h2 span {
  color: #008b4f;
}

.upload h2 .upload-title__line {
  color: #0b1425;
  white-space: nowrap;
}

.upload h2 .upload-title__accent {
  color: #008b4f;
}

@media (max-width: 740px) {
  .upload h2 {
      font-size: 34px;
      line-height: 1.08;
    }
}

@media (min-width: 741px) {
  .upload .eyebrow {
      margin-bottom: 1.55cqw;
    }

  .upload h2 {
      color: #0b1425;
      font-family: var(--font-body);
      font-size: 3.55cqw;
      font-weight: 800;
      line-height: 1.11;
      letter-spacing: 0;
      width: 118%;
      max-width: none;
      transform: scaleX(0.88);
      transform-origin: left top;
    }

  .upload h2 span {
      color: #008b4f;
    }

  .upload h2 .upload-title__line {
      color: #0b1425;
      white-space: nowrap;
    }

  .upload h2 .upload-title__accent {
      color: #008b4f;
    }

  .upload .lead {
      max-width: 29cqw;
      margin-top: 1.55cqw;
      color: rgba(45, 62, 82, 0.86);
      font-family: var(--font-body);
      font-size: 1.08cqw;
      line-height: 1.62;
    }

  .upload .lead-break {
      display: block;
    }

  .upload__inner {
      --artboard-width: min(100vw, calc(100svh * 1672 / 941));
      --visual-shift: max(0px, calc((100vw - var(--artboard-width)) * 0.7));
      width: var(--artboard-width);
    }

  @supports not (height: 100svh) {
    .upload__inner {
          --artboard-width: min(100vw, calc(100vh * 1672 / 941));
          width: var(--artboard-width);
        }
  }

  .upload-dashboard {
      left: calc(41.39% + var(--visual-shift, 0px));
    }

  .upload-list {
      left: calc(34.45% + var(--visual-shift, 0px));
    }

  .upload__details {
      width: 23.4cqw;
      gap: 0.95cqw;
    }

  .upload .feature-row {
      position: relative;
      grid-template-columns: 4.25cqw 1fr;
      align-items: start;
      gap: 1.33cqw;
      min-height: 6.45cqw;
      max-width: none;
      border-bottom: 0;
      padding-bottom: 0;
    }

  .upload .feature-row:not(:last-child)::after {
      content: none;
    }

  .upload .feature-row > div {
      padding-top: 0.47cqw;
    }

  .upload .feature-row h3 {
      color: #071326;
      font-family: var(--font-body);
      font-size: 1.2cqw;
      font-weight: 800;
      line-height: 1.2;
    }

  .upload .feature-row p {
      margin-top: 0.58cqw;
      color: rgba(48, 65, 89, 0.86);
      font-size: 1.04cqw;
      line-height: 1.4;
    }

  .upload .feature-break {
      display: block;
    }

  .upload .icon-card {
      width: 4.25cqw;
      height: 4.25cqw;
      border: 0;
      border-radius: 0.9cqw;
      background: rgba(226, 246, 237, 0.88);
    }

  .upload .icon-card svg {
      width: 2.18cqw;
      height: 2.18cqw;
      stroke-width: 2.05;
    }
}

@media (min-width: 741px) {
  .upload__copy,
    .upload__details {
      left: 4.45%;
    }

  .upload-dashboard {
      left: calc(42.35% + var(--visual-shift, 0px));
      width: 55.35%;
    }

  .upload-list {
      left: calc(34.95% + var(--visual-shift, 0px));
      bottom: 2.45%;
      width: 43.65%;
    }

  .upload .product-shot,
    .upload-list {
      background: transparent;
      box-shadow: none;
      filter: none;
    }

  .upload .lead {
      max-width: 31.5cqw;
      font-size: 1.2cqw;
      line-height: 1.5;
    }

  .upload__details {
      width: 26cqw;
    }

  .upload .feature-row p {
      font-size: 1.16cqw;
      line-height: 1.42;
    }
}

@media (max-width: 740px) {
  .upload .lead {
      font-size: 17px;
      line-height: 1.5;
    }

  .upload .product-shot,
    .upload-list {
      background: transparent;
      box-shadow: none;
      filter: none;
    }

  .upload-dashboard,
    .upload-list {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
    }
}

@media (max-width: 740px) {
  .upload__visual {
      display: grid;
      gap: 18px;
      align-items: start;
    }

  .upload-dashboard,
    .upload-list {
      display: block;
      width: 95%;
      margin-left: auto;
      margin-right: auto;
    }

  .upload-list {
      margin-top: 0;
      transform: none;
      z-index: 1;
    }
}

.upload,
.upload__copy,
.upload__details {
  font-family: var(--font-body);
  letter-spacing: 0;
}

.upload .eyebrow {
  font-family: var(--font-body);
  font-weight: 820;
  line-height: 1.2;
  text-transform: none;
}

.upload h2 {
  color: #0b1425;
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.11;
  letter-spacing: 0;
}

.upload .lead {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.48;
}

.upload .feature-row h3 {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: 0;
}

.upload .feature-row p {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.42;
}

@media (min-width: 741px) {
  .upload .eyebrow {
      font-size: 1.02cqw;
    }

  .upload h2 {
      font-size: 3.55cqw;
      transform: scaleX(0.88);
      transform-origin: left top;
    }

  .upload .lead {
      max-width: 590px;
      font-size: clamp(17px, 1.2vw, 22px);
      line-height: 1.48;
    }

  .upload .feature-row h3 {
      font-size: clamp(17px, 1.12vw, 20.5px);
    }

  .upload .feature-row p {
      font-size: clamp(16.5px, 1.08vw, 20px);
    }
}

@media (max-width: 740px) {
  .upload .eyebrow {
      gap: 12px;
      font-size: 13px;
      line-height: 1.2;
    }

  .upload .eyebrow::before {
      flex: 0 0 38px;
      width: 38px;
      height: 2px;
    }

  .upload h2 {
      font-size: clamp(33px, 9.2vw, 42px);
      line-height: 1.11;
    }

  .upload .lead {
      font-size: 16.5px;
      line-height: 1.48;
    }

  .upload .feature-row h3,
    .upload .feature-row p {
      font-size: 16px;
      line-height: 1.42;
    }
}

/* Screen 4 follow-up: safer tablet anchoring and mobile cards matching screen 2. */
@media (min-width: 741px) and (max-width: 1366px) {
  .upload {
      align-items: flex-start;
    }

  .upload__inner {
      margin-top: clamp(24px, 3.4svh, 36px);
    }
}

@media (min-width: 1121px) and (max-width: 1366px) and (max-height: 820px) {
  .upload__inner {
      width: min(100vw, 169svh);
      margin-top: clamp(18px, 2.4svh, 26px);
    }
}

@supports not (height: 100svh) {
  @media (min-width: 1121px) and (max-width: 1366px) and (max-height: 820px) {
    .upload__inner {
          width: min(100vw, 169vh);
        }
  }
}

@media (min-width: 741px) and (max-width: 980px) {
  .upload__details {
      top: 61%;
    }
}

@media (min-width: 741px) and (max-width: 1120px) {
  .upload .eyebrow {
      gap: 13px;
      margin-bottom: 15px;
      font-size: clamp(14px, 1.45vw, 16px);
      line-height: 1.2;
    }

  .upload .eyebrow::before {
      flex: 0 0 36px;
      width: 36px;
      height: 2px;
    }

  .upload-dashboard {
      z-index: 1;
    }

  .upload-list {
      z-index: 3;
    }

  .upload__visual::after {
      content: "";
      position: absolute;
      top: 58.6%;
      left: calc(65.5% + var(--visual-shift, 0px));
      z-index: 4;
      width: 17%;
      height: 5.6%;
      border-radius: 0 0 8px 8px;
      background: rgba(255, 255, 255, 0.96);
      transform: rotate(-0.6deg);
      pointer-events: none;
    }

  .upload .lead {
      max-width: 37cqw;
      font-size: clamp(16px, 1.7vw, 18px);
      line-height: 1.43;
    }

  .upload__details {
      top: 68%;
      width: min(34cqw, 350px);
      gap: 12px;
    }

  .upload .feature-row {
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px;
      min-height: 0;
    }

  .upload .feature-break {
      display: none;
    }

  .upload .icon-card {
      width: 48px;
      height: 48px;
      border-radius: 8px;
    }

  .upload .icon-card svg {
      width: 25px;
      height: 25px;
    }

  .upload .feature-row h3 {
      font-size: 18px;
      line-height: 1.22;
    }

  .upload .feature-row p {
      margin-top: 5px;
      font-size: 15.5px;
      line-height: 1.36;
    }

  .upload-list {
      left: calc(40.5% + var(--visual-shift, 0px));
    }
}

@media (max-width: 740px) {
  .upload .eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
    }

  .upload .eyebrow::before {
      content: "";
      display: block;
      flex: 0 0 38px;
      width: 38px;
      height: 2px;
    }

  .upload__visual {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      isolation: isolate;
    }

  .upload-dashboard,
    .upload-list {
      position: relative;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

  .upload-dashboard {
      width: 95%;
      z-index: 1;
      aspect-ratio: 958 / 470;
      object-fit: cover;
      object-position: top center;
    }

  .upload-list {
      width: 86%;
      z-index: 2;
      margin-top: -18px;
      transform: none;
    }

  .upload__details {
      grid-area: features;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
      max-width: 440px;
      justify-self: center;
    }

  .upload .feature-row {
      position: relative;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: start;
      column-gap: 12px;
      max-width: none;
      min-width: 0;
      min-height: 0;
      padding: 12px 14px;
      border: 1px solid rgba(7, 84, 61, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.66);
      box-shadow: 0 13px 26px rgba(27, 75, 60, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86);
      overflow: hidden;
    }

  .upload .feature-row:last-child {
      border-bottom: 1px solid rgba(7, 84, 61, 0.14);
    }

  .upload .feature-row::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: linear-gradient(180deg, rgba(0, 121, 67, 0.76), rgba(117, 196, 157, 0.12));
    }

  .upload .feature-row .icon-card {
      grid-column: 1;
      width: 38px;
      height: 38px;
      min-width: 0;
      min-height: 0;
    }

  .upload .feature-row .icon-card svg {
      width: 21px;
      height: 21px;
    }

  .upload .feature-row > div {
      grid-column: 2;
      min-width: 0;
      padding-top: 0;
    }

  .upload .feature-row h3 {
      margin: 0;
      color: var(--green);
      font-size: 18px;
      line-height: 1.22;
    }

  .upload .feature-row p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.36;
      overflow-wrap: break-word;
    }
}

/* Final adaptive guard for screen 4. Desktop keeps the approved artboard;
   tablet and mobile use a normal stacked document flow. */
@media (min-width: 741px) and (max-width: 1120px) {
  .upload {
      display: block;
      min-height: auto;
      overflow: hidden;
    }

  .upload::before {
      inset: 12% -38% 18% 36%;
      transform: rotate(-8deg);
    }

  .upload::after {
      inset: auto -28% -12% 20%;
      height: 28%;
    }

  .upload > .molecule--tr {
      top: -2%;
      right: -8%;
      width: min(34vw, 260px);
      opacity: 0.18;
    }

  .upload > .molecule--upload-mid {
      top: 44%;
      left: 58%;
      width: min(32vw, 260px);
      opacity: 0.1;
    }

  .upload__inner {
      container-type: normal;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "copy"
        "visual"
        "features";
      width: 100%;
      max-width: 920px;
      min-height: auto;
      height: auto;
      aspect-ratio: auto;
      gap: 24px;
      margin: 0 auto;
      padding: calc(var(--np-header-offset) + 56px) clamp(34px, 5vw, 54px) 64px;
    }

  .upload__copy,
    .upload__visual,
    .upload__details {
      position: relative;
      inset: auto;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      width: 100%;
      max-width: none;
      transform: none;
    }

  .upload__copy {
      grid-area: copy;
      justify-self: stretch;
      max-width: 720px;
    }

  .upload .eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 13px;
      font-size: 14px;
      line-height: 1.2;
      white-space: normal;
    }

  .upload .eyebrow::before {
      flex: 0 0 36px;
      width: 36px;
      height: 2px;
    }

  .upload h2 {
      max-width: 700px;
      font-size: clamp(42px, 6vw, 56px);
      line-height: 1.05;
      transform: none;
    }

  .upload .lead {
      max-width: 700px;
      margin-top: 18px;
      font-size: clamp(18px, 2.2vw, 21px);
      line-height: 1.48;
    }

  .upload .lead-break {
      display: none;
    }

  .upload__visual {
      grid-area: visual;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-self: center;
      gap: 0;
      pointer-events: none;
      isolation: isolate;
    }

  .upload__visual::after {
      content: none;
    }

  .upload-dashboard,
    .upload-list {
      position: relative;
      display: block;
      inset: auto;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      margin-left: auto;
      margin-right: auto;
      background: transparent;
      box-shadow: none;
      filter: none;
      transform: none;
    }

  .upload-dashboard {
      z-index: 1;
      width: min(100%, 760px);
    }

  .upload-list {
      z-index: 2;
      width: min(84%, 620px);
      margin-top: clamp(-52px, -5vw, -32px);
    }

  .upload__details {
      grid-area: features;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      justify-self: center;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding: 0;
    }

  .upload .feature-row {
      position: relative;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: start;
      gap: 12px;
      min-width: 0;
      min-height: 0;
      max-width: none;
      padding: 14px;
      border: 1px solid rgba(7, 84, 61, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.68);
      box-shadow: 0 13px 26px rgba(27, 75, 60, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86);
      overflow: hidden;
    }

  .upload .feature-row::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: linear-gradient(180deg, rgba(0, 121, 67, 0.76), rgba(117, 196, 157, 0.12));
    }

  .upload .feature-row .icon-card {
      width: 48px;
      height: 48px;
      border-radius: 8px;
    }

  .upload .feature-row .icon-card svg {
      width: 25px;
      height: 25px;
    }

  .upload .feature-row > div {
      min-width: 0;
      padding-top: 0;
    }

  .upload .feature-row h3 {
      margin: 0;
      font-size: 18px;
      line-height: 1.22;
    }

  .upload .feature-row p {
      margin-top: 6px;
      font-size: 15px;
      line-height: 1.36;
      overflow-wrap: break-word;
    }

  .upload .feature-break {
      display: none;
    }
}

@media (min-width: 741px) and (max-width: 860px) {
  .upload__details {
      grid-template-columns: 1fr;
      max-width: 520px;
    }

  .upload-dashboard {
      width: min(100%, 720px);
    }

  .upload-list {
      width: min(88%, 600px);
      margin-top: -28px;
    }
}

@media (max-width: 740px) {
  .upload {
      min-height: auto;
      overflow: hidden;
    }

  .upload::before {
      inset: 16% -72% 22% 34%;
      transform: rotate(-9deg);
    }

  .upload > .molecule--upload-mid {
      display: none;
    }

  .upload > .molecule--tr {
      top: -3%;
      right: -18%;
      width: min(58vw, 250px);
      opacity: 0.16;
    }

  .upload__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "copy"
        "visual"
        "features";
      width: 100%;
      max-width: 100%;
      min-height: auto;
      height: auto;
      gap: 22px;
      padding: calc(var(--np-header-offset) + 72px) 20px 56px;
      overflow: hidden;
    }

  .upload__copy,
    .upload__visual,
    .upload__details {
      position: relative;
      inset: auto;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      width: 100%;
      max-width: none;
      transform: none;
    }

  .upload__copy {
      grid-area: copy;
      justify-self: stretch;
    }

  .upload h2 {
      max-width: 100%;
      transform: none;
    }

  .upload .lead {
      max-width: 100%;
    }

  .upload .lead-break {
      display: none;
    }

  .upload__visual {
      grid-area: visual;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-self: center;
      width: calc(100% + 18px);
      margin-left: -9px;
      margin-right: -9px;
      pointer-events: none;
      isolation: isolate;
    }

  .upload__visual::after {
      content: none;
    }

  .upload-dashboard,
    .upload-list {
      position: relative;
      inset: auto;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
      background: transparent;
      box-shadow: none;
      filter: none;
      transform: none;
    }

  .upload-dashboard {
      width: 100%;
      aspect-ratio: 958 / 500;
      object-fit: cover;
      object-position: top center;
      z-index: 2;
    }

  .upload-list {
      width: 91%;
      margin-top: -16px;
      z-index: 1;
    }

  .upload__details {
      grid-area: features;
      width: min(100%, 430px);
      max-width: calc(100vw - 40px);
      margin: 0 auto;
      justify-self: center;
    }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .upload__inner {
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
      grid-template-areas:
        "copy visual"
        "features visual";
      max-width: 1120px;
      gap: 24px clamp(26px, 3.2vw, 42px);
      padding: calc(var(--np-header-offset) + 72px) clamp(42px, 5.4vw, 64px) 58px;
      align-items: center;
    }

  .upload__copy {
      align-self: end;
      max-width: none;
    }

  .upload h2 {
      max-width: 430px;
      font-size: clamp(38px, 4.7vw, 48px);
      line-height: 1.06;
      word-break: normal;
      overflow-wrap: normal;
    }

  .upload .lead {
      max-width: 520px;
      margin-top: 18px;
      font-size: clamp(17px, 1.8vw, 19px);
      line-height: 1.46;
    }

  .upload__visual {
      align-self: center;
      justify-self: center;
      width: 100%;
    }

  .upload-dashboard {
      width: min(100%, 720px);
    }

  .upload-list {
      width: min(78%, 500px);
      margin-top: -10px;
    }

  .upload__details {
      grid-template-columns: 1fr;
      align-self: start;
      justify-self: start;
      width: 100%;
      max-width: 470px;
      gap: 12px;
      margin: 0;
    }

  .upload .feature-row {
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 12px;
      padding: 12px 14px;
    }

  .upload .feature-row .icon-card {
      width: 46px;
      height: 46px;
    }

  .upload .feature-row .icon-card svg {
      width: 24px;
      height: 24px;
    }

  .upload .feature-row h3 {
      font-size: 18px;
    }

  .upload .feature-row p {
      font-size: 14.5px;
      line-height: 1.35;
    }
}

@media (min-width: 741px) and (max-width: 1120px) {
  .upload__visual {
      display: block;
      position: relative;
      width: min(100%, 760px);
      aspect-ratio: 958 / 760;
      margin-left: auto;
      margin-right: auto;
      overflow: visible;
    }

  .upload-dashboard,
  .upload-list {
      position: absolute;
      inset: auto;
      margin: 0;
      transform: none;
    }

  .upload-dashboard {
      top: 0;
      left: 0;
      width: 100%;
      aspect-ratio: 986 / 634;
      object-fit: contain;
      object-position: center;
      z-index: 2;
    }

  .upload-list {
      left: 15.5%;
      bottom: 0;
      width: 75%;
      z-index: 1;
    }
}

@media (min-width: 741px) {
  .upload-list {
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, 0.82) 84%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, 0.82) 84%, transparent 100%);
    }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .upload__visual {
      width: 100%;
      aspect-ratio: 958 / 740;
    }

  .upload-list {
      left: 14%;
      width: 78%;
    }
}

/* Alternating layout: screen 4 mirrors screen 3/5 rhythm on two-column viewports. */
@media (min-width: 1121px) {
  .upload__inner {
      transform: translateX(clamp(18px, 2.2vw, 34px));
      transform-origin: center;
    }

  .upload::before {
      inset: 3.2% 46.5% -8% -9%;
      transform: rotate(7deg);
    }

  .upload::after {
      inset: auto 35% -18% -14%;
    }

  .upload > .molecule--tr {
      left: -0.5%;
      right: auto;
      transform: scaleX(-1);
    }

  .upload__copy {
      left: auto;
      right: 0;
      transform: translateX(clamp(30px, 2.6vw, 44px));
      z-index: 2;
    }

  .upload__copy {
      width: 38.2%;
    }

  .upload__details {
      left: calc(100% - 38.2%);
      right: auto;
      transform: translateX(clamp(30px, 2.6vw, 44px));
      z-index: 2;
    }

  .upload__visual {
      z-index: 1;
    }

  .upload-dashboard {
      left: auto;
      right: calc(42.35% + clamp(18px, 2vw, 36px));
      z-index: 2;
    }

  .upload-list {
      left: auto;
      right: calc(44.2% + clamp(18px, 2vw, 36px));
      top: 56.6%;
      bottom: auto;
      width: 32.8%;
      z-index: 1;
    }
}

@media (min-width: 1121px) and (max-width: 1240px) {
  .upload__inner {
      transform: none;
    }

  .upload__copy {
      width: 39.6%;
      transform: translateX(clamp(8px, 1vw, 14px));
    }

  .upload h2 {
      width: 118%;
      max-width: none;
      font-size: clamp(38px, 3.35vw, 41px);
      line-height: 1.1;
      transform: scaleX(0.84);
      transform-origin: left top;
    }

  .upload .lead {
      max-width: 38cqw;
      margin-top: clamp(16px, 1.7cqw, 20px);
      font-size: clamp(16px, 1.26vw, 17px);
      line-height: 1.48;
    }

  .upload .lead-break {
      display: none;
    }

  .upload__details {
      left: calc(100% - 39.6%);
      top: 56.8%;
      width: 38%;
      gap: clamp(12px, 1.25cqw, 16px);
      transform: translateX(clamp(8px, 1vw, 14px));
    }

  .upload .feature-row {
      grid-template-columns: 52px minmax(0, 1fr);
      gap: 14px;
      padding-bottom: 14px;
    }

  .upload .icon-card {
      width: 52px;
      height: 52px;
      border-radius: 8px;
    }

  .upload .icon-card svg {
      width: 26px;
      height: 26px;
    }

  .upload .feature-row h3 {
      font-size: clamp(18px, 1.55vw, 19px);
    }

  .upload .feature-row p {
      font-size: clamp(15px, 1.25vw, 16px);
      line-height: 1.38;
    }
}

@media (min-width: 1121px) and (max-width: 1240px) and (max-height: 740px) {
  .upload h2 {
      font-size: clamp(36px, 3.05vw, 38px);
      line-height: 1.08;
    }

  .upload .lead {
      max-width: 39cqw;
      margin-top: 12px;
      font-size: 15.5px;
      line-height: 1.42;
    }

  .upload__details {
      top: 54.2%;
      gap: 10px;
    }

  .upload .feature-row {
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 12px;
      padding-bottom: 8px;
    }

  .upload .icon-card {
      width: 46px;
      height: 46px;
    }

  .upload .icon-card svg {
      width: 24px;
      height: 24px;
    }

  .upload .feature-row h3 {
      font-size: 17px;
      line-height: 1.22;
    }

  .upload .feature-row p {
      margin-top: 4px;
      font-size: 14px;
      line-height: 1.34;
    }
}

@media (min-width: 1121px) and (max-height: 940px) {
  .upload__copy {
      top: 5.2%;
    }

  .upload h2 {
      font-size: clamp(44px, 3.28cqw, 55px);
      line-height: 1.08;
    }

  .upload .lead {
      max-width: 36cqw;
      margin-top: clamp(14px, 1.35cqw, 18px);
      font-size: clamp(17px, 1.05cqw, 18.5px);
      line-height: 1.42;
    }

  .upload__details {
      top: 46%;
      gap: clamp(12px, 1.18cqw, 18px);
    }

  .upload .feature-row {
      grid-template-columns: clamp(54px, 4.3cqw, 64px) minmax(0, 1fr);
      gap: clamp(14px, 1cqw, 17px);
      padding-bottom: clamp(12px, 1.05cqw, 16px);
    }

  .upload .icon-card {
      width: clamp(54px, 4.3cqw, 64px);
      height: clamp(54px, 4.3cqw, 64px);
      border-radius: 10px;
    }

  .upload .icon-card svg {
      width: clamp(26px, 1.95cqw, 30px);
      height: clamp(26px, 1.95cqw, 30px);
    }

  .upload .feature-row > div {
      padding-top: 0.2cqw;
    }

  .upload .feature-row h3 {
      font-size: clamp(19px, 1.35cqw, 22px);
      line-height: 1.2;
    }

  .upload .feature-row p {
      margin-top: 5px;
      font-size: clamp(15.5px, 1.08cqw, 18px);
      line-height: 1.3;
    }
}

@media (min-width: 1121px) and (max-width: 1366px) and (max-height: 820px) {
  .upload h2 {
      font-size: clamp(36px, 2.95vw, 40px);
      line-height: 1.07;
    }

  .upload .lead {
      max-width: 39cqw;
      margin-top: 12px;
      font-size: clamp(15.5px, 1.15vw, 17px);
      line-height: 1.38;
    }

  .upload__details {
      top: 45%;
      gap: clamp(9px, 1cqw, 13px);
    }

  .upload .feature-row {
      grid-template-columns: clamp(46px, 4cqw, 54px) minmax(0, 1fr);
      gap: 12px;
      padding-bottom: clamp(8px, 0.9cqw, 12px);
    }

  .upload .icon-card {
      width: clamp(46px, 4cqw, 54px);
      height: clamp(46px, 4cqw, 54px);
      border-radius: 8px;
    }

  .upload .icon-card svg {
      width: clamp(23px, 1.85cqw, 26px);
      height: clamp(23px, 1.85cqw, 26px);
    }

  .upload .feature-row h3 {
      font-size: clamp(17px, 1.35vw, 19px);
      line-height: 1.18;
    }

  .upload .feature-row p {
      margin-top: 4px;
      font-size: clamp(14px, 1.12vw, 15.5px);
      line-height: 1.28;
    }
}

@media (min-width: 1121px) {
  .upload__details {
      top: 41.5%;
      width: min(32cqw, 520px);
      gap: clamp(12px, 1.08cqw, 17px);
    }
}

@media (min-width: 1121px) and (max-width: 1366px) and (max-height: 820px) {
  .upload__details {
      top: 41%;
      width: min(32cqw, 430px);
      gap: clamp(9px, 0.95cqw, 12px);
    }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .upload__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
      grid-template-areas:
        "visual copy"
        "visual features";
    }

  .upload__details {
      justify-self: start;
    }

  .upload__copy,
  .upload__details {
      transform: translateX(clamp(24px, 3vw, 34px));
    }
}

/* Screen 4 rebuilt visual: keep the original screenshot relationship, mirrored
   for the alternating two-column layout. */
.upload-dashboard-frame {
  display: block;
  overflow: visible;
  background: transparent;
}

.upload-dashboard-frame .upload-dashboard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  margin: 0;
  transform: none;
}

.upload-list {
  display: block;
  height: auto;
  background: #fff;
  border-radius: clamp(12px, 1.05vw, 18px);
  box-shadow: 0 26px 70px rgba(15, 40, 64, 0.14);
  transform-origin: center center;
}

@media (min-width: 1121px) {
  .upload-dashboard-frame {
      position: absolute;
      top: 5.53%;
      right: calc(42.35% + clamp(18px, 2vw, 36px));
      width: 55.35%;
      aspect-ratio: 986 / 634;
      z-index: 1;
    }

  .upload-list {
      position: absolute;
      left: auto;
      right: calc(38.9% + clamp(18px, 2vw, 36px));
      top: 55.2%;
      bottom: auto;
      width: 43.4%;
      margin: 0;
      z-index: 2;
      transform: rotate(-3.6deg);
      -webkit-mask-image: none;
      mask-image: none;
    }
}

@media (min-width: 1121px) and (max-width: 1240px) {
  .upload-dashboard-frame {
      right: calc(42.35% + clamp(8px, 1vw, 14px));
    }

  .upload-list {
      right: calc(38.9% + clamp(8px, 1vw, 14px));
      top: 55.4%;
      width: 42.3%;
    }
}

@media (min-width: 741px) and (max-width: 1120px) {
  .upload__visual {
      display: block;
      position: relative;
      width: min(100%, 760px);
      aspect-ratio: 958 / 940;
      overflow: visible;
      margin-left: auto;
      margin-right: auto;
      isolation: isolate;
    }

  .upload-dashboard-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      aspect-ratio: 986 / 634;
      z-index: 1;
    }

  .upload-list {
      position: absolute;
      left: 9%;
      top: 53.7%;
      right: auto;
      bottom: auto;
      width: 82%;
      margin: 0;
      z-index: 2;
      transform: rotate(-3.2deg);
      -webkit-mask-image: none;
      mask-image: none;
    }
}

@media (min-width: 741px) and (max-width: 860px) {
  .upload__visual {
      width: min(100%, 720px);
    }

  .upload-list {
      left: 8%;
      top: 54%;
      width: 84%;
    }
}

@media (max-width: 740px) {
  .upload__visual {
      display: block;
      position: relative;
      width: 100%;
      overflow: visible;
      isolation: isolate;
    }

  .upload-dashboard-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 986 / 634;
      margin-left: auto;
      margin-right: auto;
      z-index: 1;
    }

  .upload-list {
      position: relative;
      display: block;
      width: 99%;
      margin: -74px auto 0;
      z-index: 5;
      border: 1px solid rgba(15, 40, 64, 0.06);
      background: #fff;
      box-shadow: 0 14px 34px rgba(15, 40, 64, 0.08);
      transform: rotate(-2.4deg);
      -webkit-mask-image: none;
      mask-image: none;
    }
}

@media (min-width: 1121px) {
  .upload h2 {
      margin-top: clamp(16px, 1.25cqw, 22px);
    }

  .upload-dashboard-frame {
      top: 7.8%;
    }

  .upload-list {
      top: 57.5%;
    }
}

@media (min-width: 1121px) and (max-width: 1366px) and (max-height: 820px) {
  .upload h2 {
      margin-top: clamp(12px, 1.05cqw, 16px);
    }

  .upload-dashboard-frame {
      top: 7.1%;
    }

  .upload-list {
      top: 56.6%;
    }
}