/* ============================================================
   inquiry-redesign.css
   Standalone page (no shared nav/footer — Layout=null on Inquiry.cshtml),
   so everything the page needs lives here. Two-step demo-request form +
   right-side copy panel, per the "Talk2Amy Registration" redesign.
   ============================================================ */

:root {
  --inq-blue: #1b6bd0;
  --inq-blue-dark: #14549f;
  --inq-accent: #2d9cdb;
  --inq-ink: #16283c;
  --inq-muted: #5a6b7d;
  --inq-muted-2: #8194a7;
  --inq-line: #d7e2ec;
  --inq-green: #2bb673;
}

html, body.t2a-inq {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(160deg, #f2f8fb 0%, #e8f2f8 60%, #eaf5f0 100%);
  font-family: 'Figtree', 'Noto Sans', sans-serif;
  color: var(--inq-ink);
}
.t2a-inq *, .t2a-inq *::before, .t2a-inq *::after { box-sizing: border-box; }
.t2a-inq a { color: var(--inq-blue); text-decoration: none; }
.t2a-inq a:hover { color: var(--inq-blue-dark); }
.t2a-inq input::placeholder { color: #9db0c2; opacity: 1; }
.t2a-inq input:focus { outline: none; border-color: var(--inq-accent) !important; box-shadow: 0 0 0 3px rgba(45, 156, 219, 0.15); }

.t2a-inq-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}

/* Close (X) — lets visitors leave the form without submitting. Fixed so it
   stays in the top-right corner regardless of scroll on short viewports. */
.t2a-inq-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--inq-muted);
  box-shadow: 0 4px 16px rgba(22, 40, 60, 0.12);
  transition: color 0.15s ease, transform 0.15s ease;
}
.t2a-inq-close:hover { color: var(--inq-ink); transform: scale(1.06); }
.t2a-inq-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
  max-width: 1060px;
  width: 100%;
}

/* ---------- Form card ---------- */
.t2a-inq-card {
  /* min-width would push past the 16px page gutters on sub-380px phones;
     flex-basis alone provides the desktop width */
  flex: 1 1 460px;
  min-width: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(22, 40, 60, 0.10);
  padding: 44px 44px 40px;
}
.t2a-inq-step { display: flex; flex-direction: column; gap: 20px; }
.t2a-inq-step[hidden], .t2a-inq-done[hidden] { display: none; }
.t2a-inq-eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inq-accent);
}
.t2a-inq-title {
  margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--inq-ink);
  font-family: 'Google Sans Flex', 'Figtree', sans-serif;
}
.t2a-inq-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--inq-muted); }

.t2a-inq-field { display: flex; flex-direction: column; gap: 6px; }
.t2a-inq-field label { font-size: 14px; font-weight: 700; color: var(--inq-ink); }
.t2a-inq-input {
  height: 48px; padding: 0 16px; border: 1.5px solid var(--inq-line); border-radius: 10px;
  font-size: 15px; font-family: 'Figtree', sans-serif; color: var(--inq-ink); background: #fbfdfe; width: 100%;
}
.t2a-inq-error {
  font-size: 13px; font-weight: 700; color: #d0453b; margin-top: -12px; display: none;
}
.t2a-inq-card.has-email-error .t2a-inq-error { display: block; }
.t2a-inq-card.has-email-error #t2aInqEmail { border-color: #d0453b !important; }
.t2a-inq-error.t2a-inq-submit-error { display: block; margin-top: -8px; }
.t2a-inq-error.t2a-inq-submit-error[hidden] { display: none; }

.t2a-inq-consent { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--inq-muted-2); }
.t2a-inq-consent a { font-weight: 700; }

.t2a-inq-btn {
  height: 52px; border: none; border-radius: 999px; background: var(--inq-blue); color: #fff;
  font-family: 'Figtree', sans-serif; font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 20px rgba(27, 107, 208, 0.30); transition: background 0.15s;
}
.t2a-inq-btn:hover { background: var(--inq-blue-dark); }
.t2a-inq-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* When the button is an <a> (country-not-allowed fallback), .t2a-inq a would
   otherwise win specificity and paint the text blue-on-blue */
.t2a-inq a.t2a-inq-btn, .t2a-inq a.t2a-inq-btn:hover { color: #fff; }

.t2a-inq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.t2a-inq-grid2 .t2a-inq-input--wide { grid-column: 1 / -1; }

.t2a-inq-back-row { display: flex; justify-content: center; }
.t2a-inq-back {
  font-size: 14px; font-weight: 700; color: var(--inq-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: none;
  min-height: 44px; padding: 12px 16px; /* tap-target minimum */
}
.t2a-inq-back:hover { color: var(--inq-ink); }

/* Done state */
.t2a-inq-done {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px 0;
}
.t2a-inq-done__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #4fd88a, var(--inq-green));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(43, 182, 115, 0.30);
}
.t2a-inq-done h1 {
  margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--inq-ink);
  font-family: 'Google Sans Flex', 'Figtree', sans-serif;
}
.t2a-inq-done p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--inq-muted); max-width: 380px; }

/* Country-not-allowed fallback */
.t2a-inq-unavailable { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.t2a-inq-unavailable p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--inq-muted); }

/* ---------- Right copy panel ---------- */
.t2a-inq-copy { flex: 1 1 340px; min-width: 300px; display: flex; flex-direction: column; gap: 18px; }
.t2a-inq-copy h2 {
  margin: 0; font-size: 34px; line-height: 1.18; font-weight: 700; color: var(--inq-ink);
  font-family: 'Google Sans Flex', 'Figtree', sans-serif;
}
.t2a-inq-emph { color: var(--inq-accent); }
.t2a-inq-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.t2a-inq-chip {
  display: inline-flex; align-items: center; gap: 8px; background: #e3f1fa; border-radius: 999px;
  padding: 9px 16px; font-size: 14px; font-weight: 700; color: var(--inq-ink);
}
.t2a-inq-chip svg { flex-shrink: 0; }
.t2a-inq-trust { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.t2a-inq-trust__label { font-size: 13px; font-weight: 600; color: var(--inq-muted-2); }

/* Same client-logo carousel mechanics as the rest of the site
   (.t2a-cmp-marquee / .t2a-org-marquee / ...): edge fade masks, 40px
   grayscale logos that reveal real color on hover, 32s linear scroll. */
.t2a-inq-marquee { overflow: hidden; position: relative; max-width: 100%; }
.t2a-inq-marquee::before,
.t2a-inq-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2;
}
.t2a-inq-marquee::before { left: 0; background: linear-gradient(90deg, #eef6f4, rgba(238,246,244,0)); }
.t2a-inq-marquee::after { right: 0; background: linear-gradient(270deg, #eef6f4, rgba(238,246,244,0)); }
.t2a-inq-marquee__track {
  display: flex; align-items: center; gap: 40px; width: max-content;
  animation: t2a-inq-marquee 32s linear infinite;
}
.t2a-inq-marquee__track img {
  height: 32px; width: auto; filter: grayscale(1) brightness(0.55); opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.t2a-inq-marquee__track img:hover { filter: none; opacity: 1; }
@keyframes t2a-inq-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Below ~900px .t2a-inq-grid (flex-wrap) drops .t2a-inq-copy onto its own
   full-width row under the form card instead of beside it — its content
   (title/chips/trust label) is still left-aligned from the desktop
   side-by-side layout, which reads as off-balance once it's centered under
   the card instead. Left as full-width flex/block children (not shrink-wrapped
   via align-items) so .t2a-inq-marquee keeps its own edge-to-edge scroll. */
@media (max-width: 900px) {
  .t2a-inq-copy h2 { text-align: center; }
  .t2a-inq-chips { justify-content: center; }
  .t2a-inq-trust__label { text-align: center; }
}
@media (max-width: 560px) {
  .t2a-inq-page { padding: 32px 16px; }
  .t2a-inq-card { padding: 32px 24px 28px; }
  .t2a-inq-grid2 { grid-template-columns: 1fr; }
}