/* One content grid for prototype sections, shared heroes, and site chrome. */
body:has(#prototype-main) {
  --landing-content-width: 1380px;
  --landing-wide-width: var(--landing-content-width);
  --landing-gutter: 40px;
  --landing-grid-columns: repeat(12, minmax(0, 1fr));
  --landing-column-gap: 24px;
}

.prototype-figma-home .prototype-home-hero,
.prototype-figma-home .figma-value,
.product-figma-lockup,
.figma-product .figma-product-layout,
.figma-four-grid,
.figma-security,
.site-footer-grid {
  grid-template-columns: var(--landing-grid-columns);
  column-gap: var(--landing-column-gap);
}
.prototype-figma-home .prototype-home-hero > h1,
.prototype-figma-home .figma-value > p,
.product-figma-lockup > h1 {
  grid-column: 1 / span 7;
  max-width: none;
}
.prototype-figma-home .prototype-home-hero > .web-type-lead,
.prototype-figma-home .prototype-home-hero > .prototype-hero-cta,
.prototype-figma-home .figma-value > ul,
.product-figma-lockup > p,
.product-figma-lockup > .prototype-hero-copy {
  grid-column: 8 / -1;
  max-width: none;
}
.prototype-figma-home .figma-value { margin-top: 48px; row-gap: 80px; }
.prototype-figma-home .figma-value > p { padding-right: 0; }
@media (max-width: 599px) {
  .prototype-figma-home .figma-value { margin-top: 48px; row-gap: 64px; }
}
@media (min-width: 1024px) {
  .prototype-figma-home .figma-value > p {
    grid-column: 1 / span 7;
    width: calc(100% - 48px);
    max-width: none;
    text-wrap: pretty;
    font-size: var(--regel-heading-lg-size);
    line-height: var(--regel-heading-lg-line);
    letter-spacing: var(--regel-heading-lg-tracking);
    font-weight: var(--regel-type-label-weight);
  }
}
.figma-product-layout > .figma-feature-list { grid-column: 1 / span 4; }
.figma-product-layout > .figma-feature-image { grid-column: 5 / -1; }
.figma-product > .figma-centered {
  display: grid;
  grid-template-columns: var(--landing-grid-columns);
  column-gap: var(--landing-column-gap);
  margin-left: 0;
}
.figma-product > .figma-centered > .regel-button {
  grid-column: 5 / -1;
  justify-self: end;
}
.figma-four-grid > article { grid-column: span 3; }
.figma-security h2,
.figma-security > div,
.figma-security .regel-button { grid-column: 1 / span 6; }
.figma-security > ul { grid-column: 7 / -1; }
.figma-news-heading {
  display: grid;
  grid-template-columns: var(--landing-grid-columns);
  column-gap: var(--landing-column-gap);
}
.figma-news-heading > .figma-section-heading { grid-column: 1 / span 9; }
.figma-news-heading > .regel-button {
  grid-column: 10 / -1;
  justify-self: end;
  align-self: end;
}
.prototype-figma-home .figma-final {
  display: grid;
  grid-template-columns: var(--landing-grid-columns);
  column-gap: var(--landing-column-gap);
  justify-items: center;
}
.prototype-figma-home .figma-final > * { grid-column: 1 / -1; }
body:has(#prototype-main) .prototype-site-footer {
  padding-inline: max(var(--landing-gutter), calc((100% - var(--landing-content-width)) / 2));
}
.site-footer-grid { max-width: var(--landing-content-width); }

/* Full-width surfaces retain their bleed, with content on the same columns. */
body:has(#prototype-main) .prototype-scroll-header > .regel-top-navigation {
  padding-inline: var(--landing-gutter);
}
@media (min-width: 1024px) {
  :root .prototype-scroll-header > .regel-top-navigation {
    grid-template-columns: var(--landing-grid-columns);
    column-gap: var(--landing-column-gap);
  }
  .prototype-scroll-header .prototype-header-brand { grid-column: 1 / span 3; }
  .prototype-scroll-header .prototype-header-menu {
    grid-column: 7 / -1;
    justify-self: end;
    width: 100%;
    min-width: max-content;
  }
}
@media (max-width: 1100px) {
  .site-footer-grid nav,
  .site-footer-grid .site-footer-utility { grid-column: span 4; }
}
@media (max-width: 1023px) {
  body:has(#prototype-main) {
    --landing-gutter: 24px;
    --landing-column-gap: 16px;
  }
  .prototype-figma-home .prototype-home-hero > h1,
  .prototype-figma-home .prototype-home-hero > .web-type-lead,
  .prototype-figma-home .prototype-home-hero > .prototype-hero-cta,
  .prototype-figma-home .figma-value > p,
  .prototype-figma-home .figma-value > ul,
  .product-figma-lockup > h1,
  .product-figma-lockup > p,
  .product-figma-lockup > .prototype-hero-copy { grid-column: 1 / -1; }
  .product-figma-lockup > .prototype-hero-copy { padding-top: 0; }
}
@media (max-width: 800px) {
  .figma-product-layout > .figma-feature-list,
  .figma-product > .figma-centered > .regel-button,
  .figma-security > div,
  .figma-security > ul { grid-column: 1 / -1; }
  .figma-four-grid > article { grid-column: span 6; }
}
@media (max-width: 480px) {
  body:has(#prototype-main) {
    --landing-gutter: 20px;
    --landing-column-gap: 8px;
  }
  .figma-four-grid > article,
  .figma-news-heading > .figma-section-heading,
  .figma-news-heading > .regel-button { grid-column: 1 / -1; }
  .figma-news-heading > .regel-button { justify-self: start; }
  .site-footer-grid nav { grid-column: span 6; }
  .site-footer-grid .site-footer-utility { grid-column: 1 / -1; }
}