@charset "UTF-8";

.basic-hero { min-height: 320px; padding: 116px 0 46px; display: flex; align-items: center; background: var(--surface-cream); border-bottom: 1px solid var(--border); }
.basic-hero h1 { margin: 0; color: var(--brand-700); font-size: clamp(38px, 4.2vw, 52px); line-height: 1.25; letter-spacing: -.045em; }
.basic-hero > .container > p:last-child:not(.kicker) { max-width: 720px; margin: 16px 0 0; color: var(--ink-600); font-size: 14px; line-height: 1.8; }
.basic-layout { max-width: 920px; padding-top: 88px; padding-bottom: 120px; }
.basic-content { color: var(--ink-700); font-size: 15px; line-height: 2; }
.basic-content > :first-child { margin-top: 0; }
.basic-content h2 { margin: 64px 0 26px; padding: 0 0 18px; border-bottom: 1px solid var(--border-strong); color: var(--brand-700); font-size: clamp(27px, 3vw, 38px); line-height: 1.5; }
.basic-content h3 { margin: 42px 0 18px; padding-left: 16px; border-left: 3px solid var(--accent-500); color: var(--brand-700); font-size: 22px; }
.basic-content p { margin: 0 0 22px; }
.basic-content a { color: var(--brand-500); text-underline-offset: 3px; }
.basic-content ul, .basic-content ol { margin: 24px 0 32px; padding-left: 1.6em; }
.basic-content li + li { margin-top: 9px; }
.basic-content table { width: 100%; margin: 30px 0 40px; border-collapse: collapse; }
.basic-content th, .basic-content td { padding: 15px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.basic-content th { color: var(--brand-700); background: var(--surface-blue); }
.basic-content img { max-width: 100%; height: auto; }
.basic-content .wp-block-columns, .basic-content .swell-block-columns__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.basic-content .wp-block-button__link, .basic-content .swell-block-button__link { min-height: 52px; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; color: #fff; background: var(--brand-500); font-weight: 700; text-decoration: none; }

@media (max-width: 760px) {
  .basic-hero { min-height: 250px; padding: 104px 0 38px; }
  .basic-hero h1 { font-size: clamp(34px, 9.5vw, 42px); }
  .basic-hero > .container > p:last-child:not(.kicker) { font-size: 13px; line-height: 1.75; }
  .basic-layout { padding-top: 64px; padding-bottom: 86px; }
  .basic-content { font-size: 14px; }
  .basic-content h2 { margin-top: 50px; }
  .basic-content table { display: block; overflow-x: auto; }
  .basic-content .wp-block-columns, .basic-content .swell-block-columns__inner { grid-template-columns: 1fr; }
}