:root {
  --bg: #a9e6e0;
  --surface: #ffffff;
  --surface-2: #f6f8f7;
  --ink: #25333a;
  --muted: #7f9096;
  --faint: #9aa8ac;
  --line: #e9eeee;
  --green: #36c4bb;
  --green-dark: #169aa1;
  --green-soft: #e8fbf7;
  --blue: #58b6d6;
  --blue-dark: #3397bd;
  --blue-deep: #3397bd;
  --blue-soft: #e8f7fb;
  --purple: #6fb5d7;
  --violet: #58b6d6;
  --purple-soft: #e8f6fb;
  --pink: #35c4bc;
  --pink-soft: #e7faf7;
  --coral: #ffd45c;
  --coral-soft: #fff7d9;
  --mint: #53d0c8;
  --warm: #ffd45c;
  --yellow: #ffd45c;
  --yellow-soft: #fff7d9;
  --red: #e45c5c;
  --red-soft: #fff0f0;
  --danger: #e45c5c;
  --danger-soft: #fff0f0;
  --success: #159a72;
  --gradient-primary: linear-gradient(145deg, #53d0c8 0%, #4eb7d5 100%);
  --gradient-warm: linear-gradient(145deg, #ffe078 0%, #ffc84d 100%);
  --gradient-cool: linear-gradient(145deg, #48c8c0 0%, #58aeda 100%);
  --gradient-soft: linear-gradient(145deg, rgba(83, 208, 200, 0.18), rgba(88, 182, 214, 0.12));
  --shadow: 0 28px 60px rgba(56, 142, 150, 0.18);
  --shadow-soft: 0 16px 34px rgba(56, 142, 150, 0.12);
  --soft-shadow: 0 18px 42px rgba(56, 142, 150, 0.12);
  --radius: 30px;
  --max: 1440px;
  --focus-ring: 0 0 0 3px rgba(54, 196, 187, 0.18);
  --field-bg: #ffffff;
  --field-border: #d9e6e7;
  --field-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(37, 51, 58, 0.05);
  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-xs: 0.75rem;
  --font-sm: 0.8125rem;
  --font-base: 0.875rem;
  --font-md: 0.95rem;
  --font-lg: 1.05rem;
  --font-xl: 1.25rem;
  --font-2xl: clamp(1.45rem, 2.4vw, 2.1rem);
  --font-hero: clamp(1.8rem, 3vw, 2.65rem);

  /* Compatibility aliases for existing app styles. Keep these as the single source. */
  --panel: var(--surface);
  --panel-soft: var(--surface-2);
  --panel-strong: rgba(255, 255, 255, 0.98);
  --brand: var(--green);
  --brand-strong: var(--green-dark);
  --brand-dark: var(--green-dark);
  --accent: var(--green);
  --accent-blue: var(--blue);
  --soft-pink: var(--pink-soft);
  --soft-coral: var(--coral-soft);
  --soft-blue: var(--blue-soft);
  --primary-gradient: var(--gradient-primary);
  --warm-gradient: var(--gradient-warm);
  --cool-gradient: var(--gradient-cool);
  --gradient: var(--primary-gradient);
  --white-line: rgba(255, 255, 255, 0.76);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-family);
  font-size: var(--font-base);
  letter-spacing: 0;
}

button, input, select, textarea { font: inherit; }
button, a.primary-button, a.secondary-button, a.ghost-button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, opacity 160ms ease;
  text-decoration: none;
}
button:hover:not(:disabled), a.primary-button:hover, a.secondary-button:hover, a.ghost-button:hover { transform: translateY(-1px); }
button:disabled { opacity: 0.48; cursor: not-allowed; }
button svg, a svg, .badge svg { width: 17px; height: 17px; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--field-bg);
  box-shadow: var(--field-shadow);
  color: var(--ink);
  font-size: var(--font-base);
  padding: 11px 14px;
}
textarea { border-radius: 18px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}
label { display: grid; gap: 7px; font-size: var(--font-sm); font-weight: 800; color: #26352f; }
h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { max-width: 980px; font-size: var(--font-hero); line-height: 1.08; }
h2 { font-size: var(--font-xl); line-height: 1.15; }
h3 { font-size: var(--font-lg); }
p { color: var(--muted); line-height: 1.55; }
.skip-link { position: absolute; left: -999px; top: 10px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 999px; }
.skip-link:focus { left: 10px; z-index: 20; }
.app-shell { width: min(var(--max), calc(100% - 48px)); margin: 24px auto; padding: 28px; background: rgba(255,255,255,0.94); border-radius: 34px; box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 8px; color: var(--green-dark); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--font-xs); }
.hero-copy { max-width: 760px; font-size: var(--font-md); }
button.primary-button, a.primary-button { background: var(--gradient-primary); color: #fff; padding: 12px 18px; box-shadow: 0 14px 28px rgba(54, 196, 187, 0.26); }
button.primary-button:hover:not(:disabled), a.primary-button:hover { background: linear-gradient(145deg, #2eb7af 0%, #3f9fc7 100%); }
button.secondary-button, a.secondary-button { background: var(--ink); color: #fff; padding: 11px 16px; }
button.ghost-button, a.ghost-button { background: rgba(255,255,255,0.9); color: #26352f; border: 1px solid var(--line); padding: 10px 15px; }
.badge, .step-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: var(--font-xs);
  font-weight: 900;
  background: var(--green-soft);
  color: var(--green-dark);
}
.badge.soft { background: var(--green-soft); color: var(--green-dark); }
.notice { border-radius: 20px; padding: 15px 17px; background: rgba(255,255,255,0.88); border: 1px solid var(--line); }
.notice.error { background: var(--red-soft); color: #922029; border-color: #f4b6bb; }
.support-note { margin: 0; font-size: var(--font-sm); }
.hidden { display: none !important; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 760px) {
  .app-shell { width: min(100% - 24px, var(--max)); margin: 12px auto; padding: 18px; }
}