:root {
  --ink: #101410;
  --muted: #6f756d;
  --line: #dfe4dc;
  --line-strong: #ced5ca;
  --soft: #f6f8f4;
  --green: #9bd000;
  --green-dark: #5d8500;
  --green-soft: #f3f8e2;
  --danger: #b42318;
  --window-shadow: 0 14px 34px rgba(18, 24, 18, 0.075);
  --card-shadow: 0 2px 6px rgba(18, 24, 18, 0.065);
  --button-shadow: 0 2px 4px rgba(18, 24, 18, 0.07);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f4f0e9;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f4f0e9; scroll-behavior: smooth; }
body { min-height: 100%; margin: 0; background: #f4f0e9; color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
img { display: block; max-width: 100%; }

.app-shell { min-height: 100vh; padding: 24px 32px 54px; }
.page-header {
  display: none;
}
.page-header span {
  display: block;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.page-header h1 { margin: 7px 0 0; font-size: 20px; line-height: 1.2; }
.modal-back {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 10px 18px;
  color: #626861;
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
  box-shadow: var(--button-shadow);
}

.app-layout {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
  gap: 28px;
  align-items: start;
}

.builder-card {
  position: relative;
  min-width: 0;
  height: min(765px, calc(100vh - 160px));
  border: 1px solid var(--line);
  border-radius: 34px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--window-shadow);
  display: flex;
  flex-direction: column;
}
.builder-heading {
  flex: 0 0 auto;
  min-height: 67px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255,255,255,.98);
}
.brand-mark {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: block;
  background: transparent url("./brand/flare-flame.png") center center / auto 38px no-repeat;
}
.builder-heading > div:nth-child(2) { display: flex; flex-direction: column; }
.builder-heading strong { font-size: 14px; }
.builder-heading span:not(.status-pill) { color: var(--muted); font-size: 12px; }
.status-pill, .count-pill {
  margin-left: auto;
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.builder-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 24px 28px 44px;
  background: linear-gradient(180deg, #f8f9f6 0%, #fff 33%);
  scrollbar-width: thin;
  scrollbar-color: #b7beb2 transparent;
}
.builder-card.has-floating-action .builder-scroll { padding-bottom: 128px; }

.assistant-bubble {
  width: fit-content;
  max-width: 94%;
  margin: 0 0 18px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 24px 24px 24px 8px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.assistant-bubble h2, .assistant-bubble h3 {
  margin: 0;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.18;
  letter-spacing: -.035em;
}
.assistant-bubble h3 { font-size: clamp(18px, 1.8vw, 22px); }

.choice-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.choice-button, .change-button, .secondary-button, .dark-small-button, .submit-button, .floating-add-button {
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.choice-button {
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px 20px;
  font-size: 12px;
  box-shadow: var(--button-shadow);
}
.choice-button:hover, .choice-button:focus-visible, .change-button:hover, .secondary-button:hover, .secondary-button:focus-visible {
  border-color: var(--green);
  background: var(--green-soft);
  outline: none;
}

.selected-bubble, .selected-style {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 20px;
  padding: 15px 16px;
  border: 1px solid #cfe58e;
  border-radius: 26px;
  background: linear-gradient(135deg, #f5f9e7, #eef6da);
  box-shadow: var(--card-shadow);
}
.selected-bubble > div { display: flex; flex-direction: column; gap: 5px; }
.selected-bubble strong { font-size: 22px; }
.eyebrow {
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.change-button {
  flex: 0 0 auto;
  border: 1px solid #d4e69f;
  background: #fff;
  padding: 10px 16px;
  font-size: 11px;
  box-shadow: var(--button-shadow);
}
.selected-style img {
  flex: 0 0 auto;
  width: 92px;
  height: 66px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
.selected-style > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.selected-style strong { font-size: 18px; }
.selected-style span { color: var(--muted); font-size: 12px; line-height: 1.35; }

.style-group { margin: 0 0 22px; }
.style-group h4 {
  margin: 0 0 10px;
  color: #8b9188;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.style-card {
  min-width: 0;
  min-height: 112px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: #fff;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  box-shadow: var(--card-shadow);
}
.style-card:hover, .style-card:focus-visible {
  border-color: var(--green);
  outline: none;
  transform: translateY(-1px);
}
.style-card-image {
  flex: 0 0 88px;
  width: 88px;
  height: 74px;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
  display: block;
  overflow: visible;
}
.style-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
}
.style-group-specialty .style-card { min-height: 124px; overflow: visible; }
.style-group-specialty .style-card-image { flex-basis: 98px; width: 98px; height: 88px; }
.style-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.style-card strong { font-size: 14px; line-height: 1.2; }
.style-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }

.info-note {
  margin: -5px 0 24px;
  padding: 12px 14px;
  border: 1px solid #d5e8a3;
  border-radius: 14px;
  background: var(--green-soft);
  color: #66705e;
  font-size: 12px;
}

.features-panel { padding-top: 2px; }
.features-intro {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px 24px 24px 8px;
  background: #fff;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.features-intro h3 { margin: 6px 0 3px; font-size: 15px; line-height: 1.35; }
.features-intro p { margin: 0; color: var(--muted); font-size: 12px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.feature-card {
  min-width: 0;
  min-height: 172px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.feature-card:hover, .feature-card:focus-within { border-color: #b9d95b; }
.feature-card.is-selected { border-color: var(--green); background: var(--green-soft); }
.feature-select {
  min-width: 0;
  width: 100%;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 14px 14px 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.feature-select:focus-visible { outline: 2px solid rgba(153,204,0,.7); outline-offset: -3px; border-radius: 15px; }
.feature-card-heading { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.feature-card-heading > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.feature-card strong { font-size: 13px; }
.feature-card small { color: #969c94; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.feature-check {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #f0f3ed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  font: 900 17px/1 Arial, sans-serif;
  text-align: center;
  transform: translateY(-1px);
}
.feature-card.is-selected .feature-check { background: var(--green); }
.feature-description { flex: 1; color: var(--muted); font-size: 11px; line-height: 1.55; }
.feature-more {
  align-self: flex-start;
  margin: 0 14px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 7px 12px;
  color: #6f756d !important;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.feature-more:hover, .feature-more:focus-visible { border-color: var(--green); background: #f8fce9; color: #466200 !important; outline: none; }
.feature-more:visited { color: #6f756d !important; }

.builder-add-another-float {
  position: absolute;
  z-index: 20;
  left: 20px;
  right: 20px;
  bottom: 14px;
  border: 1px solid #cfe779;
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  padding: 11px 42px 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 7px 18px rgba(18,24,18,.09);
}
.builder-flow-copy { min-width: 0; flex: 1 1 auto; }
.builder-flow-copy strong { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; }
.builder-flow-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.flow-next-button { display: none; }
.flow-dock-close {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #646b62;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  font: 700 18px/1 Arial, sans-serif;
  box-shadow: var(--button-shadow);
}
.flow-dock-close:hover, .flow-dock-close:focus-visible { border-color: #b8c1b4; background: #f7f8f5; outline: none; }
.floating-add-button {
  flex: 0 0 auto;
  border: 1px solid var(--green);
  background: var(--green);
  color: #101410;
  padding: 11px 17px;
  font-size: 9px;
  white-space: nowrap;
}
.floating-add-button:hover, .floating-add-button:focus-visible { background: #a8dc0a; outline: none; }

.workflow-column {
  min-width: 0;
  height: min(765px, calc(100vh - 160px));
  overflow: auto;
  padding: 0 20px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: #b7beb2 transparent;
}
.workflow-shell {
  min-height: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: #fff;
  box-shadow: var(--window-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.package-header{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}











.package-item-actions button{
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 7px 10px;
  color: #7c837a;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}





.package-card {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #cce67b;
  border-radius: 18px;
  background: linear-gradient(135deg, #f5fae8, #eef7d8);
  box-shadow: var(--card-shadow);
}
.package-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.package-header > div { display: flex; align-items: center; gap: 8px; }
.package-header .count-pill { margin-left: 0; }

.package-add-button {
  flex: 0 0 auto;
  border: 1px solid #d8ddd5;
  border-radius: 999px;
  background: transparent;
  color: #687067;
  padding: 6px 9px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.package-add-button:hover,
.package-add-button:focus-visible {
  border-color: #b9c6b2;
  background: #f7f9f5;
  color: #2f372f;
  outline: none;
}
.package-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.package-item {
  position: relative;
  overflow: hidden;
  padding: 11px;
  border: 1px solid #dbe2d5;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.package-item > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.package-item strong { font-size: 15px; }
.package-item small { color: var(--muted); font-size: 11px; }
.package-item-actions { display: flex; gap: 6px; }

.dark-small-button {
  flex: 0 0 auto;
  border: 1px solid #0b0f0b;
  background: #0b0f0b;
  color: #fff;
  padding: 9px 13px;
  font-size: 9px;
  white-space: nowrap;
}
.workflow-next-button {
  border-color: var(--green);
  background: var(--green);
  color: #152000;
}
.workflow-next-button:hover,
.workflow-next-button:focus-visible {
  border-color: var(--green-dark);
  background: #acd933;
  color: #101900;
  outline: none;
}

.workflow-stack { display: flex; flex-direction: column; gap: 9px; }
.workflow-panel {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.workflow-panel.is-open { border-color: #c7e36e; }
.workflow-header {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 12px 14px;
  color: #7f857e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.workflow-panel.is-open .workflow-header { color: var(--green-dark); }
.workflow-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.workflow-required-note { color: var(--danger); font-size: 10px; font-weight: 800; letter-spacing: 0; line-height: 1.2; text-transform: none; white-space: normal; }
.workflow-arrow { font-size: 16px; line-height: 1; transition: transform .2s ease; }
.workflow-panel.is-open .workflow-arrow { transform: rotate(180deg); }
.workflow-body { padding: 10px; border-top: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.form-span-2 { grid-column: 1 / -1; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; }
.form-grid label > span { color: #6f756d; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.form-grid b { color: var(--danger); }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%;
  border: 1px solid #d8ded5;
  border-radius: 16px;
  background: #f7f8f5;
  padding: 10px 11px;
  font-size: 12px;
  outline: none;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(155,208,0,.11); }
.form-grid textarea { min-height: 74px; resize: vertical; }
.panel-next {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d2e79b;
  border-radius: 13px;
  background: var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-next span { font-size: 11px; font-weight: 700; }
.panel-next small { display: block; margin-bottom: 3px; color: var(--green-dark); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.secondary-button, .submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  padding: 12px 18px;
  font-size: 10px;
}
.secondary-button { border: 1px solid var(--line); background: #fff; color: var(--ink) !important; }
.submit-button { border: 1px solid var(--green); background: var(--green); color: #152000 !important; }
.submit-button:hover, .submit-button:focus-visible { border-color: var(--green-dark); background: #acd933; outline: none; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 20px;
  background: rgba(18,22,18,.36);
  backdrop-filter: blur(7px);
  display: grid;
  place-items: center;
}
.review-modal {
  width: min(1120px, 96vw);
  max-height: min(840px, 94vh);
  overflow: hidden;
  padding: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 100px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}
.review-body {
  min-height: 0;
  overflow: auto;
  padding: 0 18px 12px;
  scrollbar-width: thin;
  scrollbar-color: #d7dcd3 transparent;
}
.review-body::-webkit-scrollbar { width: 8px; }
.review-body::-webkit-scrollbar-track { background: transparent; }
.review-body::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #d7dcd3; background-clip: padding-box; }
.review-footer { flex: 0 0 auto; padding: 0 18px 18px; background: #fff; }
.review-header {
  flex: 0 0 auto;
  margin: 0 18px;
  padding: 18px 0 13px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}
.review-header h2 { margin: 6px 0 5px; font-size: 30px; line-height: 1.08; letter-spacing: -.045em; }
.review-header p { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.review-grid { margin-top: 12px; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(290px,.95fr); gap: 13px; }
.review-fireplaces, .review-package, .review-details {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.review-fireplaces { border-color: #cde77d; background: #f6faea; }
.review-section-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: #70776e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.review-tabs { padding: 10px 0; display: flex; gap: 7px; overflow: auto; }
.review-tabs button { min-width: max-content; border: 1px solid transparent; border-radius: 999px; background: #edf1e8; padding: 9px 14px; font-size: 11px; font-weight: 850; }
.review-tabs button.is-active { background: #101410; color: #fff; }
.review-tabs span { margin-right: 6px; color: var(--green); }
.review-fireplace-card { padding: 12px; border: 1px solid #e4e9df; border-radius: 16px; background: #fff; }
.review-model-heading { display: flex; flex-direction: column; gap: 3px; }
.review-model-heading strong { font-size: 21px; line-height: 1.15; }
.review-fireplace-card dl { margin: 10px 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.review-fireplace-card dl > div { min-width: 0; padding: 8px 9px; border: 1px solid #e7ebe4; border-radius: 12px; background: var(--soft); }
.review-fireplace-card dt { color: #858d83; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.review-fireplace-card dd { margin: 5px 0 0; font-size: 13px; font-weight: 850; overflow-wrap: anywhere; }
.review-feature-block { padding-top: 2px; }
.review-subtitle { display: block; margin-bottom: 8px; color: #777f75; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.review-feature-block p { margin: 0; color: var(--muted); font-size: 12px; }
.review-features { display: flex; flex-wrap: wrap; gap: 7px; }
.review-features span { border-radius: 999px; background: var(--green-soft); color: var(--green-dark); padding: 7px 10px; font-size: 10px; font-weight: 850; }
.check-list { margin-top: 9px; display: flex; flex-direction: column; gap: 9px; }
.check-list > div { padding: 10px; border-radius: 14px; background: var(--soft); display: flex; gap: 10px; }
.check-list b { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--green); display: grid; place-items: center; font-size: 13px; }
.check-list span { display: flex; flex-direction: column; gap: 4px; }
.check-list strong { font-size: 12px; line-height: 1.25; }
.check-list small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.review-span-2 { grid-column: 1 / -1; }
.review-info-columns { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.review-info-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.review-info-heading { padding: 9px 12px; border-bottom: 1px solid var(--line); background: #fafbf8; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-info-heading strong { font-size: 14px; }
.review-info-heading > div { display: grid; gap: 2px; min-width: 0; }
.form-error { margin: 12px 0 0; padding: 11px; border: 1px solid #f2b8b5; border-radius: 13px; background: #fff2f1; color: var(--danger); text-align: center; font-size: 12px; font-weight: 750; }
.submit-button { width: 100%; margin-top: 0; padding: 14px; }
.complete-modal { max-width: 720px; }
.complete-summary { padding: 25px 15px 10px; text-align: center; }
.complete-summary p { max-width: 620px; margin: 18px auto; color: var(--muted); font-size: 14px; }
.burn-overlay { position: absolute; z-index: 9999; pointer-events: none; }
.startup-error { max-width: 680px; margin: 80px auto; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--window-shadow); }

@media (max-width: 900px) {
  .app-shell { padding: 18px; }
  .app-layout { grid-template-columns: 1fr; }
  .builder-card, .workflow-column { height: auto; max-height: none; }
  .builder-card { min-height: 650px; }
  .builder-scroll { max-height: 680px; }
  .workflow-column { overflow: visible; }
  .builder-card.has-floating-action .builder-scroll { padding-bottom: 164px; }
  .builder-add-another-float { left: 12px; right: 12px; bottom: 12px; align-items: stretch; flex-direction: column; gap: 8px; padding: 10px 40px 10px 10px; }
  .builder-flow-copy strong { font-size: 10px; }
  .builder-flow-actions { width: 100%; display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; }
  .flow-next-button { display: inline-flex; justify-content: center; align-items: center; }
  .builder-flow-actions .floating-add-button { width: 100%; }
  .workflow-shell { min-height: 0; }
  .review-grid { grid-template-columns: 1fr; }
  .review-span-2 { grid-column: auto; }
  .review-info-columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-shell { padding: 12px; }
  .page-header { margin-bottom: 18px; }
  .app-layout { gap: 16px; }
  .builder-card, .workflow-shell { border-radius: 24px; }
  .builder-card { min-height: 620px; }
  .builder-scroll { padding: 18px 14px 35px; }
  .style-grid, .feature-grid, .form-grid { grid-template-columns: 1fr; }
  .form-span-2 { grid-column: auto; }
  
  .panel-next { align-items: flex-start; flex-direction: column; }
  .panel-next .dark-small-button { width: 100%; }
  .package-header { align-items: flex-start; flex-direction: column; }
  .package-header > div { width: 100%; justify-content: space-between; }
  .package-item { flex-direction: column; }
  .package-item-actions { width: 100%; justify-content: flex-end; }
  .review-modal { width: 100%; max-height: 100vh; padding: 0; border-radius: 22px; }
  .review-header { margin: 0 14px; padding-top: 14px; }
  .review-body { padding: 0 14px 10px; }
  .review-footer { padding: 0 14px 14px; }
  .review-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .review-header .modal-back { align-self: flex-end; order: -1; }
  .review-header h2 { font-size: 24px; }
  .review-header p { font-size: 13px; }
  .review-fireplace-card dl { grid-template-columns: repeat(2,1fr); }
  .modal-backdrop { padding: 8px; }
}


/* Inline review editing and post-submit actions */
.review-edit-columns { align-items: start; }
.review-inline-note { color: #858d83; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.review-edit-form { padding: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.review-edit-form label { min-width: 0; display: grid; gap: 5px; }
.review-edit-form label > span { color: #747d72; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.review-edit-form input, .review-edit-form select, .review-edit-form textarea { width: 100%; min-width: 0; border: 1px solid #dfe4dc; border-radius: 11px; background: #f8faf6; color: #121612; padding: 9px 10px; font: inherit; font-size: 12px; line-height: 1.3; outline: none; box-sizing: border-box; }
.review-edit-form textarea { resize: vertical; min-height: 58px; }
.review-edit-form input:focus, .review-edit-form select:focus, .review-edit-form textarea:focus { border-color: #9ccc00; background: #fff; box-shadow: 0 0 0 3px rgba(153,204,0,.1); }
.review-field-wide { grid-column: 1 / -1; }
.complete-modal { position:relative; }
.complete-close { position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border:1px solid #dde3da; border-radius:50%; background:#fff; color:#171b17; font-size:21px; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:0 3px 10px rgba(20,30,20,.06); }
.complete-close:hover, .complete-close:focus-visible { border-color:#9ccc00; background:#f6fbe8; outline:none; }
.complete-modal { width: min(720px, 95vw); }
.complete-summary { padding: 34px 28px 30px; text-align: center; }
.complete-summary h2 { margin: 8px auto 0; max-width: 560px; font-size: 30px; line-height: 1.08; letter-spacing: -.045em; }
.success-mark { width: 52px; height: 52px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; background: #9ccc00; color: #111; font-size: 27px; font-weight: 950; box-shadow: 0 8px 24px rgba(99,134,0,.16); }
.complete-confirmation { max-width: 580px; margin: 18px auto 0; padding: 14px 16px; border: 1px solid #d9e9ac; border-radius: 15px; background: #f7fbe9; text-align: left; }
.complete-confirmation strong { display: block; color: #567d00; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.complete-confirmation span { display: block; margin-top: 5px; color: #4e554d; font-size: 13px; line-height: 1.45; }
.complete-actions { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.complete-actions a, .complete-actions button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
@media (max-width: 640px) {
  .review-edit-form { grid-template-columns: 1fr; }
  .review-field-wide { grid-column: auto; }
  .complete-summary { padding: 28px 16px 20px; }
  .complete-summary h2 { font-size: 25px; }
  .complete-actions { grid-template-columns: 1fr; }
}

/* Full 360-degree success confetti burst */
.success-confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .success-confetti-layer { display: none; }
}

/* Responsive accessibility and mobile usability */
.review-modal:focus { outline: none; }
.complete-modal {
  max-height: min(840px, calc(100dvh - 16px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.review-edit-form textarea { min-height: 92px; }

@media (max-width: 900px) {
  .builder-card { min-height: 0; height: auto; }
  .builder-scroll { flex: none; max-height: none; overflow: visible; }
  #hubspot-messages-iframe-container,
  .hubspot-messages-iframe-container { display: none !important; }

  .modal-back, .choice-button, .change-button, .secondary-button, .dark-small-button, .submit-button, .floating-add-button, .feature-more, .package-item-actions button, .package-add-button, .workflow-header, .review-tabs button{ min-height: 44px; }

  .feature-more { display: inline-flex; align-items: center; }
  .flow-dock-close,
  .complete-close { width: 44px; height: 44px; }
  .flow-dock-close { top: 4px; right: 4px; }
  .builder-add-another-float { padding-right: 52px; }
  .workflow-heading { align-items: flex-start; flex-direction: column; gap: 4px; text-align: left; }
  .workflow-required-note { font-size: 12px; }
  .form-error { font-size: 13px; line-height: 1.4; }

  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .review-edit-form input,
  .review-edit-form select,
  .review-edit-form textarea {
    min-height: 44px;
    font-size: 16px;
    line-height: 1.35;
  }
  .review-edit-form textarea { min-height: 96px; }

  .eyebrow, .feature-card small, .package-add-button, .dark-small-button, .panel-next small, .review-inline-note, .review-edit-form label > span{ font-size: 10px; }
  .form-grid label > span { font-size: 11px; }
  .feature-more,
  .floating-add-button { font-size: 10px; }
  .check-list small,
  .review-features span { font-size: 11px; }

  .review-modal {
    max-height: calc(100dvh - 16px);
    overscroll-behavior: contain;
  }
  .modal-backdrop { min-height: 100dvh; }
  .complete-modal { max-height: calc(100dvh - 16px); }
}

@media (max-width: 640px) {
  .builder-card { min-height: 0; }
  .builder-scroll { max-height: none; overflow: visible; }
  .review-modal { max-height: calc(100dvh - 16px); }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .modal-backdrop { padding: 4px; place-items: start center; }
  .review-modal,
  .complete-modal { max-height: calc(100dvh - 8px); border-radius: 16px; }
  .complete-summary { padding: 12px 54px 14px; }
  .success-mark { width: 38px; height: 38px; margin-bottom: 7px; font-size: 21px; }
  .complete-summary h2 { margin-top: 4px; font-size: 21px; }
  .complete-summary p { margin: 7px auto; font-size: 12px; line-height: 1.35; }
  .complete-confirmation { margin-top: 8px; padding: 8px 10px; }
  .complete-confirmation span { margin-top: 2px; font-size: 11px; line-height: 1.3; }
  .complete-actions { margin-top: 9px; grid-template-columns: 1fr 1fr; gap: 7px; }
}

/* Phone viewport action chip */
@media (max-width: 640px) {
  .builder-card.has-floating-action { margin-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .builder-card.has-floating-action .builder-scroll { padding-bottom: 35px; }
  .builder-add-another-float {
    position: fixed;
    z-index: 950;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-width: 520px;
    margin-inline: auto;
    padding: 6px 52px 6px 6px;
    border-color: #bcd957;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 34px rgba(15,24,12,.2);
    backdrop-filter: blur(14px);
    align-items: center;
    flex-direction: row;
    gap: 6px;
  }
  .builder-flow-copy { display: none; }
  .builder-flow-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 6px;
  }
  .builder-flow-actions .dark-small-button,
  .builder-flow-actions .floating-add-button {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .04em;
  }
  .flow-dock-close {
    top: 50%;
    right: 4px;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* ======================================================
   Desktop three-column geometry and workflow scrolling

   Normal build state:
   - Builder and Request Details are fixed-height windows with their own
     internal scroll areas, so all features and all form fields remain reachable.
   - How It Works matches their width, height, radius, border and white surface.
   - The iframe itself does not scroll.

   Review / complete state only:
   - The normal three-column application is hidden.
   - Review becomes a natural-height page surface.
   - The WordPress/browser page owns vertical review scrolling.
====================================================== */

.app-shell {
  min-height: 100vh;
  padding: 24px 28px 54px;
}

.app-layout {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.builder-card,
.workflow-column,
.howto-column { min-width: 0; }

/* The three OUTER windows own identical geometry. */
.builder-card,
.workflow-column,
.howto-shell {
  height: min(765px, calc(100vh - 160px));
  min-height: 560px;
  border: 1px solid var(--line) !important;
  border-radius: 34px !important;
  background: #fff !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Build window: fixed shell with internal scrolling. */
.builder-card {
  position: relative;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

.builder-heading {
  flex: 0 0 auto;
  border-radius: 33px 33px 0 0;
  overflow: hidden;
}

.builder-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 24px 28px 44px;
  background: linear-gradient(180deg, #f8f9f6 0%, #fff 33%);
  scrollbar-width: thin;
  scrollbar-color: #aeb6aa transparent;
}

.builder-card.has-floating-action .builder-scroll { padding-bottom: 128px; }

.builder-scroll::-webkit-scrollbar,
.workflow-column::-webkit-scrollbar { width: 9px; }
.builder-scroll::-webkit-scrollbar-track,
.workflow-column::-webkit-scrollbar-track { background: transparent; }
.builder-scroll::-webkit-scrollbar-thumb,
.workflow-column::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #b7beb2;
  background-clip: padding-box;
}

/* Request details: outer window is the scroll container; inner shell is just content. */
.workflow-column {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: #aeb6aa transparent;
}

.workflow-shell {
  width: 100%;
  min-height: 100%;
  padding: 14px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workflow-column, .workflow-shell{
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}



/* Native How-To window. */
.howto-column { display: flex; }
.howto-shell {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.howto-header {
  flex: 0 0 auto;
  min-height: 67px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  border-radius: 33px 33px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  background: rgba(255,255,255,.98);
}
.howto-header > div { min-width: 0; }
.howto-header h2 { margin: 5px 0 0; font-size: 18px; line-height: 1.15; letter-spacing: -.03em; }
.howto-status { margin-left: auto; padding: 6px 10px; font-size: 9px; }
.howto-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 18px;
  background: linear-gradient(180deg, #f8f9f6 0%, #fff 33%);
}
.howto-intro { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.howto-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.howto-step {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.howto-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: #111;
  display: grid;
  place-items: center;
  font: 900 11px/1 Arial, sans-serif;
}
.howto-copy { min-width: 0; display: grid; gap: 2px; }
.howto-copy strong { font-size: 11px; line-height: 1.22; }
.howto-copy small { color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.howto-help {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid #d2e79b;
  border-radius: 13px;
  background: var(--green-soft);
  display: grid;
  gap: 2px;
}
.howto-help strong { color: var(--green-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.howto-help span { color: #535b50; font-size: 10px; line-height: 1.35; }

/*
   Embedded NORMAL build state.
   Embedded layout rule: do not force html/body/app-shell/app-layout to height:100%
   and do not clip them at the iframe edge. The parent supplies a fixed desktop
   iframe tall enough for the 765px windows; Builder and Workflow scroll inside
   their own windows.
*/
html.is-embed:not(.is-page-state),
body.is-embed:not(.is-page-state) {
  width: 100%;
  min-height: 100%;
  height: auto;
  overflow: visible !important;
}
.is-embed:not(.is-page-state) .app-shell {
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 24px 28px 54px;
}
.is-embed:not(.is-page-state) .app-layout {
  height: auto;
  min-height: 0;
}

/* Review / complete only: natural-height page state. */
html.is-embed.is-page-state,
body.is-embed.is-page-state {
  width: 100%;
  min-height: 0;
  height: auto;
  overflow: visible !important;
}
.app-shell.is-reviewing { display: none; }
.modal-backdrop {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  min-height: 0;
  padding: 24px 28px 40px;
  background: #f4f0e9;
  backdrop-filter: none;
  display: block;
}
.review-modal,
.complete-modal {
  width: min(1240px, 100%);
  max-width: none;
  max-height: none;
  margin: 0 auto;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: #fff;
  box-shadow: none;
  filter: none;
}
.review-body {
  min-height: 0;
  overflow: visible;
  padding: 0 18px 12px;
  scrollbar-width: auto;
}
.review-footer { border-radius: 0 0 34px 34px; }
.success-confetti-layer { position: fixed !important; }

@media (max-width: 1180px) {
  .app-layout { max-width: 980px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-card, .workflow-column { height: 680px; min-height: 560px; }
  .howto-column { grid-column: 1 / -1; height: auto; }
  .howto-shell { height: auto; min-height: 0; }
  .howto-content { padding: 14px; }
  .howto-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .howto-step { min-height: 76px; align-items: start; grid-template-columns: 26px minmax(0, 1fr); padding: 8px; }
  .howto-number { width: 26px; height: 26px; }
  .howto-help { display: flex; align-items: center; gap: 8px; }
}

@media (max-width: 900px) {
  .app-shell, .is-embed .app-shell { padding: 12px 10px 24px; }
  .app-layout { grid-template-columns: 1fr; gap: 14px; }
  .builder-card, .workflow-column, .howto-column { height: auto; min-height: 0; max-height: none; }
  .builder-scroll, .workflow-column { overflow: visible !important; }
  .howto-column { grid-column: auto; }
  .howto-steps { grid-template-columns: 1fr 1fr; }
  .modal-backdrop { padding: 10px; }
  .review-modal, .complete-modal { width: 100%; border-radius: 24px; }
  .review-body { overflow: visible; }
}

@media (max-width: 640px) {
  .howto-steps { grid-template-columns: 1fr; }
  .howto-header h2 { font-size: 17px; }
  .modal-backdrop { padding: 6px; }
}

/* ======================================================
   Review / completion page-state sizing

   The review and completion states use their true content height. The host
   page owns scrolling, and the iframe is never sized from its own viewport.
   This prevents recursive height growth on desktop and stale oversized frames
   on phones.
====================================================== */
html.is-embed.is-page-state,
body.is-embed.is-page-state {
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

.is-page-state .modal-backdrop {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 18px 28px 36px;
  box-sizing: border-box;
  overflow: visible;
  display: block;
}

.is-page-state .review-modal,
.is-page-state .complete-modal {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.is-page-state .review-modal:not(.complete-modal) .review-body {
  min-height: 0;
  overflow: visible !important;
}

.is-page-state .review-modal:not(.complete-modal) .review-footer {
  position: static;
  bottom: auto;
  margin: 0;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 34px 34px;
  background: #fff;
  box-shadow: none;
}

@media (max-width: 900px) {
  .is-page-state .modal-backdrop { padding: 10px; }
  .is-page-state .review-modal:not(.complete-modal),
  .is-page-state .complete-modal { border-radius: 24px; }
  .is-page-state .review-modal:not(.complete-modal) .review-footer { border-radius: 0 0 24px 24px; }
}

/* ======================================================
   Mobile embedded-page flow

   The WordPress page owns vertical scrolling on phones. The iframe now grows
   to the full stacked tool height, so phone actions must participate in normal
   document flow rather than being fixed to the iframe viewport.
====================================================== */
@media (max-width: 900px) {
  html.is-embed,
  body.is-embed {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .is-embed #spec-tool-root,
  .is-embed .app-shell,
  .is-embed .app-layout {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .is-embed .builder-card,
  .is-embed .workflow-column,
  .is-embed .howto-column {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .is-embed .builder-scroll,
  .is-embed .workflow-column {
    overflow: visible !important;
    overscroll-behavior: auto;
  }
}

@media (max-width: 640px) {
  .builder-card.has-floating-action {
    margin-bottom: 0;
  }

  .builder-card.has-floating-action .builder-scroll {
    padding-bottom: 22px;
  }

  .builder-add-another-float {
    position: relative;
    z-index: 20;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0 12px 12px;
    padding: 7px 50px 7px 7px;
    border-radius: 18px;
    box-shadow: 0 7px 18px rgba(18,24,18,.09);
    backdrop-filter: none;
  }

  .flow-dock-close {
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
  }
}

/* ======================================================
   Mobile selected-card layout

   Selected fireplace style cards need the full copy width on phones. The
   Change action now lives on its own row rather than squeezing/covering copy.
====================================================== */
@media (max-width: 640px) {
  .selected-bubble,
  .selected-style {
    gap: 12px;
  }

  .selected-bubble > div,
  .selected-style > div {
    min-width: 0;
  }

  .selected-bubble .change-button,
  .selected-style .change-button {
    white-space: nowrap;
  }

  .selected-style {
    display: grid;
    grid-template-columns: minmax(88px, 30%) minmax(0, 1fr);
    grid-template-areas:
      "style-image style-copy"
      "style-change style-change";
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;
    padding: 16px;
  }

  .selected-style > img {
    grid-area: style-image;
    width: 100%;
    max-width: 112px;
    height: 76px;
    justify-self: center;
  }

  .selected-style > div {
    grid-area: style-copy;
    width: 100%;
  }

  .selected-style > div strong {
    font-size: 19px;
    line-height: 1.15;
  }

  .selected-style > div span {
    font-size: 12px;
    line-height: 1.4;
  }

  .selected-style > .change-button {
    grid-area: style-change;
    width: 100%;
    min-height: 44px;
    padding-inline: 16px;
  }
}

@media (max-width: 390px) {
  .selected-style {
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 12px;
  }

  .selected-style > img {
    width: 92px;
    height: 68px;
  }
}

/* ======================================================
   Mobile review and submit flow

   Review and completion are page-owned states on phones. Keep the host page
   anchored to the top of the tool, present review content in decision order,
   and avoid sticky/internal-scroll behaviors that compete with Safari.
====================================================== */
.review-submit-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.review-submit-copy strong {
  font-size: 14px;
  line-height: 1.2;
}
.review-submit-copy span {
  max-width: 640px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.is-page-state .review-modal:not(.complete-modal) .review-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: center;
  gap: 16px;
}
.is-page-state .review-modal:not(.complete-modal) .review-footer .submit-button {
  margin: 0;
}

@media (max-width: 900px) {
  .is-page-state .review-modal:not(.complete-modal) .review-header {
    padding-bottom: 16px;
  }

  .is-page-state .review-modal:not(.complete-modal) .review-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Mobile review order: selection -> editable details -> package contents. */
  .is-page-state .review-fireplaces { order: 1; }
  .is-page-state .review-details { order: 2; }
  .is-page-state .review-package { order: 3; }

  .is-page-state .review-modal:not(.complete-modal) .review-footer {
    position: static !important;
    bottom: auto !important;
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 15px 16px 18px;
    border-radius: 0 0 24px 24px;
    box-shadow: none;
  }

  .is-page-state .review-modal:not(.complete-modal) .review-footer .submit-button {
    width: 100%;
    min-height: 52px;
    font-size: 14px;
  }

  .review-submit-copy {
    padding: 0 2px;
  }
  .review-submit-copy strong { font-size: 15px; }
  .review-submit-copy span { font-size: 12px; }

  .review-section-title {
    align-items: flex-start;
  }

  /* Completion should participate in the parent page just like review. */
  .is-page-state .complete-modal {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
  }

  .is-page-state .modal-backdrop:has(.complete-modal) {
    padding: 10px;
  }
}

@media (max-width: 640px) {
  .review-header {
    margin: 0 16px;
    padding-top: 16px;
  }
  .review-header .modal-back {
    width: auto;
    align-self: flex-start;
    padding-inline: 18px;
  }
  .review-header h2 {
    margin-top: 5px;
    font-size: 27px;
  }
  .review-header p {
    max-width: none;
    font-size: 13px;
    line-height: 1.45;
  }
  .review-body {
    padding: 0 10px 12px !important;
  }
  .review-fireplaces,
  .review-package,
  .review-details {
    padding: 12px;
    border-radius: 17px;
  }
  .review-fireplace-card {
    padding: 12px;
  }
  .review-fireplace-card dl {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .review-fireplace-card dl > div {
    padding: 9px;
  }
  .review-model-heading strong {
    font-size: 20px;
  }
  .review-info-heading {
    padding: 11px 12px;
  }
  .review-info-heading strong {
    font-size: 15px;
  }
  .review-edit-form {
    padding: 12px;
    gap: 11px;
  }
  .check-list > div {
    padding: 11px;
  }
  .complete-summary {
    padding: 34px 16px 24px;
  }
  .complete-summary h2 {
    font-size: 28px;
  }
}

/* Mobile action portals are rendered in the host document so they stay
   within the actual phone viewport even when the responsive iframe is tall. */
@media (max-width: 640px) {
  body.mobile-builder-actions-ported .builder-add-another-float { display: none !important; }
  body.mobile-builder-actions-ported .builder-card.has-floating-action {
    margin-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

/* Streamlined Contact-first progression */
.panel-next-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.secondary-progress-button {
  min-height: 36px;
  border: 1px solid #c7d0c2;
  border-radius: 999px;
  background: #fff;
  color: #445043;
  padding: 9px 13px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.secondary-progress-button:hover,
.secondary-progress-button:focus-visible {
  border-color: var(--green);
  background: #f8fce9;
  color: #334800;
  outline: none;
}
@media (max-width: 640px) {
  .panel-next-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .panel-next-actions > button { width: 100%; min-height: 48px; }
}

/* 2.6.2 project-detail friction reduction */
.optional-notes {
  min-width: 0;
  border: 1px solid #dfe4dc;
  border-radius: 12px;
  background: #f8faf6;
  overflow: hidden;
}
.optional-notes summary {
  min-height: 42px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  box-sizing: border-box;
  color: #747d72;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  user-select: none;
}
.optional-notes summary::-webkit-details-marker { display: none; }
.optional-notes summary small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #789700;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}
.optional-notes summary small::after {
  content: '+';
  width: 20px;
  height: 20px;
  border: 1px solid #d7ddd0;
  border-radius: 50%;
  background: #fff;
  color: #52604d;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
}
.optional-notes[open] summary {
  border-bottom: 1px solid #e3e8df;
  background: #fbfcfa;
}
.optional-notes[open] summary small::after { content: '−'; }
.optional-notes-body { padding: 9px; }
.optional-notes-body textarea {
  width: 100%;
  min-height: 78px;
  margin: 0;
  border: 1px solid #dfe4dc;
  border-radius: 10px;
  background: #fff;
  color: #121612;
  padding: 9px 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.optional-notes-body textarea:focus {
  border-color: #9ccc00;
  box-shadow: 0 0 0 3px rgba(153,204,0,.1);
}
.form-grid > .optional-notes { grid-column: 1 / -1; }
.form-grid > .optional-notes summary { min-height: 44px; font-size: 11px; }
.review-edit-form > .optional-notes { grid-column: 1 / -1; }
.complete-modal.is-dealer-complete .complete-actions {
  grid-template-columns: minmax(220px, 320px);
  justify-content: center;
}

@media (max-width: 640px) {
  .form-grid > .optional-notes,
  .review-edit-form > .optional-notes { grid-column: auto; }
  .optional-notes summary { min-height: 44px; font-size: 11px; }
  .complete-modal.is-dealer-complete .complete-actions { grid-template-columns: 1fr; }
}

/* Keep the post-submit confirmation as a true centered dialog-sized card. */
.is-embed.is-page-state .complete-modal {
  width: min(720px, 100%);
  max-width: 720px;
}

/* 2.6.3: mobile review floating submit yields to the in-page submit button when it enters the visible viewport. */