/* ============================================================
   PURE FINISH NW - Instant Price Estimate
   Loaded only on instant-price.html. Uses the custom properties
   defined in styles.css; add nothing here that other pages need.
   ============================================================ */

.ip-shell { max-width: 780px; margin: 0 auto; }

.ip-loading {
  text-align: center;
  padding: var(--space-3xl) 0;
  color: var(--color-text-dark);
}

/* ---------- Progress ---------- */
.ip-progress { margin-bottom: var(--space-lg); }

.ip-progress-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.ip-progress-fill {
  height: 100%;
  background-image: var(--red-gradient);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.ip-progress-label {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dark);
}

/* ---------- Step card ---------- */
.ip-step {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl);
}

.ip-step-title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-xs);
  outline: none;
}

.ip-step-sub {
  color: var(--color-text-dark);
  margin-bottom: var(--space-lg);
  max-width: 52ch;
}

.ip-group-title {
  font-size: var(--text-lg);
  margin: var(--space-lg) 0 var(--space-sm);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.ip-group-title:first-child { margin-top: 0; }
.ip-group-title span { font-weight: 400; color: var(--color-text-dark); font-size: var(--text-sm); }

.ip-note {
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
}

/* ---------- Sketches ----------
   The drawings inherit their colour from the card, so selection and hover
   states carry through to the artwork without any extra rules. */
.ip-sk {
  display: block;
  color: var(--color-text-dark);
  overflow: visible;
}

.ip-sk .hi      { stroke: var(--color-accent); }
.ip-sk .soft    { opacity: 0.4; }
.ip-sk .dash    { stroke-dasharray: 3 2.5; opacity: 0.45; }
.ip-sk .fill    { fill: currentColor; stroke: none; opacity: 0.08; }
.ip-sk .fill-hi { fill: var(--color-accent); stroke: none; opacity: 0.16; }
.ip-sk .dot     { fill: var(--color-accent); stroke: none; opacity: 0.85; }
.ip-sk .patch   { fill: currentColor; stroke: none; opacity: 0.3; }

/* ---------- Selection cards ---------- */
.ip-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.ip-cards-compact { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }

.ip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.ip-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }

.ip-card.is-selected {
  border-color: var(--color-accent);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(200, 49, 23, 0.12);
}

.ip-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}

.ip-card-art .ip-sk { width: 66px; height: 66px; }

/* Illustrated options get a taller, tighter well - the drawing is the
   point, so it gets the room. */
.ip-card-art.is-photo { padding: var(--space-xs) var(--space-xs) 0; }

.ip-photo {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: contain;
}

/* Illustrated rows get a bigger tile than the diagrams - a front door
   and a back door are only telling apart at a decent size. */
.ip-counter-art.is-photo {
  width: 66px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.ip-counter-art.is-photo .ip-photo { width: 100%; height: 56px; }

.ip-card.is-selected .ip-card-art { background: rgba(200, 49, 23, 0.04); }

.ip-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.ip-card-label {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.25;
}

.ip-card-note {
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  line-height: 1.45;
}

.ip-cards-compact .ip-card-label { font-size: var(--text-base); }

/* Multi-select variant: same card, plus a tick well in the corner. */
.ip-card-multi .ip-card-tick {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  transition: background var(--transition), border-color var(--transition);
}

.ip-card-multi.is-selected .ip-card-tick {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---------- Counters ---------- */
.ip-counters { display: flex; flex-direction: column; }

.ip-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}

.ip-counter:last-child { border-bottom: 0; }

.ip-counter-art {
  flex-shrink: 0;
  width: 46px;
  padding: 2px 0;
}

.ip-counter-art .ip-sk { width: 46px; height: 46px; }

.ip-counter-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }

.ip-counter-label { font-weight: 600; color: var(--color-heading); }

.ip-counter-hint {
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  line-height: 1.4;
}

.ip-stepper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ip-step-btn {
  width: 44px; height: 44px;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-heading);
  background: var(--color-bg-light);
  border: 0; border-radius: 0; padding: 0;
  box-shadow: none;
  transition: background var(--transition), color var(--transition);
}

.ip-step-btn:hover { background: var(--color-accent); color: var(--color-white); }

.ip-step-value {
  width: 56px; height: 44px;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-heading);
  background: var(--color-white);
  border: 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  outline: none;
}

.ip-step-value:focus { background: rgba(200, 49, 23, 0.06); }

/* ---------- Checkboxes ---------- */
.ip-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}

.ip-check input {
  width: 20px; height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.ip-check em { font-style: normal; color: var(--color-text-dark); }

.ip-consent {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
}

.ip-consent a { color: var(--color-accent); text-decoration: underline; }

.ip-honey { position: absolute; left: -9999px; }

/* ---------- Contact fields ---------- */
.ip-lede { color: var(--color-text-dark); margin-bottom: var(--space-lg); }

.ip-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.ip-field { display: flex; flex-direction: column; }

.ip-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.35rem;
}

.ip-field input {
  padding: 0.8em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text-body);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.ip-field input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(200, 49, 23, 0.12);
}

.ip-field-help {
  margin-top: 0.35rem;
  font-size: var(--text-xs);
  color: var(--color-text-dark);
}

.pf-klarna-note {
  display: inline-block;
  font-weight: 600;
  color: #17120f;
  background: #ffb3c7;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  margin-top: 0.5rem;
}

.ip-confirm-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); }
.pf-confirm-note { margin-top: var(--space-sm); font-size: var(--text-sm); }

.ip-field.has-error input { border-color: var(--color-accent); background: rgba(200, 49, 23, 0.04); }
.ip-field.has-error .ip-field-help { color: var(--color-accent); }
.ip-field.has-error .ip-field-help::before { content: 'That does not look right - '; }

.ip-teaser {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
}

.ip-teaser-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dark);
}

.ip-teaser-value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-heading);
}

/* ---------- Navigation ---------- */
.ip-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.ip-back {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-dark);
  padding: 0.6em 0;
}

.ip-back:hover { color: var(--color-accent); }

.ip-next[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Running total ---------- */
.ip-runtotal {
  position: fixed;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.7rem 1.3rem;
  background: var(--color-bg-dark);
  color: var(--color-white);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  animation: ip-pop 0.3s ease;
}

@keyframes ip-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ip-runtotal-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.ip-runtotal-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
}

/* ---------- Result ---------- */
.ip-step-result { text-align: center; }

.ip-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.ip-result-figure { margin: var(--space-sm) 0 var(--space-md); }

.ip-result-range {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-heading);
}

.ip-result-range em { font-style: normal; color: var(--color-accent); }

.ip-result-poa { font-size: var(--text-4xl); }

.ip-result-ref {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dark);
}

.ip-result-lede {
  max-width: 46ch;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-body);
}

.ip-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* Bug fix, 2026-09-19 (CEO report): .btn's base white-space:nowrap made longer button labels
   overflow their container on narrow screens instead of wrapping. Result-screen buttons can carry
   longer copy than most buttons on the site, so let their text wrap onto a second line. */
.ip-result-actions .btn { white-space: normal; text-align: center; }

.ip-btn-wa { background-color: #1da851; background-image: none; border-color: #1da851; }
.ip-btn-wa:hover { background-color: #179045; border-color: #179045; }

.ip-copy-note { text-align: left; }

.ip-breakdown {
  margin-top: var(--space-lg);
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ip-breakdown summary {
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  cursor: pointer;
  background: var(--color-bg-light);
  color: var(--color-heading);
}

.ip-breakdown .ip-note { margin: 0 var(--space-md) var(--space-md); }

.ip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ip-table td { padding: 0.6rem var(--space-md); border-bottom: 1px solid var(--color-border); }
.ip-table .ip-qty { text-align: center; width: auto; white-space: nowrap; color: var(--color-text-dark); }
.ip-table .ip-amt { text-align: right; width: 7rem; font-weight: 600; white-space: nowrap; }
.ip-table tfoot td { font-weight: 700; background: var(--color-bg-light); border-bottom: 0; }

.ip-smallprint {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-dark);
  text-align: left;
}

.ip-restart {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-dark);
  text-decoration: underline;
}

.ip-restart:hover { color: var(--color-accent); }

/* ---------- Reassurance strip under the tool ---------- */
.ip-assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.ip-assurance h3 { font-size: var(--text-lg); margin-bottom: 0.3rem; }
.ip-assurance p { font-size: var(--text-sm); color: var(--color-text-dark); }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .ip-step { padding: var(--space-md); border-radius: var(--radius-md); }
  .ip-step-title { font-size: var(--text-2xl); }
  .ip-cards { grid-template-columns: 1fr; }
  /* Two across on a phone: door styles and conditions are only useful
     when you can see them side by side. */
  .ip-cards-compact,
  .ip-cards-multi { grid-template-columns: 1fr 1fr; }
  .ip-cards-compact .ip-card-art .ip-sk,
  .ip-cards-multi .ip-card-art .ip-sk { width: 56px; height: 56px; }
  .ip-photo { height: 88px; }
  .ip-counter-art.is-photo { width: 52px; padding: 2px; }
  .ip-counter-art.is-photo .ip-photo { height: 44px; }
  .ip-cards-compact .ip-card-body,
  .ip-cards-multi .ip-card-body { padding: var(--space-xs) var(--space-sm) var(--space-sm); }
  .ip-counter-art, .ip-counter-art .ip-sk { width: 38px; }
  .ip-counter-art .ip-sk { height: 38px; }
  .ip-fields { grid-template-columns: 1fr; }
  .ip-result-range { font-size: var(--text-4xl); }
  .ip-counter { gap: var(--space-sm); }
  .ip-counter-hint { font-size: var(--text-xs); }
  .ip-step-btn { width: 40px; height: 40px; }
  .ip-step-value { width: 46px; height: 40px; }
  .ip-result-actions .btn { width: 100%; justify-content: center; }
  .ip-runtotal { bottom: 0; left: 0; right: 0; transform: none;
                 border-radius: var(--radius-md) var(--radius-md) 0 0;
                 justify-content: space-between; animation: none; }
  body:has(.ip-runtotal) { padding-bottom: 72px; }
  /* The running-total bar is the primary action on mobile; the floating
     WhatsApp button would sit on top of the +/- controls, so hide it
     while the bar is up. It returns on the result screen. */
  body:has(.ip-runtotal) .whatsapp-float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-card:hover { transform: none; }
  .ip-progress-fill { transition: none; }
  .ip-runtotal { animation: none; }
}

/* ---------- Travel ---------- */
/* 2026-10 fix brief item 5: the old negative top margin pulled this line up under the step
   heading on step 8. The line is no longer rendered; kept harmless in case it is reused. */
.ip-travel-hint { margin: 0 0 var(--space-lg); }

/* Softer than the accent-barred notes, so it does not compete with the
   instruction note underneath it. */
.ip-travel-note {
  text-align: left;
  border-left-color: var(--color-border);
}

.ip-travel-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-dark);
}

/* ============================================================
   Two-route quote flow (2026-10-04): route choice, "How it works",
   photo upload, notes, submit status
   ============================================================ */
.ip-how-pair { margin-top: var(--space-lg); }
.ip-how-pair .ip-group-title { margin-top: var(--space-sm); }

.ip-how {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-light);
  padding: 0.75rem 1rem;
  margin: var(--space-sm) 0;
}
.ip-how summary { cursor: pointer; font-weight: 600; color: var(--color-heading); }
.ip-how-steps { margin: 0.6rem 0 0.2rem; padding-left: 1.3rem; }
.ip-how-steps li { margin-bottom: 0.3rem; font-size: var(--text-sm); }

.ip-photos { margin: var(--space-sm) 0 var(--space-md); }
.ip-photo-pick {
  display: flex; align-items: center; gap: var(--space-sm);
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  background: rgba(200, 49, 23, 0.04);
  min-height: 72px;
}
.ip-photo-pick:hover, .ip-photo-pick:focus-within { background: rgba(200, 49, 23, 0.09); }
.ip-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ip-photo-pick-icon {
  flex: 0 0 44px; height: 44px; border-radius: 50%;
  background-image: var(--red-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
}
.ip-photo-pick-text { display: flex; flex-direction: column; }
.ip-photo-pick-text strong { color: var(--color-heading); font-size: var(--text-lg); }
.ip-photo-pick-text span { font-size: var(--text-sm); color: var(--color-text-dark); }

.ip-photo-list {
  list-style: none; margin: var(--space-sm) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.75rem;
}
.ip-photo-item {
  position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-white); display: flex; flex-direction: column;
}
.ip-photo-item img, .ip-photo-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--color-bg-alt); }
.ip-photo-state { font-size: var(--text-xs); font-weight: 600; padding: 0.35rem 0.5rem 0; }
.ip-photo-item.is-done .ip-photo-state { color: #1d7a3a; }
.ip-photo-item.is-error { border-color: var(--color-accent); }
.ip-photo-item.is-error .ip-photo-state { color: var(--color-accent); }
.ip-photo-item.is-uploading img, .ip-photo-item.is-processing img { opacity: 0.55; }
.ip-photo-error { font-size: var(--text-xs); color: var(--color-accent); padding: 0 0.5rem; margin: 0.2rem 0 0; }
.ip-photo-tools { display: flex; gap: 0.4rem; padding: 0.4rem 0.5rem 0.5rem; margin-top: auto; }
.ip-photo-btn {
  font: inherit; font-size: var(--text-xs); font-weight: 600;
  border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-heading);
  border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; cursor: pointer; min-height: 32px;
}
.ip-photo-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.ip-photo-status { font-size: var(--text-sm); margin-top: 0.6rem; color: var(--color-text-dark); }
.ip-photo-status.is-error { color: var(--color-accent); font-weight: 600; }
.ip-photo-prompt { margin-bottom: 0.4rem; }

.ip-field-notes { margin: var(--space-sm) 0; }
.ip-field textarea {
  font: inherit; padding: 0.8em 1em; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); resize: vertical; min-height: 84px; outline: none;
}
.ip-field textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(200, 49, 23, 0.12); }

.ip-submit-status { font-size: var(--text-sm); margin: var(--space-sm) 0; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); }
.ip-submit-status:empty { display: none; }
.ip-submit-status.is-sending { background: var(--color-bg-light); }
.ip-submit-status.is-sent { background: #eaf6ee; color: #1d5e31; }
.ip-submit-status.is-error { background: #fbeae6; color: var(--color-accent); font-weight: 600; }
.ip-submit-status .ip-photo-btn { margin-left: 0.4rem; }
.ip-result-ref-line { margin: var(--space-xs) 0; }

@media (max-width: 640px) {
  .ip-photo-list { grid-template-columns: 1fr 1fr; }
  .ip-field input, .ip-field textarea { font-size: 16px; } /* stops iOS zooming into fields */
}

/* 2026-10: uPVC instant estimate on the result screen */
.ip-estimate-box {
  background: var(--color-accent-soft, #fdebe3);
  border: 1px solid rgba(200, 50, 12, 0.25);
  border-radius: 14px;
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  text-align: center;
}
.ip-estimate-label { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.3rem; }
.ip-estimate-figure { font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 2.8rem); color: var(--color-heading); line-height: 1.1; margin-bottom: 0.4rem; }
.ip-estimate-note { color: var(--color-text-dark); font-size: var(--text-sm); }
.ip-estimate-items { margin: 0 0 var(--space-md); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.ip-estimate-items li { background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: var(--text-sm); color: var(--color-text-body); }

/* 2026-10 fix brief item 7: the five condition cards left one orphan on its own row. Three
   across on wider screens gives a balanced 3 + 2, with the last row centred. */
@media (min-width: 641px) {
  .ip-cards-balanced {
    grid-template-columns: repeat(6, 1fr);
  }
  .ip-cards-balanced > .ip-card { grid-column: span 2; }
  .ip-cards-balanced > .ip-card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
@media (max-width: 640px) {
  .ip-cards-balanced > .ip-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 2026-10: on the result screens the steps the customer has already done are ticked off. */
.ip-how-steps li.is-done { color: var(--color-text-dark); text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.25); }
.ip-how-steps li.is-done::marker { content: "\2713  "; color: #25a35a; }
.ip-estimate-box + .ip-breakdown { margin-bottom: var(--space-lg); }

/* ---------- Explanation box + Yes/No questions (2026-10-09) ----------
   Every one-question step opens with a short explanation of what to count, then Yes / No. */
.ip-info {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.ip-info-art { flex: 0 0 72px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; color: var(--color-text-dark); }
.ip-info-art .ip-sk { width: 64px; height: 64px; }
.ip-info-art.is-photo img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-sm); }
.ip-info-text { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-body); }
.ip-info-text strong { color: var(--color-heading); }
.ip-cards.ip-cards-yn { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.ip-cards-yn .ip-card { justify-content: center; text-align: center; min-height: 64px; }
.ip-cards-yn .ip-card-label { font-size: var(--text-lg); }
.ip-yn-counts { margin-top: var(--space-lg); }
@media (max-width: 480px) {
  .ip-info { align-items: flex-start; padding: var(--space-sm) var(--space-md); }
  .ip-info-art { flex-basis: 52px; width: 52px; height: 52px; }
  .ip-info-art .ip-sk { width: 48px; height: 48px; }
  .ip-info-art.is-photo img { width: 52px; height: 52px; }
}

/* "Continue without photos" (2026-10-11): a quiet link normally, a clear button once an upload fails. */
.ip-photo-skip {
  display: block;
  margin: var(--space-sm) 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-dark);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  text-align: left;
}
.ip-photo-skip.is-prominent {
  width: 100%;
  margin-top: var(--space-md);
  padding: 0.85rem 1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

/* 2026-10-11: four assurances sit 2 x 2 on wider screens, so none hangs on its own. */
@media (min-width: 700px) {
  .ip-assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Result page tidy (2026-10-13) */
.ip-result-figure, .ip-guarantee-banner, .ip-next-box, .ip-breakdown, .ip-note, .ip-submit-status { margin-bottom: 1.25rem; }
.ip-next-box { padding: 1rem 1.15rem; border-radius: 14px; background: #fff7ec; border: 1px solid #ecd9c0; text-align: left; }
.ip-next-box strong { display: block; margin-bottom: .35rem; }
.ip-next-box p { margin: 0 0 .5rem; }
.ip-next-box p:last-child { margin-bottom: 0; }
.ip-result-actions--end { margin: 1.5rem 0 1rem; display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.ip-result-ref-line { margin-bottom: 1rem; }
.ip-edit-banner { max-width: 760px; margin: 0 auto 1rem; padding: .75rem 1rem; border-radius: 12px; background: #fff7ec; border: 1px solid #ecd9c0; font-size: .95rem; }
.ip-edit-banner a { margin-left: .5rem; }
.ip-submit-error { display: none; margin-top: 1rem; padding: .75rem 1rem; border-radius: 10px; background: #fdecea; color: #8a1c0c; }
.ip-submit-error.is-visible { display: block; }
.ip-overview { display: grid; gap: 8px; margin: 1rem 0; }
.ip-overview-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; padding: .85rem 1rem; border: 1px solid #ecd9c0; border-radius: 12px; background: #fffaf3; font: inherit; color: inherit; cursor: pointer; }
.ip-overview-row:hover { border-color: var(--color-accent); }
.ip-overview-go { color: var(--color-accent); font-weight: 600; font-size: .9rem; flex: none; }

/* Current answers: question above, full answer below, so nothing is cut off on a phone */
.ip-answers { margin: .5rem 0 0; display: grid; gap: 0; }
.ip-answers > div { padding: .65rem 0; border-bottom: 1px solid #ecd9c0; }
.ip-answers dt { font-size: .85rem; color: #6b6158; margin: 0; }
.ip-answers dd { margin: .15rem 0 0; font-weight: 600; overflow-wrap: anywhere; white-space: normal; }
.ip-overview-row span:first-child { min-width: 0; overflow-wrap: anywhere; }