/* layout.css — container, section, grid utilities, shared button */
@layer layout {
  .container { width: min(100% - 2 * var(--space-gutter), var(--container)); margin-inline: auto; }
  .section { padding-block: var(--space-section); }
  .section__head { display: grid; gap: var(--space-4); max-width: var(--faq-width); margin-block-end: var(--space-7); }
  .eyebrow { font: 500 var(--font-size-small) / 1 var(--font-body); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
  .lede { font-size: var(--step-1); color: var(--color-text-muted); line-height: var(--line-lede); max-width: var(--measure); }
  .grid-auto { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--tap); padding: var(--button-pad-y) var(--button-pad-x); border-radius: var(--radius-pill);
    font: 500 var(--step-0) / 1 var(--font-body); letter-spacing: var(--tracking-button); text-decoration: none;
    background: var(--button-bg); color: var(--button-text); border: 1px solid transparent;
    transition: transform var(--duration-1) var(--ease-out), background var(--duration-1);
  }
  .button:hover { transform: translateY(var(--button-lift)); }
  .button[data-variant="ghost"] { background: transparent; color: inherit; border-color: var(--button-ghost-border); }
  .button[data-variant="light"] { --button-bg: var(--white); --button-text: var(--ink-950); }
  .button[data-size="lg"] { padding: var(--button-pad-y-lg) var(--button-pad-x-lg); font-size: var(--step-1); }
}