@layer blocks {
  /* No dividing rules between sections: on the sheet, the ruled margin and the
     handwritten notes carry the structure, and horizontal borders fight them.
     Sections are separated by space alone. */
  section {
    padding-block: var(--space-2xl-3xl) var(--space-m-l);

    --flow-space: var(--space-s-m);
  }

  section[data-variant="form"] {
    border-bottom: none;
    --flow-space: var(--space-xs);
    max-inline-size: 38.75rem; /* landing demo / section titles */
  }

  section[data-variant="settings"] {
    border-bottom: none;
    --flow-space: var(--space-3xs);
    max-inline-size: 38.75rem; /* landing demo / section titles */
  }

  section[data-variant="tasks"] {
    padding-block: 0;
    border-bottom: none;
    max-inline-size: 38.75rem; /* landing demo / section titles */
  }

  section[data-variant="mgm"] {
    border-bottom: none;
    --flow-space: var(--space-3xs);
    --ratio-grid-columns: 1fr 4fr;
    --grid-min-size: 14rem;
  }

  section[data-variant="faq"] {
    padding-block-end: 6.875rem; /* spec 110px */
  }

  .faq-list + .cluster {
    --flow-space: 2.375rem; /* spec .faq-cta 38px */
  }

  section[data-variant="final"] {
    --flow-space: 2.125rem; /* spec h2 → CTA 34px */
    padding-block-end: 2.125rem;
  }

  section[data-variant="final"] h2 {
    font-size: var(--font-final);
    line-height: 1.05;
    max-inline-size: 40rem;
  }

  section header {
    --flow-space: var(--space-2xs);
  }

  section header > p {
    color: var(--color-text-muted);
    max-width: 48ch;
  }

  section header em {
    font-style: italic;
    color: var(--color-accent-strong);
  }

  section header[data-variant="pageTitle"] > span {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  section header[data-variant="pageTitle"] > span::before {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background: var(--color-accent);
  }
}