/* ============================================================
   sc-grid.css - grid + utilities for pages on the clean foundation
   Hand-cut replacement for bootstrap@5.3.3 (34 KiB over the wire,
   1,505 ms of render-blocking time on mobile). Only the classes the
   shared header / footer and the modern static pages actually use.
   Shared by: the home page (inlined via scripts/build_home_css.py)
   and bootstrap-free pages such as /pricing2, which link it directly.
   ============================================================ */

.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--sc-space-3);
}
@media (max-width: 1399px) { .container { max-width: 1140px; } }
@media (max-width: 1199px) { .container { max-width: 960px; } }
@media (max-width: 991px)  { .container { max-width: 720px; } }
@media (max-width: 767px)  { .container { max-width: 540px; } }
@media (max-width: 575px)  { .container { max-width: none; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--sc-space-3));
}
.row > * {
  width: 100%;
  padding-inline: var(--sc-space-3);
}

/* Gutter utility (.g-4 == 1.5rem, matching Bootstrap) */
.row.g-4 { row-gap: var(--sc-space-5); }

.col    { flex: 1 0 0%; width: auto; }
.col-12 { width: 100%; }
.col-6  { width: 50%; }
.col-2  { width: 16.6666666667%; }

@media (min-width: 576px) { .col-sm-12 { width: 100%; } }
@media (min-width: 768px) { .col-md-6  { width: 50%; } }
@media (min-width: 992px) {
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.3333333333%; }
  .col-lg-10 { width: 83.3333333333%; }
}

.justify-content-center { justify-content: center; }
.text-center { text-align: center; }

.order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; }
@media (min-width: 768px) {
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
}

.mt-3 { margin-top: 1rem; }
.mt-5 { margin-top: 3rem; }
.mb-3 { margin-bottom: 1rem; }
.w-100 { width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
.list-unstyled { padding-left: 0; list-style: none; }
.rounded { border-radius: var(--sc-radius-lg); }

/* Bootstrap button base — the homepage styles the variants itself. */
.btn {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--sc-radius);
  font-family: var(--sc-font);
  font-size: var(--sc-body);
  font-weight: var(--sc-weight-semi);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: color var(--sc-transition), background-color var(--sc-transition),
              border-color var(--sc-transition);
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: 6px 16px; font-size: var(--sc-small); }
.btn-dark {
  color: var(--sc-on-brand);
  background: var(--sc-navy);
  border-color: var(--sc-navy);
}
.btn-dark:hover {
  color: var(--sc-on-brand);
  background: var(--sc-light-blue);
  border-color: var(--sc-light-blue);
}

/* Pages on the clean foundation have no other reset; without this the UA
   8px body margin insets the whole page on phones. The home page already
   zeroes it in its own base sheet, so this is a no-op there. */
body { margin: 0; }