/* Complete the planner's interactive sections in the approved Jewell palette. */
:root { --muted: #66768d; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
input, select { min-width: 0; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #9fbcad;
  outline-offset: 3px;
}
.money-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px #e7f0eb; }
.room-card { padding: 17px; border: 1px solid #e1e8e3; border-radius: 15px; background: #fcfdfb; }
.room-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.room-head > label { flex: 1; }
.room-head label, .room-metrics label, .prep-grid label {
  display: grid; gap: 6px; color: #66778c; font-size: 11px; line-height: 1.45;
}
.room-head select, .room-metrics input, .prep-grid input, .prep-grid select {
  width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 9px;
  background: white; color: var(--ink); padding: 0 11px; font-size: 14px;
}
.room-head select { max-width: 340px; }
.room-head .remove-room { width: 44px; height: 44px; flex: 0 0 44px; color: #73839a; }
.room-head .remove-room:disabled { cursor: default; opacity: .3; }
.room-metrics { display: grid; grid-template-columns: .65fr 1fr 1fr 1fr; gap: 10px; margin-top: 13px; }
.prep-toggles { display: grid; gap: 10px; margin-bottom: 22px; }
.prep-toggles label { display: flex; align-items: center; gap: 10px; color: #566c80; font-size: 13px; cursor: pointer; }
.prep-toggles input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.prep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-bottom: 12px; }
.prep-grid label:first-child { grid-column: 1 / -1; }
.condition-note { background: #fbf2e6; border-left: 3px solid #d3aa69; color: #796144; padding: 12px 15px; font-size: 13px; border-radius: 0 9px 9px 0; }
.summary-stats { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
.stat strong { display: block; overflow-wrap: anywhere; font-size: 17px; }
.form-error { line-height: 1.5; }
.results { margin-bottom: 22px; }
.empty-state { padding: 12px 0; }
.empty-state h2 { margin: 0 0 7px; font-size: 23px; font-weight: 500; }
.empty-state p { margin: 0; max-width: 720px; color: var(--muted); }
.result-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 0 24px; }
.result-summary .eyebrow { margin-bottom: 9px; }
.result-summary h2 { margin: 0; font-size: clamp(26px,3vw,38px); font-weight: 500; letter-spacing: -.035em; line-height: 1.18; }
.result-summary p:not(.eyebrow) { color: var(--muted); margin: 10px 0 0; max-width: 660px; font-size: 14px; }
.result-summary > strong { color: var(--green); font-size: clamp(28px,3.4vw,44px); letter-spacing: -.04em; white-space: nowrap; font-weight: 500; }
.estimate-metrics { display: flex; flex-wrap: wrap; gap: 9px 26px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.estimate-metrics b { color: var(--ink); font-weight: 550; }
.recommended-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 24px; padding-top: 25px; }
.recommended-grid > section { min-width: 0; display: flex; flex-direction: column; }
.recommended-grid > section > h2 { margin: 0 0 12px; font-size: 17px; font-weight: 500; }
.product-card { flex: 1; padding: 24px; background: #f8faf7; border: 1px solid #dce5de; border-radius: 17px; }
.product-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.product-card .tier { color: var(--green); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding: 6px 9px; border-radius: 999px; background: #e5eee7; }
.product-price { color: var(--green); font-size: 20px; font-weight: 550; }
.product-card h3 { margin: 17px 0 5px; font-size: 26px; line-height: 1.2; letter-spacing: -.025em; font-weight: 500; }
.product-card .finish { margin: 0; font-size: 13px; color: #667a6d; }
.product-card ul, .upgrade-grid ul { padding-left: 19px; color: #62738a; font-size: 13px; margin: 17px 0 21px; }
.product-card li, .upgrade-grid li { margin: 5px 0; }
.product-card li::marker, .upgrade-grid li::marker { color: #9ab3a1; }
.product-card dl { margin: 0; padding: 15px 0 5px; border-top: 1px solid var(--line); }
.product-card dl > div { margin-bottom: 13px; }
.product-card dt { font-size: 12px; color: var(--ink); font-weight: 550; }
.product-card dd { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.product-card .coverage { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 9px 0 17px; }
.product-link { display: inline-block; color: var(--green); font-size: 13px; font-weight: 550; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.upgrade-result { margin-top: 25px; background: #f0f4ef; border: 1px solid #dfe7db; border-radius: 17px; padding: 24px; }
.upgrade-result:empty { display: none; }
.upgrade-result > p { margin: 0; color: #657966; font-size: 14px; }
.upgrade-result > .eyebrow { margin-bottom: 9px; color: var(--green); font-size: 10px; }
.upgrade-result > h2 { margin: 0 0 8px; font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.upgrade-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 16px; margin-top: 20px; }
.upgrade-grid > article { border-top: 1px solid #cfdbcd; padding-top: 17px; }
.upgrade-grid > article > span { font-size: 11px; color: var(--green); text-transform: uppercase; letter-spacing: .1em; }
.upgrade-grid h3 { font-size: 18px; line-height: 1.4; margin: 6px 0; font-weight: 500; }
.upgrade-grid p { color: #667a6d; font-size: 12px; margin: 0; }
.upgrade-grid ul { margin-bottom: 0; }
.colour-step { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 0 7px; }
.colour-step .eyebrow { margin-bottom: 9px; }
.colour-step h2 { font-size: 26px; font-weight: 500; line-height: 1.2; margin: 0 0 9px; letter-spacing: -.025em; }
.colour-step p:not(.eyebrow) { max-width: 690px; margin: 0; color: var(--muted); font-size: 13px; }
.colour-step > a { flex-shrink: 0; border: 1px solid #a9c0b4; border-radius: 999px; padding: 12px 18px; color: var(--green); text-decoration: none; font-size: 13px; }
.colour-step > a:hover { background: var(--green-2); }
.estimate-note { font-size: 11px; color: var(--muted); margin: 22px 0 0; padding-top: 17px; border-top: 1px solid var(--line); line-height: 1.7; }
.footnote { padding-bottom: 20px; color: #697990; font-size: 11px; }
.sources-panel { margin: 0 0 42px; padding: 19px 22px; border: 1px solid var(--line); border-radius: 13px; background: #f0f4ef; }
.sources-panel summary { font-size: 13px; font-weight: 500; color: var(--green); cursor: pointer; }
.sources-panel p { max-width: 1050px; font-size: 12px; line-height: 1.7; color: #66768c; margin: 13px 0 0; }
.sources-panel a { text-underline-offset: 3px; }
.planner-footer { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 30px max(28px,calc((100vw - 1280px)/2)); background: #1e3769; color: #fff; font-size: 12px; }
.planner-footer img { width: 170px; height: auto; }
.planner-footer p { font-size: 9px; letter-spacing: .15em; margin: 0 auto 0 0; opacity: .8; }
.planner-footer a { text-decoration: none; color: #fff; }
.planner-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.planner-footer > span { width: 100%; color: #bdc8dc; font-size: 10px; }
.step-panel { scroll-margin-top: 18px; }
.step-toggle { display: flex; align-items: flex-start; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.step-toggle::after { content: '+'; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; margin: 3px 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: var(--green); font-size: 20px; line-height: 1; }
.step-panel.is-open .step-toggle::after { content: '−'; background: var(--green-2); border-color: #cbdcd1; }
.step-panel.is-complete .step-number { background: #446b5c; color: white; }
.step-panel:not(.is-open) { box-shadow: 0 8px 22px rgba(39,57,77,.05); }
.step-panel:not(.is-open) .step-toggle { align-items: center; }
.step-panel:not(.is-open) .step-head h2, .step-toggle h2 { flex: 1; }
.step-content[hidden] { display: none !important; }
.step-next { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; margin-top: 22px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--green); color: #fff; font-weight: 550; cursor: pointer; }
.step-next:hover { background: #355747; }
.step-next:focus-visible { outline: 3px solid #9cb9aa; outline-offset: 3px; }
.step-toggle h2 { margin: 0; }
.step-toggle .step-head { width: 100%; margin: 0; }
.step-toggle .step-head > div { flex: 1; }
.step-panel .step-toggle .step-number { margin-right: 15px; }
.step-panel[hidden] { display: none !important; }
.step-panel.is-open .step-toggle { cursor: default; }
.step-panel.is-open .step-toggle:focus-visible { outline: none; }
.palette-section { scroll-margin-top: 18px; }
.palette-section .step-toggle { align-items: flex-start; }
.step-panel .step-content > .results { width: 100%; margin-top: 20px; }
.step-panel .step-content > .results[hidden] { display: none !important; }
.step-panel .step-content > .results .step-next { margin-bottom: 5px; }
.step-panel .step-content > .results > .result-empty[hidden] { display: none !important; }
.palette-controls { display: grid; grid-template-columns: minmax(180px,1.5fr) repeat(2,minmax(150px,1fr)); gap: 12px; margin-bottom: 17px; }
.palette-controls label { display: grid; gap: 6px; color: #66778c; font-size: 12px; }
.palette-controls input, .palette-controls select { width: 100%; height: 45px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.palette-shade-field { position: relative; }
.palette-matches { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto; margin-top: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.palette-matches[hidden] { display: none !important; }
.shade-match { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 0; border-bottom: 1px solid #edf0ec; background: #fff; color: var(--ink); text-align: left; }
.shade-match:hover, .shade-match:focus-visible { background: #f0f5ef; }
.shade-match strong, .palette-selected strong { display: block; font-size: 13px; font-weight: 550; }
.room-row { grid-template-columns: minmax(126px,1fr) 63px repeat(3,76px) 40px; }
@media (max-width: 900px) { .room-row { grid-template-columns: minmax(115px,1fr) 53px repeat(3,66px) 32px; } }
@media (max-width: 720px) { .room-row { grid-template-columns: minmax(95px,1fr) 44px repeat(3,minmax(45px,.55fr)) 28px; } }
@media (max-width: 390px) { .room-row { grid-template-columns: minmax(75px,1fr) 39px repeat(3,minmax(40px,.5fr)) 24px; } }
.shade-match small, .palette-selected small { display: block; color: var(--muted); font-size: 11px; }
.shade-no-match { padding: 12px; margin: 0; color: var(--muted); font-size: 12px; }
.shade-chip { width: 35px; height: 35px; display: block; flex: 0 0 35px; border-radius: 8px; border: 1px solid #dce5df; background: var(--shade); }
.palette-selected { display: flex; align-items: center; gap: 11px; margin: 14px 0; }
.palette-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.palette-swatch { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fcfdfb; }
.swatch-color { display: block; height: 105px; background: var(--shade); }
.palette-swatch > div { padding: 13px; }
.swatch-role { display: block; color: var(--green); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.palette-swatch strong { display: block; margin-top: 6px; color: var(--ink); font-size: 15px; font-weight: 550; }
.palette-swatch small { display: block; color: var(--muted); font-size: 11px; }
.palette-swatch p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.palette-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 18px; }
.palette-actions button { cursor: pointer; }
.palette-actions a { color: var(--green); font-size: 12px; }
.palette-note { margin: 19px 0 0; color: var(--muted); font-size: 11px; }
@media (max-width: 720px) { .palette-controls { grid-template-columns: 1fr 1fr; } .palette-shade-field { grid-column: 1/-1; } }
@media (max-width: 480px) { .palette-preview { grid-template-columns: 1fr; } .swatch-color { height: 85px; } }
@media (max-width: 900px) and (min-width: 721px) {
  .layout { grid-template-columns: minmax(0,1fr); }
  .aside { position: static; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
  .room-metrics { grid-template-columns: .65fr 1fr 1fr 1fr; }
  .summary-stats { grid-template-columns: 1fr 1fr; }
  .stat strong { font-size: 16px; }
}
@media (max-width: 720px) {
  .topbar-inner { height: auto; min-height: 33px; padding: 7px 0; }
  .topbar-inner > span { font-size: 9px; letter-spacing: .06em; }
  .topbar-inner > a { display: none; }
  .room-card { padding: 13px; }
  .room-metrics { grid-template-columns: 1fr 1fr; gap: 11px; }
  .room-head select { max-width: none; }
  .room-metrics input, .room-head select, .prep-grid input, .prep-grid select { font-size: 16px; }
  .room-count-note { text-align: right; font-size: 11px; }
  .prep-grid { gap: 12px; }
  .prep-grid label { font-size: 11px; }
  .prep-toggles label { font-size: 12px; }
  .exterior-grid { grid-template-columns: 1fr; }
  .exterior-grid .dimension:last-child { grid-column: auto; }
  .exterior-grid .dimension label { font-size: 10px; }
  .exterior-grid .dimension input { font-size: 16px; }
  .result-summary { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 19px; }
  .result-summary h2 { font-size: 29px; }
  .result-summary > strong { font-size: 36px; }
  .estimate-metrics { gap: 9px 18px; font-size: 12px; }
  .recommended-grid { gap: 20px; padding-top: 20px; }
  .product-card { padding: 19px; }
  .product-card h3 { font-size: 24px; }
  .upgrade-result { padding: 19px; margin-top: 20px; }
  .upgrade-result > h2 { font-size: 22px; }
  .colour-step { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 24px; }
  .colour-step h2 { font-size: 24px; }
  .sources-panel { padding: 16px; margin-bottom: 30px; }
  .planner-footer { padding: 27px 20px; gap: 17px; }
  .planner-footer p { margin-right: 0; }
  .planner-footer > a { font-size: 11px; }
}
@media print {
  .topbar, .nav, .hero, #planner-form, .planner-footer { display: none; }
  body { background: white; color: #111; }
  .page { width: 100%; }
  .results { box-shadow: none; border: 0; padding: 0; }
  .result-summary, .product-card, .upgrade-result { break-inside: avoid; }
  .sources-panel { background: white; }
  .colour-step > a { display: none; }
}
/* Sequential sections: retain a compact completed heading and one open panel. */
.accordion-heading { margin:0; font:inherit; }
.step-toggle { gap:14px; }
.step-caption { display:block; flex:1; min-width:0; }
.step-title { display:block; font-size:21px; font-weight:550; line-height:1.25; letter-spacing:-.02em; }
.step-subtitle { display:block; margin-top:5px; font-size:13px; font-weight:400; color:var(--muted); line-height:1.5; }
.step-panel .step-toggle .step-number { margin-right:0; }
.step-panel.is-open .step-content { margin-top:22px; }
.step-panel.is-open .step-toggle:focus-visible { outline:3px solid #9fbcad; outline-offset:6px; }
.step-panel:not(.is-open) .step-subtitle { display:none; }
.step-panel .results { padding:0; border:0; box-shadow:none; background:transparent; }
#form-error { display:none; }
.room-row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.room-row .room-name { grid-column:1/4; grid-row:1; }
.room-row .remove-room { grid-column:4; grid-row:1; justify-self:end; }
.room-row .dimension { grid-row:2; }
@media(max-width:720px) {
  .step-title { font-size:18px; }
  .step-toggle { gap:10px; }
  .step-next { width:100%; font-size:13px; }
  .room-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .room-row .room-name { grid-column:1; }
  .room-row .remove-room { grid-column:2; }
  .room-row .dimension { grid-row:auto; }
  .room-row input,.room-row select { font-size:16px; }
  .palette-controls { grid-template-columns:1fr; }
}
@media print {
  #planner-form { display:block; }
  .aside,.step-toggle,.step-next,#calculate,.form-error { display:none!important; }
  .step-panel { display:none!important; }
  .step-panel[data-step="4"],.step-panel[data-step="4"] .step-content,.results { display:block!important; }
  .step-panel[data-step="4"] .step-content > :not(.results) { display:none!important; }
}
.measurement-choice { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0 0 18px; padding:0; border:0; }
.measurement-choice legend { grid-column:1/-1; width:100%; margin:0 0 8px; color:#66778c; font-size:12px; }
.measurement-choice label { display:flex; align-items:center; gap:9px; min-height:54px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; color:#536981; font-size:12px; cursor:pointer; }
.measurement-choice label:has(input:checked) { background:var(--green-2); border-color:#80a995; color:var(--green); }
.measurement-choice input { flex:none; margin:0; }
.total-area-field { margin:0 0 14px; padding:16px; border:1px solid #dce5df; border-radius:13px; background:#fcfdfb; }
.total-area-field > label { display:block; margin-bottom:7px; color:#66778c; font-size:12px; }
.total-area-field > input { display:block; width:100%; height:45px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-size:16px; }
.total-area-field .hint { margin-top:8px; }
@media(max-width:480px) { .measurement-choice { grid-template-columns:1fr; } }
.exterior-wall-name { display:block; min-height:44px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-size:13px; }
.warranty-feature { color:var(--ink); }
.warranty-feature a { display:block; margin:4px 0 7px; color:var(--green); font-size:11px; text-underline-offset:3px; }
.upgrade-intro { margin-top:20px; }
.upgrade-result > .upgrade-detail { margin-top:12px; font-size:12px; line-height:1.65; }
.upgrade-result .upgrade-budget { line-height:1.6; }
.shade-picker-trigger { display:flex; align-items:center; gap:11px; width:100%; min-height:54px; padding:8px 12px; border:1px solid #cbd6e7; border-radius:12px; background:#fff; color:var(--ink); text-align:left; }
.shade-picker-trigger:hover { border-color:var(--green); background:#f8faf7; }
.shade-picker-trigger > span:nth-child(2) { flex:1; min-width:0; }
.shade-picker-trigger strong { display:block; font-size:13px; font-weight:550; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.shade-picker-trigger small { display:block; color:var(--muted); font-size:10px; }
.picker-trigger-arrow { color:var(--green); font-size:22px; }
.shade-gallery-open { overflow:hidden; }
.shade-picker { width:min(1200px,calc(100vw - 34px)); max-width:none; max-height:calc(100dvh - 34px); padding:30px 34px; border:0; border-radius:4px; background:#fff; color:var(--ink); box-shadow:0 30px 80px #09204c60; overflow:auto; overscroll-behavior:contain; }
.shade-picker::backdrop { background:#0b1c4bbd; }
.picker-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.picker-heading .eyebrow { margin:0 0 10px; letter-spacing:.2em; color:#2d4ea4; }
.picker-heading h2 { margin:0; font-size:clamp(30px,4vw,48px); line-height:1.15; font-weight:400; }
.picker-close { flex:0 0 42px; width:42px; height:42px; border:1px solid #d3dce9; border-radius:50%; background:#fff; color:var(--ink); font-size:27px; line-height:1; }
.picker-tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(175px,240px); gap:12px; margin-top:26px; }
.shade-search { display:flex; align-items:center; gap:9px; height:50px; padding:0 14px; border:1px solid #cbd6e7; border-radius:999px; color:#48669b; }
.shade-search:focus-within { outline:2px solid #ef6f35; outline-offset:2px; }
.shade-search span { font-size:24px; }
.shade-search input { flex:1; min-width:0; height:46px; border:0; outline:0; background:transparent; color:var(--ink); font-size:14px; }
.picker-tools select { height:50px; padding:0 14px; border:1px solid #cbd6e7; border-radius:999px; background:#fff; color:var(--ink); font-size:13px; }
.family-dots { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 14px; }
.family-dots button { min-height:44px; padding:7px 11px; border:1px solid #dce3ee; border-radius:999px; background:#fff; color:#536985; font-size:11px; }
.family-dots button[aria-pressed="true"] { border-color:#2d559e; background:#edf3fd; color:#1f4694; }
.family-dots i { display:inline-block; width:11px; height:11px; margin-right:6px; border-radius:50%; background:var(--dot); vertical-align:-1px; }
.shade-picker #picker-count { margin:17px 0 12px; font-size:10px; letter-spacing:.1em; color:#6c7b95; }
.shade-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.shade-option { min-width:0; padding:0 0 11px; border:1px solid #dbe2ee; border-radius:11px; overflow:hidden; background:#fff; text-align:left; }
.shade-option:hover,.shade-option:focus-visible { border-color:#2d559e; box-shadow:0 0 0 2px #dce8ff; }
.shade-option[aria-pressed="true"] { border-color:#254a9a; box-shadow:0 0 0 2px #254a9a; }
.shade-option .swatch { display:block; aspect-ratio:1.1; margin-bottom:10px; background:var(--colour); }
.shade-option b,.shade-option small { display:block; padding:0 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.shade-option b { font-size:13px; font-weight:400; }
.shade-option small { margin-top:3px; color:#7887a0; font-size:10px; }
.shade-picker #more-shades { display:block; margin:20px auto 9px; }
.shade-picker #more-shades[hidden] { display:none!important; }
.picker-note { margin:14px 0 0; color:#7a879e; font-size:11px; }
@media(max-width:800px) { .shade-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:620px) { .shade-picker { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); padding:21px 17px; } .picker-tools { grid-template-columns:1fr; } .shade-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .shade-option .swatch { height:95px; } }
.customer-section { scroll-margin-top:18px; }
.customer-section .step-head { margin-bottom:26px; }
.customer-section .step-head .eyebrow { margin:0 0 9px; color:var(--green); font-size:10px; }
.customer-section #customer-title { font-size:clamp(23px,3vw,32px); }
.customer-section .step-head > div > p:last-child { font-size:14px; max-width:640px; }
.customer-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 15px; }
.customer-field { min-width:0; }
.customer-name-field,.customer-phone-field { grid-column:1/-1; }
.customer-field > label { display:block; margin-bottom:7px; color:#536981; font-size:12px; }
.customer-field > input,.customer-field > select { width:100%; height:48px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.customer-field input:focus-visible,.customer-field select:focus-visible { outline:2px solid #89aa9a; outline-offset:2px; }
.customer-phone { display:flex; align-items:center; height:48px; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; }
.customer-phone > span { padding:0 12px; border-right:1px solid var(--line); color:var(--green); font-size:14px; }
.customer-phone > input { min-width:0; width:100%; height:46px; padding:0 12px; border:0; background:transparent; color:var(--ink); }
.customer-phone:focus-within { outline:2px solid #89aa9a; outline-offset:2px; }
.customer-phone input:focus-visible { outline:0; }
.customer-consent { display:flex; align-items:flex-start; gap:10px; margin-top:24px; color:#536981; font-size:12px; line-height:1.6; cursor:pointer; }
.customer-consent input { flex:0 0 18px; width:18px; height:18px; margin:2px 0 0; }
.customer-privacy { margin:8px 0 0 28px; color:var(--muted); font-size:11px; }
.customer-status { margin:16px 0 0; padding:13px 15px; border:1px solid #cbded2; border-radius:10px; background:#edf5ef; color:#355747; font-size:13px; line-height:1.6; }
.customer-status[data-state="error"] { border-color:#e9c9be; background:#fff1ed; color:#8d3d2d; }
.customer-status[data-state="pending"] { border-color:#e7d7b5; background:#fff8e9; color:#715c2b; }
.customer-download { display:inline-block; margin-top:14px; }
.customer-section #customer-plan-hint { margin-top:20px; }
.customer-section #customer-delivery-note { margin-top:8px; }
.customer-section #save-plan { max-width:360px; margin-top:20px; }
.customer-section button:disabled { opacity:.65; cursor:wait; transform:none; }
.customer-field [aria-invalid="true"],.customer-phone:has([aria-invalid="true"]) { border-color:#b5553c; }
.planner-footer > .footer-website { width:auto; margin:0; color:#fff; font-size:12px; }
@media(max-width:720px) { .customer-grid { grid-template-columns:1fr; gap:15px; } .customer-field > input,.customer-field > select,.customer-phone input { font-size:16px; } .customer-consent { font-size:12px; } .customer-status { font-size:12px; } }
@media print { .customer-section { display:none!important; } }