/* Ablement components. Every colour, size and radius is a token from tokens.css. */

.wl { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Button */
.wl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-6);
  font-family: var(--font-body); font-size: 20px; line-height: 24px; font-weight: 600;
  border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background-color 150ms, border-color 150ms;
}
.wl-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wl-btn--primary { background: var(--green); color: var(--on-green); border-color: var(--green); }
.wl-btn--primary:hover { background: var(--green-deep); border-color: var(--green-deep); }
.wl-btn--call { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }
.wl-btn--call:hover { filter: brightness(0.94); }
.wl-btn--secondary { background: transparent; color: var(--green-text); border-color: var(--line-strong); }
.wl-btn--secondary:hover { border-color: var(--green-text); }
.wl-btn--lg { min-height: var(--control-lg); padding: 0 var(--space-7); font-size: 22px; }
.wl-btn svg { width: 24px; height: 24px; flex: none; }

/* Wordmark */
.wl-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.wl-wordmark svg { display: block; height: 1em; width: 1em; }
.wl-wordmark__name { display:block; height: 1.05em; width: auto; }
.wl-wordmark__name .wm-ink { fill: var(--ink); }
.wl-wordmark__name .wm-green { fill: var(--green); }

/* Fact */
.wl-fact { background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--space-6); max-width: 420px; }
.wl-fact__figure { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 64px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0 0 var(--space-3); }
.wl-fact__figure { color: var(--green-deep); }
.wl-fact__figure em { font-style: normal; color: var(--ink); }
.wl-fact__claim { font-size: 20px; line-height: 30px; margin: 0 0 var(--space-4); }
.wl-fact__source { font-size: 18px; line-height: 27px; color: var(--ink-muted); margin: 0; }

/* Step */
.wl-step { display: flex; flex-direction: column; gap: var(--space-4); max-width: 360px; }
.wl-step__num { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--green-text); border: 2px solid var(--green-soft); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.wl-step__title { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 34px; margin: 0; text-wrap: balance; }
.wl-step__body { font-size: 20px; line-height: 30px; margin: 0; }

/* PhoneCard */
.wl-phone { display: flex; align-items: center; gap: var(--space-5); background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); max-width: 560px; }
.wl-phone__photo { width: 88px; height: 88px; border-radius: var(--radius-pill); background: var(--line); flex: none; object-fit: cover; }
.wl-phone__name { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 30px; margin: 0; }
.wl-phone__role { font-size: 18px; line-height: 27px; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.wl-phone__number { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 34px; color: var(--green-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.wl-phone__number:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.wl-phone__number svg { width: 28px; height: 28px; }
.wl-phone__hours { font-size: 18px; line-height: 27px; color: var(--ink-muted); margin: 0; }

/* Field */
.wl-field { display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.wl-field__label { font-size: 20px; line-height: 28px; font-weight: 600; }
.wl-field__hint { font-size: 18px; line-height: 27px; color: var(--ink-muted); }
.wl-field__input { min-height: var(--control-md); padding: 0 var(--space-4); font: inherit; font-size: 20px; line-height: 28px; color: var(--ink); background: var(--surface-raised); border: 2px solid var(--line-strong); border-radius: var(--radius-md); }
.wl-field__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--green-text); }
.wl-field--error .wl-field__input { border-color: var(--danger); }
.wl-field__error { font-size: 18px; line-height: 27px; color: var(--danger); font-weight: 600; }

/* Eyebrow: the deck's uppercase green label above a section title */
.wl-eyebrow { font-family: var(--font-body); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-text); margin: 0 0 var(--space-2); }

/* Card: the deck's white panel with a Faded Gray edge */
.wl-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); }