/* The two planning case studies share a quiet, borderless canvas. */
.planning-case{margin-top:36px;padding:28px;background:#f2f6f3;border:0;border-radius:6px;color:#283a30;min-width:0}
.planning-case-label{display:flex;gap:10px;align-items:center;margin:0 0 12px!important;font-size:13px;font-weight:500;line-height:20px;color:var(--accent,#147d68)}
.planning-case-label>span{font:10px/20px Inter,sans-serif;letter-spacing:.07em;padding-right:10px;border-right:1px solid #c3d7cc}
.planning-case-header>h3{margin:0 0 12px;font-size:24px;line-height:1.5;color:#17251d}
.planning-case-header>p:not(.planning-case-label){max-width:770px;margin:0;font-size:15px;line-height:1.85}
.planning-case--selection{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:center}
.planning-window-viewport{position:relative;min-width:0;width:100%;height:310px;overflow:hidden;border-radius:9px;background:#fff;box-shadow:0 10px 30px -14px #204c3a2e,0 0 0 1px #e2e8e4}
.planning-window{width:880px;min-width:880px;transform:scale(var(--plan-scale,.5));transform-origin:top left;letter-spacing:0;background:#fff}
.plan-browser-bar{height:30px;padding:0 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #e7ece9;background:#f8faf8;color:#a3ada6;font:8px/1 Inter,sans-serif}
.plan-browser-dots{display:flex;gap:5px}.plan-browser-dots>i{width:6px;height:6px;border-radius:50%;background:#e7b3a9}.plan-browser-dots>i:nth-child(2){background:#e6d5a3}.plan-browser-dots>i:nth-child(3){background:#b4cebf}
.plan-app-header{display:flex;gap:16px;align-items:center;min-height:52px;padding:12px 22px;border-bottom:1px solid #edf0ee}
.plan-app-header>img{display:block;width:88px;height:24px;object-fit:contain}
.plan-app-header>span:not(.plan-preview-tag){font:8px/1.5 Inter,sans-serif;letter-spacing:.12em;color:#84988b}
.plan-preview-tag{margin-left:auto;padding:3px 7px;border-radius:4px;background:#eff5f1;color:#6b8977;font-size:8px;line-height:15px}
.plan-app-content{padding:20px 22px 22px}
.plan-screen-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.plan-screen-heading p{margin:0 0 4px!important;color:#8d9f93;font:7px/12px Inter,sans-serif;letter-spacing:.14em}
.plan-screen-heading h4{margin:0;color:#203a2b;font-size:18px;font-weight:500;line-height:26px}
.plan-period-tabs{display:flex;gap:2px;padding:3px;background:#f0f3f1;border-radius:6px}
.plan-period-tabs>button{padding:5px 12px;border:0;border-radius:4px;background:transparent;color:#829087;font:500 10px/18px Inter,'Noto Sans JP',sans-serif;white-space:nowrap;cursor:pointer}
.plan-period-tabs>button[aria-selected=true]{background:#fff;color:#255d43;box-shadow:0 1px 4px #173d3615}
.plan-period-tabs>button:hover{color:#145a3c}.plan-period-tabs>button:focus-visible{outline:2px solid var(--accent,#147d68);outline-offset:2px}
.plan-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:18px 0 22px}
.plan-summary>div+div{padding-left:20px;border-left:1px solid #e6ede8}
.plan-summary>div>span:first-child{display:block;margin-bottom:9px;color:#84988b;font-size:9px;line-height:14px}
.plan-summary .plan-skeleton{height:13px;max-width:120px}
.plan-skeleton{display:block;height:5px;width:var(--skeleton-width,64%);max-width:100%;margin-inline:auto;border-radius:2px;background:#dbe2dd}
.plan-skeleton.is-accent{background:#b0cbbd}.plan-summary .plan-skeleton{margin-inline:0}
.plan-period-panel[hidden]{display:none!important}
.plan-forecast-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:20px;align-items:start}
.plan-table-scroll{min-width:0;overflow:auto}
.plan-forecast-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:8px;line-height:14px;color:#6b8172}
.plan-forecast-table caption,.plan-sensitivity-card caption{caption-side:top}
.plan-forecast-table th,.plan-forecast-table td{height:35px;padding:7px 5px;text-align:center;border-bottom:1px solid #e8eeea}
.plan-forecast-table th:first-child{width:100px;text-align:left;font-weight:400}
.plan-forecast-table thead th{height:32px;color:#82978a;font-weight:400;border-bottom:1px solid #c8d7cd}
.plan-forecast-table .is-total{background:#e8f1ec;color:#2f694b}
.plan-forecast-table .is-total>th{font-weight:500}
.plan-forecast-chart{min-width:0;margin:0;padding:0 0 0 10px;border-left:1px solid #edf1ee}
.plan-forecast-chart>figcaption{font-size:9px;line-height:18px;color:#56745f}
.plan-forecast-chart>svg{display:block;width:100%;height:auto;margin-top:0;max-width:300px}
.plan-sensitivity-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:18px;margin-top:20px;border-top:1px solid #e7ede9}
.plan-sensitivity-heading>h4{margin:0;color:#385d46;font-size:11px;line-height:18px;font-weight:500}
.plan-sensitivity-heading>span{color:#96a79b;font-size:8px;line-height:16px}
.plan-sensitivity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:10px}
.plan-sensitivity-card{min-width:0}
.plan-sensitivity-card>h5{padding:6px 10px;margin:0;background:#f0f5f1;color:#486d55;font-size:9px;line-height:14px;font-weight:500}
.plan-sensitivity-card>table{width:100%;table-layout:fixed;border-collapse:collapse;color:#82968a;font-size:8px;line-height:14px}
.plan-sensitivity-card th,.plan-sensitivity-card td{padding:6px 5px;height:27px;border-bottom:1px solid #fff;text-align:center;font-weight:400}
.plan-sensitivity-card th:first-child{width:70px;text-align:left}
.plan-sensitivity-card tbody td{background:#f5f8f6}
.plan-sensitivity-card .is-base{background:#e6f0e9}
.plan-sensitivity-card tbody tr.is-base>td,.plan-sensitivity-card tbody td.is-base{background:#e0eee5}
.plan-sensitivity-card td.is-intersection{background:#c4dfcf!important}
.plan-sensitivity-card .plan-skeleton{height:4px;background:#ceddd3}
.plan-sensitivity-card .is-base .plan-skeleton,.plan-sensitivity-card td.is-base .plan-skeleton{background:#a6c3b0}
.plan-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Apply this class to a wrapper around the existing refinance example. */
.planning-case--exit .planning-exit-example{margin-top:0}
.planning-case--exit .planning-example-label{display:none}
.planning-case--exit .planning-refinance-figure{border:0;box-shadow:none;border-radius:4px}
.planning-case--exit .planning-conclusion{margin-bottom:0!important}
@media(max-width:767px){
 .planning-case{margin-top:28px;padding:20px 16px;border-radius:5px}
 .planning-case-header>h3{font-size:21px}
 .planning-case-header>p:not(.planning-case-label){font-size:14px;line-height:1.8}
 .planning-case--selection{grid-template-columns:minmax(0,1fr);gap:20px}
 .planning-window-viewport{border-radius:7px;max-width:520px;margin-inline:auto}
 .planning-case--exit .planning-exit-example{gap:20px}
}