/* Berger BI v2 — security (#security): a quiet "data security & privacy" strip that closes the tech-stack section.
   No card: a hairline, a short head, then the items on hairlines with a mono index, the same voice as the tech
   groups' rails. No icons, no badges. The items are data (`security` in index.html); removing an entry there needs no
   CSS change: the items share one row on desktop whatever their count, and stack below 900px. */

/* the footer link lands it with some air under the navbar */
#dc-root #security { scroll-margin-top: 100px !important; }
@media (max-width: 639px) { #dc-root #security { scroll-margin-top: 84px !important; } }

#dc-root [data-v2s="card"] {
  margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--v2-line);
}

/* head: the title and its one line share a baseline row on wide screens */
#dc-root [data-v2s="head"] {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
}
#dc-root #security [data-v2s="title"] {
  margin: 0; font-size: 20px !important; font-weight: 600 !important; line-height: 1.35 !important;
  letter-spacing: -.005em !important; color: var(--v2-ink); padding-bottom: .14em; /* Heebo's descent stays inside */
}
#dc-root [data-v2s="intro"] {
  margin: 0; font-size: 16px; line-height: 1.6; color: var(--v2-muted); text-wrap: pretty;
}

/* items: hairline on top, mono index, title, one sentence */
#dc-root [data-v2s="list"] {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px 40px;
}
#dc-root [data-v2s="item"] { margin: 0; padding-top: 20px; border-top: 1px solid var(--v2-line-2); min-width: 0; }
#dc-root [data-v2s="idx"] {
  display: block; font-family: var(--v2-mono); font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: .08em; color: var(--v2-soft); direction: ltr; text-align: start; unicode-bidi: isolate;
}
#bbi-root[dir="rtl"] #security [data-v2s="idx"] { text-align: right; }
#dc-root [data-v2s="name"] {
  margin: 10px 0 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--v2-ink);
}
#dc-root [data-v2s="body"] {
  margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--v2-muted); text-wrap: pretty;
}

/* tablets: one item per row, the title beside its sentence */
@media (max-width: 899px) {
  #dc-root [data-v2s="list"] { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  #dc-root [data-v2s="item"] {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 32px; align-items: baseline;
    padding-block: 20px;
  }
  #dc-root [data-v2s="item"]:last-child { padding-bottom: 0; }
  #dc-root [data-v2s="idx"] { grid-column: 1; }
  #dc-root [data-v2s="name"] { grid-column: 1; margin-top: 6px; }
  #dc-root [data-v2s="body"] { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: start; }
}
@media (max-width: 639px) {
  #dc-root [data-v2s="card"] { margin-top: 48px; padding-top: 28px; }
  #dc-root #security [data-v2s="title"] { font-size: 20px !important; }
  #dc-root [data-v2s="intro"] { font-size: 15px; }
  #dc-root [data-v2s="list"] { margin-top: 24px; }
  #dc-root [data-v2s="item"] { display: block; padding-block: 18px; }
  #dc-root [data-v2s="name"] { margin-top: 8px; }
  #dc-root [data-v2s="body"] { margin-top: 6px; }
}