/* Base: reset, type, layout primitives, buttons.
   Colours come ONLY from the tokens (vendor/tokens.css, refreshed by CI). The page is always on the
   dark theme (<html class="dark">). No colour literals in these files, except the "Technology" blue
   in sections.css, which is the logo wordmark's own colour. Fluency rules: ADR 0003. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
p { text-wrap: pretty; }
body { margin: 0; font-family: var(--font-sans); line-height: 1.6; color: hsl(var(--foreground)); background: hsl(var(--background)); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; }
.wrap { width: min(90rem, 100% - clamp(2.5rem, 6vw, 6rem)); margin-inline: auto; position: relative; }
section { padding-block: clamp(5rem, 11vw, 9rem); }
h1 { margin: 0 0 1.75rem; font-size: clamp(2.75rem, 8.5vw, 7.5rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; font-feature-settings: "cv11", "ss03"; text-wrap: balance; }
h2 { margin: 0 0 1.25rem; font-size: clamp(2rem, 4.8vw, 3.9rem); font-weight: 680; line-height: 1.06; letter-spacing: -.03em; font-feature-settings: "cv11", "ss03"; max-width: 20ch; text-wrap: balance; }
h3 { margin: 0 0 .5rem; font-size: 1.25rem; letter-spacing: -.01em; }

/* Buttons: same look for <a> and <button>. */
.btn {
  white-space: nowrap;
  display: inline-block; font: inherit; font-weight: 600; color: inherit; text-decoration: none; cursor: pointer;
  padding: .75rem 1.4rem; border: 1px solid transparent; border-radius: 999px;
  transition: transform .15s, background-color .15s;
}
/* Main action: the brand gradient as a solid fill; page-coloured text keeps contrast on both ends of it. */
.btn-primary { color: hsl(var(--background)); background: var(--brand-gradient) border-box; }
.btn-primary:hover { filter: none; box-shadow: none; }
/* Outline with a brand-gradient border: page-coloured fill clipped to the padding box, gradient behind the border. */
.btn-outline, .btn-ghost {
  background: linear-gradient(hsl(var(--background)), hsl(var(--background))) padding-box, var(--brand-gradient) border-box;
}
.btn-outline:hover, .btn-ghost:hover { background: linear-gradient(hsl(var(--secondary)), hsl(var(--secondary))) padding-box, var(--brand-gradient) border-box; }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }