/* Website composition. Opt in with .sc-web + data-sc-application="marketing".
 * Sections own outer space, containers width, rows columns, blocks inner rhythm.
 * Exact values: tokens/tokens.json. Usage: docs/website-layout.md. */
.sc-web .sc-web-section {
  margin: 0;
  padding-block: var(--sc-layout-section);
}
.sc-web .sc-web-section--compact {
  padding-block: var(--sc-web-section-compact);
}
.sc-web .sc-web-container {
  --_web-content-width: var(--sc-layout-marketing-max);
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: calc(
    var(--_web-content-width) + 2 * var(--sc-layout-gutter)
  );
  padding-inline: var(--sc-layout-gutter);
  margin-inline: auto;
  display: grid;
  row-gap: var(--sc-web-row-gap);
  min-inline-size: 0;
}
.sc-web .sc-web-container--narrow {
  --_web-content-width: var(--sc-web-content-narrow);
}
.sc-web .sc-web-container--reading {
  --_web-content-width: var(--sc-web-content-reading);
}
/* Accidental nesting must never double the page gutter. Prefer a reading block. */
.sc-web .sc-web-container .sc-web-container {
  max-inline-size: min(100%, var(--_web-content-width));
  padding-inline: 0;
  margin-inline: auto;
}
.sc-web .sc-web-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-web-row-gap);
  align-items: start;
  min-inline-size: 0;
}
.sc-web .sc-web-row--split {
  gap: var(--sc-web-split-gap);
}
.sc-web .sc-web-row--two,
.sc-web .sc-web-row--three {
  gap: var(--sc-web-peer-gap);
}
.sc-web .sc-web-block {
  display: flex;
  flex-direction: column;
  gap: var(--sc-web-block-gap);
  min-inline-size: 0;
}
.sc-web .sc-web-block--prose {
  gap: var(--sc-web-prose-gap);
}
.sc-web .sc-web-block--inset {
  padding: var(--sc-web-inset);
}
.sc-web .sc-web-block--reading {
  inline-size: 100%;
  max-inline-size: var(--sc-web-content-reading);
}
/* The owning layout controls spacing. Native p + p, figure and list margins
 * must not accumulate with gap. List indentation and nested component styles stay. */
.sc-web .sc-web-container > *,
.sc-web .sc-web-row > *,
.sc-web .sc-web-block > * {
  margin: 0;
  min-inline-size: 0;
}
.sc-web .sc-web-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-web-action-gap);
}
.sc-web .sc-web-actions > * {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
@media (min-width: 48rem) {
  .sc-web .sc-web-row--two,
  .sc-web .sc-web-row--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .sc-web .sc-web-row--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sc-web .sc-web-row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}