/* Visual system derived from resolvia.ai: warm white, charcoal, restrained gray. */
:root {
  --ink: #202123;
  --muted: #687078;
  --soft: #969ba4;
  --canvas: #fafbfc;
  --line: #e5e7e9;
  color: var(--ink);
  background: var(--canvas);
}

body { background: var(--canvas); }

.topbar {
  height: 66px;
  padding-inline: max(34px, calc((100vw - 1370px) / 2));
  border-bottom: 1px solid #ebedef;
  background: rgba(250, 251, 252, .96);
  gap: 24px;
}
.topbar .brand { gap: 0; }
.brand img { width: 145px; height: 33px; }
.topbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 32px;
}
.topbar-nav a { color: #454a50; font-size: 13px; font-weight: 500; }
.topbar-nav a:hover { color: var(--ink); }
.topbar-cta, .hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 12px;
  background: var(--ink);
  color: white;
  box-shadow: 0 2px 5px #10111414;
  font-weight: 600;
  transition: transform .18s, background .18s;
}
.topbar-cta { padding: 11px 17px; font-size: 12px; white-space: nowrap; }
.topbar-cta:hover, .hero-cta:hover { background: #383a3d; transform: translateY(-1px); }

.hero {
  max-width: 1200px;
  padding: 83px 28px 61px;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid #e4e6e8;
  border-radius: 999px;
  background: #fff;
  color: #71767d;
  font-size: 10px;
  letter-spacing: .13em;
}
.eyebrow-line { display: none; }
.hero h1 {
  max-width: 920px;
  margin: 23px auto 19px;
  color: var(--ink);
  font-size: clamp(43px, 5.5vw, 70px);
  font-weight: 500;
  letter-spacing: -.056em;
  line-height: 1.12;
}
.hero h1 em {
  color: #9a9fa9;
  text-decoration: underline;
  text-decoration-color: #c8cbd1;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
.hero > p {
  max-width: 700px;
  margin: 0 auto;
  color: #545b64;
  font-size: 16px;
  line-height: 1.7;
}
.hero-cta { margin-top: 30px; min-height: 48px; padding: 0 25px; font-size: 13px; }
.hero-cta span { font-size: 17px; font-weight: 400; }
.hero-meta { justify-content: center; gap: 11px 22px; margin-top: 27px; color: #848b94; }
.check { color: var(--ink); }

.workspace { max-width: 1260px; gap: 22px; padding-bottom: 92px; }
.input-panel, .result-card, .breakdown-card {
  border-color: var(--line);
  background: white;
  border-radius: 18px;
  box-shadow: 0 2px 10px #20212307;
}
.input-panel { padding: 30px; }
.section-kicker { color: #9298a0; font-size: 10px; letter-spacing: .15em; }
.section-heading h2 { margin-top: 12px; color: var(--ink); font-size: 25px; font-weight: 600; }
.section-heading p { color: #828890; }
.subtle-button { color: #575e66; border-color: #e5e7e9; border-radius: 10px; padding: 9px 12px; }
.subtle-button:hover { background: #f3f4f5; }

.total-volume-card { border-color: #e6e8ea; background: #fbfbfc; border-radius: 13px; }
.total-volume-card p { color: #969ba2; }
.total-volume-card input, .share-field > div, .field select {
  border-color: #e1e4e6;
  background: white;
  border-radius: 9px;
}
.total-volume-card input:focus, .share-field:focus-within > div, .field select:focus {
  border-color: #8f9499;
  box-shadow: 0 0 0 3px #2021230c;
}
.rate-card { background: #f7f7f8; border-color: #e9eaec; border-radius: 13px; }
.rate-top output { background: #e9eaec; color: var(--ink); border-radius: 9px; }
.rate-top p, .range-labels, .category-heading { color: #969ba2; }
input[type=range] { background: #e0e2e5; }
input[type=range]::-webkit-slider-thumb { background: var(--ink); box-shadow: 0 1px 4px #2021233d; }
input[type=range]::-moz-range-thumb { background: var(--ink); box-shadow: 0 1px 4px #2021233d; }

.category { border-color: #e8eaec; border-radius: 13px; }
.category:focus-within { border-color: #9ba0a6; box-shadow: 0 0 0 3px #2021230a; }
.category-icon { background: #e9eef7; color: #596e95; }
.category:nth-child(2) .category-icon { background: #f5ece3; color: #956c48; }
.category:nth-child(3) .category-icon { background: #f5e8e8; color: #9b5e60; }
.category:nth-child(4) .category-icon { background: #f9f0d8; color: #987e3f; }
.category-name p, .field label { color: #8a9199; }
.share-detail span { color: #70777f; }
.field label strong { color: var(--ink); }
.category-options { border-color: #eff0f1; }
.other-row { background: #f8f9f9; border-color: #dcdee1; }
.input-note { color: #8c929a; }

.result-card {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 8px 24px #20212319;
}
.result-top { color: #b5b7bc; }
.result-kicker { color: #d9dadd; }
.live-dot { background: #91cda3; box-shadow: 0 0 0 3px #91cda329; }
.result-card h2 { color: #e5e6e8; }
.price > span:first-child { color: #fff; }
.price-period, .result-caption { color: #b5b9bf; }
.metric-grid, .metric-grid > div + div { border-color: #ffffff26; }
.metric-grid small, .progress-note { color: #aaadb3; }
.progress-head { color: #d2d5d8; }
.progress-head strong { color: #fff; }
.progress-track { background: #ffffff2c; }
.progress-track > div { background: #f4f4f4; }
.breakdown-card h3, .breakdown-total { color: var(--ink); }
.breakdown-row span { color: #41474e; }
.breakdown-row small { color: #9299a1; }
.breakdown-row strong { color: var(--ink); }
.result-disclaimer { color: #90969e; }
.result-disclaimer strong { color: #595f67; }

.method { border-color: #e8e9eb; }
.method h2 { color: var(--ink); font-weight: 500; }
.method p { color: #727982; }
.formula { border-color: #e7e9eb; border-radius: 16px; box-shadow: 0 2px 10px #20212307; }
.formula > span { color: #999da4; }
.formula b, .formula .formula-result { color: var(--ink); }
footer { border-color: #e8e9eb; background: #fff; }
.footer-brand img { width: 114px; height: auto; }

@media (max-width: 950px) {
  .topbar-nav { gap: 17px; }
  .workspace { gap: 16px; }
  .results { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .topbar { height: 64px; padding: 0 20px; }
  .brand img { width: 125px; height: auto; }
  .topbar-nav { display: none; }
  .topbar-cta { margin-left: auto; padding: 10px 12px; font-size: 11px; }
  .hero { padding: 58px 20px 43px; }
  .hero h1 { font-size: clamp(38px, 10vw, 47px); line-height: 1.13; }
  .hero h1 br { display: inline; }
  .hero > p { font-size: 14px; }
  .hero-meta { max-width: 360px; margin-inline: auto; }
  .workspace { padding: 0 16px 64px; }
  .input-panel { padding: 20px; }
  .results { grid-template-columns: 1fr; }
  .method { margin: 0 20px 48px; }
}

.processing-card { margin-top: 12px; padding: 20px; border: 1px solid #e9eaec; border-radius: 13px; background: #f7f7f8; }
.processing-intro { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; margin-bottom: 16px; }
.processing-intro strong { font-size: 13px; font-weight: 600; }
.processing-intro p { margin: 6px 0 0; color: #858b93; font-size: 11px; line-height: 1.5; }
.processing-intro > span { flex: none; border-radius: 999px; padding: 6px 9px; background: #e9eaec; color: #555b62; font-size: 10px; font-weight: 600; }
.processing-field { padding: 12px 0; border-top: 1px solid #e6e7e9; }
.processing-field > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.processing-field label, .processing-field > div > span { font-size: 12px; font-weight: 600; }
.processing-field > div > div { display: flex; align-items: center; width: 75px; height: 34px; padding: 0 9px; border: 1px solid #e1e4e6; border-radius: 9px; background: #fff; }
.processing-field input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; text-align: right; font-size: 13px; font-weight: 600; }
.processing-field > div > div span { margin-left: 3px; color: #9ca6b2; font-size: 12px; }
.processing-field:focus-within > div > div { border-color: #8f9499; box-shadow: 0 0 0 3px #2021230c; }
.processing-field p { margin: 4px 0 0; color: #90969e; font-size: 10px; line-height: 1.45; }
.processing-remainder { padding-bottom: 0; }
.processing-remainder strong { font-size: 13px; }
.category-options { grid-template-columns: 1fr; }
.processing-results { margin: -7px 0 17px; }
.processing-results > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: #c9cbd0; font-size: 11px; }
.processing-results strong { color: #fff; font-weight: 600; }
.preview-note { margin: -13px 0 20px; padding: 9px 11px; border: 1px solid #ffffff2a; border-radius: 9px; color: #d7d8db; background: #ffffff0c; font-size: 10px; line-height: 1.45; }
.preview-note[hidden] { display: none; }
@media (max-width: 650px) { .processing-card { padding: 16px; } .processing-intro { display: block; } .processing-intro > span { display: inline-block; margin-top: 10px; } }

.wizard-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 28px; }
.wizard-progress-line { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: #e8e9eb; }
.wizard-progress-line span { display: block; width: 25%; height: 100%; border-radius: inherit; background: #202123; transition: width .25s; }
.wizard-tab { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 10px 0; border: 0; background: none; color: #9298a0; text-align: left; font-size: 10px; font-weight: 600; overflow-wrap: anywhere; }
.wizard-tab span { display: grid; place-items: center; flex: none; width: 23px; height: 23px; border: 1px solid #dedfe2; border-radius: 50%; color: #9298a0; font-size: 9px; }
.wizard-tab.active { color: #202123; }
.wizard-tab.active span { border-color: #202123; background: #202123; color: #fff; }
.wizard-tab:hover { color: #202123; }
.wizard-step[hidden] { display: none; }
.wizard-step { min-height: 350px; padding-top: 25px; }
.step-heading > span { color: #9298a0; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.step-heading h3 { margin: 10px 0 8px; color: #202123; font-size: 21px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
.step-heading p { max-width: 580px; margin: 0; color: #7c838b; font-size: 12px; line-height: 1.65; }
.step-heading p strong { color: #41464d; font-weight: 600; }
.wizard-step .total-volume-card { margin-top: 23px; }
.wizard-step .processing-card { margin-top: 23px; }
.step-tip { margin-top: 13px; color: #888e96; font-size: 11px; }
.step-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 28px; padding-top: 21px; border-top: 1px solid #eceef0; }
.step-next { display: inline-flex; align-items: center; gap: 13px; padding: 11px 16px; border: 0; border-radius: 10px; background: #202123; color: #fff; font-size: 11px; font-weight: 600; }
.step-next:hover { background: #383a3d; }
.step-back { margin-right: auto; padding: 10px 2px; border: 0; background: none; color: #646a72; font-size: 11px; font-weight: 600; }
.step-back:hover { color: #202123; }
.wizard-step .category-heading { margin-top: 23px; }
.complexities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 23px; }
.complexity-card { min-width: 0; padding: 16px; border: 1px solid #e8eaec; border-radius: 13px; background: #fff; }
.complexity-card:focus-within { border-color: #9ba0a6; box-shadow: 0 0 0 3px #2021230a; }
.complexity-main { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.complexity-main h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.complexity-main p { margin: 0; color: #9299a1; font-size: 10px; }
.complexity-card .field label { margin-bottom: 7px; }
.complexity-card .field select { font-size: 12px; }
@media (max-width: 650px) {
  .wizard-progress { gap: 4px; }
  .wizard-tab { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 9px; }
  .wizard-step { min-height: 300px; }
  .step-heading h3 { font-size: 19px; }
  .complexities { grid-template-columns: 1fr; }
}

/* Reveal the estimate only after the guided inputs are complete. */
.workspace { display: flex; justify-content: center; align-items: flex-start; gap: 0; transition: gap .8s cubic-bezier(.22, 1, .36, 1); }
.workspace .input-panel { flex: 0 0 760px; max-width: 100%; transition: flex-basis .8s cubic-bezier(.22, 1, .36, 1); }
.workspace .results { flex: 0 0 0; width: 0; min-width: 0; opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; transform: translateX(50px); transition: flex-basis .8s cubic-bezier(.22, 1, .36, 1), opacity .55s ease .2s, transform .8s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .8s; }
.workspace.show-results { gap: 22px; }
.workspace.show-results .input-panel { flex-basis: calc(62% - 14px); }
.workspace.show-results .results { flex-basis: calc(38% - 8px); width: auto; opacity: 1; visibility: visible; overflow: visible; pointer-events: auto; transform: translateX(0); transition: flex-basis .8s cubic-bezier(.22, 1, .36, 1), opacity .55s ease .2s, transform .8s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
@media (max-width: 950px) {
  .workspace { flex-direction: column; align-items: center; }
  .workspace .input-panel { flex: 0 0 auto; width: min(760px, 100%); transition: width .6s cubic-bezier(.22, 1, .36, 1); }
  .workspace .results { flex: 0 0 auto; width: 100%; max-width: 760px; max-height: 0; transform: translateY(35px); }
  .workspace.show-results { gap: 16px; }
  .workspace.show-results .input-panel { flex: 0 0 auto; width: 100%; max-width: 760px; }
  .workspace.show-results .results { flex: 0 0 auto; width: 100%; max-height: 3000px; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .workspace, .workspace .input-panel, .workspace .results, .workspace.show-results .results { transition: none; }
}

/* Customer logo marquee below the calculator. */
.workspace:not(.show-results) .results { height: 0; max-height: 0; }
.workspace.show-results .results { height: auto; }
.workspace { padding-bottom: 42px; }
.customer-logos { max-width: 1216px; margin: 0 auto 72px; padding: 27px 0 6px; border-top: 1px solid #e8e9eb; }
.customer-logos-label { margin: 0 0 19px; color: #9198a2; font-size: 10px; font-weight: 700; letter-spacing: .17em; text-align: center; }
.customer-logos-window { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.customer-logos-track { display: flex; width: max-content; animation: customer-logos-scroll 38s linear infinite; }
.customer-logos-window:hover .customer-logos-track, .customer-logos-window:focus-within .customer-logos-track { animation-play-state: paused; }
.customer-logos-set { display: flex; align-items: center; flex: none; gap: 38px; padding-right: 38px; }
.customer-logos-set > a, .customer-logos-set > span { width: 155px; height: 62px; display: flex; flex: none; align-items: center; justify-content: center; }
.customer-logos-set > a { transition: opacity .2s ease; }
.customer-logos-set > a:hover { opacity: .58; }
.customer-logos-set img { display: block; max-width: 150px; max-height: 47px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) brightness(.24); opacity: .75; }
.customer-logos-set img[src$="betterbebold.png"] { max-width: 67px; max-height: 54px; }
.customer-logos-set img[src$="ladypolitan.png"] { max-height: 56px; }
.customer-logos-set img[src$="cfab.png"] { filter: grayscale(1); mix-blend-mode: multiply; }
@keyframes customer-logos-scroll { to { transform: translateX(-50%); } }
@media (max-width: 650px) {
  .workspace { padding-bottom: 33px; }
  .customer-logos { margin: 0 16px 52px; padding-top: 24px; }
  .customer-logos-set { gap: 18px; padding-right: 18px; }
  .customer-logos-set > a, .customer-logos-set > span { width: 135px; height: 57px; }
  .customer-logos-set img { max-width: 130px; max-height: 43px; }
  .customer-logos-track { animation-duration: 32s; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-logos-window { overflow-x: auto; mask-image: none; }
  .customer-logos-track { animation: none; }
}