/* Security + "What Ln2CRM is not" — the "Security B" mockup design.
   Everything is scoped under .snb so it never touches the rest of the site's
   .h2 / .lead / etc. Uses General Sans + JetBrains Mono (linked in the head). */

.snb{
  --ac:#5b4cf5; --ink:#0e0d1a; --mut:#62617a; --line:rgba(14,13,26,.08);
  --rd:#ef4444;
  --f:"General Sans", ui-sans-serif, system-ui, sans-serif;
  --m:"JetBrains Mono", ui-monospace, monospace;
  font-family:var(--f);
  color:var(--ink);
}
.snb .h2{
  font-size:56px; line-height:1.02; letter-spacing:-.035em;
  font-weight:600; margin:0; text-wrap:balance;
}
.snb .lead{
  font-size:19px; line-height:1.55; color:var(--mut);
  margin:0; text-wrap:pretty;
}

/* Darker surface that wraps both blocks, like the testimonials card. */
.snb-surface{
  background: linear-gradient(180deg, #efeafe 0%, #e8e2fb 100%);
  border-radius: 28px;
  padding: 64px;
}
.snb-surface #not{ margin-top: 72px; }

/* Security header: title left, lead right */
.snb-head{
  display:grid; grid-template-columns:420px 1fr; gap:80px;
  margin-bottom:56px; align-items:end;
}

/* Three numbered pillars */
.snb .sB-top{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink);
}
.snb .sB-top>div{ padding:32px 40px 8px 0; }
.snb .sB-top .num{ font:500 13px var(--m); color:var(--ac); letter-spacing:.1em; }
.snb .sB-top h3{ margin:18px 0 10px; font-size:24px; letter-spacing:-.02em; font-weight:600; }
.snb .sB-top p{ margin:0; color:var(--mut); font-size:16px; line-height:1.55; max-width:34ch; }

/* "What we store" bar, expandable */
.snb .sB-det{ margin-top:40px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.snb .sB-det>summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; font-weight:600; font-size:17px;
}
.snb .sB-det>summary::-webkit-details-marker{ display:none; }
.snb .sB-det>summary .exp{ font-weight:500; color:var(--ac); font-size:15px; }
.snb .sB-det>summary .exp .o{ display:none; }
.snb .sB-det[open]>summary .exp .c{ display:none; }
.snb .sB-det[open]>summary .exp .o{ display:inline; }
.snb .sB-store{ padding:0 28px 24px; overflow-x:auto; }
.snb .sB-store table{ width:100%; border-collapse:collapse; font-size:14px; }
.snb .sB-store th, .snb .sB-store td{
  text-align:left; padding:10px 14px; border-top:1px solid var(--line);
  color:var(--mut); vertical-align:top;
}
.snb .sB-store th{ color:var(--ink); font-weight:600; }

/* "What Ln2CRM is not": header on top (title left, lead right), full-width list below */
.snb .sB-not{ display:block; }
.snb .sB-not .snb-head{ margin-bottom:40px; }
.snb .sB-tab{ border-top:1px solid var(--ink); }
.snb .sB-tab>div{
  display:grid; grid-template-columns:260px 1fr; gap:32px;
  padding:24px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.snb .sB-tab h3{ margin:0; font-size:18px; font-weight:600; display:flex; gap:12px; align-items:center; }
.snb .sB-tab h3 i{ font-style:normal; color:var(--rd); font-size:14px; }
.snb .sB-tab p{ margin:0; color:var(--mut); font-size:16px; line-height:1.55; }
.snb .sB-tab p b{ color:var(--ink); font-weight:600; }

/* Responsive */
@media (max-width: 900px){
  .snb-surface{ padding:40px 28px; }
  .snb-surface #not{ margin-top:48px; }
  .snb .h2{ font-size:40px; }
  .snb-head{ grid-template-columns:1fr; gap:16px; margin-bottom:32px; }
  .snb .sB-top{ grid-template-columns:1fr; border-top:0; }
  .snb .sB-top>div{ padding:20px 0 8px; border-top:1px solid var(--line); }
  .snb .sB-not{ grid-template-columns:1fr; gap:26px; }
  .snb .sB-not>div:first-child .lead{ margin-top:14px !important; }
  .snb .sB-tab>div{ grid-template-columns:1fr; gap:8px; padding:18px 0; }
}
@media (max-width: 520px){
  .snb-surface{ padding:24px 16px; border-radius:22px; }
  .snb-surface #not{ margin-top:32px; }
  .snb .h2{ font-size:30px; }
  .snb .sB-det>summary{ padding:18px 18px; font-size:15.5px; }
  .snb .sB-store{ padding:0 14px 18px; }

  /* Security pillars become a one-per-view carousel on phones.
     Arrows and dots (.pc-*) are injected by security-carousel.js and styled by
     pricing-carousel.css. */
  #security .sB-top{
    display:flex;
    grid-template-columns:none;
    border-top:0;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:-4px;
    padding:2px 4px 4px;
  }
  #security .sB-top::-webkit-scrollbar{ display:none; }
  #security .sB-top>div{
    flex:0 0 100%;
    min-width:0;
    scroll-snap-align:center;
    padding:18px 0 8px !important;
    border-top:2px solid var(--ink);
  }
}