.dpe-simulator { --dpe-ink: #193c31; --dpe-muted: #596b63; max-width: 1040px; margin: 2rem auto; padding: clamp(20px, 5vw, 60px); border-radius: 24px; background: #f3f6f1; color: var(--dpe-ink); font: 16px/1.6 system-ui, -apple-system, sans-serif; text-align: left; }
.dpe-simulator *, .dpe-simulator *::before, .dpe-simulator *::after { box-sizing: border-box; }
.dpe-simulator :is(h2,h3,h4,p,dl,dt,dd) { padding: 0; margin: 0; color: inherit; font-family: inherit; }
.dpe-simulator .dpe-intro { margin-bottom: 32px; }
.dpe-simulator .dpe-eyebrow { display: inline-block; margin-bottom: 20px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dpe-simulator .dpe-intro h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; }
.dpe-simulator .dpe-intro h2 span { color: #35744e; }
.dpe-simulator .dpe-intro > p {margin-top: 20px; color: var(--dpe-muted); }
.dpe-simulator .dpe-panel { padding: clamp(20px, 3vw, 32px); border: 1px solid #dfe7dc; border-radius: 18px; background: #fff; box-shadow: 0 8px 28px #193c3105; }
.dpe-simulator .dpe-panel + .dpe-panel { margin-top: 24px; }
.dpe-simulator .dpe-step { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.dpe-simulator .dpe-step > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #dce6d7; border-radius: 50%; font-size: 11px; font-weight: 700; color: #567146; }
.dpe-simulator .dpe-step :is(h3,p) { font-size: 15px; line-height: 1.35; font-weight: 650; }
.dpe-simulator .dpe-form { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin: 0; }
.dpe-simulator .dpe-field { flex: 1 1 290px; min-width: 0; }
.dpe-simulator label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.dpe-simulator input[type="text"] { display: block; width: 100%; height: 54px; padding: 14px 16px; border: 1px solid #91a595; border-radius: 8px; background: #fcfdfa; color: var(--dpe-ink); font: inherit; letter-spacing: .055em; box-shadow: none; }
.dpe-simulator input::placeholder { color: #65776c; opacity: 1; letter-spacing: .025em; }
.dpe-simulator button { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 54px; margin: 29px 0 0; padding: 13px 20px; border: 1px solid #193c31; border-radius: 8px; background: #193c31; color: #fff; font: 600 14px/1.5 system-ui, sans-serif; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; }
.dpe-simulator button span { font-size: 21px; line-height: 1; }
.dpe-simulator button:hover { background: #2b5943; }
.dpe-simulator :is(input,button):focus-visible { outline: 3px solid #2d69ce; outline-offset: 3px; }
.dpe-simulator .dpe-help { margin: 10px 0 0; color: var(--dpe-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.dpe-simulator .dpe-search-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid #edf0e9; color: var(--dpe-muted); font-size: 12px; }
.dpe-simulator .dpe-message { margin: 16px 0; padding: 14px 16px; border-radius: 8px; background: #eef5eb; font-size: 14px; }
.dpe-simulator .dpe-error { color: #842020; background: #fff0ee; border-left: 3px solid #a32b2b; }
.dpe-simulator .dpe-badge { margin-left: auto; padding: 4px 10px; border-radius: 5px; background: #f0f4eb; color: #49653d; font-size: 11px; font-weight: 650; }
.dpe-simulator h3.dpe-result-title { font-size: clamp(23px, 3vw, 30px); line-height: 1.25; letter-spacing: -.025em; font-weight: 650; }
.dpe-simulator .dpe-result-intro { margin-top: 10px; color: var(--dpe-muted); font-size: 14px; }
.dpe-simulator .dpe-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 12px; margin: 28px 0 24px; }
.dpe-simulator .dpe-comparison-panel { min-width: 0; padding: 22px; border: 1px solid #e0e5dd; border-radius: 12px; background: #fafbf8; }
.dpe-simulator .dpe-estimated { border-color: #b9cfad; background: #f3f8ed; }
.dpe-simulator .dpe-comparison-panel h4 { margin-bottom: 20px; font-size: 13px; font-weight: 600; }
.dpe-simulator .dpe-transition { text-align: center; color: #73896b; font-size: 27px; }
.dpe-simulator .dpe-label { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 20px; color: #172a20; }
.dpe-simulator .dpe-values { display: grid; grid-template-columns: 1fr; min-width: 0; font-size: 10px; }
.dpe-simulator .dpe-values strong { font-size: 22px; font-weight: 650; line-height: 1.2; }
.dpe-simulator .dpe-values strong:nth-of-type(2) { margin-top: 10px; }
.dpe-simulator .dpe-values span { color: #52624f; white-space: nowrap; }
.dpe-simulator .dpe-letter { display: flex; align-items: center; justify-content: center; flex: 0 0 86px; height: 108px; padding-right: 10px; color: #000; font-size: 60px; font-weight: 750; line-height: 1; clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%); }
.dpe-simulator .dpe-scale { display: flex; gap: 4px; margin-top: 22px; }
.dpe-simulator .dpe-scale > span { display: grid; place-items: center; flex: 1; height: 7px; border-radius: 2px; font-size: 0; }
.dpe-simulator .dpe-scale > .dpe-active { height: 20px; margin-top: -6px; font-size: 10px; font-weight: 750; color: #000; outline: 2px solid #193c31; outline-offset: 2px; }
.dpe-simulator .dpe-A { background: #009640; }
.dpe-simulator .dpe-B { background: #2eb87c; }
.dpe-simulator .dpe-C { background: #c6d700; }
.dpe-simulator .dpe-D { background: #ffe600; }
.dpe-simulator .dpe-E { background: #f6a500; }
.dpe-simulator .dpe-F { background: #e55d00; }
.dpe-simulator .dpe-G { background: #d60000; }
.dpe-simulator .dpe-gain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 20px 24px; border-radius: 10px; background: #193c31; color: #fff; }
.dpe-simulator .dpe-gain > strong { font-size: 36px; line-height: 1.2; letter-spacing: -.04em; font-weight: 650; }
.dpe-simulator .dpe-gain p { font-size: 14px; font-weight: 600; }
.dpe-simulator .dpe-gain span { color: #d1dfd0; font-size: 12px; }
.dpe-simulator .dpe-home { margin-top: 28px; padding: 22px 0; border-top: 1px solid #e7ece2; border-bottom: 1px solid #e7ece2; }
.dpe-simulator .dpe-home h4 { margin-bottom: 8px; color: var(--dpe-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dpe-simulator .dpe-address { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.dpe-simulator .dpe-details { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 16px; }
.dpe-simulator dt { font-size: 11px; color: var(--dpe-muted); }
.dpe-simulator dd { margin-top: 3px; font-size: 14px; font-weight: 550; }
.dpe-simulator .dpe-footer { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; padding: 0 4px; }
.dpe-simulator .dpe-footer-mark { color: #567146; font-size: 24px; }
.dpe-simulator .dpe-footer p { font-size: 13px; font-weight: 600; }
.dpe-simulator .dpe-footer p span { display: block; margin-top: 4px; max-width: 660px; color: var(--dpe-muted); font-size: 12px; font-weight: 400; }
@media (max-width: 700px) {
    .dpe-simulator .dpe-comparison { grid-template-columns: 1fr; gap: 8px; }
    .dpe-simulator .dpe-transition { transform: rotate(90deg); line-height: 1; }
    .dpe-simulator .dpe-form button { width: 100%; margin-top: 0; }
    .dpe-simulator .dpe-field { flex-basis: 100%; }
    .dpe-simulator .dpe-badge { font-size: 10px; }
    .dpe-simulator .dpe-comparison-panel { padding: 20px; }
    .dpe-simulator .dpe-letter { flex-basis: 96px; }
}
@media (max-width: 380px) {
    .dpe-simulator { padding: 16px; border-radius: 16px; }
    .dpe-simulator .dpe-panel { padding: 16px; }
    .dpe-simulator .dpe-step { gap: 8px; flex-wrap: wrap; }
    .dpe-simulator .dpe-badge { margin-left: 38px; }
    .dpe-simulator .dpe-label { gap: 12px; }
    .dpe-simulator .dpe-letter { flex-basis: 76px; }
}