.est-hero { background: var(--color-navy); color: var(--color-on-navy); padding-block: clamp(var(--space-10), 6vw, var(--space-16)); }
.est-hero .eyebrow { color: #aebcff; }
.est-hero h1 { font-size: var(--text-hero); line-height: 1; color: #fff; max-width: 16ch; margin-bottom: var(--space-5); }
.est-hero h1 span { color: #ff8e8e; }
.est-hero .lede { color: var(--color-on-navy-muted); }
.est-section { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); }
.est-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start; }
.est { min-height: 420px; }
.est .btn { width: auto; }
.est-h { font-size: var(--text-xl); line-height: 1.1; margin-bottom: var(--space-2); outline: none; }
.est-count { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-blue); margin-bottom: var(--space-2); }
.est-progress { height: 6px; background: var(--color-offset); border-radius: 99px; margin-bottom: var(--space-4); overflow: hidden; }
.est-progress span { display: block; height: 100%; background: var(--color-red); border-radius: 99px; transition: width var(--transition-interactive); }
.est-body { margin-block: var(--space-5); }
.est-nav { display: flex; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-6); }
.est-nav .btn-red { margin-left: auto; min-width: 160px; }
.field-block { margin-bottom: var(--space-6); }
.blk-l { display: block; font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.blk-l em { font-weight: 400; font-style: normal; color: var(--color-muted); }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.opt { position: relative; display: grid; gap: 2px; align-content: start; padding: var(--space-4); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-interactive), background var(--transition-interactive); }
.opt:hover { border-color: var(--color-blue); }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt:focus-within { box-shadow: 0 0 0 3px rgba(27,47,143,.25); border-color: var(--color-blue); }
.opt.is-on { border-color: var(--color-navy); background: #fff; box-shadow: inset 0 0 0 1.5px var(--color-navy); }
.opt-t { font-weight: 700; }
.opt-d { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.35; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); }
.pick-card { text-align: left; padding: var(--space-6); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); display: grid; gap: var(--space-1); cursor: pointer; transition: border-color var(--transition-interactive), transform var(--transition-interactive); font: inherit; color: inherit; }
.pick-card:hover { border-color: var(--color-red); transform: translateY(-2px); }
.pick-card:focus-visible { outline: 3px solid rgba(27,47,143,.4); outline-offset: 2px; }
.pick-card strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-navy); }
.pick-card span { color: var(--color-muted); font-size: var(--text-sm); }
.slider-val { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-navy); }
.slider-val output { font-size: inherit; }
.slider-val span { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.slider input[type=range] { width: 100%; accent-color: var(--color-red); height: 32px; margin-top: var(--space-2); }
.slider-scale { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-muted); }
.stepper { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--color-divider); }
.stepper strong { display: block; }
.stepper span { font-size: var(--text-xs); color: var(--color-muted); }
.stepper-ctl { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.stepper-ctl output { min-width: 1.5ch; text-align: center; font-weight: 800; font-size: var(--text-lg); }
.step-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-navy); background: #fff; color: var(--color-navy); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.step-btn:hover { background: var(--color-navy); color: #fff; }
.est-result .est-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 4.5vw, 3.6rem); line-height: 1.05; color: var(--color-navy); margin-block: var(--space-3) var(--space-2); }
.est-small, .est-compare, .est-note { color: var(--color-muted); font-size: var(--text-sm); max-width: 60ch; }
.est-compare { margin-top: var(--space-2); }
.est-lines { list-style: none; margin-block: var(--space-5); border-top: 1px solid var(--color-divider); }
.est-lines li { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); max-width: none; }
.est-lines b { white-space: nowrap; }
.est-cta { margin-top: var(--space-6); padding: var(--space-5); background: var(--color-bg); border-radius: var(--radius-md); display: grid; gap: var(--space-3); justify-items: start; }
.est-cta p { max-width: none; }
.est-other { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--text-sm); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--color-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.est-aside { display: grid; gap: var(--space-5); }
.est-aside h2 { font-size: var(--text-lg); max-width: none; margin-bottom: var(--space-2); }
.est-aside p, .est-aside li { font-size: var(--text-sm); color: var(--color-muted); max-width: none; }
.est-aside ul { list-style: none; display: grid; gap: var(--space-3); }
.est-aside li { display: flex; gap: var(--space-3); }
.est-aside li svg { width: 20px; height: 20px; flex: none; color: var(--color-red); margin-top: 2px; }
.est-cta-band { background: var(--color-offset); }
.est-cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-8); }
.est-cta-band h2 { font-size: var(--text-xl); max-width: 26ch; margin: 0; line-height: 1.1; }
.est-cta-band p { color: var(--color-muted); max-width: 46ch; margin-top: var(--space-2); }
@media (max-width: 860px) { .est-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pick { grid-template-columns: 1fr; } .opts { grid-template-columns: 1fr; } .est-nav .btn { flex: 1; } .est-nav .btn-red { min-width: 0; } .est-lines li { flex-direction: column; gap: var(--space-1); } }
@media (prefers-reduced-motion: reduce) { .pick-card, .opt, .est-progress span { transition: none; } .pick-card:hover { transform: none; } }
.est, .est-h { scroll-margin-top: 96px; }