/* Eloqua base form CSS — extracted verbatim from the Eloqua export by
   dev/eloqua-build/build.php. Identical across all three forms.
   Do not edit: LiveValidation and Eloqua's grid depend on these classes.
   SafeSend brand overrides live in safesend-eloqua.css. */

.elq-form .elq-required{
    color:red!important;
    display:inline;
    float:none;
    font-weight:700;
    margin:0;
    padding:0}
  .elq-form #elq-FormLastRow{
    position:absolute;
    left:-80%;
    top:-80%}
  .elq-form .elq-label{
    display:inline-block;
    max-width:100%;
    font-weight:400;
    box-sizing:border-box;
    margin-bottom:0}
  .elq-form .elq-label-top{
    padding-bottom:3px}
  .elq-form .elq-item-label{
    max-width:100%;
    font-weight:400;
    box-sizing:border-box}
  .elq-form .list-order{
    margin-left:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis}
  .elq-form .one-column{
    width:100%;
    clear:both}
  .elq-form .two-column{
    float:left;
    width:38%}
  .elq-form .three-column{
    float:left;
    width:30%}
  .elq-form .elq-item-textarea{
    resize:vertical;
    min-height:48px;
    max-height:360px;
    box-sizing:border-box}
  .elq-form .elq-item-input,.elq-form .elq-item-select,.elq-form .elq-item-textarea{
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
    font:inherit;
    margin:0}
  .elq-form .elq-item-select{
    text-transform:none}
  .elq-form .row.single-checkbox-row{
    margin-left:0}
  .elq-form .elq-field-style{
    padding-bottom:10px}
  .elq-form .elq-field-style input[type=submit]{
    -webkit-appearance:button}
  @-webkit-keyframes spin{
    0%{
      -webkit-transform:rotate(0deg)}
    to{
      -webkit-transform:rotate(1turn)}
  }
  @keyframes spin{
    0%{
      transform:rotate(0deg)}
    to{
      transform:rotate(1turn)}
  }
  .elq-form .loader{
    vertical-align:middle;
    display:inline-block;
    margin-left:10px;
    border:3px solid #f3f3f3;
    border-radius:50%;
    border-top:3px solid #3498db;
    width:20px;
    height:20px;
    -webkit-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite}
  .elq-form input[type=checkbox],.elq-form input[type=radio]{
    margin:0}
  .elq-form .list-order input[type=radio]{
    margin-left:1px}
  .elq-form *,.elq-form :after,.elq-form :before{
    box-sizing:border-box}
  .elq-form html{
    font-size:10px;
    -webkit-tap-highlight-color:transparent}
  .elq-form body{
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.42857;
    color:#333;
    background-color:#fff}
  .elq-form button,.elq-form input,.elq-form select,.elq-form textarea{
    font-family:inherit;
    font-size:inherit;
    line-height:inherit}
  .elq-form a{
    color:#337ab7;
    text-decoration:none}
  .elq-form a:focus,.elq-form a:hover{
    color:#23527c;
    text-decoration:underline}
  .elq-form a:focus{
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px}
  .elq-form figure{
    margin:0}
  .elq-form img{
    vertical-align:middle}
  .elq-form .img-responsive{
    display:block;
    max-width:100%;
    height:auto}
  .elq-form .img-rounded{
    border-radius:6px}
  .elq-form .img-thumbnail{
    padding:4px;
    line-height:1.42857;
    background-color:#fff;
    border:1px solid #ddd;
    border-radius:4px;
    transition:all .2s ease-in-out;
    display:inline-block;
    max-width:100%;
    height:auto}
  .elq-form .img-circle{
    border-radius:50%}
  .elq-form hr{
    margin-top:20px;
    margin-bottom:20px;
    border:0;
    border-top:1px solid #eee}
  .elq-form .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0}
  .elq-form .sr-only-focusable:active,.elq-form .sr-only-focusable:focus{
    position:static;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip:auto}
  .elq-form [role=button]{
    cursor:pointer}
  .elq-form .container{
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto}
  .elq-form .container:after,.elq-form .container:before{
    display:table;
    content:" "}
  .elq-form .container:after{
    clear:both}
  @media (min-width:768px){
    .elq-form .container{
      width:750px}
  }
  @media (min-width:992px){
    .elq-form .container{
      width:970px}
  }
  @media (min-width:1200px){
    .elq-form .container{
      width:1170px}
  }
  .elq-form .container-fluid{
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto}
  .elq-form .container-fluid:after,.elq-form .container-fluid:before{
    display:table;
    content:" "}
  .elq-form .container-fluid:after{
    clear:both}
  .elq-form .row{
    margin-right:-15px;
    margin-left:-15px}
  .elq-form .row:after,.elq-form .row:before{
    display:table;
    content:" "}
  .elq-form .row:after{
    clear:both}
  .elq-form .row-no-gutters{
    margin-right:0;
    margin-left:0}
  .elq-form .row-no-gutters [class*=col-]{
    padding-right:0;
    padding-left:0}
  .elq-form .col-lg-1,.elq-form .col-lg-2,.elq-form .col-lg-3,.elq-form .col-lg-4,.elq-form .col-lg-5,.elq-form .col-lg-6,.elq-form .col-lg-7,.elq-form .col-lg-8,.elq-form .col-lg-9,.elq-form .col-lg-10,.elq-form .col-lg-11,.elq-form .col-lg-12,.elq-form .col-md-1,.elq-form .col-md-2,.elq-form .col-md-3,.elq-form .col-md-4,.elq-form .col-md-5,.elq-form .col-md-6,.elq-form .col-md-7,.elq-form .col-md-8,.elq-form .col-md-9,.elq-form .col-md-10,.elq-form .col-md-11,.elq-form .col-md-12,.elq-form .col-sm-1,.elq-form .col-sm-2,.elq-form .col-sm-3,.elq-form .col-sm-4,.elq-form .col-sm-5,.elq-form .col-sm-6,.elq-form .col-sm-7,.elq-form .col-sm-8,.elq-form .col-sm-9,.elq-form .col-sm-10,.elq-form .col-sm-11,.elq-form .col-sm-12,.elq-form .col-xs-1,.elq-form .col-xs-2,.elq-form .col-xs-3,.elq-form .col-xs-4,.elq-form .col-xs-5,.elq-form .col-xs-6,.elq-form .col-xs-7,.elq-form .col-xs-8,.elq-form .col-xs-9,.elq-form .col-xs-10,.elq-form .col-xs-11,.elq-form .col-xs-12{
    position:relative;
    min-height:1px;
    padding-right:15px;
    padding-left:15px}
  .elq-form .col-xs-1,.elq-form .col-xs-2,.elq-form .col-xs-3,.elq-form .col-xs-4,.elq-form .col-xs-5,.elq-form .col-xs-6,.elq-form .col-xs-7,.elq-form .col-xs-8,.elq-form .col-xs-9,.elq-form .col-xs-10,.elq-form .col-xs-11,.elq-form .col-xs-12{
    float:left}
  .elq-form .col-xs-1{
    width:8.33333%}
  .elq-form .col-xs-2{
    width:16.66667%}
  .elq-form .col-xs-3{
    width:25%}
  .elq-form .col-xs-4{
    width:33.33333%}
  .elq-form .col-xs-5{
    width:41.66667%}
  .elq-form .col-xs-6{
    width:50%}
  .elq-form .col-xs-7{
    width:58.33333%}
  .elq-form .col-xs-8{
    width:66.66667%}
  .elq-form .col-xs-9{
    width:75%}
  .elq-form .col-xs-10{
    width:83.33333%}
  .elq-form .col-xs-11{
    width:91.66667%}
  .elq-form .col-xs-12{
    width:100%}
  .elq-form .col-xs-pull-0{
    right:auto}
  .elq-form .col-xs-pull-1{
    right:8.33333%}
  .elq-form .col-xs-pull-2{
    right:16.66667%}
  .elq-form .col-xs-pull-3{
    right:25%}
  .elq-form .col-xs-pull-4{
    right:33.33333%}
  .elq-form .col-xs-pull-5{
    right:41.66667%}
  .elq-form .col-xs-pull-6{
    right:50%}
  .elq-form .col-xs-pull-7{
    right:58.33333%}
  .elq-form .col-xs-pull-8{
    right:66.66667%}
  .elq-form .col-xs-pull-9{
    right:75%}
  .elq-form .col-xs-pull-10{
    right:83.33333%}
  .elq-form .col-xs-pull-11{
    right:91.66667%}
  .elq-form .col-xs-pull-12{
    right:100%}
  .elq-form .col-xs-push-0{
    left:auto}
  .elq-form .col-xs-push-1{
    left:8.33333%}
  .elq-form .col-xs-push-2{
    left:16.66667%}
  .elq-form .col-xs-push-3{
    left:25%}
  .elq-form .col-xs-push-4{
    left:33.33333%}
  .elq-form .col-xs-push-5{
    left:41.66667%}
  .elq-form .col-xs-push-6{
    left:50%}
  .elq-form .col-xs-push-7{
    left:58.33333%}
  .elq-form .col-xs-push-8{
    left:66.66667%}
  .elq-form .col-xs-push-9{
    left:75%}
  .elq-form .col-xs-push-10{
    left:83.33333%}
  .elq-form .col-xs-push-11{
    left:91.66667%}
  .elq-form .col-xs-push-12{
    left:100%}
  .elq-form .col-xs-offset-0{
    margin-left:0}
  .elq-form .col-xs-offset-1{
    margin-left:8.33333%}
  .elq-form .col-xs-offset-2{
    margin-left:16.66667%}
  .elq-form .col-xs-offset-3{
    margin-left:25%}
  .elq-form .col-xs-offset-4{
    margin-left:33.33333%}
  .elq-form .col-xs-offset-5{
    margin-left:41.66667%}
  .elq-form .col-xs-offset-6{
    margin-left:50%}
  .elq-form .col-xs-offset-7{
    margin-left:58.33333%}
  .elq-form .col-xs-offset-8{
    margin-left:66.66667%}
  .elq-form .col-xs-offset-9{
    margin-left:75%}
  .elq-form .col-xs-offset-10{
    margin-left:83.33333%}
  .elq-form .col-xs-offset-11{
    margin-left:91.66667%}
  .elq-form .col-xs-offset-12{
    margin-left:100%}
  @media (min-width:768px){
    .elq-form .col-sm-1,.elq-form .col-sm-2,.elq-form .col-sm-3,.elq-form .col-sm-4,.elq-form .col-sm-5,.elq-form .col-sm-6,.elq-form .col-sm-7,.elq-form .col-sm-8,.elq-form .col-sm-9,.elq-form .col-sm-10,.elq-form .col-sm-11,.elq-form .col-sm-12{
      float:left}
    .elq-form .col-sm-1{
      width:8.33333%}
    .elq-form .col-sm-2{
      width:16.66667%}
    .elq-form .col-sm-3{
      width:25%}
    .elq-form .col-sm-4{
      width:33.33333%}
    .elq-form .col-sm-5{
      width:41.66667%}
    .elq-form .col-sm-6{
      width:50%}
    .elq-form .col-sm-7{
      width:58.33333%}
    .elq-form .col-sm-8{
      width:66.66667%}
    .elq-form .col-sm-9{
      width:75%}
    .elq-form .col-sm-10{
      width:83.33333%}
    .elq-form .col-sm-11{
      width:91.66667%}
    .elq-form .col-sm-12{
      width:100%}
    .elq-form .col-sm-pull-0{
      right:auto}
    .elq-form .col-sm-pull-1{
      right:8.33333%}
    .elq-form .col-sm-pull-2{
      right:16.66667%}
    .elq-form .col-sm-pull-3{
      right:25%}
    .elq-form .col-sm-pull-4{
      right:33.33333%}
    .elq-form .col-sm-pull-5{
      right:41.66667%}
    .elq-form .col-sm-pull-6{
      right:50%}
    .elq-form .col-sm-pull-7{
      right:58.33333%}
    .elq-form .col-sm-pull-8{
      right:66.66667%}
    .elq-form .col-sm-pull-9{
      right:75%}
    .elq-form .col-sm-pull-10{
      right:83.33333%}
    .elq-form .col-sm-pull-11{
      right:91.66667%}
    .elq-form .col-sm-pull-12{
      right:100%}
    .elq-form .col-sm-push-0{
      left:auto}
    .elq-form .col-sm-push-1{
      left:8.33333%}
    .elq-form .col-sm-push-2{
      left:16.66667%}
    .elq-form .col-sm-push-3{
      left:25%}
    .elq-form .col-sm-push-4{
      left:33.33333%}
    .elq-form .col-sm-push-5{
      left:41.66667%}
    .elq-form .col-sm-push-6{
      left:50%}
    .elq-form .col-sm-push-7{
      left:58.33333%}
    .elq-form .col-sm-push-8{
      left:66.66667%}
    .elq-form .col-sm-push-9{
      left:75%}
    .elq-form .col-sm-push-10{
      left:83.33333%}
    .elq-form .col-sm-push-11{
      left:91.66667%}
    .elq-form .col-sm-push-12{
      left:100%}
    .elq-form .col-sm-offset-0{
      margin-left:0}
    .elq-form .col-sm-offset-1{
      margin-left:8.33333%}
    .elq-form .col-sm-offset-2{
      margin-left:16.66667%}
    .elq-form .col-sm-offset-3{
      margin-left:25%}
    .elq-form .col-sm-offset-4{
      margin-left:33.33333%}
    .elq-form .col-sm-offset-5{
      margin-left:41.66667%}
    .elq-form .col-sm-offset-6{
      margin-left:50%}
    .elq-form .col-sm-offset-7{
      margin-left:58.33333%}
    .elq-form .col-sm-offset-8{
      margin-left:66.66667%}
    .elq-form .col-sm-offset-9{
      margin-left:75%}
    .elq-form .col-sm-offset-10{
      margin-left:83.33333%}
    .elq-form .col-sm-offset-11{
      margin-left:91.66667%}
    .elq-form .col-sm-offset-12{
      margin-left:100%}
  }
  @media (min-width:992px){
    .elq-form .col-md-1,.elq-form .col-md-2,.elq-form .col-md-3,.elq-form .col-md-4,.elq-form .col-md-5,.elq-form .col-md-6,.elq-form .col-md-7,.elq-form .col-md-8,.elq-form .col-md-9,.elq-form .col-md-10,.elq-form .col-md-11,.elq-form .col-md-12{
      float:left}
    .elq-form .col-md-1{
      width:8.33333%}
    .elq-form .col-md-2{
      width:16.66667%}
    .elq-form .col-md-3{
      width:25%}
    .elq-form .col-md-4{
      width:33.33333%}
    .elq-form .col-md-5{
      width:41.66667%}
    .elq-form .col-md-6{
      width:50%}
    .elq-form .col-md-7{
      width:58.33333%}
    .elq-form .col-md-8{
      width:66.66667%}
    .elq-form .col-md-9{
      width:75%}
    .elq-form .col-md-10{
      width:83.33333%}
    .elq-form .col-md-11{
      width:91.66667%}
    .elq-form .col-md-12{
      width:100%}
    .elq-form .col-md-pull-0{
      right:auto}
    .elq-form .col-md-pull-1{
      right:8.33333%}
    .elq-form .col-md-pull-2{
      right:16.66667%}
    .elq-form .col-md-pull-3{
      right:25%}
    .elq-form .col-md-pull-4{
      right:33.33333%}
    .elq-form .col-md-pull-5{
      right:41.66667%}
    .elq-form .col-md-pull-6{
      right:50%}
    .elq-form .col-md-pull-7{
      right:58.33333%}
    .elq-form .col-md-pull-8{
      right:66.66667%}
    .elq-form .col-md-pull-9{
      right:75%}
    .elq-form .col-md-pull-10{
      right:83.33333%}
    .elq-form .col-md-pull-11{
      right:91.66667%}
    .elq-form .col-md-pull-12{
      right:100%}
    .elq-form .col-md-push-0{
      left:auto}
    .elq-form .col-md-push-1{
      left:8.33333%}
    .elq-form .col-md-push-2{
      left:16.66667%}
    .elq-form .col-md-push-3{
      left:25%}
    .elq-form .col-md-push-4{
      left:33.33333%}
    .elq-form .col-md-push-5{
      left:41.66667%}
    .elq-form .col-md-push-6{
      left:50%}
    .elq-form .col-md-push-7{
      left:58.33333%}
    .elq-form .col-md-push-8{
      left:66.66667%}
    .elq-form .col-md-push-9{
      left:75%}
    .elq-form .col-md-push-10{
      left:83.33333%}
    .elq-form .col-md-push-11{
      left:91.66667%}
    .elq-form .col-md-push-12{
      left:100%}
    .elq-form .col-md-offset-0{
      margin-left:0}
    .elq-form .col-md-offset-1{
      margin-left:8.33333%}
    .elq-form .col-md-offset-2{
      margin-left:16.66667%}
    .elq-form .col-md-offset-3{
      margin-left:25%}
    .elq-form .col-md-offset-4{
      margin-left:33.33333%}
    .elq-form .col-md-offset-5{
      margin-left:41.66667%}
    .elq-form .col-md-offset-6{
      margin-left:50%}
    .elq-form .col-md-offset-7{
      margin-left:58.33333%}
    .elq-form .col-md-offset-8{
      margin-left:66.66667%}
    .elq-form .col-md-offset-9{
      margin-left:75%}
    .elq-form .col-md-offset-10{
      margin-left:83.33333%}
    .elq-form .col-md-offset-11{
      margin-left:91.66667%}
    .elq-form .col-md-offset-12{
      margin-left:100%}
  }
  @media (min-width:1200px){
    .elq-form .col-lg-1,.elq-form .col-lg-2,.elq-form .col-lg-3,.elq-form .col-lg-4,.elq-form .col-lg-5,.elq-form .col-lg-6,.elq-form .col-lg-7,.elq-form .col-lg-8,.elq-form .col-lg-9,.elq-form .col-lg-10,.elq-form .col-lg-11,.elq-form .col-lg-12{
      float:left}
    .elq-form .col-lg-1{
      width:8.33333%}
    .elq-form .col-lg-2{
      width:16.66667%}
    .elq-form .col-lg-3{
      width:25%}
    .elq-form .col-lg-4{
      width:33.33333%}
    .elq-form .col-lg-5{
      width:41.66667%}
    .elq-form .col-lg-6{
      width:50%}
    .elq-form .col-lg-7{
      width:58.33333%}
    .elq-form .col-lg-8{
      width:66.66667%}
    .elq-form .col-lg-9{
      width:75%}
    .elq-form .col-lg-10{
      width:83.33333%}
    .elq-form .col-lg-11{
      width:91.66667%}
    .elq-form .col-lg-12{
      width:100%}
    .elq-form .col-lg-pull-0{
      right:auto}
    .elq-form .col-lg-pull-1{
      right:8.33333%}
    .elq-form .col-lg-pull-2{
      right:16.66667%}
    .elq-form .col-lg-pull-3{
      right:25%}
    .elq-form .col-lg-pull-4{
      right:33.33333%}
    .elq-form .col-lg-pull-5{
      right:41.66667%}
    .elq-form .col-lg-pull-6{
      right:50%}
    .elq-form .col-lg-pull-7{
      right:58.33333%}
    .elq-form .col-lg-pull-8{
      right:66.66667%}
    .elq-form .col-lg-pull-9{
      right:75%}
    .elq-form .col-lg-pull-10{
      right:83.33333%}
    .elq-form .col-lg-pull-11{
      right:91.66667%}
    .elq-form .col-lg-pull-12{
      right:100%}
    .elq-form .col-lg-push-0{
      left:auto}
    .elq-form .col-lg-push-1{
      left:8.33333%}
    .elq-form .col-lg-push-2{
      left:16.66667%}
    .elq-form .col-lg-push-3{
      left:25%}
    .elq-form .col-lg-push-4{
      left:33.33333%}
    .elq-form .col-lg-push-5{
      left:41.66667%}
    .elq-form .col-lg-push-6{
      left:50%}
    .elq-form .col-lg-push-7{
      left:58.33333%}
    .elq-form .col-lg-push-8{
      left:66.66667%}
    .elq-form .col-lg-push-9{
      left:75%}
    .elq-form .col-lg-push-10{
      left:83.33333%}
    .elq-form .col-lg-push-11{
      left:91.66667%}
    .elq-form .col-lg-push-12{
      left:100%}
    .elq-form .col-lg-offset-0{
      margin-left:0}
    .elq-form .col-lg-offset-1{
      margin-left:8.33333%}
    .elq-form .col-lg-offset-2{
      margin-left:16.66667%}
    .elq-form .col-lg-offset-3{
      margin-left:25%}
    .elq-form .col-lg-offset-4{
      margin-left:33.33333%}
    .elq-form .col-lg-offset-5{
      margin-left:41.66667%}
    .elq-form .col-lg-offset-6{
      margin-left:50%}
    .elq-form .col-lg-offset-7{
      margin-left:58.33333%}
    .elq-form .col-lg-offset-8{
      margin-left:66.66667%}
    .elq-form .col-lg-offset-9{
      margin-left:75%}
    .elq-form .col-lg-offset-10{
      margin-left:83.33333%}
    .elq-form .col-lg-offset-11{
      margin-left:91.66667%}
    .elq-form .col-lg-offset-12{
      margin-left:100%}
  }
  .elq-form .row{
    display:inherit}
  .LV_invalid_field,input.LV_invalid_field:active,input.LV_invalid_field:hover,textarea.LV_invalid_field:active,textarea.LV_invalid_field:hover{
    outline:1px solid #c00}
  .LV_validation_message{
    font-weight:700;
    margin:0 0 0 5px}
  .LV_valid{
    display:none}
  .LV_invalid{
    color:#c00;
    font-size:10px}
  .submit-button-style{
    padding:7px 20px;
    border:1px solid #979797;
    border-radius:3px;
    background-color:#fff;
    color:#4a4a4a;
    cursor:pointer}
  .checkbox-aligned{
    margin-left:5px;
    display:inline}
  .form-element-layout{
    padding:5px 10px}
  .form-element-instruction{
    font-size:10px}
  .form-element-form-text{
    margin:0}
  .form-field-visible-xs-block{
    display:none}
  .elq-form-design-field .list-order input[type=radio]{
    margin-left:1px}
  @media (max-width:767px){
    .form-field-visible-xs-block{
      display:block}
  }
  .form-field-hidden-xs{
    display:block}
  @media (max-width:767px){
    .form-field-hidden-xs{
      display:none}
  }
  .custom-overlay{
    margin-left:2px;
    background:#fff;
    box-shadow:0 0 4px 0 #777;
    border-radius:2px;
    max-width:256px}

/* ---------- SafeSend brand layer ---------- */

/* ==========================================================================
   SafeSend brand layer for Eloqua forms
   Artonic ticket 12861

   One ruleset, all three forms. Scoped to .elq-form and styled structurally —
   never by field ID and never by field name. Both vary between forms:
   IDs are per-form (fe248827 vs fe249848…) and names are cased differently
   (EmailAddress on the Flex form, emailAddress elsewhere), so nothing is
   shareable at the field level.

   Loaded AFTER eloqua-base.css, which is Eloqua's own export. Nothing here
   removes Eloqua's .elq-* or grid classes — LiveValidation and Eloqua's
   layout depend on them.

   Tokens taken from the theme so these match the HubSpot forms they replace:
     $platinum        #EFF3F0   css/global/_variables.scss
     $primary-color1  #001c50
     $primary-color2  #094b95
     $sapphire        #0973BA
     $error-red       #FAEDEC
     container border 0.5px solid #A6A8AB, radius 20px
     input border     0.5px solid #A6A8AB, radius 5px
     input font-size  1.25rem

   Field values match what the theme already renders on /pricing/, so that page is
   unchanged and the other three now match it. See the note above the field rules
   for why those selectors are pitched where they are.
   ========================================================================== */

/* ---------------------------------------------------------------- container */

.elq-form {
  --ss-navy: #001c50;
  --ss-blue: #094b95;
  --ss-sapphire: #0973ba;
  --ss-platinum: #eff3f0;
  --ss-hairline: #a6a8ab;
  /* Matches the border the theme puts on /pricing/ inputs, so all four forms
     agree. Was #c9c9c9, which only ever showed on the three pages where no
     theme rule competed. */
  --ss-input-border: #a6a8ab;
  --ss-error: #c00;
  --ss-error-tint: #faedec;

  box-sizing: border-box;
  max-width: 43.75rem;
  margin: 0;
  padding: 2.5rem 2.75rem 2rem;
  background: var(--ss-platinum);
  border: 0.5px solid var(--ss-hairline);
  border-radius: 20px;
  color: var(--ss-navy);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
}

@media (max-width: 47.9375em) {
  .elq-form {
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 14px;
  }
}

/* Two of the four pages already wrap the form in their own styled panel:
     /pricing/                  .right__container  — platinum, border, radius,
                                padding (_pricing-contact-form.scss)
     /solutions/safesend-one/   .demo__content     — same treatment
                                (_demo-form.scss)
   Panelling the form again inside those nests one box in another and doubles the
   padding, so where the theme supplies the panel the form contributes field
   styling only.

   The other two pages have sizing-only wrappers with no panel of their own
   (.right on /demo/, .cff-form on /about/contact/), so the form keeps its
   panel there — deliberately not listed here. */
.right__container .elq-form,
.demo__content .elq-form {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Inside .demo__content the theme indents the heading and description a further
   2.5rem beyond the panel's own padding:

       .demo__content   padding: 5rem 2.5rem 2.5rem
       .demo__title     padding-inline: 2.5rem
       .demo__desc      padding-inline: 2.5rem
       .demo__form      — nothing

   The HubSpot iframe brought its own internal padding so the difference never
   showed. Our form is de-nested to padding:0 by the rule above, so without this
   it sits flush to the panel edge while the heading above it is inset 40px.

   Matching the title and description keeps the form aligned with its own heading.
   (0,3,0) so it beats the (0,2,0) de-nesting rule that zeroes padding. Applies to
   /solutions/safesend-one/ and the twelve pages built from .demo__form. */
.demo__content .demo__form .elq-form {
  padding-inline: 2.5rem;
}

/* /demo/ is a different shape again. .book-demo-form is a white rounded box that
   carries no padding of its own — the HubSpot iframe used to fill it edge to edge
   with negative margins. So the form drops its background, border and radius to
   let that white box show through, but KEEPS its padding, because nothing else
   supplies any. Not folded into the rule above, which zeroes padding. */
.book-demo-form__embed .elq-form {
  max-width: none;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Eloqua wraps everything in .container-fluid / .row, which add negative
   margins that fight our padding. Neutralise the gutters, keep the classes. */
.elq-form .layout.container-fluid,
.elq-form .container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.elq-form .row {
  margin-right: 0;
  margin-left: 0;
}

.elq-form [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* ------------------------------------------------------------------- fields */

.elq-form .elq-field-style {
  padding-bottom: 1.125rem;
}

.elq-form .elq-label,
.elq-form .elq-item-label {
  display: inline-block;
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ss-navy);
}

.elq-form .elq-required {
  margin-left: 0.125rem;
  font-weight: 700;
  color: var(--ss-error) !important;
}

/* Field styling is deliberately pitched at (0,4,0) via [name], for two reasons.
 *
 * It has to beat the theme, which styles every bare input inside its containers:
 *     .form input[type=text]                                (0,2,1)
 *         padding:.75rem; border-radius:5px; border:2px #c9c9c9;
 *         font-size:1.25rem; line-height:1; background:#fff
 *     .pricing-contact-form .form .right__container input    (0,3,1)
 *         border-radius:5px; border:.5px #a6a8ab; background:#fff
 *
 * And it has to be the single source of truth. Only /pricing/ carries the .form
 * class on its container, so before this the theme dressed that page while these
 * rules dressed the other three — the same form rendered at 20px with hairline
 * borders on one page and 16px with 2px borders on the next. Values below are
 * what /pricing/ already renders, so that page is unchanged and the other three
 * now match it.
 *
 * Every Eloqua field carries a name and sits inside an .elq-field-style row; the
 * build asserts both. */

.elq-form .elq-field-style .elq-item-input[name],
.elq-form .elq-field-style .elq-item-select[name],
.elq-form .elq-field-style .elq-item-textarea[name] {
  width: 100%;
  padding: 0.75rem;
  background: #fff;
  border: 0.5px solid var(--ss-input-border);
  border-radius: 5px;
  box-shadow: none;
  font-family: inherit;
  font-size: 1.25rem;
  /* height:auto is load-bearing, not tidying. appearance:none strips a select's
     native sizing, and without an explicit height the browser falls back to its
     own default — shorter than 20px text needs, so the selected option's text gets
     clipped. /pricing/ never showed this because the theme rule that styles it
     happens to include height:auto; the other three pages have no .form class on
     their container and so never received it.

     line-height 1.2 rather than the theme's 1: at 1 the line box is exactly the
     font size, leaving no room for descenders and relying on the element not
     clipping them. 1.2 removes that edge case. Applied to all four pages, so they
     stay consistent — the fields are ~4px taller than before, everywhere. */
  line-height: 1.2;
  height: auto;
  color: var(--ss-navy);
  appearance: none;
  transition: border-color 0.15s ease;
}

.elq-form .elq-item-input::placeholder,
.elq-form .elq-item-textarea::placeholder {
  color: #7f8487;
}

/* Focus keeps the border width constant and adds a ring.
 *
 * The theme's version on /pricing/ thickens the border from 0.5px to 2px, which
 * nudges the field and everything below it by 1.5px on every focus change — most
 * noticeable tabbing down a long form. Changing only border-color leaves geometry
 * untouched, and box-shadow doesn't participate in layout, so the ring costs
 * nothing either.
 *
 * A hairline border turning blue is too quiet on its own, so the ring carries the
 * signal. 3px at 25% follows the convention Eloqua's own Bootstrap-derived base
 * CSS already sets up, and is visible enough to serve as the focus indicator in
 * its own right — which matters because `outline: none` removes the browser
 * default.
 *
 * This now applies on all four pages, /pricing/ included: these rules are (0,5,0)
 * and the theme's focus rule is (0,3,1), so there is one focus behaviour across
 * the set rather than one page following the theme and three following us. */
.elq-form .elq-field-style .elq-item-input[name]:focus,
.elq-form .elq-field-style .elq-item-select[name]:focus,
.elq-form .elq-field-style .elq-item-textarea[name]:focus {
  outline: none;
  border-color: var(--ss-blue);
  box-shadow: 0 0 0 0.1875rem rgba(9, 75, 149, 0.25);
}

/* 8.75rem matches .form textarea in the theme. /pricing/ has no textarea, so
   there is nothing to be consistent with there — this follows the site's own
   convention instead. */
.elq-form .elq-field-style .elq-item-textarea[name] {
  min-height: 8.75rem;
  resize: vertical;
}

/* Native select arrow — appearance:none above strips it, so draw our own.
   Inline SVG data URI: no external request.

   Specificity matters here for the same reason as the submit button, with an
   extra twist. The theme's rule on /pricing/ is:

       .pricing-contact-form .form .right__container select    →  (0,3,1)
           background: #FFF;

   That is the `background` SHORTHAND, so it resets background-image to none — it
   doesn't just change the colour, it erases the arrow. Meanwhile appearance:none
   above still applied, so the native arrow was gone too and the selects rendered
   with no arrow at all.

   `[name]` takes this to (0,4,0), which beats the theme rule. Every Eloqua select
   carries a name, and the build asserts it. background-color is restated because
   we are now winning against the shorthand that was supplying the white. */
.elq-form .elq-field-style .elq-item-select[name] {
  padding-right: 2.25rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%230973ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 14px 9px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- checkboxes */

.elq-form .single-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-left: 0;
}

.elq-form input[type="checkbox"],
.elq-form input[type="radio"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.1875rem 0 0;
  accent-color: var(--ss-sapphire);
}

.elq-form .checkbox-aligned {
  display: inline;
  margin-left: 0;
  font-weight: 400;
}

/* ------------------------------------------------------- consent / legal ---
   Thomson Reuters consent language, sits directly above the Submit button.
   Small and quiet: it has to be legible and readable, but it should not compete
   with the fields or the button. */

.elq-form .elq-consent {
  margin-top: 0.5rem;
  margin-bottom: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 28, 80, 0.12);
}

.elq-form .elq-consent p {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.5;
  color: #4a5563;
}

.elq-form .elq-consent p:last-child {
  margin-bottom: 0;
}

.elq-form .elq-consent a {
  color: var(--ss-sapphire);
  text-decoration: underline;
}

.elq-form .elq-consent a:hover,
.elq-form .elq-consent a:focus {
  color: var(--ss-blue);
}

/* Kept as its own rule so the reCAPTCHA notice can be dropped in one line if
   Nic confirms it shouldn't be here — no reCAPTCHA runs on these forms. */
.elq-form .elq-consent__recaptcha {
  margin-top: 0.625rem;
}

/* ------------------------------------------------------------------- submit
   These selectors are deliberately more specific than they look. The theme
   styles every bare `input` inside its form containers as if it were a text
   field, and on /pricing/ that rule is:

       .pricing-contact-form .form .right__container input   →  (0,3,1)
           background: #FFF; border: 0.5px solid #A6A8AB;

   A plain `.elq-form input[type="submit"]` is only (0,2,1), so the theme won and
   painted the button white — with our white label on top, making it look like an
   empty box. Anchoring on the .elq-field-style row and the .submit-button-style
   class Eloqua emits gives (0,4,0), which beats it outright rather than relying
   on stylesheet order.

   Not solved with !important on purpose: the theme already uses !important in
   these files, and escalating would just move the fight somewhere harder to see.

   (.demo__form input on /solutions/safesend-one/ is only (0,1,1), so it never
   posed the same problem.) */

.elq-form .elq-field-style .submit-button-style[type="Submit"],
.elq-form .elq-field-style .submit-button-style[type="submit"] {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.8125rem 2.25rem;
  background-color: var(--ss-sapphire);
  border: 2px solid var(--ss-sapphire);
  border-radius: 5px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.elq-form .elq-field-style .submit-button-style[type="Submit"]:hover,
.elq-form .elq-field-style .submit-button-style[type="submit"]:hover {
  background-color: var(--ss-blue);
  border-color: var(--ss-blue);
}

.elq-form .elq-field-style .submit-button-style[type="Submit"]:focus-visible,
.elq-form .elq-field-style .submit-button-style[type="submit"]:focus-visible {
  outline: 3px solid rgba(9, 75, 149, 0.45);
  outline-offset: 2px;
}

.elq-form .elq-field-style .submit-button-style[type="Submit"][disabled],
.elq-form .elq-field-style .submit-button-style[type="submit"][disabled] {
  opacity: 0.65;
  cursor: wait;
}

/* Spinner injected by handleFormSubmit() on submit. */
.elq-form .loader {
  border-color: rgba(9, 75, 149, 0.2);
  border-top-color: var(--ss-sapphire);
}

/* --------------------------------------------------------------- validation */

/* The invalid state has to out-specify two different things at once.
 *
 *   1. The theme paints every input white and it wins on specificity:
 *          .pricing-contact-form .form .right__container input   (0,3,1)
 *          .form input[type=text]                                (0,2,1)
 *      Both set background, so our error tint never appeared.
 *
 *   2. Eloqua's own base CSS re-adds an outline, but only on interaction:
 *          input.LV_invalid_field:active, input.LV_invalid_field:hover  (0,2,1)
 *      which beats a plain `.elq-form .LV_invalid_field` (0,2,0).
 *
 * Together those produced the reported behaviour exactly: a red outline while
 * hovering or clicking the field, nothing once focus moved away, and no tint at
 * any point. (0,4,0) here, (0,5,0) on the interaction states, clears both.
 *
 * border-color rather than border, so the field keeps whatever border width the
 * page gives it — 0.5px on /pricing/, 2px elsewhere — and only the colour
 * changes. The tint is the load-bearing signal. */

.elq-form .elq-field-style .LV_invalid_field[name],
.elq-form .elq-field-style .LV_invalid_field[name]:hover,
.elq-form .elq-field-style .LV_invalid_field[name]:active {
  outline: none;
  border-color: var(--ss-error);
  background-color: var(--ss-error-tint);
  box-shadow: none;
}

/* Focused and invalid needs its own rule. The focus rule above is also (0,5,0)
   and is the only one of the two setting box-shadow, so without this an invalid
   field would keep the red border and tint but take the BLUE focus ring — two
   colours disagreeing about the same field. Red ring instead, so the error state
   wins outright while still showing focus. */
.elq-form .elq-field-style .LV_invalid_field[name]:focus {
  outline: none;
  border-color: var(--ss-error);
  background-color: var(--ss-error-tint);
  box-shadow: 0 0 0 0.1875rem rgba(204, 0, 0, 0.2);
}

.elq-form .LV_validation_message {
  display: block;
  margin: 0.3125rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.elq-form .LV_invalid {
  color: var(--ss-error);
  font-size: 0.8125rem;
}

.elq-form .LV_valid {
  display: none;
}

/* ------------------------------------------------------------ housekeeping */

/* Honeypot row. Eloqua parks it offscreen and processLastFormField() then sets
   display:none. Belt and braces so it never flashes before that JS runs.
   Do not remove — it is live anti-spam machinery on form11773 and form11794. */
.elq-form #elq-FormLastRow {
  position: absolute !important;
  left: -100vw !important;
  top: -100vh !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The four consent fields (MarketingConsent, CrossBorderTransfer,
   ServiceProviderTransfer, ServiceProviderCrossBorderTransfers) are hidden
   inputs whose labels would otherwise render as stray text. build.php sets
   display:none on their rows and refuses to emit unless all four labels really
   are inside a hidden row, so that is handled at build time.

   There is deliberately NO CSS safety net here of the form "hide any
   .elq-field-style row containing no form control". That rule existed briefly
   and hid the Thomson Reuters consent block, which is a row of paragraphs with
   no input in it — the markup was there, styled and correct, and simply did not
   render. Don't reintroduce it: the build-time assertion already covers the
   case, and a blanket rule keyed on "no form control" will catch any future
   block of explanatory copy too. */

/* Eloqua's export sets inline width:100% on most controls; harmless, but make
   sure nothing overflows the rounded container on small screens. */
.elq-form * {
  max-width: 100%;
}