/* Shared styles of the Slowburn demo site (landing, service, contacts): headings, case files, stamps, steps,
   closing call to action. Each page adds its own composition file after this one. */
@layer page {
  h1, h2, h3, .sb-stamp, .brand { font-family: var(--font-display, var(--font)); font-weight: 500; letter-spacing: .01em; }
  .brand svg { color: var(--brass); }
  .desktop-nav .btn { padding-inline: 1.6rem; min-block-size: 3.8rem; font-size: var(--text-size); }
  .sb-steps { padding: 0; list-style: none; counter-reset: step; }
  .sb-steps > li { counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2rem; row-gap: 1rem; align-items: start; }
  .sb-steps > li > * { grid-column: 2; }
  .sb-steps h3 { margin-block-start: 1.7rem; }
  .sb-steps > li::before { content: counter(step); grid-row: 1 / span 2; display: block; font-family: var(--font-display, var(--font)); font-size: 6rem; line-height: 1; color: var(--brass); }
  .sb-file { position: relative; padding: 3rem 2.4rem 7rem; border: .1rem solid var(--line); border-radius: 0 var(--radius) var(--radius) var(--radius); background: var(--surface); }
  .sb-file::before { content: ''; position: absolute; inset-block-start: -1.4rem; inset-inline-start: -.1rem; inline-size: 12rem; block-size: 1.4rem; border: .1rem solid var(--line); border-block-end: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); }
  .sb-file-no, .sb-file blockquote { font-family: var(--font-type, monospace); }
  .sb-file-no { font-size: var(--small-size); color: var(--muted); }
  .sb-file blockquote { font-size: 1.5rem; line-height: 1.7; }
  .sb-stamp { position: absolute; inset-block-end: 2.2rem; inset-inline-end: 2.4rem; padding: .2rem 1.4rem; border: .3rem solid var(--stamp); border-radius: .4rem; color: var(--stamp); font-size: 2rem; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-7deg); opacity: .85; }
  .pricing-plan { background: var(--paper); }
  .sb-faq { max-inline-size: 84rem; }
  .sb-final { display: grid; justify-items: center; gap: 2.4rem; padding-block: 10rem; text-align: center; background: var(--surface); border-block-start: .5rem solid var(--brass); }
  .sb-final h2 { font-size: 5rem; }
  .sb-final-inner { display: grid; justify-items: stretch; gap: 3.6rem; inline-size: fit-content; max-inline-size: 100%; }
  .sb-big { min-block-size: 9rem; font-size: 3.2rem; font-family: var(--font-display, var(--font)); }
  @media (width <= 50em) {
    .mobile-nav nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; justify-items: start; column-gap: 2.4rem; }
    .sb-file blockquote { font-size: 2rem; }
    .sb-final h2 { font-size: 3.6rem; }
    .sb-final-inner { inline-size: 100%; }
    .sb-big { min-block-size: 6.4rem; font-size: 2.6rem; }
  }
}