:root {
    --sp-blue: #3693f5;
    --sp-blue-deep: #1557c8;
    --sp-cyan: #54d6ff;
    --sp-orange: #ff7f4f;
    --sp-yellow: #ffc347;
    --sp-night: #081b37;
    --sp-ink: #16243a;
    --sp-muted: #66758b;
    --sp-line: #dce6f3;
    --sp-soft: #f3f7fc;
}

.wx-feature-supplier-portal { background: var(--sp-soft); }
.wx-feature-supplier-portal .fd-hero {
    min-height: 660px;
    background:
        radial-gradient(circle at 86% 7%, rgba(84,214,255,.34), transparent 26%),
        radial-gradient(circle at 7% 94%, rgba(54,147,245,.3), transparent 31%),
        linear-gradient(125deg,#07182f 0%,#0c3d83 53%,#278af0 100%);
}
.wx-feature-supplier-portal .fd-hero::before {
    top: -340px;
    right: -190px;
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 0 0 95px rgba(255,255,255,.025), 0 0 0 190px rgba(255,255,255,.016);
}
.wx-feature-supplier-portal .fd-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: linear-gradient(115deg, transparent 48%, rgba(109,221,255,.45) 49%, transparent 50%);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent 25%,#000);
    pointer-events: none;
}
.wx-feature-supplier-portal .fd-hero-grid { min-height: 660px; grid-template-columns: minmax(0,1fr) 535px; gap: 48px; padding-top: 67px; }
.wx-feature-supplier-portal .fd-kicker { color: #85e6ff; }
.wx-feature-supplier-portal .fd-kicker::before { background: var(--sp-orange); }
.wx-feature-supplier-portal .fd-hero h1 { max-width: 720px; font-size: clamp(48px,5vw,69px); }
.wx-feature-supplier-portal .fd-hero-copy > p { max-width: 690px; color: rgba(232,246,255,.8); font-size: 17px; }
.wx-feature-supplier-portal .fd-button--primary { border-color: var(--sp-orange); background: var(--sp-orange); box-shadow: 0 14px 34px rgba(255,127,79,.24); }

.sp-hero-visual { min-height: 500px; }
.sp-hero-network { position: absolute; inset: 30px 0 18px 25px; border: 1px solid rgba(132,226,255,.19); transform: skewY(-3deg); }
.sp-hero-network::before,.sp-hero-network::after { content: ""; position: absolute; background: rgba(119,225,255,.2); }
.sp-hero-network::before { top: 34%; right: 0; left: 0; height: 1px; }
.sp-hero-network::after { top: 0; bottom: 0; left: 62%; width: 1px; }
.sp-hero-network span { position: absolute; width: 10px; height: 10px; border: 2px solid #7ce3ff; border-radius: 50%; background: #0b3770; box-shadow: 0 0 16px rgba(84,214,255,.8); }
.sp-hero-network span:nth-child(1) { top: 32%; left: 12%; }
.sp-hero-network span:nth-child(2) { top: 32%; left: 61%; }
.sp-hero-network span:nth-child(3) { right: 11%; bottom: 17%; }
.sp-hero-network span:nth-child(4) { bottom: 12%; left: 20%; }
.sp-hero-screen { position: absolute; z-index: 3; overflow: hidden; border: 7px solid rgba(255,255,255,.98); border-radius: 30px; background: #fff; box-shadow: 0 32px 75px rgba(0,17,46,.42); cursor: zoom-in; }
.sp-hero-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s ease; }
.sp-hero-screen:hover img { transform: scale(1.025); }
.sp-hero-screen--main { top: 3px; left: 42px; width: 230px; height: 458px; transform: rotate(-2.5deg); }
.sp-hero-screen--task { top: 82px; right: 3px; width: 205px; height: 400px; transform: rotate(3.5deg); }
.sp-hero-signal { position: absolute; z-index: 5; right: 150px; bottom: -1px; display: flex; gap: 8px; align-items: center; padding: 9px 13px; border: 1px solid rgba(124,227,255,.38); color: #fff; background: rgba(6,29,62,.86); box-shadow: 0 12px 30px rgba(0,15,41,.25); }
.sp-hero-signal i { width: 8px; height: 8px; border-radius: 50%; background: #57e6a6; box-shadow: 0 0 12px #57e6a6; }
.sp-hero-signal span { color: rgba(226,246,255,.64); font-size: 11px; }
.sp-hero-signal b { color: #6ddfff; font-size: 12px; }
.sp-hero-chip { position: absolute; z-index: 6; min-width: 148px; padding: 12px 15px; border-top: 3px solid var(--sp-orange); color: #fff; background: rgba(7,27,55,.9); box-shadow: 0 15px 34px rgba(0,17,46,.31); }
.sp-hero-chip b { display: block; color: #fff; font-size: 14px; }
.sp-hero-chip span { display: block; margin-top: 5px; color: rgba(226,246,255,.62); font-size: 12px; }
.sp-hero-chip--account { top: 21px; right: -14px; }
.sp-hero-chip--sms { top: 207px; left: -1px; }
.sp-hero-chip--data { right: -17px; bottom: 26px; }

.wx-feature-supplier-portal .fd-section { padding: 0 0 110px; background: var(--sp-soft); }
.sp-page { position: relative; }
.sp-snapshot { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: -4px; border: 1px solid var(--sp-line); background: #fff; box-shadow: 0 25px 62px rgba(20,64,126,.11); transform: translateY(-39px); }
.sp-snapshot article { display: grid; min-height: 130px; grid-template-columns: 42px minmax(0,1fr); gap: 15px; align-items: center; padding: 24px 21px; border-right: 1px solid #e5edf7; }
.sp-snapshot article:last-child { border-right: 0; }
.sp-snapshot article > span { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: #fff; background: var(--sp-blue); font-size: 11px; font-weight: 900; }
.sp-snapshot article:nth-child(even) > span { background: var(--sp-orange); }
.sp-snapshot strong { display: block; color: var(--sp-ink); font-size: 17px; }
.sp-snapshot p { margin: 7px 0 0; color: var(--sp-muted); font-size: 13px; line-height: 1.55; }
.sp-local-nav { position: sticky; z-index: 20; top: 92px; display: flex; justify-content: center; gap: 5px; max-width: 750px; margin: 0 auto 92px; padding: 6px; border: 1px solid var(--sp-line); background: rgba(255,255,255,.92); box-shadow: 0 13px 35px rgba(20,64,126,.08); backdrop-filter: blur(14px); }
.sp-local-nav a { padding: 11px 20px; color: #596b83; font-size: 14px; font-weight: 700; transition: color .2s ease, background .2s ease; }
.sp-local-nav a:hover { color: #fff; background: var(--sp-blue-deep); }
.sp-eyebrow { color: var(--sp-blue-deep); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.sp-section-head { max-width: 820px; margin-bottom: 46px; }
.sp-section-head h2,.sp-loop h2,.sp-task h2,.sp-sync h2 { margin: 15px 0; color: var(--sp-ink); font-size: clamp(34px,3.5vw,46px); line-height: 1.29; letter-spacing: -.035em; }
.sp-section-head p,.sp-loop header p,.sp-task-copy > p,.sp-sync-copy > p { margin: 0; color: var(--sp-muted); font-size: 16px; line-height: 1.9; }

.sp-loop { position: relative; overflow: hidden; margin-bottom: 116px; padding: 66px 60px 58px; color: #fff; background: linear-gradient(125deg,#0e4ea9,#287fe5 67%,#3aa1f7); box-shadow: 0 26px 68px rgba(21,87,200,.22); }
.sp-loop::before { content: ""; position: absolute; right: -130px; bottom: -190px; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.018); }
.sp-loop header { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,.82fr) minmax(380px,1.18fr); gap: 65px; align-items: end; }
.sp-loop .sp-eyebrow { grid-column: 1 / -1; color: #8ce9ff; }
.sp-loop h2 { margin: 0; color: #fff; }
.sp-loop header p { color: rgba(231,246,255,.72); }
.sp-loop ol { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin: 50px 0 0; padding: 0; list-style: none; }
.sp-loop ol::before { content: ""; position: absolute; top: 25px; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg,#8ce9ff,#fff0a7,#ff9c79); }
.sp-loop li { position: relative; min-height: 202px; padding: 62px 15px 19px 0; border-right: 1px solid rgba(255,255,255,.17); }
.sp-loop li:not(:first-child) { padding-left: 15px; }
.sp-loop li:last-child { border-right: 0; padding-right: 0; }
.sp-loop i { position: absolute; top: 6px; left: 0; display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; background: #1b68c9; font-size: 11px; font-style: normal; font-weight: 900; box-shadow: 0 0 0 7px rgba(255,255,255,.06); }
.sp-loop strong { display: block; color: #fff; font-size: 17px; }
.sp-loop li span { display: block; margin-top: 10px; color: rgba(231,246,255,.67); font-size: 13px; line-height: 1.65; }
.sp-loop li > b { position: absolute; bottom: 10px; color: rgba(151,232,255,.62); font-size: 10px; letter-spacing: .12em; }

.sp-task { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: 70px; align-items: center; margin-bottom: 116px; }
.sp-task-stage { position: relative; min-height: 650px; overflow: hidden; background: var(--sp-night); }
.sp-task-stage::before { content: ""; position: absolute; inset: 32px; border: 1px solid rgba(85,214,255,.18); background-image: linear-gradient(rgba(85,214,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(85,214,255,.09) 1px,transparent 1px); background-size: 36px 36px; }
.sp-shot { overflow: hidden; background: #fff; cursor: zoom-in; }
.sp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s ease; }
.sp-shot:hover img { transform: scale(1.025); }
.sp-shot--tasks { position: absolute; z-index: 3; top: 42px; left: 58px; width: 265px; height: 535px; border: 7px solid #fff; border-radius: 31px; box-shadow: 0 30px 65px rgba(0,10,28,.4); transform: rotate(-2deg); }
.sp-notice-card { position: absolute; z-index: 5; top: 82px; right: 28px; width: 235px; padding: 20px; border-left: 4px solid var(--sp-orange); color: #fff; background: rgba(12,49,94,.95); box-shadow: 0 18px 42px rgba(0,12,32,.3); }
.sp-notice-card span { color: #ffb092; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.sp-notice-card b { display: block; margin-top: 12px; color: #fff; font-size: 17px; }
.sp-notice-card p { margin: 8px 0 0; color: rgba(231,246,255,.65); font-size: 13px; }
.sp-status-card { position: absolute; z-index: 5; right: 25px; bottom: 56px; width: 220px; padding: 17px 18px; border: 1px solid rgba(107,225,255,.3); color: #fff; background: rgba(7,27,55,.9); }
.sp-status-card i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #58e6a7; box-shadow: 0 0 12px #58e6a7; }
.sp-status-card span { color: rgba(231,246,255,.63); font-size: 12px; }
.sp-status-card b { display: block; margin-top: 8px; color: #fff; font-size: 15px; }
.sp-task-points { display: grid; gap: 12px; margin-top: 28px; }
.sp-task-points article { padding: 18px 20px; border-left: 3px solid var(--sp-blue); background: #fff; box-shadow: 0 11px 28px rgba(20,64,126,.055); }
.sp-task-points b { display: block; color: var(--sp-ink); font-size: 15px; }
.sp-task-points span { display: block; margin-top: 6px; color: var(--sp-muted); font-size: 13px; line-height: 1.65; }
.sp-account-card { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 18px; align-items: center; margin-top: 18px; padding: 14px; color: #fff; background: var(--sp-blue-deep); }
.sp-shot--profile { width: 105px; height: 132px; border: 4px solid #fff; }
.sp-account-card b { display: block; color: #fff; font-size: 16px; }
.sp-account-card span { display: block; margin-top: 8px; color: rgba(235,247,255,.69); font-size: 13px; line-height: 1.65; }

.sp-commerce { margin-bottom: 116px; }
.sp-commerce-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.sp-commerce-card { display: flex; min-height: 690px; flex-direction: column; overflow: hidden; border: 1px solid var(--sp-line); background: #fff; box-shadow: 0 16px 42px rgba(20,64,126,.06); }
.sp-commerce-card > div:first-child { min-height: 250px; padding: 32px 30px 25px; }
.sp-commerce-card > div:first-child > span { color: var(--sp-blue-deep); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.sp-commerce-card--product > div:first-child > span { color: #e65c2c; }
.sp-commerce-card--trend > div:first-child > span { color: #93700a; }
.sp-commerce-card h3 { margin: 18px 0 11px; color: var(--sp-ink); font-size: 22px; line-height: 1.45; }
.sp-commerce-card p { margin: 0; color: var(--sp-muted); font-size: 14px; line-height: 1.78; }
.sp-commerce-card > .sp-shot { flex: 1; min-height: 420px; border-top: 1px solid var(--sp-line); }

.sp-sync { display: grid; grid-template-columns: minmax(330px,.85fr) minmax(0,1.15fr); gap: 72px; align-items: center; margin-bottom: 116px; padding: 68px; background: linear-gradient(135deg,#fff7f2,#fff 56%,#edf6ff); border: 1px solid var(--sp-line); }
.sp-sync-copy dl { display: grid; gap: 0; margin: 30px 0 0; }
.sp-sync-copy dl > div { display: grid; grid-template-columns: 95px minmax(0,1fr) auto; gap: 14px; padding: 15px 0; border-top: 1px solid #e1e9f3; }
.sp-sync-copy dt { color: var(--sp-ink); font-size: 14px; font-weight: 800; }
.sp-sync-copy dd { margin: 0; color: var(--sp-muted); font-size: 13px; }
.sp-sync-copy dl b { color: var(--sp-blue-deep); font-size: 11px; letter-spacing: .06em; }
.sp-sync-stage { position: relative; min-height: 610px; overflow: hidden; background: linear-gradient(145deg,#102f61,#176ac1); }
.sp-sync-stage::before { content: "SYNC"; position: absolute; right: -12px; bottom: -40px; color: rgba(255,255,255,.04); font-size: 150px; font-weight: 900; letter-spacing: -.08em; }
.sp-shot--time { position: absolute; z-index: 3; top: 42px; left: 52px; width: 260px; height: 520px; border: 7px solid #fff; border-radius: 31px; box-shadow: 0 29px 60px rgba(0,20,48,.36); transform: rotate(-2.5deg); }
.sp-time-note { position: absolute; z-index: 5; top: 86px; right: 28px; width: 245px; padding: 22px; border-top: 4px solid var(--sp-orange); color: #fff; background: rgba(7,27,55,.92); box-shadow: 0 17px 39px rgba(0,15,38,.3); }
.sp-time-note span { color: #ffad8d; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.sp-time-note b { display: block; margin-top: 13px; color: #fff; font-size: 19px; }
.sp-time-note p { margin: 9px 0 0; color: rgba(235,247,255,.68); font-size: 13px; line-height: 1.7; }
.sp-pulse { position: absolute; right: 58px; bottom: 78px; display: flex; gap: 17px; }
.sp-pulse i { width: 12px; height: 12px; border: 2px solid #70ddff; border-radius: 50%; box-shadow: 0 0 0 8px rgba(84,214,255,.05); }
.sp-pulse i:nth-child(2) { border-color: var(--sp-yellow); }
.sp-pulse i:nth-child(3) { border-color: var(--sp-orange); }

.sp-finance { margin-bottom: 116px; padding: 68px 60px 60px; color: #fff; background: var(--sp-night); }
.sp-finance .sp-eyebrow { color: #73dfff; }
.sp-finance .sp-section-head h2 { color: #fff; }
.sp-finance .sp-section-head p { color: rgba(231,246,255,.68); }
.sp-finance-rail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 16px; border: 1px solid rgba(126,211,255,.18); }
.sp-finance-label { position: relative; padding: 19px 22px; border-right: 1px solid rgba(126,211,255,.18); }
.sp-finance-label:last-child { border-right: 0; }
.sp-finance-label b { color: #fff; font-size: 16px; }
.sp-finance-label span { margin-left: 8px; color: rgba(231,246,255,.55); font-size: 13px; }
.sp-finance-label i { position: absolute; right: 18px; color: rgba(115,223,255,.32); font-size: 18px; font-style: normal; font-weight: 900; }
.sp-finance-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.sp-finance-gallery figure { position: relative; height: 520px; overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,.14); background: #fff; cursor: zoom-in; }
.sp-finance-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s ease; }
.sp-finance-gallery figure:hover img { transform: scale(1.025); }
.sp-finance-gallery figcaption { position: absolute; right: 13px; bottom: 13px; left: 13px; padding: 14px 15px; background: rgba(7,27,55,.88); backdrop-filter: blur(9px); }
.sp-finance-gallery figcaption b { display: block; color: #fff; font-size: 15px; }
.sp-finance-gallery figcaption span { display: block; margin-top: 5px; color: rgba(231,246,255,.63); font-size: 12px; }

.sp-capabilities .sp-section-head { margin-right: auto; margin-left: auto; text-align: center; }
.sp-feature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--sp-line); border-left: 1px solid var(--sp-line); }
.sp-feature-grid article { position: relative; min-height: 205px; padding: 30px 27px; border-right: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); background: #fff; transition: z-index .2s ease, transform .2s ease, box-shadow .2s ease; }
.sp-feature-grid article:hover { z-index: 2; box-shadow: 0 20px 45px rgba(18,67,134,.12); transform: translateY(-4px); }
.sp-feature-grid b { color: #abc3df; font-size: 11px; letter-spacing: .15em; }
.sp-feature-grid h3 { margin: 31px 0 11px; color: var(--sp-ink); font-size: 19px; }
.sp-feature-grid p { margin: 0; color: var(--sp-muted); font-size: 13px; line-height: 1.75; }
.sp-feature-grid article::after { content: ""; position: absolute; top: 28px; right: 26px; width: 26px; border-top: 3px solid var(--sp-orange); }

.sp-lightbox[hidden] { display: none; }
.sp-lightbox { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: 32px; background: rgba(3,14,35,.92); backdrop-filter: blur(10px); }
.sp-lightbox figure { display: flex; width: min(92vw,820px); max-height: 88vh; flex-direction: column; align-items: center; margin: 0; }
.sp-lightbox img { display: block; max-width: 100%; max-height: calc(88vh - 60px); object-fit: contain; background: #fff; box-shadow: 0 30px 84px rgba(0,0,0,.5); }
.sp-lightbox figcaption { margin-top: 13px; color: rgba(238,248,255,.82); font-size: 14px; line-height: 1.6; text-align: center; }
.sp-lightbox-close { position: fixed; z-index: 2; top: 24px; right: 28px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
body.sp-lightbox-open { overflow: hidden; }

@media (max-width: 1100px) {
    .wx-feature-supplier-portal .fd-hero-grid { grid-template-columns: minmax(0,1fr) 445px; gap: 26px; }
    .sp-hero-screen--main { left: 23px; }
    .sp-hero-screen--task { width: 185px; }
    .sp-loop { padding: 58px 42px 48px; }
    .sp-loop ol { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .sp-loop ol::before { display: none; }
    .sp-loop li { min-height: 180px; border-bottom: 1px solid rgba(255,255,255,.15); }
    .sp-loop li:nth-child(3) { border-right: 0; }
    .sp-loop li:nth-child(n+4) { border-bottom: 0; }
    .sp-task { gap: 48px; }
    .sp-notice-card,.sp-status-card { right: 18px; width: 205px; }
    .sp-sync { gap: 45px; padding: 52px 40px; }
}

@media (max-width: 980px) {
    .wx-feature-supplier-portal .fd-hero-grid { grid-template-columns: 1fr; }
    .sp-hero-visual { width: min(100%,570px); margin: 0 auto; }
    .sp-snapshot { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .sp-snapshot article:nth-child(2) { border-right: 0; }
    .sp-snapshot article:nth-child(-n+2) { border-bottom: 1px solid #e5edf7; }
    .sp-loop header { grid-template-columns: 1fr; gap: 22px; }
    .sp-task { grid-template-columns: 1fr; }
    .sp-task-stage { min-height: 610px; }
    .sp-commerce-grid { grid-template-columns: 1fr; }
    .sp-commerce-card { display: grid; min-height: 520px; grid-template-columns: .82fr 1.18fr; }
    .sp-commerce-card > div:first-child { min-height: 0; padding: 35px 30px; }
    .sp-commerce-card > .sp-shot { min-height: 520px; border-top: 0; border-left: 1px solid var(--sp-line); }
    .sp-sync { grid-template-columns: 1fr; }
    .sp-sync-stage { min-height: 590px; }
    .sp-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .wx-feature-supplier-portal .fd-hero { min-height: 0; }
    .wx-feature-supplier-portal .fd-hero-grid { padding-bottom: 46px; }
    .wx-feature-supplier-portal .fd-hero h1 { font-size: 40px; }
    .sp-hero-visual { min-height: 430px; transform: none; }
    .sp-hero-screen--main { left: 50%; width: 185px; height: 375px; transform: translateX(-76%) rotate(-2.5deg); }
    .sp-hero-screen--task { top: 68px; right: 50%; width: 165px; height: 325px; transform: translateX(106%) rotate(3.5deg); }
    .sp-hero-chip { min-width: 130px; padding: 9px 11px; }
    .sp-hero-chip--account { top: 12px; right: 0; }
    .sp-hero-chip--sms { top: 178px; left: 0; }
    .sp-hero-chip--data { right: 0; bottom: 20px; }
    .sp-hero-signal { right: 50%; bottom: -3px; transform: translateX(50%); }
    .sp-snapshot { grid-template-columns: 1fr; transform: translateY(-23px); }
    .sp-snapshot article { min-height: 100px; border-right: 0; border-bottom: 1px solid #e5edf7; }
    .sp-snapshot article:last-child { border-bottom: 0; }
    .sp-local-nav { top: 82px; justify-content: flex-start; overflow-x: auto; margin-bottom: 68px; }
    .sp-local-nav a { flex: 0 0 auto; padding: 10px 14px; }
    .sp-section-head h2,.sp-loop h2,.sp-task h2,.sp-sync h2 { font-size: 31px; }
    .sp-loop,.sp-task,.sp-commerce,.sp-sync,.sp-finance { margin-bottom: 76px; }
    .sp-loop { padding: 38px 23px; }
    .sp-loop ol { grid-template-columns: 1fr; }
    .sp-loop li,.sp-loop li:not(:first-child),.sp-loop li:last-child { min-height: 135px; padding: 58px 0 20px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
    .sp-loop li:last-child { border-bottom: 0; }
    .sp-task-stage { min-height: 520px; }
    .sp-shot--tasks { top: 28px; left: 18px; width: 205px; height: 420px; }
    .sp-notice-card { top: 55px; right: 12px; width: 178px; }
    .sp-status-card { right: 11px; bottom: 40px; width: 178px; }
    .sp-account-card { grid-template-columns: 88px minmax(0,1fr); }
    .sp-shot--profile { width: 88px; height: 114px; }
    .sp-commerce-card { display: flex; min-height: 680px; }
    .sp-commerce-card > div:first-child { min-height: 240px; padding: 29px 24px; }
    .sp-commerce-card > .sp-shot { min-height: 430px; border-top: 1px solid var(--sp-line); border-left: 0; }
    .sp-sync { padding: 38px 23px; }
    .sp-sync-copy dl > div { grid-template-columns: 86px minmax(0,1fr); }
    .sp-sync-copy dl b { grid-column: 2; }
    .sp-sync-stage { min-height: 510px; }
    .sp-shot--time { top: 27px; left: 18px; width: 205px; height: 420px; }
    .sp-time-note { top: 63px; right: 12px; width: 180px; }
    .sp-finance { padding: 38px 23px; }
    .sp-finance-rail { grid-template-columns: 1fr; }
    .sp-finance-label { border-right: 0; border-bottom: 1px solid rgba(126,211,255,.18); }
    .sp-finance-label:last-child { border-bottom: 0; }
    .sp-finance-gallery { grid-template-columns: 1fr; }
    .sp-finance-gallery figure { height: 470px; }
    .sp-feature-grid { grid-template-columns: 1fr; }
    .sp-feature-grid article { min-height: 170px; }
}

@media (max-width: 430px) {
    .wx-feature-supplier-portal .fd-hero h1 { font-size: 36px; }
    .sp-hero-screen--main { width: 173px; height: 350px; }
    .sp-hero-screen--task { width: 153px; height: 302px; }
    .sp-shot--tasks,.sp-shot--time { width: 187px; height: 395px; }
    .sp-notice-card,.sp-status-card,.sp-time-note { width: 165px; }
    .sp-finance-gallery figure { height: 430px; }
    .sp-lightbox { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-shot img,.sp-hero-screen img,.sp-finance-gallery img { transition: none; }
}