/* ============================================================================
 * site/styles/sections.css — section layer
 * Cascade position 4 of 5 (tokens → base → components → sections → responsive).
 *
 * PUBLISH ROOT: `site/` is the only publishable directory in this repository.
 * Nothing here may reference the private research directories, the
 * repository-root legacy page, the older landing seeds, or the raw design
 * deliveries. All paths inside `site/` are relative.
 *
 * ---------------------------------------------------------------------------
 * CASCADE CONTRACT
 * ---------------------------------------------------------------------------
 * The full five-file order is stated once, in `components.css`. This layer
 * loads after `components.css` and before `responsive.css`: it may place and
 * compose components, and `responsive.css` may override it per width.
 *
 * ---------------------------------------------------------------------------
 * LAYER RULES
 * ---------------------------------------------------------------------------
 * - This layer addresses the ten ordered section markers. Each marker
 *   carries `data-section-id="<name>"` and a document-unique `id` with the
 *   identical value, exactly once, in the contracted order.
 * - Style sections through their own class or `[data-section-id]`; never
 *   restyle a component's internals from here.
 * - Every grid track is `minmax(0, 1fr)`, never a bare `1fr`. A bare track
 *   refuses to shrink below its content's min-content width, which is how one
 *   long unbreakable string inside a fixture becomes a page-wide scrollbar.
 * - Section padding comes from the `--page-section-y` alias, so every section
 *   steps down together and none loses its rhythm in a withheld state.
 * - No marker may be removed, `display: none`'d, or conditionally omitted at
 *   any viewport width or in any state.
 * - DOM order equals visual order. Exactly two visual reorders are permitted in
 *   the whole system, both at ≤1023px and both moving a whole self-contained
 *   block; no other `order`, `row-reverse`, or negative grid placement.
 * - Reference token roles through `var()`. Never restate a literal that has a
 *   token role in `tokens.css`.
 *
 * ---------------------------------------------------------------------------
 * OWNERSHIP
 * ---------------------------------------------------------------------------
 * Task 02 established this layer empty and created the markers it addresses.
 * Task 04 composes `site-header` … `intelligence`.
 * Task 05 composes `backlinks` … `closing` — below.
 * Task 06 applies the final layout fixes.
 *
 * ---------------------------------------------------------------------------
 * PAGE RHYTHM ACROSS THE SECOND HALF
 * ---------------------------------------------------------------------------
 * Ten sections is long enough that surface alone has to carry the
 * structure, because dividers would not. `DESIGN.md` §2 states the sequence and
 * this layer implements it: after the `engagement` ink band and the light
 * `intelligence` quad, `backlinks` is the page's one CREAM mega-panel,
 * `listening` returns to light, then a synthetic proof bento, a native FAQ, and
 * `closing` is the second INK band followed by the bone footer.
 *
 * That gives three acts — light → ink → light → cream → light → ink — without a
 * single rule between sections. It is also why `listening` may safely reuse the
 * `intelligence` quad shell: the cream panel sits between them, so the two
 * quads never read as one repeated block.
 * ========================================================================= */

/* ==========================================================================
 * 1 · site-header
 *
 * The whole marker is the sticky element. A sticky descendant only sticks
 * while its own containing block is still on screen, so making the pill alone
 * sticky would release it the moment the header scrolled past. Sticky
 * positioning is layout rather than motion, so reduced-motion visitors keep
 * the navigation.
 * ======================================================================== */

#site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  padding-inline: var(--page-gutter);
  background-color: var(--surface-bone);
}

/* The strip is full-bleed while the pill sits in the content column, so the
 * strip cancels the header's page gutter rather than the pill adding one. */
#site-header .announce {
  margin-inline: calc(var(--page-gutter) * -1);
}

/* ==========================================================================
 * 2 · hero
 * ======================================================================== */

.hero {
  position: relative;
  padding-block: var(--space-9) var(--page-section-y);
}

.hero__head {
  display: grid;
  justify-items: center;
  gap: var(--rhythm-section-head-to-content);
  margin-block-end: var(--space-10);
  text-align: center;
}

.hero__title {
  max-inline-size: var(--container-content);
}

.hero__stand {
  max-inline-size: var(--container-text);
  color: var(--text-secondary);
  font-size: var(--text-sub-size);
  line-height: var(--text-sub-lh);
}

/* The simplified fold owns only its copy and orbit. Its block size follows
 * that content; product and platform coverage continue below it. */
.hero--v2 { padding-block: 0; }
.hero-intro {
  position: relative;
  display: grid;
  place-items: center;
  overflow: clip;
  padding-block: var(--space-11);
  isolation: isolate;
}
.hero-intro::before {
  position: absolute;
  z-index: -1;
  inset: var(--space-6) 18%;
  background: radial-gradient(circle, var(--accent-tint), transparent 68%);
  border-radius: var(--radius-band);
  content: '';
  opacity: .48;
  pointer-events: none;
}
.hero__head--v2 { position: relative; z-index: 2; gap: var(--space-5); margin-block-end: 0; }
.hero--v2 .product-stage { margin-inline: calc(var(--space-6) + var(--space-1)); }
.hero--v2 .hero__title { max-inline-size: calc(var(--container-text) + (var(--space-12) * 2)); text-wrap: balance; }
.hero--v2 > .u-container { margin-block-start: var(--space-8); }

/* ==========================================================================
 * 3 · pillars
 * ======================================================================== */

.pillars {
  padding-block-start: 0;
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

/* ==========================================================================
 * 4 · platforms
 * ======================================================================== */

.platforms {
  padding-block-start: 0;
}

/* ==========================================================================
 * 5 · problem
 * ======================================================================== */

.problem__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-8);
}

/* These landmarks own their height through their visible content. Their
 * padding sets cadence; no text-bearing section reserves a story-sized spacer. */
.problem,
.engagement,
.intel,
.market,
.listen {
  padding-block: 0;
}

/* The section transition alias owns the measured 40px/32px boundary between
 * adjacent boxes. It is separate from each section's content padding. */
.hero,
.problem,
.engagement,
.intel,
.market,
.listen,
.proof,
.faq {
  margin-block-end: var(--rhythm-section-transition);
}

.problem > .u-container,
.intel > .u-container,
.market > .u-container,
.listen > .u-container { padding-block: 0; }

.problem,
.intel,
.market,
.listen {
  display: grid;
  align-items: center;
}

.engagement { display: grid; align-items: center; }

.problem__prompt-stage {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-4);
  min-inline-size: 0;
}

.problem__prompt-stage > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: .55;
  border-radius: var(--radius-panel);
}

.problem__prompt-stage .bubbles { position: relative; padding: var(--space-5); }

.problem__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.problem__body {
  color: var(--text-secondary);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-prose-lh);
}

.problem__support {
  max-inline-size: var(--container-text);
  color: var(--text-muted);
}

/* The second bubble is offset for rhythm; the offset resets at ≤1023px. */
.bubble--offset {
  margin-inline-start: calc(var(--space-7) * -1);
}

/* ==========================================================================
 * 6 · engagement — the first ink band
 * ======================================================================== */

.engagement { padding-block: 0; }

/* ==========================================================================
 * 7 · intelligence
 * ======================================================================== */

.intel { padding-block-end: 0; }

/* ==========================================================================
 * 8 · backlinks — the page's one cream mega-panel
 *
 * The third act marker. It is the only cream surface on the page, so it does
 * the work a divider would otherwise have to do between two light quads.
 * ======================================================================== */

.market__panel {
  min-inline-size: 0;
}

/* ==========================================================================
 * 9 · listening
 *
 * No placement rule of its own: it reuses the centred head and 2×2 quad the
 * `intelligence` section already composes, and the cream panel above it is
 * what keeps the two from reading as one repeated block. Every section keeps
 * the same `--section-y` rhythm above and below, so nothing here shortens the
 * page's cadence.
 * ======================================================================== */

/* ==========================================================================
 * 8–10 · proof, FAQ, closing
 * ======================================================================== */
.proof {
  display: grid;
  align-items: center;
  padding-block: 0;
}

.proof__head {
  max-inline-size: var(--container-text);
  margin-inline: auto;
  text-align: center;
}

.proof__head .badge,
.proof__head .sechead__stand {
  margin-inline: auto;
}

.faq {
  display: grid;
  align-items: center;
  padding-block: 0;
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--space-10);
}

#closing {
  padding-block: 0;
}

.footer {
  padding-inline: 0;
}