/* Every section is a frame: it fills the viewport under the header and centres its content. */
.veriker-wordmark { height:1em; width:auto; display:inline-block; vertical-align:-0.08em; }
.veriker-logo .veriker-wordmark { height:.66em; display:block; }
.built-on { display:flex; align-items:baseline; justify-content:center; gap:.4em; }
.built-on .veriker-wordmark { height:.66em; vertical-align:0; }
.infrastructure-brand .veriker-wordmark { height:.7em; vertical-align:0; margin-left:.15em; }
@media (min-width:900px) and (min-height:520px) {
  .frame { min-height:calc(100svh - 57px); box-sizing:border-box; display:grid; align-content:center; padding-block:clamp(40px,6vh,72px); }
  .page-heading.frame h1 { margin-top:0; }
  .method-block.frame { border-top:0; }
}
.page-heading h1 .veriker-wordmark { height:.66em; vertical-align:0; margin-left:.06em; }
.source-link .veriker-wordmark { height:1.05em; vertical-align:-0.15em; }
.homepage .home-bridge { padding-block:64px; }

/* ---- One grid, one type scale, site-wide (desktop). Two axes only: the gutter and the midpoint. ---- */
@media (min-width:900px) {
  :root { --col-gap:64px; }
  .hero-bottom, .contact-inner, .home-bridge, .method-next, .method-heading, .experience-intro, .quickstart-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--col-gap); align-items:center; justify-content:normal;
  }
  .quickstart-grid { align-items:start; }
  .method-heading { align-items:end; }
  .method-heading .lead, .experience-intro .lead, .hero-bottom p, .contact-copy, .home-bridge > div, .method-next > div { margin-left:0; max-width:none; }
  .hero-bottom p { max-width:34ch; }
  .contact-copy, .method-next > div, .home-bridge > div { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  .contact-inner h2, .method-next h2, .home-bridge h2 { margin:0; }
  .contact-inner .button, .method-next .button { margin:0; }
  .home-bridge { padding-block:64px; }
  .method-content { grid-template-columns:1fr 1fr; gap:var(--col-gap); }

  /* Type scale */
  .hero h1, .page-heading h1 { font-size:clamp(64px,7.5vw,112px); line-height:1.02; letter-spacing:-.04em; }
  .platform-overview > h2, .home-proof > h2, .contact-inner h2, .home-bridge h2, .method-next h2, .method-block h2,
  .developer-section-heading h2, .developer-resources h2, .infrastructure-heading h2, .experience-end h2 {
    font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.025em;
  }
  .home-bridge h2 { font-size:var(--fs-h2); }
  .story-caption h3, .quickstart-grid h3, .experience-body h3 { font-size:26px; line-height:1.2; }
  .hero-bottom p, .contact-copy p, .home-bridge p, .method-next p, .method-block > p, .experience-end p, .method-main > p { font-size:var(--fs-body); line-height:1.5; }
  .story-caption p { font-size:var(--fs-body); }
  .home-proof > p, .quickstart-grid p, .method-note p { font-size:16px; line-height:1.55; }
}

@media (min-width:900px) {
  .page-heading h1 { font-size:clamp(56px,6.5vw,96px); }
  .method-heading { grid-template-columns:1fr 1fr; align-items:start; }
  .method-heading h1 { grid-column:1 / -1; }
  .method-heading .lead { grid-column:2; margin-top:0; }
  .proof-heading h2, #proof-title { font-size:clamp(36px,3.4vw,48px); line-height:1.1; letter-spacing:-.025em; }
  .experience-end { background:var(--wash); display:grid; grid-template-columns:1fr 1fr; gap:var(--col-gap); align-items:center; padding-block:64px; margin-top:64px; max-width:none; }
  .experience-end > * { margin:0; }
  .experience-end p { font-size:clamp(36px,3.4vw,48px); line-height:1.1; letter-spacing:-.025em; color:var(--ink); }
  .experience-end a { justify-self:start; }
}

.hero-tagline { font-size:var(--fs-row); line-height:1.2; letter-spacing:-.02em; color:var(--ink); margin:28px 0 0; max-width:40ch; text-wrap:balance; }
.hero-sub { font-size:18px; line-height:1.5; color:var(--muted); margin:14px 0 0; }
.homepage .hero-bottom { margin-top:36px; grid-template-columns:1fr; }
@media (max-width:800px) { .hero-tagline { margin-top:20px; } .homepage .hero-bottom { margin-top:28px; } }

/* Subpage hero stacks use the same left axis as the homepage hero. */
main .method-heading { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0; }
main .method-heading > .button { margin-top:36px; }
main .method-content { display:block; }
main .method-main { margin-inline:0; max-width:none; }
main .experience-intro { display:block; }
main .experience-intro .button { display:inline-flex; margin-top:36px; }
main .experience-intro .simulation-label { max-width:36ch; justify-self:auto; margin-top:28px; }
main .developer-actions { margin-top:36px; }
@media(max-width:800px) {
  main .method-heading > .button, main .experience-intro .button, main .developer-actions { margin-top:28px; }
}
@media(max-width:899px) {
  main #context h2 { font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.025em; white-space:normal; }
}
@media(max-width:899px) {
  main .page-heading { padding-top:64px; padding-bottom:48px; }
}
@media(max-width:800px) {
  main .page-heading { padding-top:56px; padding-bottom:48px; }
}
/* Every subpage opens on a full first screen beneath the header. */
main .page-heading { min-height:clamp(520px, 64vh, 640px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding-block:clamp(40px,7vh,90px); box-sizing:border-box; }
main .page-heading > .text-link { margin-top:36px; }
@media(max-width:800px) { main .page-heading { min-height:calc(100svh - 53px); } }
@media(max-width:800px) { main .page-heading > .text-link { margin-top:28px; } }
/* Final check v3: story captions use the row-title role; the workflow frame clears the contact heading. */
@media(min-width:900px) {
  .platform-overview .story-caption h3 { font-size:24px; line-height:1.2; }
}
@media(min-width:700px) and (max-width:899px) {
  .homepage .home-proof { padding-bottom:180px; }
}
/* Heroes and key frames fill the viewport under the header, so the next title never shows (2026-10-08). */