/* Contact (PRO-298): a short decision page, using the shared MyPay brand roles. Supplied by Giorgos
   (2026-09-20); the form-state rules at the end belong to the real form (contact.js). */
.in-contact { background: var(--mypay-paper); }
.contact-opening { padding: 64px 0 72px; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 9%; row-gap: 42px; align-items: start; }
.contact-intro { grid-column: 1; grid-row: 1; }
.in-contact .contact-intro h1 { margin: 0; }
.in-contact .contact-intro h1 em { color: #bf3d12; font-style: normal; }
.in-contact .contact-intro .in-eyebrow { margin-bottom: 24px; font-size: .875rem; }
.contact-lead { max-width: 410px; margin-top: 25px; font-size: 1.125rem; line-height: 1.7; color: var(--mypay-muted); }
.contact-form-panel { grid-column: 2; grid-row: 1 / 3; background: #fff; border-radius: 24px; padding: clamp(28px,3.2vw,46px); box-shadow: 0 12px 50px #20231f04; }
.contact-form-heading { display: flex; align-items: center; gap: 15px; }
.in-contact .contact-form-heading h2 { font-size: var(--mypay-panel); letter-spacing: -.035em; line-height: 1.2; }
.contact-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff0e8; color: #b83a10; font-size: 24px; flex: none; }
.contact-form-panel > p { margin-top: 16px; color: var(--mypay-muted); font-size: 1rem; line-height: 1.6; }
.contact-form-panel form { margin-top: 30px; }
.contact-field + .contact-field { margin-top: 21px; }
.contact-field label { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; font-weight: 500; margin-bottom: 9px; }
.contact-field label span { font-size: .875rem; font-weight: 400; color: var(--mypay-muted); }
.contact-field input { display: block; width: 100%; min-width: 0; height: 56px; border: 1px solid #b8bbb2; border-radius: 9px; background: #fff; color: var(--mypay-ink); padding: 13px 16px; font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.contact-field input:hover { border-color: #73786d; }
.contact-field input:focus-visible { outline: 2px solid #b83a10; outline-offset: 3px; border-color: transparent; }
.contact-field input:user-invalid { border-color: #b22525; }
.contact-privacy { margin: 24px 0 19px; font-size: .875rem; line-height: 1.6; color: var(--mypay-muted); }
.contact-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.in-contact .contact-submit { width: 100%; justify-content: space-between; border: 0; cursor: pointer; font: inherit; font-weight: 500; min-height: 56px; }
.contact-submit:disabled { cursor: default; opacity: .55; }
.contact-or { margin-top: 16px; text-align: center; font-size: .9375rem; line-height: 1.6; color: var(--mypay-muted); }
.contact-or a { color: var(--mypay-ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-registration { grid-column: 1; grid-row: 2; border-top: 1px solid #cfd0c8; padding-top: 28px; max-width: 440px; }
.contact-overline { display: flex; align-items: center; gap: 10px; font-size: .875rem; }
.contact-overline > span { width: 7px; height: 7px; background: var(--mypay-orange); border-radius: 50%; }
.in-contact .contact-registration h2 { font-size: var(--mypay-panel); line-height: 1.2; letter-spacing: -.035em; margin-top: 18px; }
.contact-registration > p:not(.contact-overline) { color: var(--mypay-muted); margin-top: 14px; font-size: 1rem; line-height: 1.6; }
.contact-register-link { display: inline-flex; align-items: center; gap: 30px; min-height: 48px; margin-top: 14px; font-size: 1rem; font-weight: 600; }
.contact-register-link > span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.contact-register-link > span:last-child { display: grid; place-items: center; border-radius: 50%; background: var(--mypay-ink); color: white; width: 36px; height: 36px; transition: transform .2s; }
.contact-register-link:hover > span:last-child { transform: translate(2px,-2px); }
.contact-direct { background: #fff; padding: 46px 0 54px; }
.contact-direct-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.in-contact .contact-direct-heading h2 { font-size: 1.5rem; letter-spacing: -.03em; }
.contact-direct-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 35px; border-top: 1px solid var(--mypay-line); padding-top: 25px; }
.in-contact .contact-direct-grid h3 { font-size: .875rem; line-height: 1.6; color: var(--mypay-muted); margin-bottom: 10px; }
.contact-number { display: inline-block; font-size: clamp(1.25rem,2vw,1.75rem); letter-spacing: -.025em; font-weight: 500; min-height: 44px; }
.contact-number:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-direct-grid p { color: var(--mypay-muted); font-size: .875rem; line-height: 1.6; }
.contact-result { padding: 38px 0 14px; }
.contact-result-icon { display: grid; place-items: center; width: 56px; height: 56px; background: var(--mypay-paper); border-radius: 50%; font-size: 26px; margin-bottom: 24px; }
.contact-result h3 { font-size: 1.75rem; }
.contact-result p { margin: 16px 0 26px; color: var(--mypay-muted); line-height: 1.65; }
.contact-result .contact-result-hours { margin: 12px 0 0; font-size: .875rem; line-height: 1.6; }
.contact-onward { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; text-decoration: underline; text-underline-offset: 3px; }
/* The confirmation takes the question's place (PRO-330); :target covers a native post landing on it. */
.contact-form-panel:has(.contact-result:is(:not([hidden]), :target)) :is(.contact-form-heading, #contact-purpose) { display: none; }
.in-contact a:focus-visible, .in-contact button:focus-visible { outline: 2px solid #b83a10; outline-offset: 5px; }
@media (max-width: 1099px) { .contact-opening { padding-top: 46px; } .contact-layout { column-gap: 6%; } }
@media (max-width: 850px) {
  .contact-layout { column-gap: 30px; }
  .contact-form-panel { padding: 26px; }
  .contact-form-heading { gap: 10px; }
  .contact-mark { width: 32px; height: 32px; font-size: 21px; }
  .contact-direct-grid { gap: 24px; }
}
@media (max-width: 700px) {
  .contact-opening { padding: 38px 0 40px; }
  .contact-layout { grid-template-columns: 1fr; gap: 30px; }
  .contact-intro, .contact-form-panel, .contact-registration { grid-column: 1; grid-row: auto; }
  .contact-intro h1 br { display: none; }
  .contact-lead { margin-top: 19px; font-size: 1rem; max-width: 450px; }
  .in-contact .contact-intro .in-eyebrow { margin-bottom: 18px; }
  .contact-form-panel { padding: 26px 22px; border-radius: 18px; }
  .contact-registration { max-width: none; padding-top: 25px; }
  .contact-direct { padding: 34px 0 38px; }
  .contact-direct-heading { display: block; margin-bottom: 22px; }
  .contact-direct-heading .in-link { margin-top: 14px; }
  .contact-direct-grid { grid-template-columns: 1fr; gap: 23px; padding-top: 22px; }
  .contact-direct-grid > div + div { border-top: 1px solid var(--mypay-line); padding-top: 20px; }
  .contact-number { font-size: 1.625rem; }
  /* One phone screen (PRO-330): title, three fields, privacy line and button on arrival at 375×553. The intro
     stays in the document for search engines and screen readers. */
  .in-page.in-contact > .contact-opening { padding-top: 16px; } /* over the shared first-section padding */
  .contact-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .contact-mark, #contact-purpose { display: none; }
  .contact-form-panel { padding-top: 20px; }
  .contact-form-panel form { margin-top: 16px; }
  .contact-field + .contact-field { margin-top: 12px; }
  .contact-field label { margin-bottom: 8px; }
  .contact-field input { height: 48px; padding-block: 9px; }
  .contact-privacy { margin: 8px 0 12px; }
  .contact-result { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .in-contact * { transition: none !important; } }
/* Form states (contact.js): field errors, the error and failure blocks, the security check, progress. */
.in-contact [hidden] { display: none; }
/* A taller form (error states, the security check) must not push the registration block down. */
.contact-layout { grid-template-rows: auto 1fr; }
.in-page.in-contact :is(.contact-status, .contact-result)[hidden]:target { display: block !important; }
.contact-field input[aria-invalid="true"] { border-color: #b22525; }
.contact-field-error { margin: 8px 0 0; color: #b22525; font-size: .875rem; line-height: 1.5; }
.contact-status { margin-bottom: 24px; padding: 16px; border: 1px solid #b22525; border-radius: 9px; font-size: .9375rem; line-height: 1.6; }
.contact-status strong { font-weight: 600; }
.contact-status p { margin: 0; }
.contact-status p + p, .contact-status ul { margin-top: 8px; }
.contact-status ul a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-status a, .contact-progress a { text-decoration: underline; text-underline-offset: 3px; }
.contact-status:focus, .contact-result:focus { outline: 2px solid #b83a10; outline-offset: 5px; }
.contact-result:focus:not(:focus-visible) { outline: 0; }
/* Headings are only ever focused by a fragment link or a script, never by Tab: iOS Safari rings them after a tap (PRO-317). */
.in-page.in-contact h2[tabindex="-1"]:focus { outline: 0; }
.contact-check { margin-top: 21px; }
.contact-check:not(:has(.cf-turnstile)) { margin-top: 0; }
.contact-progress { margin: 0; color: var(--mypay-muted); font-size: .875rem; line-height: 1.6; }
.contact-progress:not(:empty) { margin-top: 16px; }
.in-contact :is(.contact-status, input, [id]) { scroll-margin-top: calc(104px + env(safe-area-inset-top)); }
/* The page already pads scrolling by the header height; the panel a "talk to us" link lands on sits right under it (PRO-317). */
.in-contact #contact-form { scroll-margin-top: 0; }