/* Shared guides for the landing page and marketing content pages.
   The grid starts after the hero; subsequent sections share this frame.
   Heights always come from content.
   Keep section margins at zero: use padding for space between sections.
   New top-level sections participate automatically. For a nested section use
   .wk-grid-section. Its ::before is reserved for the non-interactive guides.
   Layers: section surface -> guides -> content/artwork -> navigation/dialogs.
   Give opaque artwork its own surface to interrupt a guide; transparent pixels
   intentionally reveal it. Never put a page-sized overlay above the content. */
/* Clip decorative overflow at the viewport without creating a scroll container;
   overflow:hidden here would interfere with the sticky hero/header. */
html { overflow-x: clip; }

body.home {
  --wk-grid-max: 1200px;
  --wk-grid-gutter: clamp(24px, 6vw, 80px);
  --wk-grid-inset: max(var(--wk-grid-gutter), calc((100% - var(--wk-grid-max)) / 2));
  --wk-grid-color: #e5e5e5;
}

body.home :is(main > section, body > section, .wk-grid-section, .foot-word) {
  position: relative;
  isolation: isolate;
}

body.home :is(main > section, body > section, .wk-grid-section, .foot-word)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: var(--wk-grid-inset);
  border-inline: 1px solid var(--wk-grid-color);
  z-index: -1;
  pointer-events: none;
}

/* Narrow editorial wrappers draw their guides against the full page. */
body.home main:is(.careers, .policy-page, .wk-a-page, .wk-mcp) { position: relative; isolation: isolate; }
body.home main:is(.careers, .policy-page, .wk-a-page, .wk-mcp)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(calc(100vw - 2 * var(--wk-grid-gutter)), var(--wk-grid-max));
  box-sizing: border-box;
  transform: translateX(-50%);
  border-inline: 1px solid var(--wk-grid-color);
  z-index: -1;
  pointer-events: none;
}
body.home main:is(.careers, .policy-page, .wk-mcp) > section::before { content: none; }

/* All editorial content sits inside the same guides as Pricing. */
body.home.wk-content-page :is(.content-hero, .content-grid, .resource-grid) {
  padding-inline: calc(var(--wk-grid-inset) + clamp(12px, 2vw, 32px));
}
body.home.wk-content-page .careers-wrap {
  width: min(calc(100% - 2 * (var(--wk-grid-inset) + clamp(12px, 2vw, 32px))), 1104px);
}
body.home.wk-content-page .audience-page {
  padding-inline: calc(var(--wk-grid-inset) + clamp(12px, 2vw, 32px));
}
body.home.wk-content-page .wk-a-editorial {
  width: min(calc(100% - 2 * (var(--wk-grid-inset) + clamp(12px, 2vw, 32px))), 1104px);
  padding-inline: 0;
}
body.home.wk-content-page .policy-page {
  width: min(calc(100% - 2 * (var(--wk-grid-inset) + 12px)), 720px);
}

/* The hero and its flowing ribbon are free of grid lines. The first rule and
   pair of guides belong to the following platform section. */
body.home .wk-architecture-hero::before { content: none; }

/* One rule per boundary avoids doubled lines. Borders occupy real layout space. */
body.home :is(body > section, .wk-grid-section) {
  border-top: 1px solid var(--wk-grid-color);
}

/* The engine artwork reads as one uninterrupted field into the mission card. */
body.home :is(.wk-fabric, .wk-mission) { border-top: 0; }

/* The old use-case column had its own narrower pair of borders. */
body.home .uses-col { border-inline: 0; }

/* Keep ordinary content inside the shared frame with a comfortable inner gutter. */
body.home :is(.wk-platform, .wk-global, .wk-fabric, .wk-mission, .uses, .site-foot) {
  padding-inline: calc(var(--wk-grid-inset) + clamp(12px, 2vw, 32px));
}

/* The oversized wordmark also stays within the narrower guide frame. */
body.home .foot-word svg { max-width: var(--wk-grid-max); }

@media (max-width: 900px) {
  body.home .foot-word { padding-inline: var(--wk-grid-inset); }
}

/* Guides continue through the white wordmark area and stop at the black footer.
   The black footer has no guides or copyright divider. */
body.home .foot-base { border-top: 0; padding-top: 0; }

@media (max-width: 380px) {
  body.home .wk-audiences { white-space: normal; }
}

/* The announcement is an intentionally opaque band, like the product display. */
@media (forced-colors: active) {
  body.home { --wk-grid-color: transparent; }
}