/* ==========================================================================
   CONSULTATION / BOOK A DEMO
   ==========================================================================

   Brightness without breaking the theme.

   The site loads style-dark.css unconditionally and has no light toggle, so
   it is permanently dark, and the header is transparent with white nav text.
   A white background here made the navigation unreadable on /book-demo, where
   this block is the first thing on the page.

   The backdrop is therefore the homepage background exactly (#090931, the
   theme's --webex-secondary-color). An azure band was tried first and read
   as a different website dropped into the page.

   The lift comes from everything in front of the backdrop instead: a solid
   white form card as the focal point, bright azure accents from the logo,
   and a bloom that blends the theme primary (#3b38eb) with that azure.

   Typography follows the site — Mulish for headings, Roboto for body. An
   earlier pass imported Geist and Instrument Serif, which made this block
   read as though it came from a different website.

   Scoped under .wm-consult with tokens set on the element, so nothing here
   depends on, or leaks into, the template stylesheet.
   ========================================================================== */

.wm-consult {
  --azure-200: #b8e3fa;
  --azure-300: #5fcdfb;
  --azure-400: #29b6f0;
  --azure-500: #0d95d8;
  --azure-600: #0079b8;   /* 4.74:1 with white — the CTA colour */
  --azure-700: #00618f;
  --ink-900: #0e141c;
  --ink-700: #2b3a49;
  --ink-500: #55677a;
  --ink-300: #93a3b4;
  --line: #dbe6ef;
  --success: #197f52;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Exactly the homepage background. style-dark.css sets body to
     --webex-secondary-color: #090931, and an azure band here read as a
     different site. The brightness comes from the white card and the
     accents instead, not from the backdrop. */
  background-color: #090931 !important;
  background-image: none !important;
  color: #c3c8e6;
  font-family: 'Roboto', sans-serif;
  padding-block: clamp(3.25rem, 1.5rem + 5vw, 5.75rem);
}

.wm-consult *, .wm-consult *::before, .wm-consult *::after { box-sizing: border-box; }

/* Colour bloom behind the form so the eye lands on the white card. */
.wm-consult::before {
  content: '';
  position: absolute;
  inset-block-start: -28%;
  inset-inline-end: -12%;
  width: 48rem;
  height: 48rem;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(41 182 240 / .16) 0%, transparent 55%),
    radial-gradient(circle, rgb(59 56 235 / .38) 0%, transparent 68%);
}

/* Bright rule across the top edge — a deliberate change of gear coming out
   of the section above. */
.wm-consult::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--azure-500), var(--azure-300) 50%, var(--azure-500));
}

.wm-consult__container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, .5rem + 3vw, 2.5rem);
}

.wm-consult__grid {
  display: grid;
  gap: 2.75rem;
}

@media (width >= 62rem) {
  .wm-consult__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: center;
  }
}

/* --- Left column -------------------------------------------------------------- */

.wm-consult__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.125rem;
  padding: .375rem .875rem .375rem .75rem;
  border-radius: 999px;
  background-color: rgb(41 182 240 / .16);
  border: 1px solid rgb(95 205 251 / .38);
  font-family: 'Mulish', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azure-300) !important;
}

.wm-consult__eyebrow::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: var(--azure-300);
  box-shadow: 0 0 0 3px rgb(95 205 251 / .25);
}

.wm-consult__title {
  margin: 0;
  font-family: 'Mulish', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem) !important;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #ffffff !important;
  max-width: 15ch;
}

.wm-consult__title em {
  font-style: normal;
  color: var(--azure-300) !important;
}

.wm-consult__lead {
  margin: 1.125rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #b6bcdf !important;
  max-width: 42ch;
}

/* What happens next. The block previously had a single oversized headline
   and nothing else, wasting the most persuasive space on the page. */
.wm-consult__steps {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

/* Each li stays a plain block. Flex and grid both promote every inline child
   to its own item, which split the <strong> lead-in away from the rest of
   its sentence. Hanging the counter out of flow keeps the text in one run. */
.wm-consult__steps li {
  position: relative;
  padding-inline-start: 2.5rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: #b6bcdf !important;
}

.wm-consult__steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -.05em;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background-color: var(--azure-400);
  color: #090931;
  font-family: 'Mulish', sans-serif;
  font-size: .75rem;
  font-weight: 800;
}

.wm-consult__steps strong {
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  color: #ffffff !important;
}

.wm-consult__aside {
  margin-block-start: 1.875rem;
  padding-block-start: 1.375rem;
  border-top: 1px solid rgb(255 255 255 / .14);
  font-size: .875rem;
  color: #9aa1cb !important;
}

.wm-consult__aside a {
  color: var(--azure-300) !important;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgb(95 205 251 / .4);
  transition: border-color .15s ease;
}

.wm-consult__aside a:hover { border-bottom-color: var(--azure-300); }

/* --- Form ----------------------------------------------------------------------
   Solid white on the indigo backdrop. This is the brightest thing in the section
   and the thing the eye should land on. */

.wm-consult__form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background-color: #fff;
  border-radius: 16px;
  box-shadow:
    0 2px 4px rgb(4 4 20 / .35),
    0 18px 40px -10px rgb(4 4 20 / .6),
    0 40px 80px -30px rgb(41 182 240 / .3);
}

.wm-consult__row {
  display: grid;
  gap: 1.125rem;
  margin-block-end: 1.125rem;
}

@media (width >= 34rem) {
  .wm-consult__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wm-field { display: flex; flex-direction: column; gap: .4375rem; }

/* Real labels. The form was placeholder-only, which loses the label the
   moment someone types, and screen readers do not announce placeholders
   reliably. */
.wm-field label {
  font-family: 'Mulish', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink-900) !important;
}

.wm-field label span { color: var(--azure-600); }

.wm-field input,
.wm-field select,
.wm-field textarea {
  width: 100%;
  padding: .75rem .875rem;
  font-family: 'Roboto', sans-serif;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-900) !important;
  background-color: #f7fafc !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.wm-field input::placeholder,
.wm-field textarea::placeholder { color: var(--ink-300); }

.wm-field input:focus,
.wm-field select:focus,
.wm-field textarea:focus {
  outline: none;
  background-color: #fff !important;
  border-color: var(--azure-500) !important;
  box-shadow: 0 0 0 3px rgb(13 149 216 / .18);
}

.wm-field textarea { resize: vertical; min-height: 6.5rem; }

/* Native selects size their own line box, which clipped the option text at
   the padding used for the text inputs. */
.wm-field select {
  min-height: 2.9375rem;
  padding-block: .625rem;
  padding-inline-end: 2.5rem;
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.wm-field select optgroup {
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  font-style: normal;
  color: var(--ink-500);
}

.wm-field select option { color: var(--ink-900); font-weight: 400; }

.wm-field__hint { font-size: .75rem; color: var(--ink-300) !important; }

/* --- Submit --------------------------------------------------------------------
   Deep azure with white text: 4.74:1, so it clears AA while still being the
   most saturated thing on the card. The coloured shadow makes it feel bright
   without weakening the contrast. */

.wm-consult__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .9375rem 1.75rem;
  font-family: 'Mulish', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  color: #fff !important;
  background-color: var(--azure-600);
  border: 1px solid var(--azure-600);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 18px -4px rgb(0 121 184 / .5);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

@media (width >= 34rem) { .wm-consult__submit { width: auto; } }

.wm-consult__submit:hover {
  background-color: var(--azure-700);
  border-color: var(--azure-700);
  box-shadow: 0 10px 26px -4px rgb(0 121 184 / .6);
  transform: translateY(-1px);
}

.wm-consult__submit:focus-visible {
  outline: 3px solid var(--azure-500);
  outline-offset: 2px;
}

.wm-consult__reassure {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: 1rem;
  margin-block-end: 0;
  font-size: .8125rem;
  color: var(--ink-500) !important;
}

.wm-consult__reassure svg {
  width: .9375rem;
  height: .9375rem;
  color: var(--success);
  flex-shrink: 0;
}

/* --- Feedback -------------------------------------------------------------------- */

.wm-consult__alert,
.wm-consult__errors {
  margin-block-end: 1.25rem;
  padding: .875rem 1rem;
  border-radius: 8px;
  font-size: .875rem;
}

.wm-consult__alert {
  border: 1px solid rgb(25 127 82 / .3);
  background-color: rgb(25 127 82 / .08);
  color: #14603e !important;
}

.wm-consult__errors {
  border: 1px solid rgb(179 52 31 / .3);
  background-color: rgb(179 52 31 / .07);
  color: #8c2818 !important;
}

.wm-consult__errors ul { margin: .375rem 0 0; padding-inline-start: 1.1rem; }

/* --- Standalone page -----------------------------------------------------------
   On /book-demo this block is the first thing on the page and the header is
   transparent over it, so it needs padding to clear it. Included mid-page
   elsewhere, where that space would just be a gap. */

.wm-consult--standalone {
  padding-block-start: calc(6.5rem + clamp(1rem, .5rem + 2vw, 2.5rem));
}

@media (prefers-reduced-motion: reduce) {
  .wm-consult *, .wm-consult *::before, .wm-consult *::after {
    transition-duration: .01ms !important;
  }
  .wm-consult__submit:hover { transform: none; }
}