/* Roof Maxx Qualification Quiz — scoped styles.
   Everything lives under .rmq-wrap so it can't leak into (or be
   overridden by) the active theme's global styles. */

.rmq-wrap{
  --rmq-white:#ffffff;
  --rmq-navy:#063b66;
  --rmq-blue:#078fbd;
  --rmq-orange:#df7b32;
  --rmq-ink:#1f2a36;
  --rmq-muted:#667487;
  --rmq-line:#d8e0e7;
  --rmq-soft:#f5f7f9;
  --rmq-blue-soft:#eef7fb;
  --rmq-orange-soft:#fff5ec;
  --rmq-positive:#1c8a5c;
  --rmq-positive-soft:#e9f7f0;
  --rmq-neutral:#df7b32;
  --rmq-neutral-soft:#fff5ec;
  --rmq-negative:#c0392b;
  --rmq-negative-soft:#fdecea;
  --rmq-shadow:0 12px 28px rgba(0,0,0,.12);

  box-sizing:border-box;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--rmq-ink);
  max-width:860px;
  margin:0 auto;
}

.rmq-wrap *,
.rmq-wrap *::before,
.rmq-wrap *::after{
  box-sizing:border-box;
}

.rmq-tool{
  background:var(--rmq-white);
  border-radius:12px;
  box-shadow:var(--rmq-shadow);
  overflow:hidden;
}

.rmq-intro{
  margin:24px 24px 0;
  background:var(--rmq-navy);
  color:#fff;
  border-radius:14px 14px 0 0;
  border-right:6px solid var(--rmq-blue);
  padding:24px 20px 22px;
}

.rmq-eyebrow{
  margin:0 0 10px;
  font-size:.84rem;
}

.rmq-intro hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.4);
  margin:0 0 10px;
}

.rmq-intro h2{
  margin:0 0 10px;
  font-size:1.15rem;
  line-height:1.3;
}

.rmq-intro p{
  margin:0 0 8px;
  line-height:1.5;
  color:#f1f6fa;
}

.rmq-accent-line{
  height:4px;
  margin:0 24px;
  background:var(--rmq-orange);
}

.rmq-content{
  background:#fff;
  padding:18px 24px 0;
  min-height:340px;
}

.rmq-step-label{
  margin:0 0 20px;
  color:var(--rmq-blue);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.rmq-question-title{
  margin:0 0 10px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--rmq-navy);
  font-size:clamp(1.5rem, 4.5vw, 2.25rem);
  line-height:1.1;
  letter-spacing:-.015em;
  font-weight:800;
  text-transform:uppercase;
}

.rmq-helper{
  margin:0 0 18px;
  color:var(--rmq-muted);
  line-height:1.5;
}

.rmq-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:8px;
}

.rmq-option{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:52px;
  padding:13px 16px;
  border:2px solid var(--rmq-line);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

.rmq-option:hover{
  border-color:#abc8d9;
  background:#fbfdff;
}

.rmq-option:has(input:checked){
  border-color:var(--rmq-blue);
  background:var(--rmq-blue-soft);
}

.rmq-option input{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:2px solid #cfd9e3;
  border-radius:50%;
  background:#fff;
  position:relative;
  flex:0 0 auto;
  margin:0;
}

.rmq-option input[type="checkbox"]{
  border-radius:4px;
}

.rmq-option input:checked{
  border-color:var(--rmq-blue);
}

.rmq-option input:checked::after{
  content:"";
  position:absolute;
  inset:4px;
  background:var(--rmq-blue);
  border-radius:50%;
}

.rmq-option input[type="checkbox"]:checked::after{
  inset:3px;
  border-radius:2px;
}

.rmq-option span{
  color:#536175;
  line-height:1.4;
}

.rmq-error{
  display:none;
  margin:16px 0 0;
  color:#9e4b33;
  font-weight:700;
}

.rmq-footer{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:22px 24px;
  border-top:1px solid var(--rmq-line);
  background:#fff;
}

.rmq-wrap button{
  min-height:44px;
  padding:12px 22px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.rmq-back{
  color:#697788;
  background:#fff;
  border:2px solid var(--rmq-line);
}

.rmq-back:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.rmq-next{
  background:#a8b9c6;
  color:#fff;
  min-width:126px;
}

.rmq-next.rmq-ready{
  background:var(--rmq-navy);
}

.rmq-result-card{
  border:1px solid #d6e0e8;
  border-left:5px solid var(--rmq-blue);
  border-radius:14px;
  background:#fff;
  padding:30px 38px;
  box-shadow:0 3px 14px rgba(0,0,0,.05);
  transition:border-color .2s ease;
}

/* Sentiment-coded left accent on the whole result card. */
.rmq-result-card.rmq-positive{ border-left-color:var(--rmq-positive); }
.rmq-result-card.rmq-neutral{ border-left-color:var(--rmq-neutral); }
.rmq-result-card.rmq-negative{ border-left-color:var(--rmq-negative); }

/* "Your Result" label sits directly beside the outcome pill so the
   verdict reads as one unit instead of two separate lines. */
.rmq-result-heading{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:22px;
}

.rmq-result-heading-label{
  color:var(--rmq-muted);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.rmq-badge{
  display:inline-flex;
  align-items:center;
  padding:9px 20px;
  border-radius:999px;
  border:2px solid #bad7e8;
  background:var(--rmq-blue-soft);
  color:var(--rmq-navy);
  font-size:.92rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

.rmq-result-card.rmq-positive .rmq-badge{
  border-color:var(--rmq-positive);
  background:var(--rmq-positive-soft);
  color:var(--rmq-positive);
}

.rmq-result-card.rmq-neutral .rmq-badge{
  border-color:var(--rmq-neutral);
  background:var(--rmq-neutral-soft);
  color:#b75c21;
}

.rmq-result-card.rmq-negative .rmq-badge{
  border-color:var(--rmq-negative);
  background:var(--rmq-negative-soft);
  color:var(--rmq-negative);
}

.rmq-result-title{
  margin:0 0 14px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:clamp(1.5rem, 4.5vw, 2.3rem);
  line-height:1.1;
  letter-spacing:-.015em;
  font-weight:800;
  text-transform:uppercase;
  color:var(--rmq-navy);
}

.rmq-special{
  margin:0 0 24px;
  padding:18px 20px;
  background:#f5f8fa;
  border:1px solid var(--rmq-line);
  border-left:4px solid var(--rmq-orange);
  border-radius:8px;
}

.rmq-special-label{
  margin:0 0 10px;
  color:var(--rmq-orange);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.rmq-special-content p{
  margin:0 0 10px;
}

.rmq-special-content p:last-child{
  margin-bottom:0;
}

.rmq-special-content .rmq-already{
  margin-top:12px;
  font-weight:800;
  color:var(--rmq-navy);
}

.rmq-result-card p{
  margin:0 0 12px;
  line-height:1.55;
  color:#334154;
}

.rmq-result-lead{
  margin-top:18px !important;
  margin-bottom:10px !important;
  font-weight:800;
  color:var(--rmq-navy) !important;
}

.rmq-result-cta-copy{
  margin-top:6px !important;
  margin-bottom:18px !important;
}

.rmq-result-footnote{
  margin-top:18px !important;
  margin-bottom:0 !important;
  padding-top:14px;
  border-top:1px solid var(--rmq-line);
  color:#697788 !important;
  font-size:.82rem;
  line-height:1.5 !important;
}

.rmq-result-bullets{
  list-style:none;
  padding:0;
  margin:18px 0 24px;
}

.rmq-result-bullets li{
  position:relative;
  padding-left:24px;
  margin-bottom:10px;
  line-height:1.45;
  color:#334154;
}

.rmq-result-bullets li::before{
  content:"→";
  position:absolute;
  left:0;
  color:var(--rmq-blue);
  font-weight:800;
}

.rmq-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.rmq-cta-primary{
  background:var(--rmq-navy);
  color:#fff;
}

.rmq-cta-secondary{
  background:#fff;
  color:var(--rmq-navy);
  border:2px solid var(--rmq-navy);
}

.rmq-disclaimer{
  padding:16px 24px 22px;
  border-top:1px solid var(--rmq-line);
  background:#eef1f4;
  color:#5d6a79;
  font-size:.87rem;
  line-height:1.55;
  font-style:italic;
}

.rmq-hidden{
  display:none !important;
}

/* Tablet and below */
@media (max-width:700px){
  .rmq-intro{margin:18px 16px 0}
  .rmq-accent-line{margin:0 16px}
  .rmq-content{padding:18px 16px 0}
  .rmq-footer{padding:18px 16px}
  .rmq-disclaimer{padding:16px}
  .rmq-result-card{padding:24px 18px}
  .rmq-options{grid-template-columns:1fr}
}

/* Small phones */
@media (max-width:420px){
  .rmq-intro{padding:20px 16px 18px}
  .rmq-intro h2{font-size:1.05rem}
  .rmq-footer{flex-wrap:wrap}
  .rmq-back,
  .rmq-next{flex:1 1 auto}
  .rmq-cta-row{flex-direction:column}
  .rmq-cta-row button{width:100%}
  .rmq-result-card{padding:20px 14px}
}