/**
 * Bootstrap-4 compatibility layer.
 *
 * The long-form content pages (help, support, developers, blog, terms, privacy)
 * carry hundreds of Bootstrap and template class names in their markup. Mapping
 * those onto the design tokens brings them onto the new look without rewriting
 * every paragraph, which is where content would get lost.
 *
 * Load AFTER short.css. New pages should not use these classes.
 */

/* ---- layout ---- */
.container, .container-fluid { max-width: 1060px; margin: 0 auto; padding: 0 24px; width: 100%; }
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; align-items: stretch; }
[class^="col-"], [class*=" col-"] { padding: 0 12px; flex: 1 1 0; min-width: 0; }
.col-12 { flex: 0 0 100%;      max-width: 100%; }
.col-md-3, .col-lg-3 { flex: 0 0 25%;   max-width: 25%; }
.col-md-4, .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-6, .col-lg-6 { flex: 0 0 50%;   max-width: 50%; }
.col-md-8, .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-md-9, .col-lg-9 { flex: 0 0 75%;   max-width: 75%; }

.slice     { padding: 64px 0; }
.slice-lg  { padding: 88px 0; }
.h-100     { height: 100%; }
.w-100     { width: 100%; }
.d-flex    { display: flex; }
.d-block   { display: block; }
.d-none    { display: none; }
.flex-column { flex-direction: column; }
.align-items-center     { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between{ justify-content: space-between; }
.mx-auto   { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ---- spacing (Bootstrap's 0-6 scale, on our rhythm) ---- */
.m-0{margin:0}     .p-0{padding:0}
.mb-0{margin-bottom:0}      .mb-1{margin-bottom:6px}   .mb-2{margin-bottom:12px}
.mb-3{margin-bottom:18px}   .mb-4{margin-bottom:26px}  .mb-5{margin-bottom:40px}
.mb-6{margin-bottom:60px}
.mt-0{margin-top:0}         .mt-1{margin-top:6px}      .mt-2{margin-top:12px}
.mt-3{margin-top:18px}      .mt-4{margin-top:26px}     .mt-5{margin-top:40px}
.mt-6{margin-top:60px}
.mr-1{margin-right:6px}     .mr-2{margin-right:12px}   .mr-3{margin-right:18px}
.ml-2{margin-left:12px}     .ml-3{margin-left:18px}
.pt-4{padding-top:26px}     .pt-5{padding-top:40px}    .pt-6{padding-top:60px}
.pt-8{padding-top:88px}     .pb-4{padding-bottom:26px} .pb-5{padding-bottom:40px}
.p-3{padding:18px}          .p-4{padding:26px}         .p-5{padding:40px}
.py-3{padding-top:18px;padding-bottom:18px}
.py-2{padding-top:12px;padding-bottom:12px}
.px-3{padding-left:18px;padding-right:18px}

/* ---- type ---- */
.h1,.h2,.h3,.h4,.h5,.h6 { display: block; font-weight: 600; letter-spacing: -.022em; margin: 0; }
.h1{font-size:40px} .h2{font-size:32px} .h3{font-size:25px}
.h4{font-size:20px} .h5{font-size:17px} .h6{font-size:15px}
.display-1,.display-2,.display-3,.display-4 {
  font-weight: 600; letter-spacing: -.03em; line-height: 1.07;
}
.display-3 { font-size: clamp(32px, 5vw, 52px); }
.display-4 { font-size: clamp(28px, 4vw, 42px); }
.lead { font-size: clamp(16px,1.6vw,19px); color: var(--fg-muted); line-height: 1.5; }
.text-muted, .text-light { color: var(--fg-muted) !important; }
.text-sm { font-size: 13px; }
.font-weight-bold, .font-weight-bolder { font-weight: 600; }
.opacity-8 { opacity: .82; }
.lh-180 { line-height: 1.7; }

/* ---- surfaces ---- */
.card {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-md); overflow: hidden;
}
.card-body   { padding: 22px 24px; }
.card-header { padding: 16px 24px; border-bottom: 1px solid var(--line-soft); font-weight: 600; }
.card-footer { padding: 16px 24px; border-top: 1px solid var(--line-soft); }

/* The template leaned on heavy drop shadows; hairline borders replace them. */
.shadow, .shadow-sm, .shadow-lg { box-shadow: none; border: 1px solid var(--line-soft); }
.rounded    { border-radius: var(--r-sm); }
.rounded-lg { border-radius: var(--r-md); }

/* ---- dark / tinted sections become the light alternate ground ---- */
.bg-dark, .bg-section-dark, .bg-gradient-primary, .bg-primary {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  background-image: none !important;
}
.bg-section-secondary { background: var(--bg-alt) !important; }
.bg-white { background: #fff !important; }
.bg-dark .text-white, .bg-section-dark .text-white,
.bg-primary .text-white, .bg-gradient-primary .text-white,
.text-white { color: var(--fg) !important; }
.bg-dark .lead, .bg-section-dark .lead { color: var(--fg-muted) !important; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 22px; border: 1px solid transparent;
  border-radius: var(--r-pill); background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.btn-primary, .btn-success, .btn-info { background: var(--accent); color: #fff; }
.btn-white, .btn-light, .btn-secondary { background: var(--bg-alt); color: var(--fg); }
.btn-white:hover, .btn-light:hover, .btn-secondary:hover { background: #ececf0; color: var(--fg); }
.btn-outline-primary, .btn-outline-white, .btn-outline-dark {
  background: transparent; color: var(--accent); border-color: var(--line);
}
.btn-outline-primary:hover, .btn-outline-white:hover, .btn-outline-dark:hover {
  background: var(--bg-alt); color: var(--accent);
}
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm  { height: 32px; padding: 0 15px; font-size: 13px; }
.btn-lg  { height: 50px; padding: 0 30px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn-link { background: transparent; color: var(--accent); border: 0; padding: 0; height: auto; }

/* ---- badges ---- */
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500;
  background: var(--bg-alt); color: var(--fg-muted);
}
.badge-primary, .badge-info { background: var(--accent-soft); color: var(--accent-ink); }
.badge-success { background: var(--ok-soft);   color: var(--ok); }
.badge-warning { background: var(--warn-soft); color: var(--warn); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }

/* ---- alerts ---- */
.alert { padding: 14px 16px; border-radius: var(--r-sm); border: 0; font-size: 14px; }
.alert-warning { background: var(--warn-soft);   color: var(--warn); }
.alert-danger  { background: var(--danger-soft); color: var(--danger); }
.alert-success { background: var(--ok-soft);     color: var(--ok); }
.alert-info    { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- code blocks (developers / api docs) ---- */
pre, code { font-family: var(--mono); }
pre {
  background: var(--bg-alt); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 16px 18px;
  font-size: 12.5px; line-height: 1.6; overflow-x: auto;
}
code  { font-size: .9em; }
:not(pre) > code {
  background: var(--bg-alt); padding: 2px 6px; border-radius: 5px; color: var(--fg);
}
pre code { background: none; padding: 0; }

/* ---- misc template leftovers ---- */
.divider { border: 0; border-top: 1px solid var(--line-soft); }
.icon-shape { display: inline-flex; align-items: center; justify-content: center;
              width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--bg-alt); }
.list-unstyled { list-style: none; padding: 0; margin: 0; }
table.table th, table.table td { padding: 12px; border-top: 1px solid var(--line-soft); font-size: 14px; }

@media (max-width: 900px) {
  .col-md-3,.col-md-4,.col-md-6,.col-md-8,.col-md-9,
  .col-lg-3,.col-lg-4,.col-lg-6,.col-lg-8,.col-lg-9 { flex: 0 0 50%; max-width: 50%; }
  .slice, .slice-lg { padding: 52px 0; }
}
@media (max-width: 640px) {
  .col-md-3,.col-md-4,.col-md-6,.col-md-8,.col-md-9,
  .col-lg-3,.col-lg-4,.col-lg-6,.col-lg-8,.col-lg-9 { flex: 0 0 100%; max-width: 100%; }
  .p-5 { padding: 24px; }
}