/* Mio Decor 8.64.5 — system product / mobile Figma composition.
 * This is the single owner of the System component's geometry.
 * Existing Customizer image controls still take precedence when set.
 */
#system.section { padding-bottom: var(--mio-space-section); }
#system .system-grid {
  display: grid;
  grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
  gap: 42px;
  align-items: center;
  min-width: 0;
}
#system .system-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
#system .system-copy .section-title { text-align: left; margin: 0 0 15px; }
#system .system-copy .section-title > span { display: block; }
#system .system-copy .section-title > span:first-child { color: #5691b8; }
#system .system-copy .section-title > span:last-child { color: #0e1116; }
#system .system-copy .lead { color:#15202b; font: 600 15px/1.5 var(--mio-font-body); margin: 0 0 15px; }
#system .check-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#system .check-list li {
  position:relative; padding-left:27px; margin:0;
  font: 400 13px/1.55 var(--mio-font-body); color:#506071;
  overflow-wrap: break-word;
}
#system .check-list li::before {
  content:'✓'; position:absolute; left:0; top:1px;
  color:#5691b8; background:none; border:none; border-radius:0;
  font: 800 17px/1.3 var(--mio-font-body);
}
#system .system-copy .btn { min-height:42px; height:auto; padding:10px 15px; font-size:12px; }
#system .system-visual { min-width:0; min-height:0; width:100%; height:auto; position:relative; display:flex; align-items:center; justify-content:center; }
#system .system-picture { display:block; width:var(--system-image-width,100%); max-width:100%; margin-inline:auto; }
#system .system-picture img { display:block; position:static; width:100%; height:auto; object-fit:contain; }
#system .system-mobile-diagram { display:none; }
@media (min-width: 761px) and (max-width: 1199px) {
  #system .system-grid { grid-template-columns: minmax(0, 35%) minmax(0, 1fr); gap:24px; }
}
@media (max-width:760px) {
  #system.section { padding-top: 0; padding-bottom: 35px; }
  #system .system-grid {
    display:grid; grid-template-columns:minmax(0,1fr); gap:16px;
    width:calc(100% - 30px); max-width: 390px; margin-inline:auto;
  }
  #system .system-copy { min-width:0; width:100%; }
  #system .system-copy .section-title {
    font-size: clamp(20px,5.7vw,23px); line-height:1.16;
    letter-spacing:-.55px; margin-bottom:8px;
  }
  #system .system-copy .lead { font-size:13px; line-height:1.5; font-weight:600; margin:0 0 7px; }
  #system .check-list { margin:0; padding:0; gap:10px; width:100%; }
  #system .check-list li { padding-left:27px; margin:0; font-size:12px; line-height:1.5; }
  #system .check-list li::before { font-size:17px; top:0; }
  /* Figma does not show an additional CTA in this mobile section. */
  #system .system-copy .btn { display:none; }
  #system .system-visual { display:block; margin:0; max-width:100%; overflow:visible; }
  #system .system-visual--figma .system-picture { display:none; }
  #system .system-visual--figma .system-mobile-diagram { display:block; }
  #system .system-visual--custom .system-picture { width:var(--system-image-width-mobile,100%); }
  #system .system-mobile-diagram {
    width:100%; max-width:390px; margin-inline:auto;
    position:relative; aspect-ratio:390/444; isolation:isolate;
  }
  #system .system-mobile-diagram__product {
    display:block; position:absolute; z-index:1;
    top:33%; left:4%; width:82%; height:auto; pointer-events:none;
  }
  #system .system-mobile-diagram__lines {
    position:absolute; z-index:2; inset:0; width:100%; height:100%;
    overflow:visible; pointer-events:none;
  }
  #system .system-mobile-diagram__lines path {
    stroke:#478fbe; stroke-width:1.8; fill:none;
    stroke-dasharray:4.5 5.5; stroke-linecap:round;
  }
  #system .system-mobile-diagram__lines circle { fill:#478fbe; }
  #system .system-point {
    position:absolute; z-index:3; width:38.46%; padding:11px 12px;
    border:1px solid #dce6ec; border-radius:8px;
    box-shadow:0 4px 12px rgba(15,35,55,.055);
    background:#fff; color:#4a5968;
    font:400 10.7px/1.42 var(--mio-font-body);
    overflow-wrap:break-word;
  }
  #system .system-point__number {
    display:block; font:700 14px/1.3 var(--mio-font-body);
    color:#4c91be; margin-bottom:5px;
  }
  #system .system-point--1 { left:0; top:4%; }
  #system .system-point--2 { right:0; top:0; }
  #system .system-point--3 { left:22%; top:50%; }
  #system .system-point--4 { right:0; top:68%; }
  #system .system-point--5 { left:1.5%; top:81%; }
}
@media (max-width:359px) {
  #system .system-grid { width:calc(100% - 24px); }
  #system .system-copy .lead { font-size:12.5px; }
  #system .system-point { font-size:9.5px; padding:8px 9px; }
  #system .system-point__number { font-size:13px; margin-bottom:3px; }
}
@media (prefers-reduced-motion: reduce) {
  #system .system-mobile-diagram, #system .system-picture { animation:none; transition:none; }
}