/* Page-level containers and section headers. */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(56px,8vw,96px) 0}
/* Full-viewport section for a page with no header/footer (the 500 page, P-022). 100vh/100svh is the viewport itself,
   not a design value; vh first is the fallback for browsers without svh (svh keeps the block clear of a phone toolbar).
   Block-level align-content (2024+ browsers) centres without making this a grid/flex box, which would shrink .wrap to
   fit-content (auto margins) and pull the copy off the page gutter; older browsers just top-align. border-box keeps
   the padding inside the min-height, so no scrollbar. */
.section--fill{min-height:100vh;min-height:100svh;align-content:center}
/* No row gap (P-032): when the link wraps, its 44px tap box is the spacing under the heading.
   Twin: reviews.css `.rev .head > .muted` adds its own top padding (no tap box); change both together. */
.head{display:flex;justify-content:space-between;align-items:end;column-gap:16px;row-gap:0;flex-wrap:wrap;margin-bottom:28px}
/* Full tap target (P-030, same token as footer and /contact links). flex-end keeps the text on the heading line; the box grows upward,
   and on a wrap the empty part of the box sits between heading and text. */
.head a{display:inline-flex;align-items:flex-end;min-height:var(--tap);color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.intro{max-width:60ch}
/* pretty keeps a lone word off the last line (500 page); unsupported browsers wrap as before */
.intro p{text-wrap:pretty}
.intro--stack{display:grid;gap:14px;margin:22px 0 32px}
.body{max-width:60ch;margin-top:22px;display:grid;gap:14px}
/* :not(.btn): a button inside page body copy keeps its own look (P-022). */
.body a:not(.btn){font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.two-col{display:grid;gap:40px}
.two-col .checks{margin-top:18px}

@media(min-width:768px){ /* breakpoint: tablet */
  .two-col{grid-template-columns:1fr 1fr}
}