/* Audience template. Embedded in exported HTML by tools/build_showcase.py. */
.showcase-app { font-size: 15px; }
.showcase-app main { max-width: 1320px; padding-inline: 40px; }
.showcase-app .site-header { max-width: 1320px; padding: 23px 40px; border-bottom: 0; }
.showcase-app .brand { font-size: 25px; letter-spacing: 3.5px; }
.showcase-app .brand small { font-size: 11px; }
.showcase-app .site-header nav { gap: 22px; }
.showcase-app .nav-button { font-size: 13px; min-height: 44px; position: relative; }
.showcase-app .nav-button.active::after { content: ''; position: absolute; bottom: 4px; right: 10px; width: 18px; height: 2px; background: var(--copper); }
.showcase-app .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 52px; padding: 24px 0 46px; }
.showcase-app .hero h1 { font-size: clamp(33px, 3.6vw, 48px); line-height: 1.65; font-weight: 700; letter-spacing: -1px; margin: 18px 0; }
.showcase-app .hero > div > p { font-size: 15px; line-height: 2.1; color: var(--muted); max-width: 480px; }
.showcase-app .hero .eyebrow { font-size: 12px; color: #60735d; }
.showcase-app .hero-actions { gap: 20px; }
.showcase-app .hero-actions .button { padding: 14px 22px; min-height: 51px; }
.showcase-app .hero-actions .quiet { font-size: 12px; }
.showcase-app .hero-visual { position: relative; min-width: 0; }
.showcase-app .architecture-plate { overflow: hidden; border-radius: 140px 140px 20px 20px; background: #e8eddf; aspect-ratio: 1.16; position: relative; }
.showcase-app .architecture-plate > svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.showcase-app .architecture-plate > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-app .visual-footnote { position: absolute; bottom: 13px; left: 17px; border-radius: 6px; padding: 3px 8px; color: #415b49; background: #fafbf2e8; font-size: 10px; }
.showcase-app .hero-annotation { position: absolute; bottom: 31px; right: -24px; padding: 17px 22px; border: 1px solid #e1e5d8; background: #fff; box-shadow: 0 12px 35px #183c3210; border-radius: 14px; max-width: 240px; }
.showcase-app .hero-annotation strong { display: block; font-size: 14px; }
.showcase-app .hero-annotation small { font-size: 11px; }
.showcase-app .hero-annotation b { width: 30px; height: 30px; display: inline-grid; place-items: center; background: var(--soft); border-radius: 50%; font-size: 15px; margin-left: 6px; }
.showcase-app .hero-principles { display: flex; gap: 22px; padding-top: 27px; margin-top: 29px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.showcase-app .hero-principles span::before { content: '✓'; color: #476d43; margin-left: 7px; }
.showcase-app .results-bar { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; gap: 25px; box-shadow: var(--shadow-soft); }
.showcase-app .results-bar h2 { font-size: 24px; margin-bottom: 6px; }
.showcase-app .results-bar .eyebrow { color: var(--copper); font-size: 11px; margin-bottom: 4px; }
.showcase-app #preferenceSummary { margin: 0; font-size: 12px; }
.showcase-app .search-box { min-width: 260px; background: #f7f8f3; min-height: 47px; border-color: #d6dfd0; }
.showcase-app .search-box input { font-size: 13px; background: transparent; }
.showcase-app .filter-row select { font-size: 12px; max-width: 190px; min-height: 47px; }
.showcase-app #resultsCount { padding: 14px 2px 5px; margin: 0 0 15px; font-size: 12px; }
.showcase-app .listing-grid { gap: 26px; }
.showcase-app .listing-card { border-radius: 18px; box-shadow: 0 5px 20px #102f2905; border-color: #dce1d5; }
.showcase-app .listing-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #102f2910; border-color: #b6c6a4; }
.showcase-app .cover { height: 242px; margin: 9px 9px 0; border-radius: 12px; }
.showcase-app .cover > img { transition: transform .35s ease; }
.showcase-app .listing-card:hover .cover > img { transform: scale(1.035); }
.showcase-app .cover-tag { top: 14px; right: 14px; font-size: 11px; padding: 5px 12px; }
.showcase-app .heart { width: 40px; height: 40px; top: 12px; left: 12px; border: 1px solid #e0e5d6; }
.showcase-app .card-body { padding: 22px; }
.showcase-app .card-body h3 { font-size: 19px; font-weight: 600; }
.showcase-app .card-meta { font-size: 12px; margin-bottom: 16px; }
.showcase-app .price { font-size: 20px; font-weight: 700; }
.showcase-app .mini-facts { font-size: 12px; gap: 0; margin: 13px 0 18px; flex-wrap: wrap; }
.showcase-app .mini-facts span + span::before { content: '·'; padding-inline: 11px; color: #8b997d; }
.showcase-app .match-tag { font-size: 11px; padding: 9px 11px; border-radius: 8px; }
.showcase-app .card-actions .text-button { min-height: 40px; font-size: 13px; font-weight: 600; }
.showcase-app .compare-choice { font-size: 12px; }
.showcase-app .placeholder { background: #edf0e3; }
.showcase-app .placeholder > svg { width: 86px; height: 86px; fill: none; stroke: #96aa81; stroke-width: 1; margin-bottom: 10px; }
.showcase-app .placeholder small { font-size: 11px; color: #637554; }
.showcase-app .empty { padding: 55px 25px; background: #eef2e5; border-radius: 19px; }
.showcase-app .empty h3 { font-size: 22px; }
.showcase-app .empty p { font-size: 13px; }
.showcase-app .site-footer { text-align: right; margin-top: 65px; padding: 35px 0 110px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 28px; }
.showcase-app .site-footer p { margin: 9px 0; font-size: 12px; }
.showcase-app .site-footer small { margin: 15px 0; font-size: 11px; }
.showcase-app .footer-heading { font-size: 22px; line-height: 1.8; max-width: 260px; margin-top: 10px; color: var(--ink); font-weight: 600; }
.showcase-app .brand-word { font-size: 23px; letter-spacing: 4px; }
.showcase-app .compare-bar { border-radius: 15px; padding: 14px 24px; background: #fffef8; box-shadow: 0 12px 50px #16372e26; }
.showcase-app .dialog-head { background: #fcfcf7; padding: 24px 28px; }
.showcase-app dialog { border-radius: 22px; }
.showcase-app .close { width: 42px; height: 42px; }
.showcase-app .dialog-content { padding: 28px; }
.showcase-app .gallery-main { height: 345px; border-radius: 16px; }
.showcase-app .decision-panel { border-radius: 16px; background: #eff3e7; padding: 24px; }
.showcase-app .decision-panel .price { font-size: 24px; }
.showcase-app .decision-panel h3 { font-size: 17px; }
.showcase-app .reason { font-size: 12px; }
.showcase-app .detail-section h3 { font-size: 19px; }
.showcase-app .detail-section p { font-size: 13px; line-height: 2.1; }
.showcase-app .feature-item, .showcase-app .disclosure { font-size: 12px; }
.showcase-app .form-grid label, .showcase-app legend, .showcase-app .feature-checks label { font-size: 12px; }
.showcase-app .tour-feature { align-self: start; padding: 5px 10px; background: #eaf0df; color: #315b41; }
@media (max-width: 1100px) {
  .showcase-app .hero { gap: 32px; }
  .showcase-app .hero-annotation { right: -12px; padding: 12px 15px; }
  .showcase-app .hero-principles { gap: 12px; flex-wrap: wrap; }
  .showcase-app .filter-row { width: 100%; }
  .showcase-app .filter-row select { max-width: 230px; }
}
@media (max-width: 700px) {
  .showcase-app main { padding-inline: 18px; }
  .showcase-app .site-header { padding: 19px 18px; gap: 18px; }
  .showcase-app .site-header nav { gap: 9px; }
  .showcase-app .nav-button { font-size: 12px; padding: 7px 4px; }
  .showcase-app .hero { display: flex; flex-direction: column; align-items: stretch; gap: 27px; padding: 12px 0 30px; }
  .showcase-app .hero h1 { font-size: 33px; margin: 12px 0; }
  .showcase-app .hero > div > p { font-size: 14px; }
  .showcase-app .hero-principles { padding-top: 17px; margin-top: 20px; gap: 14px; font-size: 11px; }
  .showcase-app .hero-visual { width: 100%; }
  .showcase-app .architecture-plate { aspect-ratio: 1.55; border-radius: 90px 90px 18px 18px; }
  .showcase-app .hero-annotation { bottom: 25px; right: 10px; padding: 10px 14px; max-width: 210px; }
  .showcase-app .hero-annotation strong { font-size: 12px; }
  .showcase-app .hero-annotation small { font-size: 10px; }
  .showcase-app .results-bar { padding: 21px 17px; border-radius: 15px; }
  .showcase-app .results-bar h2 { font-size: 22px; }
  .showcase-app .filter-row select { max-width: none; }
  .showcase-app .search-box { min-width: 100%; }
  .showcase-app .listing-grid { gap: 22px; }
  .showcase-app .cover { height: 225px; }
  .showcase-app .card-body { padding: 20px; }
  .showcase-app .site-footer { display: block; padding-bottom: 120px; }
  .showcase-app .footer-heading { max-width: none; margin-bottom: 25px; font-size: 21px; }
  .showcase-app .dialog-content { padding: 18px; }
  .showcase-app .dialog-head { padding: 18px; }
  .showcase-app .decision-panel { padding: 19px; }
  .showcase-app .gallery-main { height: 240px; }
  .showcase-app .compare-bar { padding: 11px; }
  .showcase-app .compare-bar .button { font-size: 11px; }
}
@media print { .showcase-app .site-header, .showcase-app main { display: none !important; } }
.showcase-app #heroConcept { width: 100%; height: 100%; }
.showcase-app #heroConcept > svg { width: 100%; height: 100%; display: block; }
.showcase-app #heroFeaturedOpen { display: block; margin-top: 4px; min-height: 36px; }
.showcase-app #heroVisualTitle { overflow-wrap: anywhere; }

.showcase-app .hero-detail-button { border: 0; background: none; color: var(--green); padding: 4px 0; font-size: 12px; cursor: pointer; }