/* Desktop appearance feature; the approved mobile component remains below 768px. */
@media (min-width:768px) {
 .hero-feature-page #freedom-to .appearance-customization {
  display:block; margin-top:24px; padding:40px 36px; border:1px solid #485B88;
  border-radius:28px; background:linear-gradient(130deg,#1A2A50,#152442);
  scroll-margin-top:100px; overflow:hidden;
 }
 .hero-feature-page .appearance-customization > .appearance-heading,
 .hero-feature-page .appearance-customization > p,
 .hero-feature-page .appearance-customization > .appearance-visual { display:none; }
 .hero-feature-page .appearance-pc-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center; }
 .appearance-pc-copy, .appearance-art { min-width:0; }
 .appearance-pc-heading { display:flex; gap:22px; align-items:flex-start; }
 .hero-feature-page .appearance-pc-heading h3 { font-size:36px; font-weight:700; line-height:1.4; margin:0; letter-spacing:-.03em; }
 .appearance-pc-heading .appearance-free { margin-top:9px; font-size:13px; background:#2D406A; color:#F5F1E8; padding:4px 12px; }
 .appearance-options { margin:28px 0 0; }
 .appearance-option { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:18px; padding:18px 0; border-bottom:1px solid #3D5079; align-items:center; }
 .appearance-option:first-child { padding-top:0; }
 .appearance-option:last-child { border-bottom:0; padding-bottom:0; }
 .appearance-option dt { font-size:14px; line-height:1.55; color:#BCC5E2; }
 .appearance-option dd { margin:0; display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center; font-size:20px; font-weight:700; line-height:1.5; }
 .appearance-option-unit dd { font-size:28px; letter-spacing:-.02em; }
 .appearance-separator { color:#7D8CB2; font-size:16px; font-weight:400; }
 .appearance-swatches { display:flex; flex-wrap:wrap; gap:8px; }
 .appearance-swatch { width:18px; height:18px; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px #E2E8FF66; }
 .appearance-art-grid { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:18px 16px; align-items:start; }
 .appearance-art-grid > figure { margin:0; min-width:0; }
 .appearance-art-grid figcaption { color:#C7D0EB; font-size:13px; line-height:1.5; margin-bottom:10px; }
 .appearance-main-screen { grid-column:1; grid-row:1 / 3; align-self:center; }
 .appearance-palette-screen { grid-column:2; grid-row:1; align-self:end; }
 .appearance-map-screen { grid-column:2; grid-row:2; }
 .appearance-art-grid .store-crop { width:100%; border-radius:18px; background:#fff; box-shadow:0 18px 30px #07112744; }
 .appearance-main-screen .store-crop { border-radius:22px; }
 .appearance-art-note { font-size:12px; line-height:1.6; color:#A7B3D3; margin:16px 0 0; text-align:right; }
}
@media (min-width:768px) and (max-width:1023px) {
 .hero-feature-page #freedom-to .appearance-customization { padding:32px 28px; }
 .hero-feature-page .appearance-pc-layout { grid-template-columns:1fr; gap:32px; }
 .appearance-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin-top:24px; }
 .appearance-option { grid-template-columns:1fr; gap:10px; padding:16px 0; }
 .appearance-option:first-child { padding-top:16px; }
 .appearance-option:last-child { border-bottom:1px solid #3D5079; padding-bottom:16px; }
 .appearance-art { width:100%; max-width:560px; justify-self:center; }
}
@media (min-width:1024px) and (max-width:1199px) {
 .hero-feature-page .appearance-pc-layout { gap:32px; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
 .appearance-option { grid-template-columns:1fr; gap:6px; padding-block:12px; }
 .appearance-options { margin-top:22px; }
 .appearance-pc-heading { gap:16px; }
 .hero-feature-page .appearance-pc-heading h3 { font-size:32px; }
}