.rate-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stz-space-13); padding-block: var(--stz-space-11) var(--stz-space-13); min-height: 75svh; }
.rate-intro h1 { font-size: clamp(var(--stz-size-h3),5.3vw,var(--stz-size-display-page-sm)); }
.rate-intro > p { max-width: 42ch; }
.rate-steps { list-style: none; padding: 0; margin-block: var(--stz-space-8); border-top: 1px solid var(--stz-border-hairline); }
.rate-steps li { padding-block: var(--stz-space-3); border-bottom: 1px solid var(--stz-border-hairline); font-size: var(--stz-size-small); }
.rate-steps li[aria-current="step"] { color: var(--stz-text); border-bottom-color: var(--stz-accent-decor); }
.rate-flow { background: var(--stz-surface-panel); padding: var(--stz-space-8); align-self: start; }
.rate-workspace > * { min-width: 0; }
.rate-primary strong, #annual-difference { overflow-wrap: anywhere; }
.rate-flow h2 { font-size: var(--stz-size-h3); }
.input-note { margin-top: var(--stz-space-4); }
.rate-actions { display: flex; flex-wrap: wrap; gap: var(--stz-space-3); margin-top: var(--stz-space-6); }
.rate-primary { border-block: 1px solid var(--stz-border-hairline); padding-block: var(--stz-space-5); margin-block: var(--stz-space-6); }
.rate-primary span, .rate-primary p { font-size: var(--stz-size-label); margin: 0; }
.rate-primary strong { display: block; color: var(--stz-accent-text); font-size: var(--stz-size-h1); line-height: var(--stz-leading-dense); }
.analysis-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stz-space-5); }
.analysis-metrics dt { font-size: var(--stz-size-caption); }
.analysis-metrics dd { margin: 0; color: var(--stz-text); font-size: var(--stz-size-title-lg); overflow-wrap: anywhere; }
.benchmark { border-top: 1px solid var(--stz-border-hairline); margin-top: var(--stz-space-6); padding-top: var(--stz-space-6); }
.benchmark h3 { font-size: var(--stz-size-title-lg); }
.benchmark p { font-size: var(--stz-size-small); line-height: var(--stz-leading-dense); }
#annual-difference { font-size: var(--stz-size-h5); line-height: var(--stz-lh-h5); }
#analysis-result > .text-link { margin-top: var(--stz-space-4); }
@media (max-width: 760px) { .rate-workspace { grid-template-columns: 1fr; gap: var(--stz-space-6); padding-top: var(--stz-space-6); } .rate-intro h1 br { display: none; } .rate-intro h1 { max-width: 12ch; } .rate-flow { padding: var(--stz-space-5); } .rate-steps { display: flex; gap: var(--stz-space-4); } .rate-steps li { flex: 1; } }