.design-gallery { background: #f5f5ef; color: #20372f; }
.gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 28px; border-bottom: 1px solid #d8ded6; }
.review-label { font-size: 10px; letter-spacing: .15em; color: #68726b; }
.gallery-intro { padding-block: 64px 44px; max-width: 850px; }
.gallery-intro h1 { font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
.gallery-intro > p:last-child { max-width: 610px; color: #68726b; font-size: 16px; margin-bottom: 0; }
.design-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.design-option { background: #fff; border: 1px solid #d8ded6; overflow: hidden; border-radius: 8px; }
.design-screenshot { display: block; padding: 16px; background: #e7eae3; border-bottom: 1px solid #d8ded6; }
.design-screenshot:focus-visible { outline-offset: -5px; }
.design-screenshot img { width: 100%; height: auto; border: 1px solid #d8ded6; border-radius: 4px; }
.design-option-body { padding: 28px; }
.design-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.design-index { font-size: 11px; color: #68726b; }
.design-title h2 { font-size: 21px; letter-spacing: -.03em; margin: 0; }
.design-option-body > p { color: #68726b; font-size: 14px; margin-bottom: 22px; }
.palette { display: inline-flex; gap: 4px; margin-left: auto; }
.palette i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #0001; background: #193e38; }
.palette i:nth-child(2) { background: #fbfcf9; }
.palette i:nth-child(3) { background: #a65b34; }
.option-2 .palette i:first-child { background: #26241f; }
.option-2 .palette i:nth-child(2) { background: #f4efe4; }
.option-2 .palette i:nth-child(3) { background: #a17840; }
.option-3 .palette i:first-child { background: #15243a; }
.option-3 .palette i:nth-child(2) { background: #f7b530; }
.option-3 .palette i:nth-child(3) { background: #fff; }
.option-4 .palette i:first-child { background: #4d6048; }
.option-4 .palette i:nth-child(2) { background: #faf4e9; }
.option-4 .palette i:nth-child(3) { background: #b65e3c; }
.option-5 .palette i:first-child { background: #142a4c; }
.option-5 .palette i:nth-child(2) { background: #e9f1fc; }
.option-5 .palette i:nth-child(3) { background: #2868e8; }
.design-open { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #d8ded6; padding-top: 16px; font-size: 13px; font-weight: 650; }
.design-open span { font-size: 18px; }
.selection-note { display: flex; flex-direction: column; justify-content: center; padding: 50px; background: #e7eae3; border-radius: 8px; }
.selection-note h2 { font-size: 32px; }
.selection-note p:not(.eyebrow) { color: #68726b; font-size: 15px; }
.selection-note .text-link { margin-top: 12px; }
.gallery-footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 32px; margin-top: 48px; border-top: 1px solid #d8ded6; color: #68726b; font-size: 11px; }
@media (max-width: 800px) {
  .design-grid { grid-template-columns: 1fr; gap: 24px; }
  .gallery-intro { padding-block: 48px 32px; }
  .selection-note { padding: 34px; }
}
@media (max-width: 480px) {
  .gallery-header { align-items: flex-start; flex-direction: column; padding-block: 24px; gap: 18px; }
  .gallery-intro h1 { font-size: 2.6rem; }
  .design-screenshot { padding: 10px; }
  .design-option-body { padding: 22px; }
  .design-title h2 { font-size: 18px; }
  .palette i { width: 9px; height: 9px; }
  .gallery-footer { flex-wrap: wrap; }
}