body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.6;
}

h1, h2, h3, h4 { color: var(--color-primary); line-height: 1.15; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.35rem, 7vw, 4.8rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); }
p + p { margin-top: 0.9rem; }

.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.narrow { width: min(calc(100% - 2rem), 820px); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section-sm { padding: 2.5rem 0; }
.section-title { max-width: 760px; margin-bottom: 2rem; }
.section-title p { color: var(--color-muted); font-size: 1.05rem; margin-top: 0.8rem; }
.eyebrow { color: var(--color-secondary); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.lead { color: #344054; font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 760px; }
.muted { color: var(--color-muted); }
.text-small { font-size: 0.9rem; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.card--flat { box-shadow: none; }
.card--accent { border-top: 4px solid var(--color-secondary); }
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 750;
  gap: 0.55rem;
  justify-content: center;
  min-height: 48px;
  padding: 0.78rem 1.25rem;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: #fff; box-shadow: 0 9px 24px rgba(11, 36, 71, 0.22); }
.btn-primary:hover { box-shadow: 0 13px 30px rgba(11, 36, 71, 0.3); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-outline { background: #fff; border-color: var(--color-border); color: var(--color-primary); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-danger { background: #fff; border-color: #f3c7c3; color: var(--color-danger); }
.btn-block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.icon-chip {
  align-items: center;
  background: rgba(31, 111, 95, 0.1);
  border-radius: 12px;
  color: var(--color-secondary);
  display: inline-flex;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.icon-chip svg { height: 22px; width: 22px; }

.badge-pill { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; padding: 0.35rem 0.72rem; background: var(--color-surface-alt); color: var(--color-primary); font-size: 0.83rem; font-weight: 700; }
.badge-pill--success { background: #eaf8f0; color: var(--color-success); }
.badge-pill--warning { background: #fff7e0; color: var(--color-warning); }
.badge-pill--info { background: #eaf2ff; color: var(--color-info); }

.notice { border: 1px solid var(--color-border); border-left: 4px solid var(--color-info); border-radius: var(--border-radius-sm); background: #f6f9ff; padding: 1rem 1.15rem; }
.notice--warning { border-left-color: var(--color-warning); background: #fffbeb; }
.notice--success { border-left-color: var(--color-success); background: #f0fdf4; }
.notice--danger { border-left-color: var(--color-danger); background: #fff5f4; }

.form-grid { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.42rem; }
.field label, .field legend { color: var(--color-primary); font-weight: 750; }
.field input, .field select, .field textarea {
  background: #fff;
  border: 1px solid #cfd9e4;
  border-radius: 12px;
  color: var(--color-text);
  min-height: 48px;
  padding: 0.72rem 0.85rem;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary-light); box-shadow: 0 0 0 4px rgba(88, 191, 211, 0.18); outline: none; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-danger); }
.field-error { color: var(--color-danger); font-size: 0.86rem; min-height: 1.1em; }
.checkbox-field { align-items: flex-start; display: grid; gap: 0.7rem; grid-template-columns: 22px 1fr; }
.checkbox-field input { height: 20px; margin-top: 0.15rem; width: 20px; }
.honeypot { left: -9999px !important; position: absolute !important; }

.divider { border: 0; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }
.inline-link { color: var(--color-primary-light); font-weight: 700; }
.status-message { min-height: 1.5em; color: var(--color-muted); }
.status-message[data-state="success"] { color: var(--color-success); }
.status-message[data-state="error"] { color: var(--color-danger); }

.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 9999; background: #fff; color: var(--color-primary); border-radius: 8px; padding: 0.7rem 1rem; box-shadow: var(--shadow-card); }
.skip-link:focus { top: 1rem; }