/**
 * DocuPOW — Contact / Request a Demo page styles
 * (page-templates/contact.php only).
 *
 * Scope: everything lives under .page-contact (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this
 * file adds the hero + form-card layout, the full form UI (inputs, selects
 * with the inline-SVG chevron wrapper, validation + success states), the
 * obsidian self-serve band, and the hero entrance motion only. NO gradient
 * borders on this page (budget 0): the form card is a flat white card —
 * hairline border + the house subtle card shadow (the export's shadow-sm).
 *
 * Contrast contract (tokens only, plus ONE documented raw hex — zero new
 * undocumented values):
 *  - Eyebrow on WHITE (S1) is 13px mono semibold var(--techblue) per the
 *    export's text-primary — 4.54:1 on white (AA).
 *  - h1 / benefit text / labels are var(--ink) — 16.68:1 on white (AA).
 *  - Lead, reassurance line and the mono trust caption are
 *    var(--text-muted) — 9.34:1 on white (AA).
 *  - Error text and invalid borders use var(--err) (#D93838) — 4.98:1 on
 *    white (AA at the 12px mono error size); never signalled by colour
 *    alone (per-field text message + aria-invalid).
 *  - #0A7B56 is the ONLY raw hex in this sheet: the house deep success
 *    green (manifest-documented alongside #276CC1), used solely for the
 *    48px confirmation glyph — a decorative, non-text accent (the
 *    var(--ink) heading carries the meaning).
 *  - S2 (obsidian): h2 var(--white) 17.4:1; eyebrow/lead
 *    var(--text-muted-dark) 7.58:1 (AA). The ghost CTA is white text +
 *    white border on obsidian (17.4:1 — AA); hover inverts to a white fill
 *    with var(--obsidian) text (16.9:1 — AA), per the export's treatment.
 *
 * Motion contract (transform/opacity only — STANDARD tier):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if contact.js never runs) everything is visible. NO floats, NO
 *    loops — the ONE bespoke moment is the hero .is-ready entrance.
 *  - Validation and the success swap are FUNCTIONAL states (class/[hidden]
 *    toggles), never motion-gated — the form works identically under
 *    reduced motion.
 *  - A final prefers-reduced-motion: reduce block forces every animated
 *    element fully visible and static (belt-and-braces over main.css).
 */

/* =========================================================================
   Page scope — light canvas, section rhythm
   ========================================================================= */
.page-contact {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* 96px section padding on desktop, 64px under 768. */
.page-contact__hero,
.page-contact__selfserve {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-contact__hero,
  .page-contact__selfserve {
    padding-block: var(--space-6);
  }
}

/* =========================================================================
   S1 — Hero + form (copy left / card right; copy-first stacked <1024)
   ========================================================================= */

/* The NAMED grid wrapper (never .dp-container): 2 equal columns, top-aligned
   (items-start per the export — the card is taller than the copy). */
.page-contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
}

.page-contact__grid > * {
  min-width: 0;
}

/* <1024 — single column; copy stacks first (source order). */
@media (max-width: 1023.98px) {
  .page-contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* Mono eyebrow — Tech Blue on white (4.54:1 — AA at 13px mono semibold). */
.page-contact__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-2);
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Ink per the export. */
.page-contact__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* body-lg lead (18/1.6), muted per the export's on-surface-variant. */
.page-contact__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 576px;
  margin-bottom: var(--space-4);
}

/* Benefits — 4 rows, 12px row gap per the export's gap-md list rhythm. */
.page-contact__benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--space-3);
}

/* Row: filled 20px techblue check-circle + 16px Ink text (16.68:1 — AA). */
.page-contact__benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

.page-contact__benefit svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px; /* optical alignment with the 1.6 first line */
  color: var(--techblue);
}

/* MASTER-PLAN ADDITION (5.10) — the muted 16px reassurance line. */
.page-contact__reassure {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Hairline trust row — 16px lock glyph + mono 13 caption (9.34:1 — AA). */
.page-contact__secure {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

.page-contact__secure svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

/* =========================================================================
   Form card — flat white card, hairline border, NO gradient border
   ========================================================================= */

/* 12px radius = the export's rounded-xl, 32px padding, the house subtle
   card shadow (the export's shadow-sm — sanctioned: dp-card carries the
   same token). NO gradient border (budget 0). */
.page-contact__card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  box-shadow: var(--shadow);
}

/* headline-md (24/1.3/500) in Ink. */
.page-contact__card-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* Field stack — 24px rhythm between rows per the export's gap-md. */
.page-contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Two-up rows (name pair, company/title pair); 1-col under 768. */
.page-contact__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-contact__row > * {
  min-width: 0;
}

@media (max-width: 767.98px) {
  .page-contact__row {
    grid-template-columns: 1fr;
  }
}

/* Label above control, 8px apart. */
.page-contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Labels — Inter Medium 14 in Ink per the design system. */
.page-contact__label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

/* Inputs / textarea / selects — white, hairline border, 8px radius, 12px
   padding. Focus (mouse AND keyboard): the 2px techblue ring via
   box-shadow; keyboard focus additionally keeps the global :focus-visible
   outline from main.css. */
.page-contact__input,
.page-contact__select {
  width: 100%;
  padding: 12px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.page-contact__input:focus,
.page-contact__input:focus-visible,
.page-contact__select:focus,
.page-contact__select:focus-visible {
  outline: none;
  border-color: var(--techblue);
  box-shadow: 0 0 0 2px var(--techblue);
}

/* Textarea — fixed-resize per the export's resize-none. */
.page-contact__textarea {
  resize: none;
  min-height: 96px;
}

/* Select wrapper — positions the inline-SVG chevron (a background SVG
   data-URI is FORBIDDEN here: data-URIs dodge the token/no-raw-hex audit),
   so the chevron is a real aria-hidden inline SVG in the markup. */
.page-contact__select-wrap {
  position: relative;
  display: block;
}

.page-contact__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-5); /* room for the chevron */
}

.page-contact__chevron {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  translate: 0 -50%;
  pointer-events: none;
  color: var(--text-muted);
}

.page-contact__chevron svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* --- Validation states (FUNCTIONAL — never motion-gated) ---------------- */

/* Invalid control: 1px var(--err) border; the ring stays techblue on focus
   so the fix-it affordance is unchanged. Never colour-alone: the per-field
   message below + aria-invalid carry the state. */
.page-contact__input.is-invalid,
.page-contact__select.is-invalid,
.page-contact__consent-box.is-invalid {
  border-color: var(--err);
}

/* Per-field error message — 12px mono (the design system's hint size/face)
   in var(--err): 4.98:1 on white (AA). Hidden until contact.js fills it. */
.page-contact__error {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--err);
}

.page-contact__error[hidden] {
  display: none !important;
}

/* --- Consent row --------------------------------------------------------- */
.page-contact__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Native checkbox, brand-tinted; 18px box with a 2px top nudge to sit on
   the label's first line. */
.page-contact__consent-box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--techblue);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.page-contact__consent-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* 14px muted consent copy (9.34:1 — AA). */
.page-contact__consent-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

/* Privacy Policy link — techblue on white (4.54:1 — AA), underline on
   hover/focus so the affordance never relies on colour alone. */
.page-contact__privacy-link {
  color: var(--techblue);
  font-weight: 500;
}

.page-contact__privacy-link:hover,
.page-contact__privacy-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Optional newsletter opt-in — a SEPARATE choice from the required contact
   consent above it; a hairline + top padding groups it apart so the two are
   never read as one. No error row (it is optional, unchecked by default). */
.page-contact__consent--newsletter {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* --- Honeypot — visually hidden (single.php clip pattern) ---------------- */
.page-contact__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Full-width primary submit — colours/hover come from .dp-btn--primary. */
.page-contact__submit {
  width: 100%;
  padding-block: var(--space-2);
}

/* --- Designed success state (replaces the form; the card stays) ---------- */
.page-contact__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding-block: var(--space-5);
  outline: none; /* receives programmatic focus; the aria-live announcement + visible state change carry it */
}

.page-contact__success[hidden] {
  display: none !important;
}

.page-contact__form-wrap[hidden] {
  display: none !important;
}

/* 48px confirmation glyph — #0A7B56, the house deep success green
   (manifest-documented; see the sheet docblock). Decorative, non-text
   accent: the Ink heading below carries the meaning. */
.page-contact__success-icon {
  display: block;
  color: #0A7B56;
}

.page-contact__success-icon svg {
  display: block;
  width: 48px;
  height: 48px;
}

/* headline-md–styled confirmation heading in Ink. */
.page-contact__success-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}

/* The same one-business-day promise as the hero reassurance line. */
.page-contact__success-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =========================================================================
   S2 — Self-serve band (obsidian, hairline y-borders, copy / ghost CTA)
   ========================================================================= */
.page-contact__selfserve {
  background-color: var(--obsidian);
  border-block: 1px solid var(--border-dark);
}

/* Copy left / CTA right, space-between; stacks under 768. */
.page-contact__selfserve-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

@media (max-width: 767.98px) {
  .page-contact__selfserve-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

.page-contact__selfserve-copy {
  max-width: 672px;
}

/* Mono eyebrow on the dark band — var(--text-muted-dark) is 7.58:1 (AA). */
.page-contact__selfserve-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  margin-bottom: var(--space-2);
}

/* headline-lg (36/1.2/600) in white — 17.4:1 (AA). */
.page-contact__selfserve-title {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-2);
}

/* body-lg lead — var(--text-muted-dark) is 7.58:1 on obsidian (AA). */
.page-contact__selfserve-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted-dark);
}

/* Ghost-on-dark CTA (the export's inverted-hover outline treatment):
   white text + 1px white border on obsidian (17.4:1 — AA); hover/focus
   INVERTS to a white fill with obsidian text (16.9:1 — AA). Sizing and
   the transform transition come from .dp-btn. */
.page-contact__trial-btn {
  flex: none;
  background-color: transparent;
  color: var(--white);
  border-color: var(--white);
  padding-block: var(--space-2);
}

.page-contact__trial-btn:hover,
.page-contact__trial-btn:focus-visible {
  background-color: var(--white);
  color: var(--obsidian);
  border-color: var(--white);
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 36->28
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-contact__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-contact__selfserve-title {
    font-size: 28px;
    line-height: 1.2;
  }
}

/* =========================================================================
   Motion — entrance base states (no-preference only)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — contact.js adds .is-ready on init (double rAF); copy
     rises in with 0/80/160/240ms delays and the form card fades alongside
     the lead. The success/validation states are NOT in here — they are
     functional and never motion-gated. */
  .page-contact__hero .page-contact__eyebrow,
  .page-contact__hero .page-contact__title,
  .page-contact__hero .page-contact__lead,
  .page-contact__hero .page-contact__benefits,
  .page-contact__hero .page-contact__reassure,
  .page-contact__hero .page-contact__secure,
  .page-contact__hero .page-contact__card {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-contact__hero .page-contact__title {
    transition-delay: 80ms;
  }

  .page-contact__hero .page-contact__lead,
  .page-contact__hero .page-contact__card {
    transition-delay: 160ms;
  }

  .page-contact__hero .page-contact__benefits,
  .page-contact__hero .page-contact__reassure,
  .page-contact__hero .page-contact__secure {
    transition-delay: 240ms;
  }

  .page-contact__hero.is-ready .page-contact__eyebrow,
  .page-contact__hero.is-ready .page-contact__title,
  .page-contact__hero.is-ready .page-contact__lead,
  .page-contact__hero.is-ready .page-contact__benefits,
  .page-contact__hero.is-ready .page-contact__reassure,
  .page-contact__hero.is-ready .page-contact__secure,
  .page-contact__hero.is-ready .page-contact__card {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static; the form's
   validation/success behaviour is untouched (functional, not motion)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-contact__hero .page-contact__eyebrow,
  .page-contact__hero .page-contact__title,
  .page-contact__hero .page-contact__lead,
  .page-contact__hero .page-contact__benefits,
  .page-contact__hero .page-contact__reassure,
  .page-contact__hero .page-contact__secure,
  .page-contact__hero .page-contact__card {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own.
   Named here so every markup class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-contact__copy {
  /* no-op: block-flow copy column; layout comes from __grid */
}

.page-contact__card-live {
  /* no-op: the aria-live wrapper around the form/success swap */
}

.page-contact__form-wrap {
  /* no-op: the [hidden]-toggled wrapper (card h2 + form) — see [hidden] rule above */
}

/* -------------------------------------------------------------------------
   Embedded Fluent Forms Contact / Demo form (form ID 1). The lead pipeline is
   Fluent Forms-based, so if the Contact form is rendered under .page-contact
   via [fluentform], theme its stable public classes to match the native
   controls above (incl. the "How did you hear about us?" dropdown → `source`).
   Best-effort overrides — they degrade gracefully if FF's classes change and
   never touch the native .page-contact__* stub (different class names).
   ------------------------------------------------------------------------- */
.page-contact .ff-el-group {
  margin-bottom: var(--space-3);
}

/* Labels — Inter Medium 14 in Ink, matching .page-contact__label. */
.page-contact .ff-el-input--label label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

/* Inputs / selects / textareas — the designed control skin (white, 1px
   --border, 8px radius, 12px padding), matching .page-contact__select. */
.page-contact .ff-el-form-control {
  width: 100%;
  padding: 12px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

/* Focus ring — 2px techblue, matching the site's form focus affordance. */
.page-contact .ff-el-form-control:focus,
.page-contact .ff-el-form-control:focus-visible {
  outline: 2px solid var(--techblue);
  outline-offset: 1px;
  border-color: var(--techblue);
}

/* Consent / opt-in checkbox rows — 14 muted copy. */
.page-contact .ff-el-form-check-label,
.page-contact .ff-el-form-check label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

/* Submit — full-width primary; colours/hover come from the FF button base. */
.page-contact .ff-btn-submit {
  width: 100%;
  padding-block: var(--space-2);
}

/* -------------------------------------------------------------------------
   Contact card fallback — shown only when the Fluent Forms plugin is inactive
   or the Contact form ID is unset (never a dead form). A calm email hand-off.
   ------------------------------------------------------------------------- */
.page-contact__fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.page-contact__fallback-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Legal line beneath the Fluent Forms Contact form — theme markup (not part
   of the FF form), mirroring the Trial page's .page-trial__terms: 14 muted,
   centered; Terms/Privacy links in techblue with underline on hover/focus.
   ------------------------------------------------------------------------- */
.page-contact__terms {
  margin-top: var(--space-3);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  text-align: center;
}

.page-contact__terms-link {
  color: var(--techblue);
  font-weight: 500;
}

.page-contact__terms-link:hover,
.page-contact__terms-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}