:root { --paper: #fff; --sand: #f5f7fb; }
.results-panel { background: #6d5bd0; color: #fff; }
.result-label,.round-note,.fine-print,.result-breakdown span,.cost-card span,.cost-card small { color: #e5e0ff; }
.primary-result strong { color: #fff; }
.result-breakdown { border-color: #9385df; }
.cost-card,.result-stack>div { border-color: #9d90e4; background: #5d4cc0; }
.result-stack span { color: #e5e0ff; }
.copy-btn { background: #fff; color: #5d43c3; }
.explainer-card.caution { border-color: #d8d2f3; background: #f3f1ff; }
footer { background: #6452c5; }
.ad-placeholder { background: transparent; }

@media (max-width: 900px) {
  .topbar {
    height: auto;
    min-height: 58px;
    flex-wrap: wrap;
    row-gap: 0;
    padding: 10px 18px 0;
  }

  .topbar nav {
    order: 3;
    display: flex;
    width: calc(100% + 36px);
    margin: 9px -18px 0;
    overflow-x: auto;
    border-top: 1px solid #edf0f5;
    background: #fff;
    scrollbar-width: none;
  }

  .topbar nav::-webkit-scrollbar { display: none; }

  .topbar nav a {
    min-height: 43px;
    flex: 0 0 auto;
    padding: 0 16px;
    white-space: nowrap;
    border-left: 0;
    border-right: 1px solid #edf0f5;
  }
}

@media (max-width: 520px) {
  .topbar .header-cta { display: none; }
}

.results-panel.gravel-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #eef0ff;
  color: #172033;
}

.gravel-result-hero {
  position: relative;
  min-height: 218px;
  overflow: hidden;
  border-radius: 13px;
  padding: 24px;
  background: linear-gradient(135deg,#715be0 0%,#5c72db 100%);
  color: #fff;
}

.material-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  border: 1px solid #ffffff4d;
  border-radius: 99px;
  padding: 6px 10px;
  background: #ffffff1a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.material-tag i {
  width: 8px;
  height: 7px;
  border-radius: 60% 40% 48% 52%;
  background: #fff;
  transform: rotate(-12deg);
}

.gravel-result .result-label { color: #e8e4ff; }
.gravel-result .primary-result { position: relative; z-index: 2; }
.gravel-result .primary-result strong { font-size: 67px; }
.gravel-result .round-note { position: relative; z-index: 2; color: #efedff; }

.gravel-pile {
  position: absolute;
  right: 20px;
  bottom: 23px;
  width: 108px;
  height: 76px;
  opacity: .32;
}

.gravel-pile i {
  position: absolute;
  bottom: 0;
  display: block;
  background: #fff;
  box-shadow: inset -7px -6px 10px #a69ae0;
}

.gravel-pile i:nth-child(1){left:0;width:48px;height:36px;border-radius:55% 45% 50% 50%;transform:rotate(-9deg)}
.gravel-pile i:nth-child(2){left:35px;width:57px;height:45px;border-radius:45% 55% 58% 42%;transform:rotate(8deg)}
.gravel-pile i:nth-child(3){right:0;width:38px;height:31px;border-radius:60% 40% 47% 53%;transform:rotate(14deg)}
.gravel-pile i:nth-child(4){left:24px;bottom:31px;width:39px;height:32px;border-radius:48% 52% 60% 40%;transform:rotate(5deg)}
.gravel-pile i:nth-child(5){left:58px;bottom:35px;width:31px;height:26px;border-radius:58% 42% 44% 56%;transform:rotate(-13deg)}

.result-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px 0;
  font-size: 8px;
  letter-spacing: 1.1px;
  color: #687287;
}

.result-section-title b {
  color: #725dde;
  font-size: 8px;
  letter-spacing: 0;
}

.gravel-result .result-breakdown {
  gap: 8px;
  padding: 0;
  border: 0;
}

.gravel-result .result-breakdown div {
  border: 1px solid #dde1f3;
  border-radius: 9px;
  padding: 12px;
  background: #fff;
}

.gravel-result .result-breakdown span { color: #7c8496; }
.gravel-result .result-breakdown strong { color: #283146; font-size: 14px; }

.order-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 11px 13px;
  background: #e2e7ff;
  color: #42517b;
}

.order-tip>span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: #705bdd;
  color: #fff;
  font-size: 11px;
}

.order-tip p { margin: 0; }
.order-tip b,.order-tip small { display: block; }
.order-tip b { font-size: 10px; }
.order-tip small { margin-top: 2px; color: #707b99; font-size: 8px; }

.gravel-result .cost-card {
  margin: 0;
  border-color: #dde1f3;
  background: #fff;
}

.gravel-result .cost-card span,.gravel-result .cost-card small { color: #81899a; }
.gravel-result .cost-card strong { color: #273147; }
.gravel-result .copy-btn { margin: 0; background: #705bdd; color: #fff; }
.gravel-result .fine-print { margin: 0 10px 4px; color: #838b9c; }

.partners-hero { padding: 70px 20px 34px; text-align: center; }
.partners-hero h1 { margin: 8px 0 10px; color: #172033; font: 800 clamp(38px,5vw,62px)/1 Manrope; letter-spacing: -2.5px; }
.partners-hero>p:last-child { color: #687287; font-size: 14px; }
.partners-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: 1120px; margin: 0 auto 100px; padding: 0 20px; }
.partners-grid a { min-height: 190px; display: flex; flex-direction: column; border: 1px solid #e0e4ef; border-radius: 14px; padding: 23px; background: #fff; color: #172033; text-decoration: none; box-shadow: 0 7px 22px #28375508; transition: transform .18s,border-color .18s; }
.partners-grid a:hover { transform: translateY(-3px); border-color: #8c79e5; }
.partners-grid span { color: #b6acec; font: 800 21px Manrope; }
.partners-grid strong { margin-top: 28px; font: 800 18px Manrope; }
.partners-grid small { margin-top: 5px; color: #7b8496; }
.partners-grid b { margin-top: auto; color: #6b54d5; font-size: 10px; }
@media(max-width:800px){.partners-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.partners-grid{grid-template-columns:1fr}.partners-hero{padding-top:46px}}