* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}
img {
  max-width: 100%;
  height: auto;
}


:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f7f9fc;
  --bg-tertiary: #eef2f7;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #dbeafe;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --ink: #111827;
  --hairline: #e2e8f0;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Merriweather Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 700;
  color: var(--text-primary);
}
h1 { font-size: 2.1rem; line-height: 1.12; }
h2 { font-size: 1.65rem; line-height: 1.2; }
h3 { font-size: 1.2rem; line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.35; }
p  { font-size: 1rem; line-height: 1.7; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
ul, ol { list-style: none; }

@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.1rem; }
  h3 { font-size: 1.4rem; }
}


.flexRow { display: flex; flex-direction: row; }
.flexCol { display: flex; flex-direction: column; }
.flexWrap { flex-wrap: wrap; }
.itemsCenter { align-items: center; }
.itemsStart { align-items: flex-start; }
.justifyBetween { justify-content: space-between; }
.justifyCenter { justify-content: center; }
.gapXs { gap: 2%; }
.gapSm { gap: 3%; }
.gapMd { gap: 5%; }
.fullWidth { width: 100%; }
.halfWidth { width: 100%; }
.textCenter { text-align: center; }
.textMuted { color: var(--text-secondary); }
.textAccent { color: var(--accent); }
.textSmall { font-size: 0.86rem; line-height: 1.55; }
.weightBold { font-weight: 700; }
.upperTrack { text-transform: uppercase; letter-spacing: 0.14em; }
.stackTight > * + * { margin-top: 2%; }
.hideOnPhone { display: none; }
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .halfWidth { width: 48%; }
  .hideOnPhone { display: block; }
}


.primaryButton {
  --btnBg: var(--ink);
  --btnFg: #ffffff;
  --btnBorder: var(--ink);
  --btnPadY: 0.8rem;
  --btnPadX: 1.7rem;
  display: inline-block;
  background: var(--btnBg);
  color: var(--btnFg);
  border: 2px solid var(--btnBorder);
  border-radius: 8px;
  padding: var(--btnPadY) var(--btnPadX);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.primaryButton:hover,
.primaryButton:focus-visible {
  background: #ffffff;
  color: var(--btnBg);
}
.primaryButton[disabled] { opacity: 0.6; cursor: progress; }

.largeButton {
  --btnPadY: 1rem;
  --btnPadX: 2.2rem;
  font-size: 1.06rem;
  width: 100%;
}

.ghostButton {
  --btnBg: transparent;
  --btnFg: var(--ink);
  display: inline-block;
  background: var(--btnBg);
  color: var(--btnFg);
  border: 2px solid var(--hairline);
  border-radius: 8px;
  padding: 0.8rem 1.6rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ghostButton:hover,
.ghostButton:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

@media (min-width: 768px) {
  .largeButton { width: auto; }
}


.formInput {
  --inputBorder: #cbd5e1;
  --inputBg: #ffffff;
  width: 100%;
  background: var(--inputBg);
  border: 1px solid var(--inputBorder);
  border-radius: 8px;
  padding: 0.75rem 4%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.formInput:focus {
  outline: none;
  --inputBorder: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.formInput[aria-invalid="true"] { --inputBorder: #b91c1c; }
.formLabel {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.5%;
}


.spinner {
  display: none;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-left-color: #ffffff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 3%;
  animation: spin 1s linear infinite;
}
.isSending .spinner { display: inline-block; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeletonBox {
  background: linear-gradient(100deg, var(--bg-tertiary) 30%, #ffffff 50%, var(--bg-tertiary) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  to { background-position: -220% 0; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner, .skeletonBox { animation: none; }
}