/* Berger BI v2 — one icon language. Every content icon on the page is a line icon from assets/icons.svg (48 grid, no
   baked stroke widths) drawn in a soft rounded square:
     <span data-ico="1|dark|ghost" aria-hidden="true"><svg viewBox="0 0 48 48"><use href="assets/icons.svg#i-…"></use></svg></span>
   1 ..... navy line on a light navy tint (ground and white surfaces)
   dark .. white line on a white tint (the navy band)
   ghost . dashed outline, no fill (an open slot, e.g. "your next system")
   The line is ~1.75px at every size: --ico-sw is in 48-grid units, so it scales with --ico-size (24px -> 3.5). */
#dc-root [data-ico] {
  --ico-box: 44px; --ico-size: 24px; --ico-sw: 3.5;
  flex: none; display: inline-grid; place-items: center; box-sizing: border-box;
  width: var(--ico-box); height: var(--ico-box);
  border-radius: var(--v2-r-inner, 16px);
  background: rgba(31, 69, 112, .07); color: var(--v2-navy);
}
#dc-root [data-ico] svg {
  display: block; width: var(--ico-size); height: var(--ico-size); overflow: visible;
  fill: none; stroke-width: var(--ico-sw); stroke-linecap: round; stroke-linejoin: round;
}
#dc-root [data-ico="dark"] { background: rgba(255, 255, 255, .08); color: #fff; }
#dc-root [data-ico="ghost"] { background: transparent; border: 1px dashed var(--v2-line-2); color: var(--v2-navy); }
/* small: 40px box, 22px icon (rows, the booking agenda) */
#dc-root :is(#spec [data-xp-row], #spec [data-xp-next], #booking [data-bk="call-row"]) [data-ico] {
  --ico-box: 40px; --ico-size: 22px; --ico-sw: 3.8;
}

/* ------------------------------------------------------------------ #spec rows: num | icon | title | chevron */
#dc-root #spec [data-xp-row] > summary { grid-template-columns: 56px minmax(0, 1fr) 18px; }
#dc-root #spec [data-xp-next] { grid-template-columns: 56px 40px minmax(0, 1fr) 18px; }
/* the opened body lines up under the title (phones keep their full-width body) */
@media (min-width: 640px) {
  #dc-root #spec [data-xp-body] { padding: 2px 32px 30px calc(32px + 56px + 16px); }
  #dc-root [dir="rtl"] #spec [data-xp-body] { padding: 2px calc(32px + 56px + 16px) 30px 32px; }
}
#dc-root #spec [data-xp-row][open] [data-ico] { background: rgba(31, 69, 112, .11); }
@media (max-width: 639px) {
  #dc-root #spec [data-xp-row] > summary { grid-template-columns: 40px minmax(0, 1fr) 18px; }
  #dc-root #spec [data-xp-next] { grid-template-columns: 40px 36px minmax(0, 1fr) 18px; }
  #dc-root :is(#spec [data-xp-row], #spec [data-xp-next]) [data-ico] { --ico-box: 36px; --ico-size: 20px; --ico-sw: 4.2; border-radius: 12px; }
}

/* ------------------------------------------------------------------ #bcore: a tile heads each value column */
@media (min-width: 901px) {
  #dc-root #bcore [data-xp-values] > li > [data-ico] + :is([data-xp-scale], [data-xp-stack]) { margin-top: 28px; }
}
@media (max-width: 900px) {
  #dc-root #bcore [data-xp-values] > li > [data-ico] { margin-bottom: 4px; }
}
@media (max-width: 639px) {
  #dc-root #bcore [data-xp-values] > li > [data-ico] { --ico-box: 40px; --ico-size: 22px; --ico-sw: 3.8; margin-bottom: 0; }
}

/* ------------------------------------------------------------------ #booking: "what happens in the call" */
#booking [data-bk="call-row"] { display: block; }

/* ------------------------------------------------------------------ #about: the vision label */
#dc-root [data-v2c-vision-label] { display: flex; align-items: center; align-self: start; gap: 12px; padding-top: 0; margin-top: -4px; }
@media (max-width: 899px) {
  #dc-root [data-v2c-vision-label] [data-ico] { --ico-box: 40px; --ico-size: 22px; --ico-sw: 3.8; }
}