/* the audit tool */
.tool { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 48px); align-items: start }
@media (max-width: 960px) { .tool { grid-template-columns: 1fr } }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px 18px }
.calc-grid .span-2 { grid-column: span 2 }
@media (max-width: 520px) { .calc-grid .span-2 { grid-column: auto } }
.scenarios { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px }
.chip { font: 500 .86rem var(--body); padding: .45em .9em; border: 1.5px solid var(--rule); background: var(--sheet); border-radius: 99px; cursor: pointer; color: var(--ink2) }
.chip.active, .chip:hover { border-color: var(--green); color: var(--green); background: var(--green-soft) }
.prorata { margin-top: 14px; font: 500 .9rem var(--mono); color: var(--ink2); padding: 10px 12px; background: var(--green-soft); border: 1px solid var(--rule) }
.calc-example, .calc-note, .capture-fine { font-size: .82rem; color: var(--ink2); margin-top: 12px }
.calc-out { background: var(--sheet); border: 1px solid var(--rule); border-top: 4px solid var(--red); padding: 24px; position: sticky; top: 92px }
.calc-out-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px }
.badge { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--rule); color: var(--ink2); border-radius: 2px }
.badge-risk { border-color: var(--red); color: var(--red); background: rgba(198, 54, 44, .07) }
.calc-total { display: grid; gap: 2px }
.calc-total-label { font: 500 .76rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red) }
.calc-total-num { font: 800 clamp(2.2rem, 4.6vw, 3.2rem)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.calc-total-unit { color: var(--ink2); font-size: .9rem }
.calc-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule) }
.calc-sub div { font-size: .88rem; color: var(--ink2) }
.calc-sub b { display: block; font: 600 1.15rem var(--mono); color: var(--ink); font-variant-numeric: tabular-nums }
.verdict { margin-top: 16px; font-size: .95rem; color: var(--ink2) }
.findings { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 0 }
.finding { padding: 14px 0; border-top: 1px dotted var(--rule) }
.finding-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline }
.finding-tag { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green) }
.finding-amt { font: 600 1rem var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.finding p { font-size: .9rem; color: var(--ink2); margin-top: 6px }
.finding-cite { font: 400 .8rem var(--mono); color: var(--ink2); margin-top: 6px }
.calc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px }

/* lead capture */
.capture { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule) }
.capture > label { font: 700 1.1rem var(--display) }
.capture-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px }
.capture-row input { flex: 2 1 220px }
.capture-row select { flex: 1 1 170px; font-family: var(--body); font-size: .95rem }
.capture button { flex: 0 0 auto; padding: .75em 1.2em; border-radius: 3px; border: 0; font: 600 1rem var(--body); cursor: pointer }
.capture button:hover { background: var(--green) }
.capture-msg { margin-top: 10px; font-size: .88rem; color: var(--green) }
.capture-msg.error { color: var(--red) }

/* upload */
.dropzone { border: 2px dashed var(--rule); background: var(--sheet); padding: clamp(24px, 4vw, 40px); text-align: center; border-radius: 4px }
.dropzone.dragover { border-color: var(--green); background: var(--green-soft) }
.dropzone h3 { margin-bottom: 8px }
.dropzone p { color: var(--ink2); font-size: .95rem; max-width: 46em; margin-inline: auto }
.paste { margin-top: 28px }

/* compare */
.cmp { width: 100%; border-collapse: collapse; font-size: .98rem }
.cmp th, .cmp td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top }
.cmp thead th { font: 500 .76rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2) }
.cmp td:last-child { font-weight: 600; background: linear-gradient(90deg, var(--green-soft), transparent) }
.scroll { overflow-x: auto }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0; border: 1px solid var(--rule); background: var(--sheet) }
.tier { padding: 26px 22px; border-left: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; grid-template-rows: auto auto auto 1fr auto }
.tier:first-child { border-left: 0 }
@media (max-width: 1020px) { .tier { border-left: 0; border-top: 1px solid var(--rule) } .tier:first-child { border-top: 0 } }
.tier-star { background: var(--ink); color: #fff }
.tier-star .tier-blurb, .tier-star li { color: #C3CFD6 }
.tier-star .btn { background: var(--hi); color: var(--ink); border-color: var(--hi) }
.price { font: 800 2.2rem/1 var(--display); letter-spacing: -.03em }
.price small { display: block; margin-top: 8px; font: 400 .8rem var(--mono); letter-spacing: 0; opacity: .75; min-height: 1em }
.tier-blurb { font-size: .93rem; color: var(--ink2) }
.tier ul { margin: 4px 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; align-content: start; font-size: .9rem; color: var(--ink2) }
.tier li::before { content: "+ "; font-family: var(--mono); color: var(--green) }
.tier-star li::before { color: var(--hi) }
.tier-custom { grid-column: 1/-1; padding: 16px 22px; border-top: 1px solid var(--rule); font-size: .95rem; color: var(--ink2) }
.pricing-status { padding: 22px; color: var(--ink2) }

/* faq */
.faqs { max-width: 50em }
.faq { border-top: 1px solid var(--rule); padding-block: 6px }
.faq summary { cursor: pointer; font: 700 1.08rem var(--display); padding-block: 12px; list-style: none; display: flex; justify-content: space-between; gap: 16px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--green) }
.faq[open] summary::after { content: "\2212" }
.faq p { color: var(--ink2); padding-bottom: 16px; max-width: 42em }