/* Page grid: one container and ruler. Components keep their own internal layout.
   Desktop: 12 tracks; tablet: 12 tracks with simpler spans; mobile: 4 tracks.
   All page-level geometry lives here; do not add page-specific offset fixes. */
:root {
  --layout-columns: 12;
  --layout-gutter: var(--website-layout-gutter);
  --layout-margin: var(--website-layout-margin);
  --layout-card-padding: var(--website-layout-card-padding);
  --intro-copy-width: calc((100% - var(--layout-gutter)) / 2);
}
.wrap, .bar {
  width: calc(100% - 2 * var(--layout-margin));
  max-width: var(--website-layout-content-max);
  margin-inline: auto;
}
.home-hero > .wrap, .co-hero, .insights-hero,
.g2, .founders, .news-grid, .studio-role-grid, .opportunity-anatomy,
.capability-grid, .coach-grid, .pricing-path, .fcols,
.heading-columns, .context-grid, .backing, .legal-layout, .legal-heading,
.value-workspace, .lifecycle-content, .lifecycle-top,
.product-page .section-heading, main .capability-demo,
main .cta-band, footer.site .fbase, .insights-teaser > .wrap, .demo-layout {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  gap: var(--layout-gutter);
}
.home-hero > .wrap > *, .co-hero > *, .insights-hero > *,
.g2 > *, .founders > *, .news-grid > *, .studio-role-grid > *,
.opportunity-anatomy > *, .capability-grid > *, .coach-grid > *,
.pricing-path > *, .fcols > *, .heading-columns > *, .context-grid > *,
.backing > *, .legal-layout > *, .legal-heading > *,
.value-workspace > *, .lifecycle-content > *, .lifecycle-top > *,
.product-page .section-heading > *, main .capability-demo > *,
main .cta-band > *, footer.site .fbase > * { min-width: 0; }
.g2 > *, .founders > *, .studio-role-grid > *, .opportunity-anatomy > *,
.context-grid > * { grid-column: span 6; }
.capability-grid > * { grid-column: span 3; }
.core-capabilities > *, .coach-grid > *,
.news-grid > *, .pricing-path > * { grid-column: span 4; }
.ua-coach-grid > * { grid-column: span 3; }
.research-capabilities > * { grid-column: span 6; }
.home-hero > .wrap > .eyebrow, .home-hero .hero-columns {
  grid-column: 1 / span 6;
  width: 100%;
}
.home-hero .console {
  /* Columns 7 and 12 stay empty around the four-column console. */
  grid-column: 8 / span 4;
  grid-row: 1 / span 2;
  width: 100%;
  justify-self: stretch;
}
.co-hero > :first-child, .insights-hero > :first-child,
.heading-columns > :first-child, .backing > :first-child { grid-column: span 7; }
.co-hero > :nth-child(2), .insights-hero > :nth-child(2),
.heading-columns > :nth-child(2), .backing > :nth-child(2) { grid-column: span 5; }
/* Explorer panel boundaries follow the page ruler; chart controls remain local. */
.value-chart-panel {
  grid-column: 1 / span 7;
  --value-chart-columns: 7;
  --value-choice-start: 6;
  --value-choice-span: 2;
}
.value-detail { grid-column: 8 / span 5; }
.insights-figure { margin: 0; width: 100%; justify-self: stretch; }
.insights-hero-photo { width: 100%; }
.insights-teaser .section-heading { grid-column: 1 / -1; min-width: 0; }
.co-mark { width: 100%; max-width: none; }
.co-mark img { max-width: 320px; }
.fcols > * { grid-column: span 2; }
.fcols > .footer-brand { grid-column: span 6; }
/* Founder interiors inherit the six page tracks occupied by each card. */
.founders > .founder {
  grid-template-columns: subgrid;
  column-gap: var(--layout-gutter);
  row-gap: var(--layout-gutter);
  border: 0;
  border-top: var(--border-hairline) solid var(--border);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.founder > picture {
  grid-column: 1 / span 2;
  width: 100%;
  max-width: none;
  padding: 0;
}
.founder > .founder-body {
  grid-column: 3 / span 4;
  min-width: 0;
  padding: var(--layout-card-padding) 0;
}
/* Keep the demo form visible beside its introduction on desktop. */
.demo-layout { align-items: start; }
.demo-layout > .demo-intro { grid-column: 1 / span 5; width: 100%; min-width: 0; }
.demo-layout > .demo-form { grid-column: 7 / span 6; width: 100%; min-width: 0; }
/* A centered six-column legal region, with identical title and body alignment. */
.legal-layout > .legal, .page-hero > .legal-heading > * {
  grid-column: 4 / span 6;
  width: 100%;
  max-width: none;
}
.legal-heading { row-gap: 0; }
/* Separate pricing cards retain shared rows for aligned copy and actions. */
.pricing-path { grid-template-rows: repeat(3, auto); row-gap: 0; }
.pricing-stage {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: var(--layout-card-padding);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
}
.pricing-stage > .btn { grid-row: 3; margin-top: var(--space-xl); align-self: end; justify-self: start; }
/* These are padded components, not independent page rulers. */
.card, .studio-role, .opportunity-anatomy li, .capability-card,
.coach-grid article, .coach-grid > li, .demo-form, .feature-card { padding: var(--layout-card-padding); }
.feature-card { gap: var(--layout-gutter); }
/* Product introductions and shared demo invitations use the page tracks.
   Closing bands use the full section background without an inset card. */
.product-page .section-heading { row-gap: 0; }
.product-page .section-heading > * { grid-column: 1 / -1; }
.product-page .section-heading > p:not(.eyebrow),
main .capability-demo > div,
main .cta-band > div {
  grid-column: 1 / span 6;
  width: 100%;
  max-width: none;
}
.product-page .section-heading > p:not(.eyebrow) { max-width: none; }
main .capability-demo p, main .cta-band p:not(.eyebrow) { max-width: none; }
main .closing { background: var(--surface); border-top: var(--border-hairline) solid var(--border); }
main .cta-band { padding: 0; border: 0; border-radius: 0; background: transparent; }
main .cta-band > .btn { grid-column: 1 / span 6; justify-self: start; }
/* Copyright uses the same grid as the footer brand and navigation groups. */
footer.site .fbase > * { grid-column: 1 / -1; }
footer.site .fcols > div { min-width: 0; }
footer.site .fcols a { overflow-wrap: anywhere; }
/* Lifecycle: three columns of navigation and nine columns of description.
   Outer outline and vertical-only padding preserve the shared page ruler. */
.lifecycle-content { padding-block: var(--layout-card-padding); }
.lifecycle-navigation, .lifecycle-top > .lifecycle-instruction { grid-column: 1 / span 3; }
.stage-description, .lifecycle-top > .stage-tabs { grid-column: 4 / span 9; }
.stage-description { padding: var(--layout-card-padding); }
.lifecycle-top { padding-block: var(--space-lg); }
.lifecycle-top > *, .lifecycle-navigation > .lifecycle-instruction { padding-inline: var(--layout-card-padding); }
.lifecycle-navigation .journey-steps button { padding-inline: var(--layout-card-padding); }
/* Section spacing tokens reflect the actual rendered rhythm. */
main > .section, main > section:not([class]), main > .closing {
  padding-block: var(--website-space-section);
}
main > .section.no-top { padding-top: 0; }
@media (max-width: 1100px) {
  :root { --intro-copy-width: 100%; }
  .demo-layout > .demo-intro, .demo-layout > .demo-form { grid-column: 1 / -1; }
  .founder > picture { grid-column: 1 / span 3; }
  .founder > .founder-body { grid-column: 1 / -1; padding-top: 0; }
  .product-page .section-heading > p:not(.eyebrow),
  main .capability-demo > div,
  main .cta-band > div, main .cta-band > .btn { grid-column: 1 / -1; }
  .home-hero > .wrap > .eyebrow, .home-hero .hero-columns,
  .home-hero .console, .co-hero > *, .insights-hero > *,
  .heading-columns > *, .context-grid > *, .backing > *,
  .legal-layout > .legal, .page-hero > .legal-heading > * { grid-column: 1 / -1; }
  :is(.co-hero, .insights-hero, .heading-columns, .backing) > :nth-child(n) { grid-column: 1 / -1; }
  .home-hero .console { grid-row: auto; }
  .value-workspace > * { grid-column: 1 / -1; }
  .lifecycle-content > *, .lifecycle-top > .lifecycle-instruction, .lifecycle-top > .stage-tabs { grid-column: 1 / -1; }
  .lifecycle-navigation .journey-steps {
    display: grid;
    grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
    gap: var(--layout-gutter);
  }
  .lifecycle-navigation .journey-steps > button { grid-column: span 4; min-width: 0; }
  .value-chart-panel { --value-chart-columns: 12; --value-choice-start: 9; --value-choice-span: 4; }
  .capability-grid > *, .coach-grid > *, .news-grid > * { grid-column: span 6; }
  .fcols > * { grid-column: span 4; }
  .fcols > .footer-brand { grid-column: 1 / -1; }
  .pricing-path { grid-template-rows: none; row-gap: var(--layout-gutter); }
  .pricing-path > * { grid-column: 1 / -1; }
  .pricing-stage { display: flex; grid-row: auto; flex-direction: column; }
  .feature-card { grid-template-columns: minmax(0, 1fr); }
  main > .section, main > section:not([class]), main > .closing {
    padding-block: var(--website-space-section-compact);
  }
  main > .section.no-top { padding-top: 0; }
}
@media (max-width: 600px) {
  :root {
    --layout-columns: 4;
    --layout-gutter: var(--website-layout-gutter-mobile);
    --layout-margin: var(--website-layout-margin-mobile);
    --layout-card-padding: var(--website-layout-card-padding-mobile);
  }
  .founder > picture { grid-column: 1 / span 2; }
  .value-chart-panel { --value-chart-columns: 4; --value-choice-start: 4; --value-choice-span: 1; }
  .lifecycle-navigation .journey-steps > button { grid-column: span 2; }
  .fcols > * { grid-column: span 2; }
  .btn { max-width: 100%; }
  .headline-ending, .big-underline { white-space: normal; }
  .g2 > *, .founders > *, .studio-role-grid > *, .opportunity-anatomy > *,
  .capability-grid > *, .coach-grid > *, .news-grid > *, .fcols > .footer-brand {
    grid-column: 1 / -1;
  }
}
@media print {
  main > .section, main > section:not([class]), main > .closing { padding-block: var(--space-xl); }
}