/* ===== Halaman Layanan: Hero, Pilihan Pengembangan Produk ===== */
.dian-lay { background: #f3eee6; overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.dian-lay-stage { position: relative; container-type: inline-size; aspect-ratio: 1672 / 848; color: #2b2d2a; }
.dian-lay-picture { display: contents; }
.dian-lay-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dian-lay br { display: block; content: ''; }

.dian-lay-copy { position: absolute; left: 5.74%; top: 9.3%; width: 46%; }
.dian-lay-eyebrow { margin-bottom: .55cqw; font-size: clamp(.58rem, .84cqw, .9rem); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #56705a; }
.dian-lay-heading { margin: 0 0 1.45cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(1.7rem, 3.95cqw, 4.4rem); font-weight: 600; line-height: .99; letter-spacing: -.005em; color: #2b2d2a; }
.dian-lay-heading span { color: #56705a; }
.dian-lay-copy p { width: 38.1cqw; max-width: 100%; margin: 0 0 .8cqw; font-size: clamp(.68rem, 1.24cqw, 1.35rem); line-height: 1.24; color: #3e423b; }
.dian-lay-copy p strong { font-weight: 700; color: #2b2d2a; }

.dian-lay-btns a { position: absolute; top: 64.98%; height: 7.55%; display: flex; align-items: center; justify-content: center; gap: .8cqw; box-sizing: border-box; border-radius: 1.2cqw; font-size: clamp(.64rem, 1.14cqw, 1.2rem); font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-lay-btns a:hover { transform: translateY(-1px); }
.dian-lay-primary { left: 5.74%; width: 18.18%; color: #fff; }
.dian-lay-primary svg { width: 1.1cqw; height: 1.1cqw; min-width: 14px; min-height: 14px; }
.dian-lay-outline { left: 24.76%; width: 20.1%; color: #2b2d2a; }
.dian-lay-outline:hover { background: rgba(86, 112, 90, .08); }

.dian-lay-note { position: absolute; left: 11.1%; top: 77.2%; width: 32%; margin: 0; font-size: clamp(.64rem, 1.14cqw, 1.2rem); line-height: 1.27; color: #3e423b; }

.dian-lay-paths { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.dian-lay-paths li { position: absolute; top: 7.3%; }
.dian-lay-paths li:nth-child(1) { left: 49.64%; }
.dian-lay-paths li:nth-child(2) { left: 68.78%; }
.dian-lay-paths li:nth-child(3) { left: 87.08%; }
.dian-lay-paths h2 { position: relative; margin: 0; padding-bottom: .8cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(.7rem, 1.16cqw, 1.3rem); font-weight: 700; line-height: 1.3; letter-spacing: .01em; text-transform: uppercase; color: #2b2d2a; }
.dian-lay-paths h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.4cqw; height: 2px; background: #2b2d2a; }
.dian-lay-paths p { margin: .9cqw 0 0; font-size: clamp(.6rem, .95cqw, 1.05rem); line-height: 1.35; color: #565b50; white-space: nowrap; }

@media (max-width: 1200px) {
    .dian-lay-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5vw, 60px) 44px; }
    .dian-lay-copy, .dian-lay-btns a, .dian-lay-note, .dian-lay-paths, .dian-lay-paths li { position: static; width: auto; height: auto; }
    .dian-lay-eyebrow { margin-bottom: 14px; font-size: 12px; letter-spacing: .22em; }
    .dian-lay-heading { margin-bottom: 18px; font-size: clamp(1.9rem, 7vw, 3.4rem); line-height: 1.04; }
    .dian-lay-copy p { width: auto; margin-bottom: 14px; font-size: 1rem; line-height: 1.55; }
    .dian-lay-btns { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 22px; }
    .dian-lay-btns a { justify-content: space-between; padding: 16px 22px; border-radius: 14px; font-size: .95rem; }
    .dian-lay-primary { background: #56705a; }
    .dian-lay-outline { border: 1.5px solid #56705a; }
    .dian-lay-primary svg { width: 18px; height: 18px; }
    .dian-lay-note { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(43, 45, 42, .18); font-size: .95rem; line-height: 1.5; }
    .dian-lay-bg { position: relative; order: 5; display: block; max-width: none; width: calc(100% + 2 * clamp(20px, 5vw, 60px)); height: auto; margin: 20px calc(-1 * clamp(20px, 5vw, 60px)) 0; aspect-ratio: 952 / 848; max-height: 520px; object-position: center; }
    .dian-lay-paths { order: 6; display: grid; gap: 14px; margin-top: 22px; pointer-events: auto; }
    .dian-lay-paths li { padding: 20px 22px 22px; border-radius: 20px; background: #fbf9f4; box-shadow: 0 6px 22px rgba(60, 80, 60, .1); }
    .dian-lay-paths h2 { font-size: 1rem; padding-bottom: 12px; }
    .dian-lay-paths h2::after { width: 36px; }
    .dian-lay-paths p { margin-top: 12px; font-size: .95rem; white-space: normal; }
    .dian-lay-paths p br { display: none; }
}

@media (min-width: 640px) and (max-width: 1200px) {
    .dian-lay-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ===== Halaman Layanan: Tiga Jalur Pengembangan ===== */
.dian-jal { background: #eef0e6; overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.dian-jal-stage { position: relative; container-type: inline-size; aspect-ratio: 1670 / 941; color: #2b2d2a; }
.dian-jal-picture { display: contents; }
.dian-jal-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dian-jal br { display: block; content: ''; }

.dian-jal-intro { position: absolute; left: 5.99%; top: 3%; width: 50%; }
.dian-jal-eyebrow { margin-bottom: .5cqw; font-size: max(.84cqw, 10.5px); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #56705a; }
.dian-jal-heading { margin: 0 0 .85cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: max(2.9cqw, 26px); font-weight: 600; line-height: 1.05; letter-spacing: -.005em; color: #2b2d2a; }
.dian-jal-heading span { color: #56705a; }
.dian-jal-intro p { width: 47cqw; max-width: 100%; margin: 0 0 .5cqw; font-size: max(.93cqw, 11.5px); line-height: 1.46; color: #3e423b; }

.dian-jal-cards, .dian-jal-card, .dian-jal-bar, .dian-jal-personas { display: contents; }
.dian-jal-photo, .dian-jal-badge svg, .dian-jal-btn svg, .dian-jal-final svg, .dian-jal-bar-icon, .dian-jal-personas svg { display: none; }

.dian-jal-badge { position: absolute; left: var(--bx); top: 36.7%; width: var(--bw); height: 6.9%; display: flex; align-items: center; }
.dian-jal-badge span { font-size: max(.63cqw, 8.5px); font-weight: 700; line-height: 1.32; letter-spacing: .05em; text-transform: uppercase; color: #4b5a48; }

.dian-jal-body { position: absolute; left: var(--tx); top: 38.2%; width: var(--tw); }
.dian-jal-body h3 { margin: 0 0 1.85cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: max(1.4cqw, 15px); font-weight: 800; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: #3f5b47; }
.dian-jal-body h4 { margin: 0 0 1.05cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: max(1.28cqw, 14px); font-weight: 700; line-height: 1.22; letter-spacing: -.01em; color: #2b2d2a; }
.dian-jal-body p { margin: 0 0 .6cqw; font-size: max(.86cqw, 10.5px); line-height: 1.55; color: #565b50; }
.dian-jal-body .dian-jal-hl { display: inline-block; margin-top: .8cqw; padding: .3cqw .9cqw; border-radius: 999px; background: #e3e8d8; font-size: max(.92cqw, 11px); font-weight: 700; color: #3f5b47; }

.dian-jal-btn { position: absolute; left: var(--ux); top: 70.8%; width: var(--uw); height: 5.6%; display: flex; align-items: center; padding-left: 1.35cqw; box-sizing: border-box; border-radius: 1.2cqw; color: #fff; font-size: max(1.02cqw, 12px); font-weight: 500; text-decoration: none; transition: transform .2s; }
.dian-jal-btn:hover, .dian-jal-final:hover { color: #fff; transform: translateY(-1px); }

.dian-jal-bar-text { position: absolute; left: 10.78%; top: 85.9%; width: 33.5%; }
.dian-jal-bar-text strong { display: block; margin-bottom: .3cqw; font-size: max(1.02cqw, 12px); font-weight: 700; color: #2b2d2a; }
.dian-jal-bar-text span { display: block; font-size: max(.82cqw, 10px); line-height: 1.4; color: #565b50; }
.dian-jal-personas { margin: 0; padding: 0; list-style: none; }
.dian-jal-personas li { position: absolute; left: var(--px); top: 87.6%; width: var(--pw); font-size: max(.8cqw, 10px); line-height: 1.32; color: #3e423b; }
.dian-jal-final { position: absolute; left: 79.16%; top: 87.9%; width: 16.4%; height: 5.6%; display: flex; align-items: center; padding-left: 1.5cqw; box-sizing: border-box; border-radius: 1.2cqw; color: #fff; font-size: max(.86cqw, 10.5px); font-weight: 500; text-decoration: none; transition: transform .2s; }

@media (max-width: 1180px) {
    .dian-jal { background: #f1efe6; }
    .dian-jal-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5vw, 60px) 44px; }
    .dian-jal-intro { position: static; width: auto; order: 1; }
    .dian-jal-eyebrow { margin-bottom: 14px; font-size: 12px; letter-spacing: .22em; }
    .dian-jal-heading { margin-bottom: 16px; font-size: clamp(1.75rem, 6.6vw, 2.8rem); line-height: 1.1; }
    .dian-jal-intro p { width: auto; margin-bottom: 14px; font-size: 1rem; line-height: 1.55; }
    .dian-jal-bg { position: relative; order: 2; display: block; width: calc(100% + 2 * clamp(20px, 5vw, 60px)); height: auto; margin: 12px calc(-1 * clamp(20px, 5vw, 60px)) 0; aspect-ratio: 820 / 338; }

    .dian-jal-cards { order: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 24px; }
    .dian-jal-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-jal-photo { display: block; order: 1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
    .dian-jal-badge { position: static; order: 2; align-self: flex-start; width: auto; height: auto; gap: 10px; margin: 18px 22px 0; padding: 8px 16px 8px 12px; border-radius: 999px; background: #e3e8d8; color: #3f5b47; }
    .dian-jal-badge svg { display: block; flex: none; }
    .dian-jal-badge span { font-size: .68rem; }
    .dian-jal-body { position: static; order: 3; width: auto; padding: 14px 22px 14px; }
    .dian-jal-body h3 { margin-bottom: 8px; font-size: .85rem; letter-spacing: .14em; }
    .dian-jal-body h4 { margin-bottom: 10px; font-size: 1.2rem; }
    .dian-jal-body p { margin-bottom: 10px; font-size: .95rem; line-height: 1.55; }
    .dian-jal-body .dian-jal-hl { margin-top: 2px; padding: 6px 14px; font-size: .9rem; }
    .dian-jal-btn { position: static; order: 4; width: auto; height: auto; justify-content: space-between; margin: auto 22px 22px; padding: 15px 20px; border-radius: 14px; background: #3f5b47; font-size: .95rem; font-weight: 600; }
    .dian-jal-btn svg, .dian-jal-final svg { display: block; flex: none; }

    .dian-jal-bar { order: 4; display: flex; flex-direction: column; gap: 16px; margin-top: 22px; padding: 22px; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-jal-bar-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #dfe6d8; color: #3f5b47; }
    .dian-jal-bar-text { position: static; width: auto; }
    .dian-jal-bar-text strong { margin-bottom: 6px; font-size: 1.1rem; }
    .dian-jal-bar-text span { font-size: .95rem; line-height: 1.55; }
    .dian-jal-personas { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(43, 45, 42, .14); }
    .dian-jal-personas li { position: static; width: auto; display: flex; align-items: center; gap: 12px; font-size: .95rem; line-height: 1.4; }
    .dian-jal-personas svg { display: block; flex: none; color: #56705a; }
    .dian-jal-final { position: static; width: auto; height: auto; justify-content: space-between; padding: 16px 22px; border-radius: 14px; background: #3f5b47; font-size: .95rem; font-weight: 600; }
}

@media (min-width: 760px) and (max-width: 1180px) {
    .dian-jal-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dian-jal-photo { aspect-ratio: 4 / 3; }
}


/* ===== Halaman Layanan: Setelah Memilih Jalur ===== */
.dian-pro { background: #eef0e6; overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.dian-pro-stage { position: relative; container-type: inline-size; aspect-ratio: 1672 / 941; color: #2b2d2a; }
.dian-pro-picture { display: contents; }
.dian-pro-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dian-pro br, .dian-nxt br { display: block; content: ''; }

.dian-pro-intro { position: absolute; left: 5.56%; top: 3.3%; width: 62%; }
.dian-pro-eyebrow { margin-bottom: .75cqw; font-size: max(.8cqw, 10.5px); font-weight: 600; letter-spacing: .33em; text-transform: uppercase; color: #4a4d47; }
.dian-pro-heading { margin: 0 0 .4cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: max(3.3cqw, 26px); font-weight: 700; line-height: .98; letter-spacing: -.02em; color: #2b2d2a; }
.dian-pro-heading span { color: #4f6b53; }
.dian-pro-intro p { width: 54cqw; max-width: 100%; margin: 0 0 .9cqw; font-size: max(1.16cqw, 12px); line-height: 1.28; color: #3e423b; }

.dian-pro-cards, .dian-pro-card, .dian-pro-steps, .dian-pro-steps li, .dian-pro-bar { display: contents; }
.dian-pro-steps { margin: 0; padding: 0; list-style: none; }
.dian-pro-photo, .dian-pro-ico, .dian-pro-btn svg, .dian-pro-bar-btn svg, .dian-pro-bar-icon, .dian-pro-step-img { display: none; }

.dian-pro-head { position: absolute; left: var(--tx); top: 34%; }
.dian-pro-head h3 { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: max(1.4cqw, 15px); font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: #2f3b31; }
.dian-pro-copy { position: absolute; left: var(--hx); top: 38.9%; }
.dian-pro-copy h4 { width: var(--hw); margin: 0 0 .4cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: max(1cqw, 12.5px); font-weight: 700; line-height: 1.2; color: #2b2d2a; }
.dian-pro-copy p { width: var(--dw); margin: 0; font-size: max(.8cqw, 10px); line-height: 1.4; color: #565b50; }
.dian-pro-btn { position: absolute; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); display: flex; align-items: center; padding-left: 1.3cqw; box-sizing: border-box; border-radius: 1.6cqw; color: #2f3b31; font-size: max(.98cqw, 12px); font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-pro-btn:hover { background: rgba(63, 91, 71, .08); color: #2f3b31; transform: translateY(-1px); }

.dian-pro-connector { position: absolute; left: 43.84%; top: 65.7%; width: 14.1%; height: 4.1%; display: flex; align-items: center; justify-content: center; }
.dian-pro-connector span { font-size: max(.72cqw, 9px); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #fff; }

.dian-pro-no { position: absolute; left: var(--nx); top: 75.2%; transform: translate(-50%, -50%); font-size: max(1.35cqw, 15px); font-weight: 400; line-height: 1; color: #a3ad9c; }
.dian-pro-step-body { position: absolute; left: var(--sx); top: 74.3%; width: var(--sw); }
.dian-pro-step-body strong { display: block; margin-bottom: .42cqw; font-size: max(1cqw, 12.5px); font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; color: #2f3b31; }
.dian-pro-step-body span { display: block; font-size: max(.76cqw, 10px); line-height: 1.4; color: #565b50; }

.dian-pro-bar-text { position: absolute; left: 10.23%; top: 90.7%; width: 33cqw; }
.dian-pro-bar-text strong { display: block; font-size: max(1cqw, 12px); font-weight: 700; line-height: 1.25; color: #2b2d2a; }
.dian-pro-bar-text span { display: block; margin-top: .2cqw; font-size: max(.82cqw, 10px); line-height: 1.35; color: #565b50; }
.dian-pro-bar-btn { position: absolute; left: 45.1%; top: 90.4%; width: 17.9%; height: 5.6%; display: flex; align-items: center; padding-left: 1.85cqw; box-sizing: border-box; border-radius: 1.2cqw; color: #fff; font-size: max(.96cqw, 12px); font-weight: 500; text-decoration: none; transition: transform .2s; }
.dian-pro-bar-btn:hover, .dian-nxt-primary:hover, .dian-nxt-outline:hover { transform: translateY(-1px); }
.dian-pro-bar-btn:hover { color: #fff; }
.dian-pro-note { position: absolute; left: 76.6%; top: 91.4%; width: 20.2%; margin: 0; font-size: max(.8cqw, 10px); line-height: 1.4; color: #565b50; }

/* ===== Halaman Layanan: Langkah Berikutnya ===== */
.dian-nxt { background: #2e4a3c; overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.dian-nxt-stage { position: relative; container-type: inline-size; aspect-ratio: 1670 / 941; color: #fff; }
.dian-nxt-picture { display: contents; }
.dian-nxt-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }

.dian-nxt-copy { position: absolute; left: 5.75%; top: 9.9%; width: 52%; }
.dian-nxt-eyebrow { font-size: max(.8cqw, 10.5px); font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: #c5d3bd; }
.dian-nxt-eyebrow::after { content: ''; display: block; width: 3.7cqw; height: 1px; margin-top: 1cqw; background: rgba(255, 255, 255, .55); }
.dian-nxt-heading { margin: .95cqw 0 .95cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: max(3.45cqw, 28px); font-weight: 600; line-height: 1.075; letter-spacing: -.01em; color: #fff; }
.dian-nxt-heading span { color: #c7d6bd; }
.dian-nxt-copy p { width: 38cqw; max-width: 100%; margin: 0 0 1.08cqw; font-size: max(1.2cqw, 13px); line-height: 1.35; color: rgba(255, 255, 255, .92); }
.dian-nxt-copy .dian-nxt-p2 { width: 32.5cqw; }

.dian-nxt-primary, .dian-nxt-outline { position: absolute; top: 70.35%; height: 8.2%; display: flex; align-items: center; justify-content: center; gap: .9cqw; box-sizing: border-box; border-radius: 1.3cqw; font-size: max(1.2cqw, 13px); font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-nxt-primary { left: 5.75%; width: 25.2%; background: #f3eee6; color: #2b2d2a; }
.dian-nxt-primary:hover { color: #2b2d2a; background: #fff; }
.dian-nxt-outline { left: 32.16%; width: 15.4%; border: 1.5px solid rgba(255, 255, 255, .75); color: #fff; }
.dian-nxt-outline:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.dian-nxt-primary svg, .dian-nxt-outline svg { width: 1.1cqw; height: 1.1cqw; min-width: 14px; min-height: 14px; }

.dian-nxt-note { position: absolute; left: 5.8%; top: 81.8%; display: flex; align-items: center; gap: 1.2cqw; }
.dian-nxt-note-icon { display: grid; place-items: center; color: #fff; }
.dian-nxt-note-icon svg { width: 3.4cqw; height: 3.4cqw; min-width: 30px; min-height: 30px; stroke-width: 1.3; }
.dian-nxt-note p { width: 28cqw; margin: 0; padding-left: 1.2cqw; border-left: 1px solid rgba(255, 255, 255, .55); font-size: max(1.02cqw, 12px); line-height: 1.4; color: rgba(255, 255, 255, .92); }

@media (max-width: 1180px) {
    .dian-pro { background: #f1efe6; }
    .dian-pro-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5vw, 60px) 44px; }
    .dian-pro-intro { position: static; width: auto; order: 1; }
    .dian-pro-eyebrow { margin-bottom: 14px; font-size: 12px; letter-spacing: .22em; }
    .dian-pro-heading { margin-bottom: 16px; font-size: clamp(1.75rem, 6.6vw, 2.8rem); line-height: 1.1; }
    .dian-pro-intro p { width: auto; margin-bottom: 14px; font-size: 1rem; line-height: 1.55; }
    .dian-pro-bg { position: relative; order: 2; display: block; width: calc(100% + 2 * clamp(20px, 5vw, 60px)); height: auto; margin: 6px calc(-1 * clamp(20px, 5vw, 60px)) 0; aspect-ratio: 672 / 290; }

    .dian-pro-cards { order: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 24px; }
    .dian-pro-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-pro-photo { display: block; order: 1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
    .dian-pro-head { position: static; order: 2; display: flex; align-items: center; gap: 12px; padding: 18px 22px 0; }
    .dian-pro-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #5f7a63; color: #fff; }
    .dian-pro-head h3 { font-size: 1.05rem; }
    .dian-pro-copy { position: static; order: 3; padding: 14px 22px 0; }
    .dian-pro-copy h4 { width: auto; margin-bottom: 8px; font-size: 1.15rem; }
    .dian-pro-copy p { width: auto; font-size: .95rem; line-height: 1.55; }
    .dian-pro-btn { position: static; order: 4; width: auto; height: auto; justify-content: space-between; margin: auto 22px 22px; padding: 14px 20px; border: 1.5px solid #3f5b47; border-radius: 14px; font-size: .95rem; font-weight: 600; }
    .dian-pro-copy { flex: 1; }
    .dian-pro-copy p { margin-bottom: 16px; }
    .dian-pro-btn svg, .dian-pro-bar-btn svg { display: block; flex: none; }

    .dian-pro-connector { position: static; order: 4; align-self: center; width: auto; height: auto; margin: 22px 0 6px; padding: 12px 26px; border-radius: 999px; background: #4b6a52; }
    .dian-pro-connector span { font-size: .72rem; }

    .dian-pro-steps { order: 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
    .dian-pro-steps li { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 12px; border-radius: 18px; background: #fbf9f4; box-shadow: 0 6px 20px rgba(60, 80, 60, .08); position: relative; }
    .dian-pro-step-img { display: block; grid-row: 1 / span 2; width: 110px; height: 84px; object-fit: cover; border-radius: 12px; }
    .dian-pro-no { position: static; transform: none; grid-column: 2; font-size: .85rem; font-weight: 700; color: #7f8b78; }
    .dian-pro-step-body { position: static; grid-column: 2; width: auto; }
    .dian-pro-step-body strong { margin-bottom: 4px; font-size: 1rem; }
    .dian-pro-step-body span { font-size: .92rem; }

    .dian-pro-bar { order: 6; display: flex; flex-direction: column; gap: 14px; margin-top: 22px; padding: 22px; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-pro-bar-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #dfe6d8; color: #3f5b47; }
    .dian-pro-bar-text { position: static; width: auto; }
    .dian-pro-bar-text strong { font-size: 1.1rem; }
    .dian-pro-bar-text span { margin-top: 6px; font-size: .95rem; line-height: 1.55; }
    .dian-pro-bar-btn { position: static; width: auto; height: auto; justify-content: space-between; padding: 16px 22px; border-radius: 14px; background: #3f5b47; font-size: .95rem; font-weight: 600; }
    .dian-pro-note { position: static; width: auto; font-size: .88rem; }

    .dian-nxt-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 52px clamp(20px, 5vw, 60px) 0; }
    .dian-nxt-copy { position: static; width: auto; }
    .dian-nxt-eyebrow { font-size: 12px; letter-spacing: .25em; }
    .dian-nxt-eyebrow::after { width: 44px; margin-top: 16px; }
    .dian-nxt-heading { margin: 16px 0 16px; font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1.1; }
    .dian-nxt-heading br { display: none; }
    .dian-nxt-copy p, .dian-nxt-copy .dian-nxt-p2 { width: auto; margin-bottom: 14px; font-size: 1rem; line-height: 1.55; }
    .dian-nxt-btns { display: contents; }
    .dian-nxt-primary, .dian-nxt-outline { position: static; width: auto; height: auto; justify-content: space-between; padding: 17px 22px; border-radius: 16px; font-size: .98rem; font-weight: 600; }
    .dian-nxt-primary { margin-top: 10px; }
    .dian-nxt-outline { margin-top: 12px; }
    .dian-nxt-primary svg, .dian-nxt-outline svg { width: 18px; height: 18px; }
    .dian-nxt-note { position: static; margin-top: 26px; gap: 16px; }
    .dian-nxt-note p { width: auto; padding-left: 16px; font-size: .92rem; }
    .dian-nxt-bg { position: relative; order: 9; display: block; width: calc(100% + 2 * clamp(20px, 5vw, 60px)); height: auto; margin: 30px calc(-1 * clamp(20px, 5vw, 60px)) 0; aspect-ratio: 970 / 941; max-height: 460px; object-position: center; }
}

@media (min-width: 760px) and (max-width: 1180px) {
    .dian-pro-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dian-pro-photo { aspect-ratio: 4 / 3; }
    .dian-pro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dian-pro-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; }
    .dian-pro-bar-btn, .dian-pro-note { grid-column: 1 / -1; }
}