.sf-container {
  width: min(100% - var(--container-pad-mobile) * 2, var(--container-max));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .sf-container {
    width: min(100% - var(--container-pad-tablet) * 2, var(--container-max));
  }
}

@media (min-width: 1024px) {
  .sf-container {
    width: min(100% - var(--container-pad-desktop) * 2, var(--container-max));
  }
}

.sf-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.sf-section {
  padding-block: var(--section-padding);
}

.sf-section--soft {
  background: var(--color-primary-soft);
}

.sf-text-muted {
  color: var(--color-text-muted);
}

.sf-text-center { text-align: center; }
.sf-text-right { text-align: right; }

.sf-stack > * + * { margin-top: 1rem; }
.sf-stack-lg > * + * { margin-top: 1.5rem; }

.sf-divider {
  height: 1px;
  background: var(--color-border);
  width: 100%;
  margin: 1.5rem 0;
}

.sf-eyebrow,
.sf-kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--caption);
  color: var(--color-text-muted);
}

.sf-focus:focus-visible {
  outline: var(--focus-ring-size) solid var(--focus-ring);
  outline-offset: 2px;
}

.sf-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: 24px;
}

.sf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: var(--body-s);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform var(--sf-transition), box-shadow var(--sf-transition), background var(--sf-transition), color var(--sf-transition);
}

.sf-button--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.sf-button--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.sf-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

.sf-glass--dark {
  background: rgba(17, 24, 39, 0.6);
}

.sf-col-span-1 { grid-column: span 1; }
.sf-col-span-2 { grid-column: span 2; }
.sf-col-span-3 { grid-column: span 3; }
.sf-col-span-4 { grid-column: span 4; }
.sf-col-span-5 { grid-column: span 5; }
.sf-col-span-6 { grid-column: span 6; }
.sf-col-span-7 { grid-column: span 7; }
.sf-col-span-8 { grid-column: span 8; }
.sf-col-span-9 { grid-column: span 9; }
.sf-col-span-10 { grid-column: span 10; }
.sf-col-span-11 { grid-column: span 11; }
.sf-col-span-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .sf-grid-12 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sf-grid-12 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}