/* Dr.MVP V2 Join Us (/JoinUs, LOS07) - derived from delivery 00_Project_Handoff/DrMVP_LoggedOut_Clickable_Prototype_v1.0/LoggedOut_System_Screens_Preview.html
   (screen data-screen="join"), same conversion as contact.css: tokens on .drmvpv2-joinus, every selector prefixed, only the rules the join screen uses.
   Our additions (not in delivery): .joinus-consent (design side 10-16 final supplement §13: required consent checkbox above the submit
   button; the 10-16 package also keeps the legacy recruitment text as-is, so the provisional marker and the pending privacy box are gone),
   .error-msg (shared jQuery-validate script in Views/Home/JoinUs.cshtml writes into it),
   #btnSubmit override (the legacy inline style in JoinUs.cshtml paints #btnSubmit #263e60). */
.drmvpv2-joinus{--navy:#071b4d;--blue:#0b63e5;--yellow:#ffbd1a;--line:#d8e2ef;--soft:#f3f7fc;--muted:#60728e;--shadow:0 18px 50px rgba(7,27,77,.12);color:var(--navy);font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;line-height:1.65}
.drmvpv2-joinus,.drmvpv2-joinus *,.drmvpv2-joinus *::before,.drmvpv2-joinus *::after{box-sizing:border-box}
.drmvpv2-joinus a{color:inherit}
.drmvpv2-joinus.system-main{min-height:640px;background:linear-gradient(150deg,#f6f9fd 0,#fff 48%,#f0f5fc 100%)}
.drmvpv2-joinus .page-hero{padding:72px 30px 52px;text-align:center;background:radial-gradient(circle at 82% 12%,rgba(255,189,26,.18),transparent 24%),linear-gradient(150deg,#edf5ff,#fff)}
.drmvpv2-joinus .eyebrow{margin:0 0 14px;color:var(--blue);font-size:13px;font-weight:900;letter-spacing:.16em}
.drmvpv2-joinus .page-hero h1{margin:0;font-size:46px;line-height:1.25}
.drmvpv2-joinus .content-wrap{max-width:1240px;margin:auto;padding:48px 30px 80px}
.drmvpv2-joinus .join-copy{max-width:950px;margin:0 auto 34px;padding:26px;border-left:5px solid var(--yellow);border-radius:0 18px 18px 0;background:#fff;box-shadow:0 10px 30px rgba(7,27,77,.06)}
.drmvpv2-joinus .join-copy h2{margin:0 0 8px;font-size:20px}
.drmvpv2-joinus .join-copy h3{margin:22px 0 0;font-size:17px}
.drmvpv2-joinus .join-copy p{margin:0 0 12px;color:var(--muted);line-height:1.8}
.drmvpv2-joinus .requirements{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 20px;padding:0;list-style:none}
.drmvpv2-joinus .requirement{padding:16px;border-radius:14px;background:#edf4fd;color:#365173;font-size:14px;font-weight:800}
.drmvpv2-joinus .joinus-reminder{padding:14px 16px;border-radius:12px;background:var(--soft)}
.drmvpv2-joinus .joinus-reminder strong{display:block;margin-bottom:4px;font-size:15px}
.drmvpv2-joinus .joinus-reminder p{margin:0}
.drmvpv2-joinus .form-card{min-width:0;padding:38px;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:var(--shadow)}
.drmvpv2-joinus .form-card h2{margin:0 0 26px;font-size:28px}
.drmvpv2-joinus .form-grid{display:grid;gap:17px}
.drmvpv2-joinus .form-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.drmvpv2-joinus .field{min-width:0;display:grid;gap:7px;color:#314564;font-size:14px;font-weight:800}
.drmvpv2-joinus .field input{width:100%;min-height:52px;padding:12px 14px;border:1px solid #cbd8e8;border-radius:10px;background:#fff;color:var(--navy);font:inherit;font-weight:400;outline:0}
.drmvpv2-joinus .field input[type=file]{padding:12px 14px;line-height:1.6}
.drmvpv2-joinus .field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,99,229,.1)}
.drmvpv2-joinus .wide{grid-column:1/-1}
.drmvpv2-joinus .error-msg,.drmvpv2-joinus .error-msg label{margin:0;color:#a4262c;font-size:13px;font-weight:700}
.drmvpv2-joinus .error-msg:empty{display:none}
.drmvpv2-joinus .joinus-consent{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 10px;color:#314564;font-size:14px;font-weight:700}
.drmvpv2-joinus .joinus-consent input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:3px 0 0;accent-color:var(--blue)}
.drmvpv2-joinus .joinus-consent > label{flex:1 1 0;min-width:0;margin:0;cursor:pointer}
.drmvpv2-joinus .joinus-consent a{color:var(--blue);text-decoration:underline}
.drmvpv2-joinus .joinus-consent .error-msg{flex:1 1 100%}
.drmvpv2-joinus .primary-action,.drmvpv2-joinus #btnSubmit{width:100%;min-height:54px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:16px;font-weight:900;cursor:pointer}
.drmvpv2-joinus #btnSubmit:disabled{opacity:.6;cursor:wait}
.drmvpv2-joinus a:focus-visible,.drmvpv2-joinus button:focus-visible,.drmvpv2-joinus input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:767px){
    .drmvpv2-joinus .page-hero{padding:52px 18px 38px}
    .drmvpv2-joinus .page-hero h1{font-size:32px}
    .drmvpv2-joinus .content-wrap{padding:34px 18px 60px}
    .drmvpv2-joinus .requirements{grid-template-columns:1fr}
    .drmvpv2-joinus .form-card{padding:24px 18px;border-radius:20px}
    .drmvpv2-joinus .form-grid.two{grid-template-columns:1fr}
}
/* Case 419 pkg 4 (design 2026-10-27 T7/T8/T9): result screens #drMvpJoinUsSuccess / #drMvpJoinUsPending in JoinUs_drmvp_v2.cshtml.
   Values copied from 01_Form_Result_States_UI_Review.html (.result / .result-icon / .kicker / h2 / .copy / .receipt / .note / .actions / .action,
   success #087a53 #eefaf5 #9bd7bf, pending #8a6200 #fff8e6 #e8c96c, mobile <=767px rules). The card itself reuses .form-card. */
.drmvpv2-joinus .joinus-result{display:grid;justify-items:center;text-align:center}
.drmvpv2-joinus .joinus-result[hidden]{display:none}
.drmvpv2-joinus .joinus-result-icon{display:grid;width:74px;height:74px;place-items:center;border:1px solid #9bd7bf;border-radius:50%;background:#eefaf5;color:#087a53;box-shadow:0 14px 32px rgba(8,122,83,.14)}
.drmvpv2-joinus .joinus-result-icon svg{width:39px;height:39px}
.drmvpv2-joinus .joinus-result-kicker{margin:14px 0 5px;color:#087a53;font-size:12px;font-weight:900;letter-spacing:.12em}
.drmvpv2-joinus .joinus-result .joinus-result-title{margin:0;font-size:30px;line-height:1.35;outline:0}
.drmvpv2-joinus .joinus-result-copy{max-width:570px;margin:10px auto 0;color:#4c678d;font-size:16px;line-height:1.7}
.drmvpv2-joinus .joinus-result-receipt{width:min(540px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:19px auto 0;border:1px solid #9bd7bf;border-radius:15px;background:#eefaf5;text-align:left}
.drmvpv2-joinus .joinus-result-receipt div{min-width:0;padding:11px 16px}
.drmvpv2-joinus .joinus-result-receipt div+div{border-left:1px solid #9bd7bf}
.drmvpv2-joinus .joinus-result-receipt span{display:block;color:#557b6d;font-size:12px;font-weight:800}
.drmvpv2-joinus .joinus-result-receipt strong{display:block;margin-top:5px;color:#075c40;font-size:16px}
.drmvpv2-joinus .joinus-result-note{display:flex;align-items:flex-start;gap:8px;max-width:570px;margin:14px 0 0;color:#617692;font-size:14px;line-height:1.55;text-align:left}
.drmvpv2-joinus .joinus-result-note::before{content:"i";display:grid;flex:0 0 20px;width:20px;height:20px;place-items:center;border-radius:50%;background:#e7effa;color:#0969e8;font-size:12px;font-weight:900}
.drmvpv2-joinus .joinus-result-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:19px}
.drmvpv2-joinus .joinus-result-action{display:inline-grid;min-width:176px;min-height:48px;place-items:center;padding:10px 22px;border:1px solid #0969e8;border-radius:12px;background:#0969e8;color:#fff;font:inherit;font-weight:900;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px rgba(9,105,232,.18)}
.drmvpv2-joinus .joinus-result-action:hover,.drmvpv2-joinus .joinus-result-action:focus{color:#fff;text-decoration:none}
.drmvpv2-joinus .joinus-result-action.is-secondary{background:#fff;color:#0969e8;box-shadow:none}
.drmvpv2-joinus .joinus-result-action.is-secondary:hover,.drmvpv2-joinus .joinus-result-action.is-secondary:focus{color:#0969e8}
.drmvpv2-joinus .joinus-result.is-pending .joinus-result-icon{border-color:#e8c96c;background:#fff8e6;color:#8a6200;box-shadow:0 14px 32px rgba(138,98,0,.12)}
.drmvpv2-joinus .joinus-result.is-pending .joinus-result-kicker{color:#8a6200}
.drmvpv2-joinus .joinus-result.is-pending .joinus-result-receipt{border-color:#e8c96c;background:#fff8e6}
.drmvpv2-joinus .joinus-result.is-pending .joinus-result-receipt div+div{border-color:#e8c96c}
.drmvpv2-joinus .joinus-result.is-pending .joinus-result-receipt span{color:#806a35}
.drmvpv2-joinus .joinus-result.is-pending .joinus-result-receipt strong{color:#725200}
@media(max-width:767px){
    .drmvpv2-joinus .joinus-result-icon{width:76px;height:76px}
    .drmvpv2-joinus .joinus-result .joinus-result-title{font-size:27px}
    .drmvpv2-joinus .joinus-result-receipt{grid-template-columns:minmax(0,1fr)}
    .drmvpv2-joinus .joinus-result-receipt div+div{border-top:1px solid #9bd7bf;border-left:0}
    .drmvpv2-joinus .joinus-result.is-pending .joinus-result-receipt div+div{border-top-color:#e8c96c}
    .drmvpv2-joinus .joinus-result-actions{width:100%}
    .drmvpv2-joinus .joinus-result-action{width:100%}
}