/* Page-local layout keeps this calculator independent of shared CSS caching. */
.confirmation-workspace { max-width: 1280px; }
.confirmation-hero { margin: 8px 0 34px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: end; gap: 48px; }
.confirmation-hero h1 { max-width: 760px; margin: 6px 0 0; font: 600 clamp(40px, 5vw, 64px)/.99 var(--font-display); letter-spacing: 0; text-wrap: balance; }
.confirmation-hero > p { max-width: 42ch; margin: 0 0 4px; color: var(--muted); font-size: 16px; }
.confirmation-tool-grid { display: grid; grid-template-columns: minmax(310px, .85fr) minmax(420px, 1.15fr); gap: 18px; }
.confirmation-input-card, .confirmation-result-card { min-width: 0; padding: clamp(24px, 3.4vw, 42px); border: 1px solid var(--border); border-radius: 20px; }
.confirmation-input-card { display: grid; align-content: start; gap: 18px; background: var(--surface); box-shadow: 0 16px 50px color-mix(in oklch, var(--primary) 7%, transparent); }
.confirmation-input-card .panel-header { margin-bottom: 6px; }
.confirmation-input-card .primary-button { margin-top: 4px; }
.confirmation-input-card .calculator-note { margin: -6px 0 0; }
.confirmation-result-card { position: relative; overflow: hidden; background: color-mix(in oklch, var(--surface-2) 46%, white); }
.confirmation-result-card::before { content: ""; position: absolute; right: -64px; top: -64px; width: 170px; height: 170px; border: 28px solid color-mix(in oklch, var(--accent) 35%, transparent); border-radius: 50%; pointer-events: none; }
.confirmation-result-card .panel-header { position: relative; z-index: 1; }
.confirmation-main-result { position: relative; z-index: 1; min-height: 162px; padding: 24px; color: var(--fg); background: color-mix(in oklch, var(--accent) 28%, white); border: 1px solid color-mix(in oklch, var(--accent) 50%, var(--border)); border-radius: 18px; }
.confirmation-main-result p { margin: 0 0 8px; color: color-mix(in oklch, var(--fg) 68%, transparent); font-size: 12px; }
.confirmation-main-result strong { display: block; font: 600 clamp(28px, 3.5vw, 42px)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.confirmation-main-result span { display: block; margin-top: 10px; color: color-mix(in oklch, var(--fg) 68%, transparent); font-size: 12px; }
.confirmation-result-list { margin-top: 14px; }
.confirmation-result-list article { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.confirmation-result-list article > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; }
.confirmation-result-list strong { font-size: 13px; font-weight: 550; }
.confirmation-result-list small { grid-column: 2; color: var(--muted); font-size: 11px; }
.confirmation-result-list b { white-space: nowrap; font: 550 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.confirmation-action { position: relative; z-index: 1; margin-top: 16px; padding: 15px 17px; border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border)); border-radius: 14px; background: white; }
.confirmation-action strong { font-size: 13px; font-weight: 650; }
.confirmation-action p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.confirmation-result-card .secondary-button { position: relative; z-index: 1; }
.confirmation-content-grid { margin-top: 54px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 20px; }
.confirmation-content-block, .confirmation-example-block { padding: clamp(24px, 3.3vw, 40px); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.confirmation-content-block h2, .confirmation-example-block h2 { margin: 8px 0 12px; font: 600 clamp(28px, 3vw, 42px)/1.07 var(--font-display); letter-spacing: 0; }
.confirmation-content-block > p:not(.eyebrow) { max-width: 60ch; margin: 0; color: var(--muted); }
.confirmation-steps { margin: 26px 0 0; padding: 0; list-style: none; }
.confirmation-steps li { min-height: 80px; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 13px; border-top: 1px solid var(--border); }
.confirmation-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--primary); background: color-mix(in oklch, var(--accent) 32%, white); border-radius: 50%; font: 600 10px/1 var(--font-mono); }
.confirmation-steps strong { font-size: 14px; }
.confirmation-steps p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.confirmation-example-block { color: white; background: var(--primary); border-color: var(--primary); }
.confirmation-example-block .panel-number { color: var(--accent); }
.confirmation-example-block dl { margin: 28px 0; }
.confirmation-example-block dl > div { padding: 14px 0; display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid color-mix(in oklch, white 14%, transparent); }
.confirmation-example-block dt, .confirmation-example-block > p { color: color-mix(in oklch, white 68%, transparent); font-size: 12px; }
.confirmation-example-block dd { margin: 0; font: 600 16px/1 var(--font-mono); }
.confirmation-example-block > p { margin: 0; }
.confirmation-faq { margin-top: 54px; }
.confirmation-faq .info-heading { margin-bottom: 24px; }
.confirmation-faq .info-heading h2 { font-size: clamp(30px, 4vw, 52px); }
@media (max-width: 1040px) { .confirmation-hero, .confirmation-tool-grid, .confirmation-content-grid { grid-template-columns: 1fr; } .confirmation-hero { gap: 14px; } .confirmation-hero > p { max-width: 62ch; } }
@media (max-width: 680px) { .confirmation-hero { margin-top: 0; margin-bottom: 24px; } .confirmation-hero h1 { font-size: 40px; } .confirmation-tool-grid { gap: 14px; } .confirmation-input-card, .confirmation-result-card, .confirmation-content-block, .confirmation-example-block { padding: 22px 17px; border-radius: 18px; } .confirmation-result-list article { align-items: flex-start; } .confirmation-result-list article > div { grid-template-columns: 1fr; } .confirmation-result-list small { grid-column: 1; } .confirmation-result-list .agency { display: none; } .confirmation-content-grid, .confirmation-faq { margin-top: 34px; } }