/* =============================================================
   CandidInbox — waitlist landing page styles
   Executes marketing/branding.md §5 (calm, muted cool palette,
   one restrained accent, clean technical typography). Tokens
   mirror marketing/assets/visual-identity.html.
   No framework, no build step (ADR-0006).
   ============================================================= */

:root {
  /* Core palette — cool, muted, low saturation */
  --ward-navy:    #1C2B3A; /* primary */
  --ward-navy-2:  #2A3D52; /* raised navy surface */
  --ink:          #0F172A; /* body text on light */
  --slate:        #64748B; /* muted text / secondary UI */
  --slate-strong: #475569;
  --slate-light:  #CBD5E1; /* borders, dividers */
  --paper:        #F1F5F9; /* background surface */
  --paper-2:      #F8FAFC; /* lighter surface */
  --white:        #FFFFFF;

  /* Single restrained accent — reserved for CTAs + audit/decision moments */
  --audit-teal:       #0F766E;
  --audit-teal-hover: #0B5C55;
  --audit-teal-200:   #99F6E4;
  --audit-teal-50:    #F0FDFA;

  /* Feedback (used sparingly, never louder than the accent) */
  --danger:      #B4232A;
  --danger-bg:   #FCECEC;
  --success:     #0F766E;

  /* Type */
  --font-sans: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Scale / rhythm */
  --radius: 10px;
  --radius-sm: 7px;
  --maxw: 960px;
  --gutter: clamp(20px, 5vw, 40px);
  --space-section: clamp(56px, 9vw, 104px);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* Sticky header offset: anchor scrolls (native + JS scrollIntoView) stop
   below the header instead of sliding content underneath it */
html { scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper-2);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.18; letter-spacing: -0.01em; color: var(--ward-navy); font-weight: 650; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
a { color: var(--audit-teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--audit-teal-hover); }

/* Visible, consistent focus ring for keyboard users */
:focus-visible {
  outline: 3px solid var(--audit-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ward-navy); color: var(--white);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip-link:focus { left: 0; color: var(--white); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--audit-teal); margin: 0 0 12px; font-weight: 600;
}

/* =============================================================
   Header / badge
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--slate-light);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; flex-wrap: wrap;
  padding-block: 10px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ward-navy); font-weight: 650; font-size: 18px; letter-spacing: -0.01em; }
.brand svg { width: 26px; height: 26px; }
.brand:hover { color: var(--ward-navy); }

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--audit-teal);
  background: var(--audit-teal-50);
  border: 1px solid var(--audit-teal-200);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.header-cta { margin-left: auto; }
@media (max-width: 640px) {
  .header-cta { display: none; }
  .site-header .badge { margin-left: auto; }
}
/* Narrow viewports: brand + nowrap badge force the sticky header onto two
   lines (or overflow), eating scarce vertical space. The identical badge
   already sits at the top of the hero, so drop it from the header and keep
   the sticky bar to one slim line. */
@media (max-width: 560px) {
  .site-header .badge { display: none; }
  .site-header .wrap { min-height: 54px; }
}

/* =============================================================
   Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  padding: 12px 20px; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--audit-teal); color: var(--white); }
.btn-primary:hover { background: var(--audit-teal-hover); color: var(--white); }
.btn-ghost { background: transparent; color: var(--ward-navy); border-color: var(--slate-light); }
.btn-ghost:hover { border-color: var(--slate); color: var(--ward-navy); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 26px; font-size: 17px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.btn-link {
  background: none; border: none; padding: 6px 2px; color: var(--slate-strong);
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn-link:hover { color: var(--ward-navy); }

/* =============================================================
   Hero
   ============================================================= */
.hero {
  background:
    radial-gradient(1100px 460px at 82% -8%, rgba(15,118,110,0.07), transparent 62%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
  border-bottom: 1px solid var(--slate-light);
  padding-block: clamp(40px, 8vw, 84px) var(--space-section);
}
.hero .badge { margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(32px, 5.6vw, 52px);
  max-width: 18ch; margin-bottom: 20px;
}
.hero .sub {
  font-size: clamp(17px, 2.2vw, 21px); color: var(--slate-strong);
  max-width: 46ch; margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-actions .note { font-size: 14px; color: var(--slate); margin: 0; }

/* =============================================================
   Sections
   ============================================================= */
section { padding-block: var(--space-section); }
section:nth-of-type(even) { background: var(--paper); }
.section-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { font-size: clamp(25px, 3.6vw, 34px); }
.section-head p { color: var(--slate-strong); font-size: 18px; }

/* Numbered "how it works" steps */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--white); border: 1px solid var(--slate-light);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
  position: relative;
}
.step .num {
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  color: var(--audit-teal); background: var(--audit-teal-50);
  border: 1px solid var(--audit-teal-200);
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--slate-strong); margin: 0; font-size: 15.5px; }
.step code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--paper); border: 1px solid var(--slate-light);
  padding: 1px 6px; border-radius: 5px; color: var(--ward-navy);
}

/* Trust cards */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--white); border: 1px solid var(--slate-light);
  border-left: 3px solid var(--audit-teal);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--slate-strong); margin: 0; font-size: 15.5px; }

/* Fit / not-fit two-column */
.fit-grid { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-col {
  background: var(--white); border: 1px solid var(--slate-light);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
}
.fit-col h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.fit-col ul { list-style: none; margin: 14px 0 0; padding: 0; }
.fit-col li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--slate-strong); font-size: 15.5px; }
.fit-col li::before {
  position: absolute; left: 0; top: 0.05em; font-family: var(--font-mono); font-weight: 700;
}
.fit-yes li::before { content: "✓"; color: var(--audit-teal); }
.fit-no  li::before { content: "✕"; color: var(--slate); }

/* =============================================================
   Signup form
   ============================================================= */
.signup { background: var(--ward-navy); color: #E9EEF4; }
.signup h2 { color: var(--white); }
.signup .section-head p { color: #B7C2D0; }
/* Signup section gets a wider measure than the rest of the page so the
   form card isn't squeezed into ~430px on desktop */
.signup .wrap { max-width: 1120px; }

.signup-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 900px) { .signup-grid { grid-template-columns: 1fr; } }

.signup-pitch h2 { font-size: clamp(26px, 3.6vw, 36px); }
.signup-pitch p { color: #B7C2D0; }
.signup-pitch .lede { font-size: 19px; color: #D6DEE7; }

.disclaimer {
  border-left: 3px solid var(--audit-teal-200);
  background: rgba(153, 246, 228, 0.06);
  padding: 16px 18px; border-radius: var(--radius-sm);
  color: #CBD5E1; font-size: 15px; margin: 22px 0 0;
}
.disclaimer strong { color: #E9EEF4; }

/* Form card sits on light for legibility of inputs */
.form-card {
  background: var(--white); color: var(--ink);
  border-radius: 14px; padding: clamp(22px, 3.5vw, 32px);
  box-shadow: var(--shadow-lg);
}
.form-card h3 { font-size: 20px; margin-bottom: 4px; }
.form-card .form-intro { color: var(--slate); font-size: 14.5px; margin-bottom: 22px; }

.field { margin-bottom: 22px; }
.field > label.field-label,
.field > legend.field-label {
  display: block; font-weight: 600; font-size: 15px; color: var(--ward-navy);
  margin-bottom: 8px; padding: 0;
}
.field .hint { font-size: 13.5px; color: var(--slate); margin: -2px 0 10px; }
.req { color: var(--audit-teal); font-weight: 700; }
.optional-tag { font-weight: 500; color: var(--slate); font-size: 13px; }

input[type="email"] {
  width: 100%; font: inherit; padding: 13px 14px;
  border: 1px solid var(--slate-light); border-radius: var(--radius-sm);
  background: var(--paper-2); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="email"]:focus {
  outline: none; border-color: var(--audit-teal);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18); background: var(--white);
}
input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-bg); }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Selectable option rows (radio) */
.option {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--slate-light); border-radius: var(--radius-sm);
  padding: 13px 15px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  background: var(--paper-2);
}
.option:hover { border-color: var(--slate); }
.option input { margin: 3px 0 0; accent-color: var(--audit-teal); width: 17px; height: 17px; flex: none; }
.option:has(input:checked) {
  border-color: var(--audit-teal); background: var(--audit-teal-50);
  box-shadow: inset 0 0 0 1px var(--audit-teal);
}
.option:has(input:focus-visible) { outline: 3px solid var(--audit-teal); outline-offset: 2px; }
.option .opt-text { font-size: 15px; color: var(--ink); }
.option .opt-text .opt-sub { display: block; font-size: 13.5px; color: var(--slate); margin-top: 2px; }
.option .opt-text strong { color: var(--ward-navy); }

/* Options grid: 2-up on wider viewports so the form column reads shorter
   and uses the extra width instead of stacking tall */
.options-grid { display: grid; gap: 10px; }
.options-grid .option { margin-bottom: 0; }
@media (min-width: 640px) {
  .options-grid { grid-template-columns: repeat(2, 1fr); }
  /* Odd last option (e.g. 3-item WTP group) spans both columns */
  .options-grid .option:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* Illustrative WTP microcopy */
.probe-note {
  font-size: 13.5px; color: var(--slate); background: var(--paper);
  border: 1px solid var(--slate-light); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px;
}
.skip-row { margin-top: 4px; }

/* Turnstile widget slot */
.turnstile-slot { margin-bottom: 18px; min-height: 8px; }
.turnstile-slot:empty { margin-bottom: 0; }

/* Consent microcopy — adjacent (directly under) submit button */
.consent {
  font-size: 13px; color: var(--slate); margin: 12px 2px 0; line-height: 1.5;
}

/* Honeypot — visually + AT hidden, still submittable by bots */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Inline form status region */
.form-status { margin-bottom: 18px; }
.form-status:empty { display: none; }
.alert {
  border-radius: var(--radius-sm); padding: 13px 15px; font-size: 14.5px;
  border: 1px solid transparent; display: flex; gap: 10px; align-items: flex-start;
}
.alert .ico { font-family: var(--font-mono); font-weight: 700; flex: none; }
.alert-error   { background: var(--danger-bg); border-color: #E7B4B4; color: #7A1A1F; }
.alert-error .ico { color: var(--danger); }
.alert-success { background: var(--audit-teal-50); border-color: var(--audit-teal-200); color: #0B4A44; }
.alert-success .ico { color: var(--audit-teal); }

/* Success replacement panel */
.form-done { text-align: left; }
.form-done .done-mark {
  width: 48px; height: 48px; border-radius: 12px; background: var(--audit-teal-50);
  border: 1px solid var(--audit-teal-200); color: var(--audit-teal);
  display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px;
}
.form-done h3 { font-size: 21px; }
.form-done p { color: var(--slate-strong); font-size: 15.5px; }
.field-error { color: var(--danger); font-size: 13px; margin-top: 6px; min-height: 0; }

/* =============================================================
   FAQ
   ============================================================= */
.faq-list { max-width: 760px; }
.faq-item {
  border: 1px solid var(--slate-light); border-radius: var(--radius);
  background: var(--white); margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  font-weight: 600; font-size: 17px; color: var(--ward-navy);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev {
  flex: none; width: 20px; height: 20px; color: var(--audit-teal);
  transition: transform .18s ease;
}
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 22px 20px; color: var(--slate-strong); font-size: 15.5px; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
  background: var(--ward-navy); color: #B7C2D0;
  padding-block: clamp(44px, 7vw, 72px); border-top: 1px solid var(--ward-navy-2);
}
.footer-cta {
  background: var(--ward-navy-2); border: 1px solid #35485f;
  border-radius: var(--radius); padding: 26px; margin-bottom: 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer-cta p { margin: 0; color: #E9EEF4; font-size: 18px; font-weight: 550; max-width: 42ch; }
.footer-cta .btn-primary { white-space: nowrap; }
.footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.footer-meta .brand { color: #E9EEF4; }
.footer-meta a { color: var(--audit-teal-200); }
.footer-meta .muted { color: #8595A8; }

/* Utility */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}