.native-contact{max-width:780px;margin-inline:auto}
.native-contact>p{font-size:14px;line-height:1.9}
.native-contact-form{display:grid;gap:26px;margin-top:32px}
.native-contact-form label,.field-label{display:block;font-size:14px;font-weight:600;margin-bottom:10px;color:var(--color-text)}
.native-contact-form label:not(.consent-label) span,.field-label span{margin-left:10px;font-size:11px;font-weight:400;color:var(--color-muted)}
.native-contact-form input:not([type=checkbox]),.native-contact-form textarea,.native-contact-form select{width:100%;padding:13px 15px;border:1px solid var(--color-control-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:16px;min-height:48px}
.native-contact-form textarea{min-height:180px;resize:vertical;line-height:1.8}
.native-contact-form :is(input,select,textarea):focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.native-contact-form [aria-invalid=true]{border-color:var(--color-text)}
.native-contact-form .consent-label{display:flex;align-items:flex-start;gap:12px;font-weight:400;line-height:1.8;margin:0}
.consent-label input{appearance:auto;-webkit-appearance:auto;flex:0 0 auto;width:20px;height:20px;margin-top:3px;accent-color:var(--color-accent)}
.consent-label>span{font-size:14px;line-height:1.8;color:var(--color-text)}
.consent-label a,.native-contact a{color:var(--color-link);text-decoration:underline;text-underline-offset:4px}
.native-contact a:hover{color:var(--color-link-hover)}
.field-error{font-size:12px;margin:8px 0 0;color:var(--color-text);line-height:1.7}
.field-error:empty{display:none}
.contact-error{border-left:3px solid var(--color-accent);padding:12px 16px;background:var(--color-selection);font-size:14px;line-height:1.8}
.contact-error[hidden],.native-contact-form[hidden],.contact-complete[hidden]{display:none}
.native-contact-form button{justify-self:start;min-height:48px;padding:13px 26px;border-radius:var(--radius-cta);border:1px solid var(--color-accent);background:var(--color-accent);color:var(--color-on-accent);font:inherit;font-size:14px;cursor:pointer}
.native-contact-form button:disabled{opacity:.65;cursor:wait}
.native-contact-form button:hover:not(:disabled){filter:brightness(1.08)}
.native-contact-form .honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-complete h2{font-size:26px;margin-top:0}
.receipt-heading-action{display:inline-block;white-space:nowrap}
.contact-complete p{font-size:14px;line-height:1.9}
.receipt-next h3,.receipt-receive-help h3{font-size:16px;margin:0 0 12px;font-weight:600}
.receipt-next{margin:30px 0}
.receipt-receive-help{border-top:1px solid var(--color-border);padding-top:20px}
.receipt-receive-help ul{padding-left:22px;font-size:14px;line-height:1.9}
.receipt-receive-help li{margin-bottom:8px;overflow-wrap:anywhere}

.contact-mock-note{padding:16px;background:var(--color-selection);border-radius:var(--radius-control)}
#contact-preview-values dd{margin:0 0 18px;white-space:pre-wrap;overflow-wrap:anywhere}#contact-preview-values dt{font-weight:600} .account-area-content>.native-contact{padding:0;background:none;box-shadow:none;border:0}.contact-complete button{min-height:48px;padding:12px 22px;border-radius:var(--radius-cta);color:var(--color-text);border:1px solid var(--color-control-border);background:var(--color-surface)}

/* Shared public/member contact layout. The account sidebar stays outside it. */
.contact-component{min-width:0;width:100%}
.contact-component [hidden]{display:none!important}
.contact-component .contact-heading{margin:0 0 20px}
.contact-component .contact-heading :is(h1,h2){margin:0;font:38px/1.65 var(--serif);letter-spacing:.03em}
.contact-component .contact-heading>.eyebrow{margin:0 0 12px;color:var(--color-muted);font-size:10px}
.contact-component .contact-heading>[data-contact-intro]{margin:12px 0 0;font:14px/1.9 var(--sans);color:var(--color-muted)}
:root[data-palette][data-rounding] .contact-component>.native-contact{box-sizing:border-box;width:100%;max-width:780px;margin:20px auto 0;padding:30px 32px;border:0;border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--surface-shadow)}
.contact-component .native-contact-form{margin-top:32px;gap:26px}
.contact-component .native-contact-form button.primary,.contact-component .contact-actions button.primary{min-height:51px;padding:14px 24px;border:1px solid var(--color-accent);border-radius:var(--radius-cta);background:var(--color-accent);color:var(--color-on-accent);font:500 14px/1.5 var(--sans)}
.contact-component .native-contact-form button.primary:hover:not(:disabled),.contact-component .contact-actions button.primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover);filter:none}
.contact-component .native-contact-form button:disabled,.contact-component .contact-actions button:disabled{opacity:.5;cursor:wait}
.contact-component .contact-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:28px}
.contact-component .contact-actions button.text-action{min-height:44px;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--color-link);font:14px/1.7 var(--sans)}
.contact-component .contact-actions button.text-action:hover:not(:disabled){color:var(--color-link-hover);text-decoration:underline;text-underline-offset:5px}
.contact-component :is(.contact-confirm,.contact-complete)>h2{margin:0 0 16px;font:26px/1.6 var(--serif)}
.contact-component :is(.receipt-next,.receipt-receive-help)>h3{font:600 16px/1.6 var(--sans);margin:0 0 12px}
.contact-component .native-contact-form .consent-label{min-height:44px}
.account-contact-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:12px;font-size:14px;color:var(--color-link)}
@media(max-width:800px){.contact-component .contact-heading :is(h1,h2){font-size:28px}.contact-component .contact-heading>[data-contact-intro]{font-size:12px}}
@media(max-width:700px){:root[data-palette][data-rounding] .contact-component>.native-contact{padding:24px 20px}.contact-component :is(.contact-confirm,.contact-complete)>h2{font-size:23px}}
@media(max-width:360px){.contact-component .contact-heading :is(h1,h2){font-size:25px}}

.contact-component :is(#contact-purpose,.contact-confirm>p,.contact-complete p){font:14px/1.9 var(--sans);color:var(--color-muted)}