/* Site layout: four viewports, three widths, one section pattern.
   Rurik, 2026-10-10: move away from "text in one half, graphic in the other"
   towards the stacked sections of stripe.com / linear.app / lightfield.app.

   Viewports   Mobile < 600 · Tablet 600–1023 · Desktop 1024–1439 · Wide >= 1440
               (type.css steps at the first three; Wide only changes layout.)
   Widths      Text     headings and ledes: full / 640 / 720 / 760
               Content  diagrams, grids, charts: full / full / 1280 / 1440
               Bleed    imagery: edge to edge (inside the side margins)
   Margins     16 / 32 / 48 / 64

   Section pattern: a heading block on top, left-aligned (eyebrow, heading,
   lede); on desktop the lede sits to the right of the heading. The visual
   goes below at content width. Forms are the exception: on Request a demo and
   /lp/charity the form stays beside the copy so it is above the fold.

   Load this LAST on every page: it is the layout authority, so its container
   rules override the per-page paddings and max-widths they replace. */

:root {
  --l-gutter: 16px;
  --l-text: 100%;
  --l-content: 100%;
  --l-head-aside: 100%;     /* lede column of a split section header */
  --l-section-gap: 48px;    /* heading block to its visual */
}

@media (min-width: 600px) {
  :root { --l-gutter: 32px; --l-text: 640px; }
}

@media (min-width: 1024px) {
  :root { --l-gutter: 48px; --l-text: 720px; --l-content: 1280px; --l-head-aside: 400px; --l-section-gap: 64px; }
}

/* Wide */
@media (min-width: 1440px) {
  :root { --l-gutter: 64px; --l-text: 760px; --l-content: 1440px; --l-head-aside: 440px; }
}

/* ---------- Containers ---------- */
/* Every section's inner wrapper becomes the content container. :is() gives
   each selector the specificity of the strongest (two classes), so these win
   over the page files' own max-widths and paddings at every breakpoint. */

:is(
  .site-header .header-inner,
  .proof-section .proof-inner,
  .rg-section .rg-inner,
  .mcp-section .mcp-inner,
  .connect-embed .hero-inner,
  .industries-section .industries-inner,
  .stops-section .stops-inner,
  .demo-section .demo-inner,
  .sf-footer .sf-inner,
  #connect.hero-section .hero-inner,
  .bucks-section .bucks-inner,
  .site-footer .footer-top,
  .site-footer .footer-bottom-inner,
  .dm-hero .dm-hero-inner,
  .dm-features .dm-features-inner,
  .dm-features .dm-logos,
  .dm-stories .dm-stories-inner,
  .lp-charity .wrap,
  .l-container.l-container
) {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--l-content) + 2 * var(--l-gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--l-gutter);
  padding-right: var(--l-gutter);
}

/* Sections that pad themselves instead of an inner wrapper. */
:is(.problem-section.problem-section, .compare-section.compare-section--sandbox) {
  box-sizing: border-box;
  max-width: calc(var(--l-content) + 2 * var(--l-gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--l-gutter);
  padding-right: var(--l-gutter);
}

/* ---------- New pages: section + container ---------- */
/* For pages built on src/layouts/Layout.astro. A section is
   <section class="l-section"><div class="l-container">…</div></section>:
   the homepage's section rhythm (as on Industries: 64 / 80 / 128px above and
   below) and its content container (above). A .section-intro inside gets the
   standard gap to the visual below it. */

.l-section { padding-top: 64px; padding-bottom: 64px; }

@media (min-width: 600px) {
  .l-section { padding-top: 80px; padding-bottom: 80px; }
}

@media (min-width: 1024px) {
  .l-section { padding-top: 128px; padding-bottom: 128px; }
}

.l-section .section-intro { margin-bottom: var(--l-section-gap); }

/* ---------- Section header: heading block on top ---------- */
/* .section-intro holds eyebrow, heading and lede. Stacked and capped at the
   text width below 1024px; from desktop the lede moves to the right of the
   heading and the block spans the content width. */

.section-intro.section-intro {
  max-width: var(--l-text);
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* Balanced lines: the split header's heading column is narrower, so no word
   is left alone on the last line ("…govern / AI"). */
.section-intro.section-intro > :is(.section-heading, .mcp-heading) { text-align: left; text-wrap: balance; }
.section-intro.section-intro > :is(.section-body, .proof-lede, .mcp-desc) { margin: 0; max-width: none; text-align: left; }

/* Split from 1280: between 1024 and 1279 the heading column would be only
   ~460px beside the lede (an industries heading ran to five lines), so the
   intro stays stacked there. */
@media (min-width: 1280px) {
  .section-intro.section-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--l-head-aside));
    column-gap: 64px;
    row-gap: 20px;
    align-items: end;
    max-width: none;
  }

  .section-intro.section-intro > * { grid-column: 1; }

  /* No lede (e.g. the review gap intro): don't reserve its column. */
  .section-intro.section-intro:not(:has(> :is(.section-body, .proof-lede, .mcp-desc))) {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-intro.section-intro > :is(.section-body, .proof-lede, .mcp-desc) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
  }
}

/* ---------- Homepage: proof ---------- */

/* proof-inner centres its children; the intro spans the column instead. */
.proof-section .proof-intro { align-self: stretch; width: 100%; margin-bottom: var(--l-section-gap); }

/* ---------- Homepage: MCP video at content width ---------- */

/* The glow behind the now wider video reaches past the screen edge: clip it. */
.mcp-section { overflow-x: clip; }
.mcp-section .mcp-inner { display: block; }
.mcp-section .mcp-copy { display: block; max-width: none; text-align: left; }
.mcp-section .mcp-copy .section-intro { margin-bottom: var(--l-section-gap); }
.mcp-section .mcp-figure,
.mcp-section .video-embed { max-width: none; margin-left: 0; margin-right: 0; }

/* ---------- Connect hero (Connect page and the homepage copy, both #connect) ---------- */
/* From desktop: heading | lede on top, then checks | tool picker and form as
   one wide row. The decorative tool-icons image would repeat the picker, so
   it is dropped there; phones and tablets keep their stacked layout. */

@media (min-width: 1024px) {
  #connect .hero-inner { display: block; }

  #connect .hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--l-head-aside));
    grid-template-areas:
      "eyebrow eyebrow"
      "title   title"
      "desc    desc"
      "checks  tool"
      "checks  form";
    column-gap: 64px;
    row-gap: 20px;
    align-items: end;
    max-width: none;
    width: 100%;
  }

  #connect .hero-copy > .eyebrow { grid-area: eyebrow; }
  #connect .hero-copy > .hero-title { grid-area: title; max-width: none; }
  #connect .hero-copy > .hero-desc { grid-area: desc; max-width: none; }
  #connect .hero-copy > .hero-checks { grid-area: checks; align-self: start; margin-top: 28px; }
  #connect .hero-copy > .tool-select { grid-area: tool; align-self: start; margin-top: 28px; }
  #connect .hero-copy > .connect-form-row { grid-area: form; align-self: start; }
  #connect .hero-image { display: none; }
  #connect .hero-copy > .hero-desc { max-width: var(--l-text); }
}

/* Heading | lede from 1280, as .section-intro. */
@media (min-width: 1280px) {
  #connect .hero-copy {
    grid-template-areas:
      "eyebrow eyebrow"
      "title   desc"
      "checks  tool"
      "checks  form";
  }

  #connect .hero-copy > .hero-desc { max-width: none; }
}

/* ---------- /lp/charity: agenda and steps at full width ---------- */

.lp-charity .agenda-grid,
.lp-charity .how-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--l-section-gap);
}

.lp-charity .cover .host,
.lp-charity .offer .gift { max-width: var(--l-text); }

/* Heading | lede from 1280, like .section-intro. */
@media (min-width: 1280px) {
  .lp-charity .how .sec-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--l-head-aside));
    column-gap: 64px;
    row-gap: 20px;
    align-items: end;
  }

  .lp-charity .how .sec-head > * { grid-column: 1; }
  .lp-charity .how .sec-head > .h2d { text-wrap: balance; }
  .lp-charity .how .sec-head > .body-l { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

@media (min-width: 1024px) {
  /* Three steps side by side instead of a stacked list. */
  .lp-charity .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }

  .lp-charity .steps li,
  .lp-charity .steps li:last-child {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 12px;
    border-bottom: 0;
  }
}

/* ---------- Leaks from the narrower side margins ---------- */
/* Both decorations were sized for the old 80px margins. */

/* The industries frame's dot-grid backdrop reaches 80px past the frame. */
.industries-section { overflow-x: clip; }

/* The story carousel's arrows sit in a 60px band outside the content edge;
   keep that band inside the side margin. */
.dm-stories .dm-carousel {
  margin-left: calc(-1 * min(60px, var(--l-gutter)));
  margin-right: calc(-1 * min(60px, var(--l-gutter)));
  padding-left: min(60px, var(--l-gutter));
  padding-right: min(60px, var(--l-gutter));
}