:root {
  --ink: #10201a;
  --ink-soft: #53615b;
  --muted: #59665f;
  --cream: #f7f5ee;
  --surface: #fffefa;
  --line: #dedfd8;
  --line-strong: #c4c9c1;
  --green: #08765a;
  --green-dark: #065b46;
  --green-pale: #eaf5f0;
  --danger: #b42318;
  --danger-pale: #fff2f0;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--cream); }
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-header {
  width: 100%;
  padding: calc(14px + var(--safe-top)) 20px 0;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
}

.header-row {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
}

.wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none;
}
.wordmark em { color: var(--green); }

.icon-button {
  position: absolute;
  left: -12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.icon-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:not([hidden]) ~ .wordmark { margin-left: 34px; }
.icon-button:focus-visible { outline: 3px solid rgba(8, 118, 90, .22); outline-offset: 1px; }

.progress-copy {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.progress-track {
  width: 100%;
  max-width: 600px;
  height: 3px;
  margin: 8px auto 0;
  overflow: hidden;
  background: #e4e3dc;
  border-radius: 999px;
}
.progress-track span {
  display: block;
  width: 16.6667%;
  height: 100%;
  background: var(--green);
  border-radius: inherit;
  transition: width 180ms cubic-bezier(.2, .8, .2, 1);
}

#survey-main {
  width: 100%;
  max-width: 640px;
  flex: 1;
  margin: 0 auto;
  padding: clamp(28px, 7vh, 64px) 20px 32px;
}

.screen {
  width: 100%;
  animation: enter 180ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.eyebrow {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

h2 {
  max-width: 560px;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(31px, 8.2vw, 43px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.03;
}
h2:focus { outline: none; }
.supporting {
  margin: 13px 0 24px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.choices { display: grid; gap: 10px; }
.choice {
  position: relative;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px 14px 17px;
  color: var(--ink);
  text-align: left;
  line-height: 1.35;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 1px 1px rgba(16, 32, 26, .02);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 100ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.choice span { font-size: 15px; font-weight: 500; }
.choice svg { flex: 0 0 auto; width: 20px; height: 20px; color: #8d9690; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.choice:hover { border-color: var(--line-strong); }
.choice:active { transform: scale(.987); }
.choice:focus-visible { outline: 3px solid rgba(8, 118, 90, .2); outline-offset: 2px; }
.choice[aria-pressed="true"] { color: var(--green-dark); background: var(--green-pale); border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.choice[aria-pressed="true"] svg { color: var(--green); }

.resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -8px 0 24px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.resume-card strong, .resume-card span { display: block; }
.resume-card strong { margin-bottom: 3px; font-size: 14px; }
.resume-card span { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.resume-actions { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.text-button { min-height: 44px; padding: 8px 4px; color: var(--green); background: none; border: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.text-button.muted { color: var(--muted); }
.text-button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.investment-note {
  display: grid;
  gap: 4px;
  margin: 22px 0;
  padding: 14px 15px;
  background: #f0eee6;
  border: 1px solid #dedbd0;
  border-radius: 12px;
}
.investment-note strong { font-size: 13px; }
.investment-note span { color: var(--ink-soft); font-size: 13px; line-height: 1.45; }

/*
 * THE ENTRY-PLAN PANEL. Reuses the investment-note surface deliberately: the
 * applicant has met that treatment already as "here is what this costs", and
 * this is the same message arriving earlier. It must NOT read as a rejection —
 * the entry band used to be a redirect to a disqualification page, and anything
 * that looks like a soft version of that answer will be read as one.
 *
 * `[hidden]` is declared explicitly. The panel sets `display: grid`, which beats
 * the UA sheet's [hidden] rule, and the booking origin shipped that exact bug to
 * production this week.
 */
.entry-plan {
  display: grid;
  gap: 8px;
  margin: 22px 0 4px;
  padding: 16px 16px 6px;
  background: #f0eee6;
  border: 1px solid #dedbd0;
  border-left: 3px solid var(--green);
  border-radius: 12px;
}
.entry-plan[hidden] { display: none; }
.entry-plan-eyebrow {
  margin: 0;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.entry-plan-lead { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.entry-plan-detail { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.entry-plan-ask { margin: 6px 0 2px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.entry-plan .choices { margin-top: 2px; }

.field-grid { display: grid; gap: 15px; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.field label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 13px; font-weight: 600; }
.field label span { color: var(--muted); font-weight: 400; }
.field input {
  width: 100%;
  min-height: 53px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: none;
  font-size: 16px;
  line-height: 1.3;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(8, 118, 90, .13); }
.field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180, 35, 24, .1); }
.field-error { min-height: 0; margin: 5px 0 0; color: var(--danger); font-size: 12px; line-height: 1.35; }
.field-error:empty { display: none; }

.submit-button {
  /* .consent-row used to sit here with `margin: 18px 0` and was the ONLY gap
     between .field-grid (no bottom margin) and this button. It was removed
     with the optional marketing checkbox, so the gap lives here now. */
  margin-top: 18px;
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 20px;
  color: white;
  background: var(--green);
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 7px 18px rgba(8, 118, 90, .17);
}
.submit-button:hover { background: var(--green-dark); }
.submit-button:active { transform: translateY(1px); }
.submit-button:focus-visible { outline: 3px solid rgba(8, 118, 90, .24); outline-offset: 3px; }
.submit-button:disabled { opacity: .65; cursor: wait; }
.submit-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.submit-status { min-height: 0; margin: 11px 0 0; color: var(--danger); text-align: center; font-size: 13px; line-height: 1.45; }
.submit-status:empty { display: none; }
.submit-status.success { color: var(--green); }
/* A rate-limited applicant is waiting, not failing. Neutral ink so the copy that
   says "nothing is wrong with your connection" is not printed in the danger red
   the base rule uses for a real failure. */
.submit-status.waiting { color: var(--ink-soft); }
.privacy-note { display: block; margin: 14px auto 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.privacy-note svg { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.privacy-note a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-block: -14px;
  padding-inline: 4px;
  color: inherit;
  vertical-align: middle;
}

.app-footer { padding: 0 20px calc(76px + var(--safe-bottom)); color: var(--ink-soft); font-size: 10px; letter-spacing: .04em; text-align: center; }

@media (min-width: 700px) {
  .app-header { padding-top: calc(22px + var(--safe-top)); }
  #survey-main { padding-top: clamp(48px, 10vh, 92px); }
  .screen { padding: 38px 42px 42px; background: rgba(255, 254, 250, .78); border: 1px solid rgba(210, 211, 203, .75); border-radius: 20px; box-shadow: 0 18px 55px rgba(16, 32, 26, .055); }
  .choice { min-height: 60px; }
}

@media (max-width: 360px) {
  .app-header { padding-left: 16px; padding-right: 16px; }
  #survey-main { padding-left: 16px; padding-right: 16px; padding-top: 24px; }
  h2 { font-size: 29px; }
  .supporting { margin-bottom: 19px; }
  .choice { min-height: 55px; padding: 12px 13px 12px 15px; }
  .choice span { font-size: 14px; }
  .resume-card { align-items: flex-start; flex-direction: column; }
  .resume-actions { width: 100%; flex-direction: row; justify-content: space-between; }
}

@media (max-height: 650px) and (orientation: landscape) {
  #survey-main { padding-top: 22px; }
  .app-footer { display: none; }
  h2 { font-size: 30px; }
  .supporting { margin: 9px 0 15px; }
  .choices { gap: 7px; }
  .choice { min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}