/* ==========================================================================
   Wannes Law — Consult Intake & Closing-Cost Estimator
   Token-driven, Emil-compliant motion. Scoped under #wl-intake.
   Brand: navy #0D324F / gold #A89559. Type: DM Serif Display + Nunito Sans
   (loaded by theme). No build step required.
   ========================================================================== */

#wl-intake {
  /* Brand */
  --wl-navy: #0D324F;
  --wl-navy-700: #0a283f;
  --wl-navy-900: #061826;
  --wl-gold: #A89559;          /* graphical accents only (rules, borders, stars) */
  --wl-gold-soft: #c7b783;
  --wl-gold-ink: #7a6a33;      /* gold TEXT on light bg — WCAG AA (>=4.5:1) */
  --wl-ink: #1c2530;
  --wl-muted: #64727f;         /* body-muted on #fff ~ 4.7:1 */
  --wl-faint: #606b76;         /* informational small text — AA on #fff */
  --wl-line: #e7ebef;
  --wl-line-2: #d6dde3;
  --wl-bg: #f4f6f8;
  --wl-card: #ffffff;
  --wl-tint: rgba(13, 50, 79, 0.045);
  --wl-danger: #c0182b;
  --wl-credit: #157a4a;

  /* Scale (mirrors synmek-modern token system) */
  --r-sm: 8px;
  --r-md: 13px;
  --r-lg: 20px;
  --r-full: 999px;
  --sh-sm: 0 1px 3px rgba(13,30,46,.06), 0 1px 2px rgba(13,30,46,.04);
  --sh-md: 0 6px 24px rgba(13,30,46,.08);
  --sh-lg: 0 22px 60px -28px rgba(6,24,38,.40);

  /* Motion (Emil) */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-ui: 220ms;

  color: var(--wl-ink);
  font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 380px at 50% -160px, rgba(13,50,79,.06), transparent 72%),
    var(--wl-bg);
  padding: 0 0 92px;
}

#wl-intake *,
#wl-intake *::before,
#wl-intake *::after { box-sizing: border-box; }

.wl-shell svg { width: 20px; height: 20px; flex: 0 0 auto; display: block; }

/* ---- Shell --------------------------------------------------------------- */
.wl-shell {
  max-width: 860px;
  margin: -58px auto 0;
  padding: 0 18px;
  position: relative;
  z-index: 3;
}

.wl-card {
  background: var(--wl-card);
  border: 1px solid var(--wl-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  position: relative;
  overflow: hidden;
}
.wl-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wl-gold-soft), var(--wl-gold), var(--wl-gold-soft));
}

/* ---- Progress (segmented) ------------------------------------------------ */
.wl-progress { padding: 36px 44px 24px; }
.wl-progress-bars {
  display: flex;
  gap: 7px;
  margin-bottom: 15px;
}
.wl-pb {
  flex: 1;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--wl-line);
  overflow: hidden;
  position: relative;
}
.wl-pb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wl-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}
.wl-pb.is-done::after { transform: scaleX(1); }
.wl-pb.is-active::after { transform: scaleX(.45); }
.wl-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.wl-progress-meta .wl-pm-step {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wl-navy);
}
.wl-progress-meta .wl-pm-step span { color: var(--wl-faint); font-weight: 700; }
.wl-progress-meta .wl-pm-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wl-gold-ink);
}

/* ---- Body / steps -------------------------------------------------------- */
.wl-body {
  padding: 38px 44px 40px;
  border-top: 1px solid var(--wl-line);
}

.wl-step { display: none; }
.wl-step.is-current { display: block; }

/* Stagger children in on step entry */
.wl-step.is-current > * {
  opacity: 0;
  transform: translateY(10px);
  animation: wl-rise 460ms var(--ease) forwards;
}
.wl-step.is-current > *:nth-child(1) { animation-delay: 20ms; }
.wl-step.is-current > *:nth-child(2) { animation-delay: 60ms; }
.wl-step.is-current > *:nth-child(3) { animation-delay: 100ms; }
.wl-step.is-current > *:nth-child(4) { animation-delay: 140ms; }
.wl-step.is-current > *:nth-child(5) { animation-delay: 180ms; }
.wl-step.is-current > *:nth-child(n+6) { animation-delay: 210ms; }
@keyframes wl-rise { to { opacity: 1; transform: none; } }

.wl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wl-gold-ink);
  margin: 6px 0 10px;
}
.wl-eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--wl-gold);
}

.wl-h {
  position: relative;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(29px, 3.7vw, 41px);
  line-height: 1.12;
  color: var(--wl-navy);
  margin: 4px 0 14px;
  letter-spacing: -.018em;
  text-wrap: balance;
}
/* Animated gold accent rule above the title */
.wl-h::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-soft));
  margin-bottom: 22px;
  transform-origin: left center;
}
.wl-step.is-current .wl-h {
  animation: wl-head-in 620ms var(--ease) 80ms both;
}
.wl-step.is-current .wl-h::before {
  animation: wl-rule-in 700ms var(--ease) 60ms both;
}
@keyframes wl-head-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wl-rule-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.wl-sub {
  color: var(--wl-muted);
  font-size: 16.5px;
  line-height: 1.66;
  margin: 0 0 30px;
  max-width: 54ch;
  letter-spacing: .002em;
}
.wl-step.is-current .wl-sub {
  animation: wl-head-in 620ms var(--ease) 170ms both;
}

.wl-q {
  font-size: 14px;
  font-weight: 800;
  color: var(--wl-navy);
  letter-spacing: .02em;
  margin: 44px 0 16px;
  padding-top: 28px;
  border-top: 1px solid var(--wl-line);
}
.wl-sub + .wl-q {
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
}
#wl-subs { margin-top: 0; }

/* ---- Option cards -------------------------------------------------------- */
.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 12px;
}
.wl-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.wl-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 22px 16px 18px;
  background: var(--wl-card);
  border: 2px solid var(--wl-line);
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: transform var(--t-ui) var(--ease),
              border-color var(--t-fast) ease,
              box-shadow var(--t-ui) ease,
              background var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .wl-opt:hover { transform: translateY(-2px); border-color: var(--wl-line-2); box-shadow: var(--sh-sm); }
}
.wl-opt:active { transform: scale(.985); }
.wl-opt:focus-visible {
  outline: none;
  border-color: var(--wl-navy);
  box-shadow: 0 0 0 4px rgba(13,50,79,.13);
}

.wl-opt .wl-ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wl-tint);
  color: var(--wl-navy);
  margin-bottom: 8px;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-ui) var(--ease);
}
.wl-opt .wl-ic svg { width: 21px; height: 21px; }
.wl-opt .wl-opt-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
}
.wl-opt .wl-opt-t {
  display: block;
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--wl-ink);
}
.wl-opt .wl-opt-d {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--wl-muted);
}
.wl-opt .wl-badge {
  display: inline-block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wl-gold-ink);
  background: rgba(168,149,89,.16);
  padding: 3px 9px;
  border-radius: var(--r-full);
}
.wl-opt .wl-tick {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--wl-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-ui) var(--ease);
}
.wl-opt .wl-tick svg { width: 12px; height: 12px; }

.wl-opt.is-selected {
  border-color: var(--wl-navy);
  background: var(--wl-tint);
  box-shadow: 0 0 0 1px var(--wl-navy);
}
.wl-opt.is-selected .wl-ic { background: var(--wl-navy); color: #fff; }
.wl-opt.is-selected .wl-tick { opacity: 1; transform: scale(1); }

/* Sub-route cards — same vocabulary as top-level, slightly tighter
   for visual hierarchy. Consistent grid = professional. */
.wl-grid.is-sub { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.wl-grid.is-sub .wl-opt { padding: 18px 14px 16px; }
.wl-grid.is-sub .wl-opt .wl-ic { width: 40px; height: 40px; margin-bottom: 6px; }
.wl-grid.is-sub .wl-opt .wl-opt-t { font-size: 14px; }
.wl-grid.is-sub .wl-opt .wl-badge { margin-top: 9px; }

/* ---- Segmented toggle (location etc.) ----------------------------------- */
.wl-seg {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wl-seg-opt {
  flex: 1 1 150px;
  padding: 14px 16px;
  border: 2px solid var(--wl-line);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--wl-ink);
  text-align: center;
  transition: transform var(--t-ui) var(--ease), border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .wl-seg-opt:hover { border-color: var(--wl-line-2); }
}
.wl-seg-opt:active { transform: scale(.985); }
.wl-seg-opt.is-selected {
  border-color: var(--wl-navy);
  background: var(--wl-navy);
  color: #fff;
}

/* ---- Inputs -------------------------------------------------------------- */
.wl-field { margin-bottom: 18px; }
.wl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wl-label {
  display: block;
  font-weight: 800;
  font-size: 13px;
  color: var(--wl-navy);
  margin-bottom: 8px;
}
.wl-label .wl-req { color: var(--wl-danger); }
.wl-hint { font-size: 12.5px; color: var(--wl-muted); margin: 6px 0 0; }

.wl-input,
.wl-select,
.wl-textarea {
  width: 100%;
  border: 2px solid var(--wl-line);
  border-radius: var(--r-md);
  padding: 14px 15px;
  font-size: 15.5px;
  font-family: inherit;
  color: var(--wl-ink);
  background: #fff;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.wl-textarea { min-height: 112px; resize: vertical; }
.wl-input::placeholder, .wl-textarea::placeholder { color: var(--wl-faint); }
.wl-input:focus, .wl-select:focus, .wl-textarea:focus {
  outline: none;
  border-color: var(--wl-navy);
  box-shadow: 0 0 0 4px rgba(13,50,79,.11);
}
.wl-money {
  position: relative;
}
.wl-money::before {
  content: "$";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--wl-faint);
  pointer-events: none;
}
.wl-money .wl-input { padding-left: 30px; }

.wl-invalid { border-color: var(--wl-danger) !important; box-shadow: 0 0 0 4px rgba(192,24,43,.10) !important; }
.wl-err { display: none; color: var(--wl-danger); font-size: 12.5px; font-weight: 700; margin-top: 7px; }
.wl-err.is-shown { display: block; }

/* ---- Checkbox card ------------------------------------------------------- */
.wl-checkcard {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 2px solid var(--wl-line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.wl-checkcard:hover { border-color: var(--wl-line-2); }
.wl-checkcard.is-selected { border-color: var(--wl-navy); background: var(--wl-tint); }
.wl-cbx {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--wl-line-2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 1px;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.wl-cbx svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--t-fast) ease; }
.wl-checkcard.is-selected .wl-cbx { background: var(--wl-navy); border-color: var(--wl-navy); }
.wl-checkcard.is-selected .wl-cbx svg { opacity: 1; }
.wl-checkcard > span:last-child { display: block; min-width: 0; }
.wl-checkcard .wl-cc-t { display: block; font-weight: 800; font-size: 14.5px; color: var(--wl-ink); }
.wl-checkcard .wl-cc-d { display: block; font-size: 12.5px; color: var(--wl-muted); margin-top: 3px; }

/* ---- Pills (urgency / format) ------------------------------------------- */
.wl-pills { display: flex; flex-wrap: wrap; gap: 11px; }
.wl-pill {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 2px solid var(--wl-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  background: #fff;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform var(--t-ui) var(--ease), border-color var(--t-fast) ease, box-shadow var(--t-ui) ease, background var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .wl-pill:hover { transform: translateY(-2px); border-color: var(--wl-line-2); box-shadow: var(--sh-sm); }
}
.wl-pill:active { transform: scale(.985); }
.wl-pill .wl-pill-ic {
  flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--wl-tint); color: var(--wl-navy);
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.wl-pill .wl-pill-ic svg { width: 18px; height: 18px; }
.wl-pill .wl-pill-t { display: block; font-weight: 800; font-size: 14px; color: var(--wl-ink); }
.wl-pill .wl-pill-d { display: block; font-size: 12px; color: var(--wl-muted); margin-top: 2px; }
.wl-pill.is-selected { border-color: var(--wl-navy); background: var(--wl-navy); box-shadow: 0 0 0 1px var(--wl-navy); }
.wl-pill.is-selected .wl-pill-t { color: #fff; }
.wl-pill.is-selected .wl-pill-d { color: rgba(255,255,255,.7); }
.wl-pill.is-selected .wl-pill-ic { background: rgba(255,255,255,.14); color: var(--wl-gold-soft); }

/* ---- Quote / breakdown card --------------------------------------------- */
.wl-quote {
  border: 1px solid var(--wl-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 4px 0 22px;
  box-shadow: var(--sh-md);
}
.wl-quote-head {
  background: linear-gradient(135deg, var(--wl-navy) 0%, var(--wl-navy-900) 100%);
  color: #fff;
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}
.wl-quote-head::after {
  content: "";
  position: absolute; right: -70px; top: -70px;
  width: 210px; height: 210px;
  background: radial-gradient(circle, rgba(168,149,89,.30), transparent 70%);
}
.wl-quote-head .wl-qh-tag {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--wl-gold-soft);
}
.wl-quote-head .wl-qh-name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 21px; margin: 5px 0 0;
}
.wl-tabs {
  display: flex;
  border-bottom: 1px solid var(--wl-line);
  background: #fff;
}
.wl-tab {
  flex: 1;
  padding: 15px 14px;
  border: none;
  background: none;
  font: inherit;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--wl-muted);
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast) ease;
}
.wl-tab::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--wl-gold);
  transform: scaleX(0);
  transition: transform var(--t-ui) var(--ease);
}
.wl-tab.is-active { color: var(--wl-navy); }
.wl-tab.is-active::after { transform: scaleX(1); }
.wl-tab-panel { display: none; padding: 22px 26px 24px; background: #fff; }
.wl-tab-panel.is-active { display: block; animation: wl-fade var(--t-ui) var(--ease); }
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }

.wl-line-head {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wl-faint);
  margin: 18px 0 8px;
}
.wl-li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--wl-line);
  font-size: 14.5px;
}
.wl-li:last-child { border-bottom: none; }
.wl-li .wl-li-l { color: var(--wl-ink); }
.wl-li .wl-li-l small { display: block; color: var(--wl-muted); font-size: 12px; margin-top: 2px; }
.wl-li .wl-li-v { font-weight: 800; white-space: nowrap; }
.wl-li.is-fee {
  background: var(--wl-tint);
  border: 1px solid var(--wl-line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 6px;
}
.wl-li.is-fee .wl-li-l { font-weight: 800; }
.wl-li.is-credit .wl-li-v { color: var(--wl-credit); }
.wl-li.is-total {
  border-top: 2px solid var(--wl-navy);
  border-bottom: none;
  margin-top: 6px;
  padding-top: 15px;
  font-size: 16px;
}
.wl-li.is-total .wl-li-v { font-size: 22px; color: var(--wl-navy); }
.wl-incl { list-style: none; padding: 0; margin: 8px 0 0; }
.wl-incl li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; color: var(--wl-ink);
  padding: 9px 0;
}
.wl-incl li svg { width: 17px; height: 17px; color: var(--wl-credit); margin-top: 2px; }
.wl-foot {
  font-size: 11.5px;
  color: var(--wl-faint);
  line-height: 1.6;
  padding: 14px 26px 20px;
  background: #fff;
  border-top: 1px solid var(--wl-line);
}
.wl-foot strong { color: var(--wl-muted); }

/* ---- Notices ------------------------------------------------------------- */
.wl-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 4px 0 18px;
}
.wl-notice svg { width: 18px; height: 18px; margin-top: 1px; }
.wl-notice.info { background: var(--wl-tint); color: var(--wl-navy); }
.wl-notice.warn { background: rgba(168,149,89,.13); color: #6e5f2e; }
.wl-notice.privacy { background: var(--wl-bg); color: var(--wl-muted); }

/* ---- Upload -------------------------------------------------------------- */
.wl-drop {
  border: 2px dashed var(--wl-line-2);
  border-radius: var(--r-md);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--wl-bg);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.wl-drop:hover, .wl-drop.is-drag { border-color: var(--wl-navy); background: var(--wl-tint); }
.wl-drop .wl-drop-ic svg { width: 26px; height: 26px; color: var(--wl-navy); margin: 0 auto 8px; }
.wl-drop .wl-drop-t { font-weight: 800; font-size: 14.5px; }
.wl-drop .wl-drop-d { font-size: 12.5px; color: var(--wl-muted); margin-top: 4px; }
.wl-files { list-style: none; padding: 0; margin: 13px 0 0; }
.wl-files li {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--wl-line);
  border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 13px; margin-bottom: 8px;
}
.wl-files li svg { width: 17px; height: 17px; color: var(--wl-navy); }
.wl-files li .wl-fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-files li .wl-fsize { color: var(--wl-muted); font-size: 12px; }
.wl-files li .wl-frm { border: none; background: none; cursor: pointer; color: var(--wl-danger); font-size: 16px; padding: 2px 6px; }

/* ---- Consent / Calendly -------------------------------------------------- */
.wl-check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; color: var(--wl-muted);
  line-height: 1.55; margin-bottom: 14px;
}
.wl-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--wl-navy); flex: 0 0 auto; }
.wl-check a { color: var(--wl-navy); font-weight: 700; }
.wl-cal {
  border: 1px solid var(--wl-line);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 640px;
  background: var(--wl-bg);
}
.wl-cb-toggle { text-align: center; margin: 16px 0 4px; }
.wl-cb-toggle button {
  background: none; border: none; cursor: pointer;
  color: var(--wl-navy); font-weight: 800; font-size: 13.5px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Summary ------------------------------------------------------------- */
.wl-summary {
  background: var(--wl-bg);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin-top: 24px;
}
.wl-summary h4 {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wl-gold-ink); font-weight: 800; margin: 0 0 13px;
}
.wl-summary dl { display: grid; grid-template-columns: 138px 1fr; gap: 9px 14px; margin: 0; font-size: 14px; }
.wl-summary dt { color: var(--wl-muted); font-weight: 700; }
.wl-summary dd { margin: 0; color: var(--wl-ink); font-weight: 700; }

/* ---- Trust band ---------------------------------------------------------- */
.wl-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  flex-wrap: wrap;
  text-align: center;
  margin: 22px 0 0;
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--wl-muted);
}
.wl-stars {
  color: var(--wl-gold);
  letter-spacing: 3px;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(168,149,89,.25);
}
.wl-trust-txt {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  line-height: 1.5;
}
.wl-trust strong { color: var(--wl-ink); font-weight: 800; }
.wl-trust .wl-dot { color: var(--wl-line-2); font-weight: 700; }
.wl-trust a {
  color: var(--wl-navy);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1.5px solid var(--wl-gold);
  padding-bottom: 1px;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.wl-trust a:hover { color: var(--wl-gold-ink); border-color: var(--wl-navy); }

/* ---- Buttons / nav ------------------------------------------------------- */
.wl-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--wl-line);
}
.wl-nav .wl-spacer { flex: 1; }
.wl-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  padding: 15px 32px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) ease, opacity var(--t-fast) ease, border-color var(--t-fast) ease;
}
.wl-btn:active { transform: scale(.97); }
.wl-btn-primary { background: var(--wl-gold); color: #fff; }
.wl-btn-primary:hover { background: #97834b; }
.wl-btn-navy { background: var(--wl-navy); color: #fff; }
.wl-btn-navy:hover { background: var(--wl-navy-700); }
.wl-btn-ghost { background: #fff; color: var(--wl-navy); border: 2px solid var(--wl-line-2); }
.wl-btn-ghost:hover { border-color: var(--wl-navy); }
.wl-btn[disabled] { opacity: .5; cursor: not-allowed; }
.wl-btn[disabled]:active { transform: none; }
.wl-btn-primary .wl-spin, .wl-btn-navy .wl-spin { display: none; }
.wl-btn.is-loading .wl-spin {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wl-rot .6s linear infinite;
}
@keyframes wl-rot { to { transform: rotate(360deg); } }

.wl-cta-row { display: flex; gap: 12px; margin-top: 18px; }
.wl-cta-row .wl-btn { flex: 1; }
.wl-btn svg { width: 17px; height: 17px; }

/* ---- Result actions (post-quote) ---------------------------------------- */
.wl-result-cta {
  margin-top: 22px;
  padding: 22px 22px 6px;
  border: 1px solid var(--wl-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fbfcfd 0%, #fff 60%);
}
.wl-result-cta .wl-trust { margin: 0 0 4px; padding: 6px 0 14px; }

/* Email-quote reveal */
.wl-emailq {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms var(--ease), opacity 240ms ease, margin 320ms var(--ease);
  margin-top: 0;
}
.wl-emailq.is-open {
  max-height: 560px;
  opacity: 1;
  margin-top: 16px;
}
.wl-emailq-inner {
  border-top: 1px dashed var(--wl-line-2);
  padding-top: 18px;
}
#wl-emailq-toggle.is-open { border-color: var(--wl-navy); color: var(--wl-navy); }

/* Footnote superscript refs */
.wl-fn-ref {
  font-size: 11px;
  font-weight: 800;
  color: var(--wl-gold-ink);
  margin-left: 3px;
  vertical-align: super;
  line-height: 0;
}

/* Disclaimer accordion */
.wl-disc {
  margin-top: 20px;
  border: 1px solid var(--wl-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
}
.wl-disc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wl-muted);
  background: var(--wl-bg);
  border-bottom: 1px solid var(--wl-line);
}
.wl-disc-head svg { width: 16px; height: 16px; color: var(--wl-gold); }
.wl-disc-item { border-bottom: 1px solid var(--wl-line); }
.wl-disc-item:last-of-type { border-bottom: none; }
.wl-disc-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--wl-ink);
}
.wl-disc-q .wl-fn {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(168,149,89,.20);
  color: var(--wl-gold-ink);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wl-disc-q .wl-fn.is-empty { background: var(--wl-tint); }
.wl-disc-title { flex: 1; font-weight: 700; font-size: 14px; }
.wl-disc-chev {
  flex: 0 0 auto;
  color: var(--wl-faint);
  transition: transform var(--t-ui) var(--ease);
}
.wl-disc-chev svg { width: 18px; height: 18px; }
.wl-disc-q[aria-expanded="true"] .wl-disc-chev { transform: rotate(180deg); }
.wl-disc-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms var(--ease);
}
.wl-disc-inner {
  padding: 0 18px 16px 52px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--wl-muted);
}
.wl-disc-note {
  margin: 0;
  padding: 13px 18px;
  font-size: 11.5px;
  color: var(--wl-faint);
  background: var(--wl-bg);
  border-top: 1px solid var(--wl-line);
}

/* ---- Success ------------------------------------------------------------- */
.wl-done { text-align: center; padding: 34px 12px 18px; }
.wl-done-ring {
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(21,122,74,.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--wl-credit);
  animation: wl-pop 480ms var(--ease) both;
}
.wl-done-ring svg { width: 38px; height: 38px; }
@keyframes wl-pop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.wl-done h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  color: var(--wl-navy);
  font-size: 30px;
  margin: 0 0 10px;
}
.wl-done p { color: var(--wl-muted); font-size: 16px; max-width: 460px; margin: 0 auto 8px; }

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

/* ---- Accessibility (WCAG 2.2 AA) ---------------------------------------- */
/* SC 2.4.7 / 2.4.13 — consistent, clearly visible focus indicator */
#wl-intake a:focus-visible,
#wl-intake button:focus-visible,
#wl-intake input:focus-visible,
#wl-intake select:focus-visible,
#wl-intake textarea:focus-visible,
#wl-intake [tabindex]:focus-visible {
  outline: 3px solid var(--wl-navy);
  outline-offset: 2px;
  border-radius: 5px;
}
#wl-intake .wl-opt:focus-visible,
#wl-intake .wl-pill:focus-visible,
#wl-intake .wl-seg-opt:focus-visible { outline-offset: 3px; }
/* Keyboard focus inside a radiogroup also reads as the active choice */
#wl-intake [role="radio"]:focus-visible { box-shadow: 0 0 0 4px rgba(13,50,79,.16); }

/* SC 2.5.8 — minimum target size (>= 24x24 CSS px) */
.wl-frm { min-width: 30px; min-height: 30px; }
.wl-disc-q { min-height: 44px; }
.wl-cb-toggle button, .wl-trust a, .wl-tab, #wl-cb { min-height: 28px; }

/* Windows High Contrast / forced-colors: keep selection perceivable */
@media (forced-colors: active) {
  .wl-opt.is-selected,
  .wl-pill.is-selected,
  .wl-seg-opt.is-selected,
  .wl-checkcard.is-selected { outline: 2px solid Highlight; }
  .wl-pb.is-done::after, .wl-pb.is-active::after { background: Highlight; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  #wl-intake { padding-bottom: 56px; }
  .wl-shell { margin-top: -28px; }
  .wl-progress { padding: 26px 20px 18px; }
  .wl-body { padding: 28px 20px 30px; }
  .wl-field-row { grid-template-columns: 1fr; }
  .wl-grid, .wl-grid.cols-2, .wl-grid.is-sub { grid-template-columns: 1fr 1fr; }
  .wl-summary dl { grid-template-columns: 110px 1fr; }
  .wl-nav { flex-direction: column-reverse; }
  .wl-nav .wl-btn { width: 100%; }
  .wl-nav .wl-spacer { display: none; }
  .wl-cta-row { flex-direction: column; }
}
@media (max-width: 440px) {
  .wl-grid, .wl-grid.cols-2, .wl-grid.is-sub { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #wl-intake *, #wl-intake *::before, #wl-intake *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .wl-step.is-current > * { opacity: 1; transform: none; }
  .wl-h::before { transform: none !important; opacity: 1 !important; }
}