.versus-page { background: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.versus-hero { background: radial-gradient(ellipse at 100% 40%,#e8eefc,transparent 60%),#f6f8fb; padding-top: 88px; overflow: hidden; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 85px; padding-block: 72px 68px; }
.product-wordmark { font-size: clamp(64px,7.3vw,112px); line-height: 1.05; font-weight: 600; letter-spacing: -.065em; margin-block: 22px 27px; display: flex; gap: .17em; align-items: baseline; }
.product-wordmark span { color: #285bd1; }
.product-wordmark i { width: 9px; height: 9px; background: #285bd1; border-radius: 50%; margin-left: 2px; align-self: flex-end; margin-bottom: .18em; animation: signal-breathe 4s ease-in-out infinite; }
@keyframes signal-breathe { 50% { box-shadow: 0 0 0 9px #285bd10d; } }
.versus-intro h1 { font-size: clamp(26px,2.65vw,40px); line-height: 1.2; font-weight: 500; letter-spacing: -.045em; }
.accent-title { display: block; color: #496180; }
.versus-description { font-size: 14px; line-height: 1.9; color: var(--muted); margin-top: 22px; max-width: 485px; }
.versus-intro .hero-actions { gap: 24px; margin-top: 28px; }
.hero-example { background: #fff; box-shadow: 0 22px 70px #30466d0c; border-top: 2px solid #285bd1; padding: 26px 30px 24px; position: relative; animation-delay: .16s; }
.example-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #73839b; }
.example-bar > span:last-child { color: #285bd1; }
.hero-example h2 { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.035em; margin-top: 30px; max-width: 310px; }
.comparison-table { border-collapse: collapse; width: 100%; table-layout: fixed; margin-top: 28px; font-size: 12px; text-align: left; }
.comparison-table th { font-weight: 500; }
.comparison-table th:first-child { width: 40%; }
.comparison-table thead th { color: #78869a; padding: 13px 9px; font-size: 10px; }
.comparison-table th:first-child { padding-left: 0; }
.comparison-table tbody :is(th,td) { padding: 18px 9px; border-top: 1px solid #e1e7ef; line-height: 1.6; }
.comparison-table tbody th { padding-left: 0; color: #56647b; }
.comparison-table :is(td,th):last-child { background: #edf3ff; color: #214aa3; }
.comparison-table thead th:last-child { border-radius: 6px 6px 0 0; }
.hero-insight { display: flex; align-items: flex-start; gap: 14px; margin-top: 27px; }
.insight-mark { color: #285bd1; font-size: 24px; line-height: 1.1; }
.hero-insight p { font-size: 12px; line-height: 1.7; font-weight: 600; }
.hero-insight .insight-detail { font-size: 11px; color: #73839b; font-weight: 400; margin-top: 3px; }
.example-note { font-size: 10px; line-height: 1.85; color: #738097; margin-top: 22px; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); min-height: 68px; color: #728198; font-size: 10px; letter-spacing: .025em; }
.product-foot a { padding: 16px; font-size: 20px; }
.workflow-section { background: #fff; }
.workflow-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 74px; align-items: start; }
.workflow-steps { position: sticky; top: 118px; }
.workflow-step { position: relative; display: grid; grid-template-columns: 26px 1fr 18px; gap: 17px; align-items: start; width: 100%; border: 0; border-top: 1px solid #dbe3ee; background: none; text-align: left; padding: 26px 12px 26px 0; color: #5c6c83; transition: color .25s,background .25s,padding .25s; }
.workflow-step:last-child { border-bottom: 1px solid #dbe3ee; }
.step-number { font-size: 11px; padding-top: 4px; color: #91a0b4; }
.workflow-step strong { display: block; font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -.025em; }
.step-description { display: block; font-size: 12px; line-height: 1.85; margin-top: 9px; max-width: 275px; }
.step-arrow { opacity: 0; color: #285bd1; }
.workflow-step[aria-pressed="true"] { color: #183e8f; background: #f3f6fc; padding-left: 17px; }
.workflow-step[aria-pressed="true"] .step-arrow { opacity: 1; }
.workflow-step:hover { color: #285bd1; }
.workflow-example { background: #f6f8fc; padding: 28px 34px 25px; border: 1px solid #e7edf6; border-radius: 8px; min-height: 500px; display: flex; flex-direction: column; }
.step-panel { margin-top: 28px; animation: panel-in .3s ease-out; outline-offset: 6px; }
@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.step-panel h3 { font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -.035em; }
.panel-description { font-size: 12px; line-height: 1.85; color: #718199; margin-top: 13px; }
.document-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.sample-document { background: #fff; padding: 24px 20px; border: 1px solid #e4eaf3; border-radius: 3px; }
.sample-document > svg { width: 28px; height: 36px; color: #7292cc; margin-bottom: 18px; }
.sample-document strong { display: block; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.sample-document > span { display: block; font-size: 9px; line-height: 1.6; color: #8794a8; margin-top: 6px; }
.document-lines { display: grid; gap: 8px; margin-top: 22px; }
.document-lines i { height: 3px; background: #edf1f7; }
.document-lines i:last-child { width: 60%; }
.next-step { border: 0; background: transparent; padding-inline: 0; margin-top: 22px; color: #285bd1; font-size: 12px; }
.workflow-note { margin-top: auto; padding-top: 23px; }
.priority-note { font-size: 11px; line-height: 1.75; color: #5d7394; margin-top: 15px; }
.recommendation { margin-top: 23px; padding: 22px; background: #eaf1ff; border-left: 2px solid #285bd1; }
.recommendation .insight-mark { display: block; margin-bottom: 10px; }
.recommendation h4 { font-size: 17px; line-height: 1.5; font-weight: 500; color: #214a9f; }
.recommendation p { font-size: 12px; line-height: 1.85; color: #4e6487; margin-top: 12px; }
.tradeoff-note { font-size: 12px; line-height: 1.85; color: #64768f; margin-top: 18px; }
.report-note { font-size: 10px; line-height: 1.8; color: #7b8ba2; border-top: 1px solid #dce4f1; padding-top: 15px; margin-top: 20px; }
.tools-section { background: #eff3f9; }
.tools-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.tools-layout h2 { font-size: clamp(42px,4.5vw,64px); color: #285bd1; }
.tools-subtitle { font-size: 19px; font-weight: 500; line-height: 1.5; margin-top: 22px; letter-spacing: -.025em; }
.tools-layout .section-intro { font-size: 14px; max-width: 390px; margin-top: 12px; }
.tool-list > div { display: flex; gap: 24px; padding-block: 27px; border-top: 1px solid #ced9e8; }
.tool-list > div > span { font-size: 11px; color: #879bb9; padding-top: 4px; }
.tool-list h3 { font-size: 19px; font-weight: 500; line-height: 1.6; letter-spacing: -.025em; max-width: 370px; }
.tool-list > p { font-size: 10px; color: #8090a7; border-top: 1px solid #ced9e8; padding-top: 17px; }
.insurance-lines { display: grid; grid-template-columns: repeat(5,1fr); list-style: none; padding: 0; margin: 0; column-gap: 32px; }
.insurance-lines li { border-top: 1px solid #dbe3ee; padding-block: 20px 27px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.7; }
.insurance-lines li > span:first-child { color: #8c9cb3; font-size: 10px; }
.versus-contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 120px; align-items: center; }
.versus-contact h2 { max-width: 630px; }
.versus-contact .contact-intro { max-width: 510px; font-size: 14px; }
.contact-actions { display: flex; flex-direction: column; align-items: flex-start; }
.contact-actions .button-primary { min-width: 235px; background: #2850a4; border-color: transparent; }
.contact-actions .contact-email { font-size: 13px; }
@media (max-width:1100px) {
 .hero-layout { gap: 40px; }
 .hero-example { padding: 23px; }
 .workflow-layout { gap: 40px; }
 .workflow-example { padding: 26px; }
 .tools-layout,.versus-contact { gap: 60px; }
}
@media (max-width:1023px) {
 .versus-hero { padding-top: 76px; }
 .hero-layout { padding-block: 46px; gap: 38px; grid-template-columns: 1fr; }
 .versus-intro { max-width: 600px; }
 .product-wordmark { font-size: 80px; margin-block: 18px 24px; }
 .versus-intro h1 { font-size: 34px; }
 .hero-example { max-width: 620px; width: 100%; }
 .hero-example h2 { max-width: none; }
 .workflow-layout { grid-template-columns: 1fr; gap: 28px; }
 .workflow-steps { position: static; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
 .workflow-step { grid-template-columns: 1fr; gap: 12px; padding: 18px 12px; }
 .workflow-step[aria-pressed="true"] { padding-left: 12px; }
 .workflow-step:last-child { border-bottom: 0; }
 .workflow-step strong { font-size: 15px; }
 .step-description { font-size: 11px; }
 .step-arrow { display: none; }
 .workflow-example { min-height: 520px; }
 .insurance-lines { grid-template-columns: repeat(3,1fr); }
 .tools-layout { gap: 40px; }
}
@media (max-width:639px) {
 .hero-layout { padding-block: 40px 34px; gap: 32px; }
 .product-wordmark { font-size: clamp(58px,18vw,80px); }
 .versus-intro h1 { font-size: clamp(25px,6.8vw,34px); line-height: 1.22; }
 .versus-description { font-size: 13px; margin-top: 18px; }
 .versus-intro .hero-actions { margin-top: 22px; gap: 18px; }
 .hero-example { padding: 22px 18px; }
 .hero-example h2 { font-size: 21px; margin-top: 24px; }
 .comparison-table { font-size: 10px; margin-top: 20px; }
 .comparison-table th:first-child { width: 37%; }
 .comparison-table thead th { font-size: 9px; }
 .comparison-table tbody :is(th,td) { padding: 14px 7px; }
 .comparison-table tbody th { padding-left: 0; }
 .hero-insight { gap: 10px; }
 .hero-insight p { font-size: 11px; }
 .hero-insight .insight-detail,.example-note { font-size: 10px; }
 .product-foot { font-size: 9px; line-height: 1.8; }
 .workflow-steps { gap: 6px; }
 .workflow-step { padding: 14px 6px; gap: 10px; }
 .workflow-step[aria-pressed="true"] { padding-left: 6px; }
 .workflow-step strong { font-size: 12px; line-height: 1.5; }
 .step-description { display: none; }
 .workflow-example { padding: 22px 18px; min-height: 510px; }
 .step-panel h3 { font-size: 20px; }
 .document-pair { gap: 12px; }
 .sample-document { padding: 18px 12px; }
 .sample-document strong { font-size: 10px; }
 .recommendation { padding: 18px; }
 .recommendation h4 { font-size: 15px; }
 .tools-layout,.versus-contact { grid-template-columns: 1fr; gap: 32px; }
 .tools-layout h2 { font-size: 44px; }
 .tools-subtitle { font-size: 18px; }
 .tool-list h3 { font-size: 17px; }
 .insurance-lines { grid-template-columns: repeat(2,1fr); column-gap: 24px; }
 .insurance-lines li { font-size: 12px; }
 .versus-contact h2 { font-size: 36px; }
 .contact-actions .button-primary { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
 .step-panel,.product-wordmark i { animation: none; }
 .workflow-step { transition: none; }
}
