/* Shared primitives. Add variants here; page styles only own their layout. */
.eyebrow { display:flex; align-items:center; gap:10px; font-size:12px; line-height:1.6; letter-spacing:.11em; font-weight:700; color:var(--eyebrow-color); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:15px; padding:15px 25px; min-height:56px; border-radius:var(--radius-button); background:var(--button-fill,var(--action-fill-light)); color:var(--button-text,var(--paper)); border:1px solid var(--button-border,var(--blue)); font-size:17px; line-height:1.5; font-weight:600; box-shadow:var(--button-shadow,var(--light-action-shadow)); transition:background .18s,transform .18s,box-shadow .18s; }
.button:hover { background:var(--button-fill-hover,var(--action-fill-light-hover)); transform:translateY(-1px); }
.button-small { padding:10px 18px; min-height:44px; font-size:15px; }
.button-secondary { --button-fill:var(--surface-tint); --button-fill-hover:var(--secondary-action-hover); --button-text:var(--blue); --button-border:transparent; --button-shadow:none; }
.button:disabled { opacity:.65; cursor:not-allowed; transform:none; box-shadow:none; }
.button:disabled:hover { background:var(--button-fill,var(--action-fill-light)); transform:none; box-shadow:none; }
.page-intro { background:var(--surface-tint); padding:14px 0; text-align:center; }
.page-intro .eyebrow { justify-content:center; }
.page-intro h1 { font-size:clamp(28px,2.8vw,34px); margin:4px 0 6px; }
.page-intro p:not(.eyebrow) { max-width:550px; margin-inline:auto; font-size:16px; line-height:1.55; }
.content-section { padding-block:var(--space-section); }
.content-section-tint { background:var(--surface-tint); }
.prose { max-width:var(--content-width); }
.prose > * + * { margin-top:var(--space-4); }
.prose a:not(.button) { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.surface-card { padding:18px 24px; background:var(--surface-card); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:0 12px 36px #0b27460a; }
.form-field { min-width:0; margin-bottom:10px; }
.form-field label { display:block; font-size:var(--text-label); font-weight:600; margin-bottom:6px; }
.form-field input,.form-field textarea { display:block; width:100%; min-height:44px; border:1px solid var(--field-border); border-radius:var(--radius-field); background:var(--paper); padding:9px 12px; font:inherit; font-size:17px; line-height:1.5; color:var(--ink); }
.form-field textarea { height:150px; min-height:88px; resize:vertical; }
.form-field input:focus-visible,.form-field textarea:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.form-field input[aria-invalid="true"],.form-field textarea[aria-invalid="true"] { border-color:var(--error); background:var(--error-surface); }
.form-field input:disabled,.form-field textarea:disabled { background:var(--surface-tint); color:var(--muted); cursor:not-allowed; }
.form-field-help { margin-top:4px; font-size:13px; }
.form-field-error { margin-top:6px; font-size:13px; font-weight:400; line-height:1.45; color:var(--error); }
.form-field input[aria-invalid="true"]:focus-visible,.form-field textarea[aria-invalid="true"]:focus-visible { outline:2px solid var(--error); outline-offset:2px; }
@media(max-width:600px) {
    .button { font-size:16px; padding:14px 22px; }
    .eyebrow { font-size:10px; }
    .page-intro { padding-block:12px; }
    .content-section { padding-block:var(--space-7); }
    .surface-card { padding:16px; border-radius:12px; }
    .form-field input,.form-field textarea { font-size:16px; }
}

/* A surface variant changes color; installation variants also share dimensions. */
.button-gradient-on-dark { --button-fill:var(--action-fill-dark); --button-fill-hover:var(--action-fill-dark-hover); --button-text:var(--navy); --button-border:var(--hero-action-top); --button-shadow:var(--hero-action-shadow); }
.button-gradient-on-dark:focus-visible { outline-color:var(--hero-accent); }
.button.button-gradient-on-dark,.button.button-gradient-on-light { padding:12px 36px; gap:12px; }
.button-gradient-on-dark.button-small,.button-gradient-on-light.button-small { padding:10px 18px; min-height:44px; font-size:15px; gap:8px; }
.button.button-gradient-on-dark img.chrome-icon,.button.button-gradient-on-light img.chrome-icon { width:36px; height:36px; margin:-1.9px 0; flex-shrink:0; }
.button.button-small img.chrome-icon { width:20px; height:20px; margin:0; }
@media(prefers-reduced-motion:reduce) {
    .button { transition:none; }
    .button:hover { transform:none; }
}