/* Ben, #131 round 3 (approved): one red call to action at a time. Footer "Start fresh (test)" link. */
.zf-row button.cta-confirmed{background:#102f4f}
.zf-row button.cta-confirmed:hover{background:#082341}
.bn-buy.cta-locked,.bn-buy.cta-locked:hover{background:#dfe4e9;border-color:#c5ccd3;color:#4a5866;cursor:not-allowed;box-shadow:none}
.zf-answer .cta-else,.hero-copy .zf-answer .cta-else:not(.eyebrow),.split-inner .zf-answer .cta-else{flex-basis:100%;margin:6px 0 0;font-size:17px;font-weight:700;color:#082341;display:block}
.cta-build{color:#102f4f;font-weight:700;font-size:17px;text-decoration:underline;text-underline-offset:4px}
.cta-build:hover{color:#082341}
@media(max-width:959px){.split-inner .zf-answer[data-tone="yes"] .zf-actions{display:flex}.split-inner .zf-answer .cta-else{font-size:15px}}
@media(max-width:959px){.split-inner .zf-answer[data-tone] p.cta-else{display:block;margin:6px 0 2px}}

.beta-reset{margin-left:auto;opacity:.8}
/* Custom configurator (Ben #140 round 4, same as buy-now): only the question's own box flashes; navy 'Next step' until everything required is answered. Copied from buy-now.css, which only loads on the carport form. */
.field.bn-flash select,.field.bn-flash input,.field.bn-flash textarea{animation:ca-pulse .5s ease-in-out 3}
@keyframes ca-pulse{50%{border-color:#c71920;box-shadow:0 0 0 3px rgba(199,25,32,.35)}}
@media (prefers-reduced-motion:reduce){.field.bn-flash select,.field.bn-flash input,.field.bn-flash textarea{animation:none;box-shadow:0 0 0 3px rgba(199,25,32,.35)}}
.btn.bn-next,.btn.bn-next:hover{background:#102f4f;border-color:#102f4f;color:#fff}

/* Ben, Sept 29: no floating guide. The step button looks unavailable (grey, aria-disabled) until the step's required answers are in; a click still jumps to the first missing one. */
.btn.mcu-unavailable,.btn.mcu-unavailable:hover{background:#dfe4e9;border-color:#c5ccd3;color:#4a5866;box-shadow:none}
.mcu-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Barns not offered at the ZIP (offer.js, CA96) */
.mcu-offer-note{max-width:760px;margin:40px auto 56px}.mcu-offer-note h1{margin-bottom:12px}.mcu-offer-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}.mcu-offer-note .btn-link{background:none;border:0;padding:0;color:#102f4f;text-decoration:underline;font:inherit;font-weight:700;cursor:pointer}
/* Before a ZIP (CA117 fix 5): answers are dimmed and locked; the ? help buttons stay usable. */
.zip-locked :is(input,select,textarea,summary,.size-choice button,.field label,.field-help,h2,h3,dl,.bn-lock){opacity:.35}
.zip-locked :is(input,select,textarea,summary,button:not(.help-button),a[href]){pointer-events:none}
.zip-locked .help-button{opacity:1;pointer-events:auto}
.zf-answer .cta-prices{display:block;margin:6px 0 10px;font-size:18px}
.cta-see-prices{display:inline-block;margin:12px 0 0 16px;font-weight:700}
.req-out{margin:0 0 14px}
/* Building types page (Sept 30): Roof styles cards with two links each; commercial as a quiet link */
.types-grid .bt-card{display:flex;flex-direction:column}.types-grid .bt-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.type-links{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:6px}.type-links a{font-weight:700}
.types-more{margin:22px 0 6px;font-size:15px}.types-more a{color:#526274}
/* Building-type cards on the build-your-own page (Ben via orb, Oct 1): the whole card opens the configurator. The card's
   own button link is stretched over the card, so it stays one link for keyboards and screen readers. */
#building-cards .product-card{position:relative;cursor:pointer}
#building-cards .product-card .card-content .btn::after{content:'';position:absolute;inset:0;border-radius:inherit}
#building-cards .product-card:hover h3{text-decoration:underline}
#building-cards .product-card:has(.btn:focus-visible){outline:3px solid #1d5fa8;outline-offset:2px}

/* Audit A12 (Oct 2): customers never see the 'Preview image — full image unavailable' badge. images.js marks a hidden, not-yet-loaded slideshow image (lazy, complete with no pixels) as unavailable; the picture loads fine once shown. */
.image-unavailable::after{content:none!important;display:none!important}

/* A sent request no longer fills the configure page (MAIN V11, Oct 3): one line says so and offers the old building back. */
.nr-note{margin:12px auto;padding:10px 14px;background:#eef4fa;border-left:4px solid #102f4f;color:#082341}
.nr-note .text-button{font-weight:600}
/* Ben via orb (Oct 4, markup): every expandable section on the order form uses the same small arrow. */
.reference-details>summary{display:flex;align-items:center;gap:4px;list-style:none;cursor:pointer}
.reference-details>summary::-webkit-details-marker{display:none}
.reference-details>summary:before{content:'▸';font-size:15px;display:inline-block;margin-right:6px}
.reference-details[open]>summary:before{content:'▾'}
/* CA138: beta sign-out in the footer's bottom row (the Private beta bar is gone). */
.site-footer .beta-signout{display:inline;margin:0}.site-footer .beta-signout button{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
/* CA138 (Ben, Oct 4): ready-to-order first (red), custom design below it, quieter. */
.support-cta .cta-pair{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.support-cta .cta-pair .cta-custom{font-weight:600}
/* CA138 (Ben, Oct 4): white looks like real white metal, not cream; "Not sure", "Decide later" and "More colors" are tiles
   at the end of each color row with a small caption under each (order form patch swUI moves them there). */
.swatch-tone-0{--sample-color:#f7f7f5}
.swatch-palette:has(.sw-alt){grid-template-columns:repeat(13,minmax(0,1fr));row-gap:10px;align-items:start}
@media(max-width:1100px){.swatch-palette:has(.sw-alt){grid-template-columns:repeat(7,minmax(0,1fr))}}
.swatch-palette .sw-alt{position:relative;display:flex;flex-direction:column;align-items:center;min-height:44px;margin:0;cursor:pointer}
.swatch-palette .sw-alt>span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0;background:none;pointer-events:none}
.sw-tile{display:grid;place-items:center;width:32px;height:32px;box-sizing:border-box;border:1px solid #6d7883;border-radius:5px;background:#fff;color:#102f4f}
.sw-q{font-weight:800;font-size:18px;line-height:1}
.sw-cap{font-size:11px;line-height:1.15;color:#536979;text-align:center;max-width:64px}
.swatch-palette .sw-alt input:checked+span{background:none;border:0}
.swatch-palette .sw-alt input:checked+span .sw-tile{outline:2px solid #102f4f;outline-offset:3px}
.swatch-palette .sw-alt input:checked+span .sw-cap{color:#102f4f;font-weight:700}
.swatch-palette .sw-alt input:focus-visible+span .sw-tile{outline:3px solid #236fad;outline-offset:3px}