/* ═══════════════════════════════════════════
   Reset & Base Styles
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--cream); color: var(--dark);
  font-family: var(--sans); font-size: 15px;
  line-height: 1.7; overflow-x: hidden;
}
button { font-family: var(--sans); cursor: pointer }
input, select, textarea { font-family: var(--sans) }
a { text-decoration: none; color: inherit }

/* ─── Utilities ─── */
.hidden { display: none !important }
.serif { font-family: var(--serif) }
.rose { color: var(--rose) }
.sage { color: var(--sage) }
.terra { color: var(--terra) }
.indigo { color: var(--indigo) }

/* ─── Section Headers ─── */
.page-header { margin-bottom: 2rem }
.page-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .4rem;
}
.page-title {
  font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400; line-height: 1.2; margin-bottom: .75rem;
}
.page-sub { color: var(--mid); max-width: 540px; line-height: 1.8; font-size: .93rem }

/* ─── Disclaimer ─── */
.disclaimer {
  background: var(--indigo-p); border: 1px solid var(--indigo-l);
  border-radius: 14px; padding: 1.25rem; margin-top: 2.5rem;
  display: flex; gap: .75rem;
}
.disc-icon { font-size: 1.3rem; flex-shrink: 0 }
.disc-text { font-size: .8rem; color: var(--indigo); line-height: 1.7 }

/* ─── Card ─── */
.card { background: white; border-radius: 20px; padding: 1.6rem; box-shadow: var(--shadow) }
.card-eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: .4rem;
}
.card-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin-bottom: .75rem }

/* ─── Chips ─── */
.chips { display: flex; flex-wrap: wrap; gap: .3rem }
.chip { background: var(--cream); border-radius: 100px; padding: .18rem .6rem; font-size: .73rem; color: var(--mid) }

/* ─── Form fields ─── */
.field { margin-bottom: 1.2rem }
.field label {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--light); margin-bottom: .4rem;
}
.field input, .field select {
  width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--border);
  border-radius: 12px; font-size: .9rem; color: var(--dark);
  background: var(--cream); transition: all .2s; outline: none;
}
.field input:focus, .field select:focus {
  border-color: var(--rose); background: white;
  box-shadow: 0 0 0 3px rgba(212, 118, 138, .1);
}
.field .hint { font-size: .74rem; color: var(--light); margin-top: .3rem }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px }