/* Dollarous Cost Calculator · Dollarous-scoped demo styles */

.calc { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.4rem, 4vw, 3.2rem); align-items: start; }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }

.calc-inputs { display: grid; gap: 1.15rem; }
.calc-inputs > h3 { font-size: 1.22rem; font-weight: 500; }
.calc-num { display: flex; align-items: stretch; }
.calc-num .pre { display: grid; place-items: center; width: 2rem; font-family: var(--d-font-ui); font-size: 0.86rem; color: var(--d-ink-45); border: 1px solid var(--d-line-2); border-right: 0; background: var(--d-surface-2); }
.calc-slider { width: 100%; accent-color: var(--d-green); }
.calc-sliderrow { display: flex; align-items: center; gap: 0.85rem; }
.calc-sliderrow output { font-family: var(--d-font-logo); font-size: 0.95rem; font-weight: 400; color: var(--d-green); font-variant-numeric: tabular-nums; min-width: 3.4rem; text-align: right; }
.calc-reset { justify-self: start; font-family: var(--d-font-ui); font-size: 0.75rem; font-weight: 600; color: var(--d-ink-45); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.calc-reset:hover { color: var(--d-green); }

/* the framed result */
.calc-out { display: grid; gap: 1.4rem; }
.calc-hero { display: grid; gap: 0.35rem; justify-items: start; border-top: 2px solid var(--d-green); border-bottom: 1px solid var(--d-line); padding: 1.3rem 0 1.5rem; }
.calc-hero .lab { font-family: var(--d-font-display); font-style: italic; font-size: 1rem; color: var(--d-ink-45); }
.calc-big { font-family: var(--d-font-logo); font-weight: 400; font-size: clamp(2.5rem, 1.4rem + 5.2vw, 4.5rem); line-height: 1.06; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.calc-big .cur { color: var(--d-green-bright); font-weight: 400; }
.calc-per { font-family: var(--d-font-ui); font-size: 0.86rem; color: var(--d-ink-45); }
.calc-per b { font-weight: 600; color: var(--d-ink-70); }

.calc-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--d-line); border: 1px solid var(--d-line); }
@media (max-width: 560px) { .calc-split { grid-template-columns: 1fr; } }
.calc-cell { background: var(--d-surface); padding: 0.9rem 1rem; display: grid; gap: 0.15rem; }
.calc-cell .k { font-family: var(--d-font-ui); font-size: 0.72rem; color: var(--d-ink-45); }
.calc-cell .v { font-family: var(--d-font-logo); font-weight: 400; font-size: 1.3rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* before / after */
.calc-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 620px) { .calc-ba { grid-template-columns: 1fr; } .calc-ba .arrow { transform: rotate(90deg); justify-self: center; } }
.ba-card { border: 1px solid var(--d-line); border-top-width: 2px; padding: 1rem 1.05rem 1.1rem; display: grid; gap: 0.35rem; background: var(--d-surface); }
.ba-card.now { border-top-color: var(--d-brass); }
.ba-card.next { border-top-color: var(--d-green); }
.ba-card .k { font-family: var(--d-font-ui); font-size: 0.73rem; font-weight: 600; color: var(--d-ink-45); }
.ba-card .v { font-family: var(--d-font-logo); font-weight: 400; font-size: clamp(1.35rem, 2.7vw, 1.8rem); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ba-card.now .v { color: var(--d-brass); }
.ba-card.next .v { color: var(--d-green); }
.ba-card .n { font-family: var(--d-font-ui); font-size: 0.75rem; line-height: 1.5; color: var(--d-ink-45); }
.calc-ba .arrow { display: grid; place-items: center; color: var(--d-line-2); }
.calc-ba .arrow svg { width: 1.3rem; height: 1.3rem; }

.calc-bar { display: grid; gap: 0.5rem; }
.calc-bar .track { height: 0.5rem; background: var(--d-surface-2); border: 1px solid var(--d-line); display: flex; }
.calc-bar .seg { height: 100%; transition: width 420ms cubic-bezier(.2,.7,.2,1); }
.calc-bar .seg.proc { background: var(--d-green); }
.calc-bar .seg.rework { background: var(--d-brass); }
.calc-bar .key { display: flex; flex-wrap: wrap; gap: 1rem; font-family: var(--d-font-ui); font-size: 0.72rem; color: var(--d-ink-45); }
.calc-bar .key i { display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; }
.calc-bar .key .proc i { background: var(--d-green); }
.calc-bar .key .rework i { background: var(--d-brass); }

/* lead-gen tail */
.calc-lead { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; border-top: 1px solid var(--d-line); padding-top: 1.2rem; }
.calc-lead .dlr-help { flex-basis: 100%; }