/* ---------- CONTACT / BOOK A DEMO FORM ---------- */
  /* referrer-based product theming: same --cyan swap the FinOps page itself uses */
  .theme-finops{--cyan:#FFB546;--cyan-soft:rgba(255,181,70,.12)}

  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .contact-intro{padding-top:10px}
  .contact-card{max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:40px 40px 44px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
  .form-field label{font-size:13.5px;font-weight:600;color:var(--text)}
  .form-field label .req{color:var(--cyan);margin-left:3px}
  .form-field input,.form-field select,.form-field textarea{
    background:rgba(255,255,255,.03);
    border:1px solid var(--line-strong);
    border-radius:10px;
    padding:11px 14px;
    font-family:'Inter',system-ui,sans-serif;
    font-size:14.5px;
    color:var(--text);
    width:100%;
    transition:border-color .2s ease,background .2s ease;
  }
  .form-field input::placeholder,.form-field textarea::placeholder{color:var(--text-faint)}
  .form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--cyan);background-color:var(--cyan-soft)}
  /* Safari on the Mac draws its own grey, glossy menu button and ignores the
     field's padding and background, so the native look is switched off and
     the arrow drawn here instead. color-scheme makes the opened list dark
     where the browser draws it (Chrome, Edge, Firefox). */
  .form-field select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;
    color-scheme:dark;padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A6AED6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
  .form-field select::-ms-expand{display:none}
  /* still on its "Select a …" choice: shown faint, like a placeholder */
  .form-field select:has(option[value=""]:checked){color:var(--text-faint)}
  .form-field select option{background:var(--navy-800);color:var(--text)}
  .form-field textarea{resize:vertical;min-height:110px;font-family:'Inter',system-ui,sans-serif;line-height:1.5}
  .contact-submit{width:100%;justify-content:center;margin-top:4px}
  .contact-note{font-size:12.5px;color:var(--text-faint);margin-top:14px;text-align:center}
  .contact-success{display:none;text-align:center;padding:40px 20px}
  .contact-success .ico{width:56px;height:56px;border-radius:50%;background:var(--cyan-soft);border:1px solid var(--cyan);color:var(--cyan);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:24px}
  .contact-success h3{font-family:'Space Grotesk',sans-serif;font-size:var(--fs-h3-card);font-weight:700;margin-bottom:10px}
  .contact-success p{font-size:var(--fs-body-sm);color:var(--text-dim)}
  .contact-form.hide{display:none}
  .contact-success.show{display:block}
  /* after sending, the card keeps the form's height (set inline) and centres
     the confirmation in it, so nothing below the card moves */
  .contact-card.sent{display:flex;flex-direction:column;justify-content:center}

  @media(max-width:900px){
    .contact-grid{grid-template-columns:1fr;gap:36px;text-align:center}
    .contact-card{margin:0 auto;text-align:left}
  }
  @media(max-width:560px){
    /* stacked pairs get the same spacing as single fields (no row gap on top
       of each field's own margin) */
    .form-row{grid-template-columns:1fr;gap:0}
    .contact-card{padding:28px 22px 32px}
    /* label sits on the field's top border, saving a line per field. The card
       is translucent, so instead of a solid patch the label only paints a thin
       strip where the border passes behind it: the card's rendered colour
       above the line, the field's below (both measured on the page). */
    .form-field{position:relative;gap:0;margin-bottom:22px}
    .form-field label{position:absolute;top:0;left:10px;z-index:1;transform:translateY(-50%);
      padding:0 6px;font-size:12.5px;line-height:1.2;color:var(--text-dim);
      background:linear-gradient(transparent calc(50% - 2px),#14224F calc(50% - 2px),#14224F 50%,#1D2654 50%,#1D2654 calc(50% + 2px),transparent calc(50% + 2px));
      transition:color .2s ease}
    .form-field:focus-within label{color:var(--cyan)}
    .form-field input,.form-field select,.form-field textarea{padding:15px 14px 13px}
    .form-field select{padding-right:42px}
  }

  /* Shown only when the submission genuinely failed, so the visitor is never
     told a message was delivered when it wasn't. */
  .contact-error{display:none;margin-top:22px;padding:20px 22px;border-radius:14px;
    border:1px solid rgba(255,107,107,.42);background:rgba(255,107,107,.09)}
  .contact-error.show{display:block}
  .contact-error p{font-size:var(--fs-caption);color:var(--text-dim);line-height:1.6}
  .contact-error p+p{margin-top:8px}
  .contact-error strong{color:#FF8A8A;font-weight:600}
  .contact-error a{color:var(--cyan);font-weight:600}
  /* Honeypot — off-screen rather than display:none, which some bots skip. */
  .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}