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