.process-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: center; gap: 28px; }
.process-hero h1 { max-width: 680px; }
.process-hero .info-hero-art { width: 100%; max-height: 245px; aspect-ratio: 1.6; object-fit: cover; }
.process-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.process-shortcuts .action-link { min-height: 38px; }
.process-source-note { margin: 8px 0 0; color: #718582; font-size: 11px; line-height: 1.7; }
.process-notice { margin: 18px 0 4px; padding: 14px 16px; border: 1px solid #ead6bd; border-left: 4px solid #ad3141; border-radius: 9px; color: #664b3d; background: linear-gradient(105deg,#fff8f2,#fffdf9); font-size: 13px; line-height: 1.8; }
.process-notice strong { color: #8f293a; }
.process-section { margin-top: 36px; }
.process-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.process-section-heading h2 { margin: 0; color: var(--deep); font-size: 23px; }
.process-section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.process-flow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; counter-reset: process-step; }
.process-step { min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 9px 13px; align-content: start; padding: 15px; border: 1px solid #dfe9e4; border-radius: 12px; background: linear-gradient(145deg,#fff,#fbfdfb); box-shadow: 0 6px 18px rgb(20 62 67 / 3%); }
.process-step-number { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d8e8df; border-radius: 13px 13px 13px 4px; color: #fff; background: linear-gradient(145deg,#0b6670,#2a877d); font-size: 15px; font-weight: 850; box-shadow: 0 5px 13px rgb(16 83 83 / 13%); }
.process-step h3 { margin: 1px 0 5px; color: #214d51; font-size: 15px; line-height: 1.55; }
.process-step p { margin: 0; color: #6b7f79; font-size: 12px; line-height: 1.8; }
.process-step figure { grid-column: 1 / -1; margin: 3px 0 0; overflow: hidden; border: 1px solid #e2eae4; border-radius: 9px; background: #eef3ee; }
.process-step figure img { display: block; width: 100%; aspect-ratio: 1.7; object-fit: cover; }
.process-step figcaption { padding: 7px 9px; color: #6c7f79; font-size: 10px; line-height: 1.5; }
.process-checklist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.process-tip { position: relative; padding: 16px 16px 15px 49px; border: 1px solid #e3eae5; border-radius: 10px; background: #fff; }
.process-tip::before { position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; content: "✓"; color: #fff; background: #388478; font-size: 12px; font-weight: 800; }
.process-tip h3 { margin: 0 0 5px; color: #315c58; font-size: 13px; }
.process-tip p { margin: 0; color: #687d77; font-size: 12px; line-height: 1.85; }
.process-tip.alert { border-color: #ecd8be; background: #fffaf3; }
.process-tip.alert::before { content: "!"; background: #ad3141; }
.process-footer-note { margin: 20px 0 0; padding: 13px 15px; border-radius: 8px; color: #70807b; background: #f0f4f1; font-size: 11px; line-height: 1.8; }
@media(max-width:800px) { .process-hero { grid-template-columns: 1fr; gap: 10px; } .process-hero .info-hero-art { max-height: 250px; aspect-ratio: 1.9; } }
@media(max-width:620px) { .process-flow,.process-checklist { grid-template-columns: 1fr; } .process-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; } .process-section-heading h2 { font-size: 20px; } .process-step { padding: 13px; } .process-step figure img { aspect-ratio: 1.62; } }