/* ==========================================================================
   Talk to an Expert  (/talk-to-our-expert/)

   "The form is the page" (the structure doc). Shared, from stylesheets
   already linked: the page banner, .pf-related (product-family.css).
   Page-local (the form styles follow the Locations page's .loc-form):
     .tae-form-band  the form and What to expect, side by side from 1024
     .tae-form       the request form (js/talk-to-our-expert.js)
     .tae-done       what the visitor sees after Send
     .tae-expect     What to expect
     .tae-routes     three plain links to other routes
     .tae-proof      one customer line

     §1 banner white · §2 form band neutral-2-100 · §4 routes white ·
     §5 proof white · §6 related neutral-2-100
   ========================================================================== */

.tae-banner .page-banner__body p{margin:0}
.tae-banner .page-banner__body p + p{margin-top:8px}
@media (min-width:1024px){.tae-banner{padding-block:40px 48px}}

/* --------------------------------------------------------------------------
   §2 The form and What to expect
   -------------------------------------------------------------------------- */
.tae-form-band{padding-block:32px 48px;background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);scroll-margin-top:24px}
.tae-form-band__inner{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media (min-width:1024px){
  .tae-form-band{padding-block:40px 64px}
  .tae-form-band__inner{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}
}
@media (min-width:1350px){.tae-form-band__inner{grid-column-start:2;grid-column-end:span 10}}

.tae-form,.tae-done{
  display:flex;flex-direction:column;gap:16px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;padding:24px 20px;
}
.tae-form[hidden],.tae-done[hidden]{display:none}
@media (min-width:640px){.tae-form,.tae-done{padding:32px 28px}}
.tae-form__title,.tae-done__title,.tae-expect__title{margin:0;color:var(--ps-color-neutral-3-500)}
.tae-form__req{margin:-8px 0 0;font:400 12px/18px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.tae-form__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:640px){
  .tae-form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tae-form__field--wide{grid-column:1 / -1}
}
.tae-form__field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.tae-form__label{padding:0;font:500 13px/18px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.tae-form__input{
  width:100%;min-width:0;min-height:44px;box-sizing:border-box;
  font:400 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:8px;padding:10px 12px;
  transition:border-color .2s ease-out;
}
.tae-form__textarea{resize:vertical;min-height:110px}
.tae-form__input:hover{border-color:var(--ps-color-neutral-2-500)}
.tae-form__input:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:1px;border-color:transparent}

/* What would you like to do: three choices, side by side from 640 */
.tae-form__choices{flex-flow:row wrap;gap:8px 12px}
.tae-form__choices legend{width:100%;margin-bottom:6px}
.tae-form__choice{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;
  border:1px solid var(--ps-color-neutral-2-300);border-radius:8px;background:var(--sv-white);
  font:400 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);cursor:pointer;
  transition:border-color .2s ease-out;
}
.tae-form__choice:hover{border-color:var(--ps-color-neutral-2-500)}
.tae-form__choice:has(input:checked){border-color:var(--ps-color-brand-500)}
.tae-form__choice input,.tae-form__consent input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--ps-color-brand-500)}
@media (max-width:639px){.tae-form__choice{width:100%}}

.tae-form__consent{
  display:flex;align-items:flex-start;gap:10px;min-height:44px;
  font:400 14px/21px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);cursor:pointer;
}
.tae-form__consent input{margin-top:2px}
.tae-form__consent a,.tae-done a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.tae-form__consent a:hover,.tae-done a:hover{color:var(--ps-color-brand-500)}

.tae-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.tae-form__send{max-width:100%}
.tae-form__send .ps-btn__text{white-space:normal;min-width:0}
.tae-form__status{margin:0;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.tae-form__status:empty{display:none}

.tae-done:focus{outline:none}
.tae-done__text{margin:0;font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.tae-done__edit{
  align-self:flex-start;min-height:44px;padding:0;background:none;border:0;cursor:pointer;
  font:500 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.tae-done__edit:hover{color:var(--ps-color-brand-500)}

.tae-expect{padding:4px 0}
.tae-expect__list{margin:16px 0 0;padding:0;list-style:none;counter-reset:expect;display:flex;flex-direction:column;gap:16px}
.tae-expect__list li{
  counter-increment:expect;position:relative;padding-left:40px;
  font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.tae-expect__list li::before{
  content:counter(expect);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);
  font:500 13px/1 var(--ps-font);color:var(--ps-color-brand-600);
}
.tae-expect__list strong{display:block;font-weight:500;color:var(--ps-color-neutral-3-500)}

/* --------------------------------------------------------------------------
   §4 Other routes and §5 the proof line
   -------------------------------------------------------------------------- */
.tae-routes,.tae-proof{padding-block:40px 0;background:var(--sv-white)}
.tae-proof{padding-block:32px 56px}
.tae-routes__inner,.tae-proof__inner{grid-column-end:span var(--ps-grid-columns);margin:0}
@media (min-width:1350px){.tae-routes__inner,.tae-proof__inner{grid-column-start:2;grid-column-end:span 10}}
.tae-routes__title{margin:0 0 12px;color:var(--ps-color-neutral-3-500)}
.tae-routes__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.tae-routes__list li{font:400 15px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.tae-routes__list a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.tae-routes__list a:hover{color:var(--ps-color-brand-500)}
.tae-proof__inner{padding-top:24px;border-top:1px solid var(--ps-color-neutral-2-300)}
.tae-proof__quote{margin:0;max-width:80ch}
.tae-proof__quote p{margin:0;font:400 17px/27px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.tae-proof__who{margin-top:8px;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}

/* §6 Related: seven tiles */
@media (min-width:640px){.tae-related .pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tae-related .pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  .tae-form__input,.tae-form__choice{transition:none}
}