*{margin:0;padding:0;box-sizing:border-box;}

body{
font-family:'Source Sans 3','Source Sans Pro',Segoe UI,Arial,sans-serif;
background:#f5f5f7;
color:#1f1f1f;
overflow:hidden;
}


/* Ensure the HTML hidden attribute always wins over component display rules.
   This prevents password-setup headings from remaining visible after returning
   to the sign-in screen in some browsers/webviews. */
[hidden] {
  display: none !important;
}

.layout{display:flex;height:100vh;}

.left-image{
width:50%;
background-color:#f5f5f7;
background-image:url('./Heading.jpg');
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
}

.right-side{
width:50%;
display:flex;
justify-content:center;
align-items:center;
padding:24px;
position:relative;
background:#f5f5f7;
overflow-y:auto;
}

.card-wrap{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:10px !important;
width:100% !important;
max-width:460px !important;
}

.card{
background:white !important;
width:100% !important;
max-width:460px !important;
padding:38px !important;
border-radius:24px !important;
box-shadow:0 10px 40px rgba(0,0,0,.08) !important;
border:1px solid #ececec !important;
box-sizing:border-box !important;
}

.welcome{
display:block !important;
text-align:center !important;
font-family:'Source Sans 3','Source Sans Pro',Segoe UI,Arial,sans-serif !important;
font-size:20px !important;
font-weight:600 !important;
color:#3B3F3F !important;
margin:0 0 14px 0 !important;
line-height:1.2 !important;
width:100% !important;
}

.logo{width:130px;display:block;margin:0 auto 28px;}

/* ── Header ── */
p.headline{
text-align:center;
font-size:30px;
font-weight:800;
color:#111;
margin:0 0 10px 0;
line-height:1.15;
display:block;
}

p.subtitle{
text-align:center;
font-size:16px;
font-weight:400;
color:#777;
margin:0 0 28px 0;
line-height:1.4;
display:block;
}

/* ── Form labels ── */
label{
display:block;
font-size:18px;
font-weight:700;
margin-bottom:8px;
margin-top:16px;
color:#3B3F3F;
}

/* ── Text inputs ── */
input[type=email],
input[type=text]{
width:100%;
height:56px;
border-radius:12px;
border:1.5px solid #d8d8d8;
padding:0 16px;
font-size:18px;
font-family:'Source Sans 3','Source Sans Pro',Segoe UI,Arial,sans-serif;
outline:none;
color:#3B3F3F;
background:white;
}

input[type=email]:focus,
input[type=text]:focus{
border-color:#D31145;
box-shadow:0 0 0 3px rgba(211,17,69,.1);
}

/* ── Password: flex container so eye is inside the border ── */
.password{
display:flex;
align-items:center;
height:56px;
border-radius:12px;
border:1.5px solid #d8d8d8;
background:white;
overflow:hidden;
}

.password:focus-within{
border-color:#D31145;
box-shadow:0 0 0 3px rgba(211,17,69,.1);
}

.password input[type=password],
.password input[type=text]{
flex:1;
height:100%;
border:none;
box-shadow:none;
border-radius:0;
padding:0 0 0 16px;
outline:none;
font-size:18px;
font-family:'Source Sans 3','Source Sans Pro',Segoe UI,Arial,sans-serif;
color:#3B3F3F;
background:transparent;
}

.eye-btn{
flex-shrink:0;
width:64px;
height:100%;
border:none;
background:#eeeeee;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
}

.eye-btn svg{
display:block;
stroke:#111;
}

/* ── Options row ── */
.options{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:16px;
margin-bottom:22px;
}

.options a{
font-size:18px;
font-weight:600;
}

.remember{
display:flex;
align-items:center;
gap:10px;
font-weight:500;
font-size:18px;
margin-top:0;
color:#3B3F3F;
}

.remember input{
width:16px;
height:16px;
accent-color:#D31145;
}

a{color:#D31145;font-weight:600;text-decoration:none;}

/* ── Sign In button ── */
.signin{
width:100% !important;
height:56px !important;
border:none !important;
border-radius:30px !important;
background:#D31145 !important;
color:white !important;
font-size:18px !important;
font-weight:700 !important;
letter-spacing:0.5px !important;
text-transform:uppercase !important;
cursor:pointer !important;
margin-bottom:14px !important;
font-family:'Source Sans 3','Source Sans Pro',Segoe UI,Arial,sans-serif !important;
}

.signin:hover{background:#b80e3a;}

.signin:disabled{
opacity:.75;
cursor:wait;
}

.form-message{
min-height:18px;
font-size:14px;
line-height:1.3;
text-align:center;
margin:-6px 0 10px;
color:#666;
}

.form-message.error{
color:#D31145;
font-weight:600;
}

/* ── Get Started row on sign-in screen ── */
.get-started-row{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:18px 0 22px;
margin-bottom:14px;
border-top:1px solid #ececec;
margin-top:12px;
padding-top:22px;
}

.get-started-prompt{
font-size:18px;
color:#555;
font-weight:500;
}

.get-started-link{
font-size:18px;
font-weight:700;
color:#D31145;
}

.get-started-link:hover{
text-decoration:underline;
}

/* ── Disclaimer footer row: Privacy · Staff login · Terms ── */
.below-card{
display:block !important;
text-align:center !important;
margin-top:18px !important;
width:100% !important;
max-width:460px;
}

.footer-links{
display:block;
text-align:center;
line-height:2;
}

.footer-item{
display:inline-block;
white-space:nowrap;
}

a.footer-link,
a.footer-link span,
a.staff-link,
a.staff-link span,
a#staffLoginLink,
a#staffLoginLink span{
font-size:13px !important;
font-weight:500 !important;
color:#7a7a7a !important;
text-decoration:none !important;
white-space:nowrap;
}

a.footer-link:hover,
a.footer-link:hover span,
a.staff-link:hover,
a.staff-link:hover span,
a#staffLoginLink:hover,
a#staffLoginLink:hover span{
color:#444 !important;
text-decoration:underline !important;
}

a.footer-link:focus-visible{
outline:2px solid #0076BB;
outline-offset:2px;
border-radius:2px;
}

.footer-sep{
font-size:13px;
color:#b8b8b8;
margin:0 8px;
user-select:none;
}

/* ── Responsive ── */
@media(max-width:1100px){
body{overflow:auto;}
.layout{flex-direction:column;height:auto;}
.left-image{width:100%;height:280px;}
.right-side{width:100%;padding:24px;}
.card{max-width:100%;padding:28px 22px;}
.welcome{font-size:20px;}
.logo{width:120px;}
p.headline{font-size:26px;}
p.subtitle{font-size:15px;}
}

/* Forgot password flow */
.forgot-view{
width:100%;
}

.forgot-copy{
color:#5f6368;
font-size:18px;
line-height:1.35;
text-align:center;
margin:0 0 18px;
}

.success-copy{
color:#3B3F3F;
font-weight:600;
}

.forgot-view input[type=password],
.forgot-view input[type=text],
.forgot-view input[type=email]{
width:100%;
height:56px;
border-radius:12px;
border:1.5px solid #d8d8d8;
padding:0 16px;
font-size:18px;
font-family:'Source Sans 3','Source Sans Pro',Segoe UI,Arial,sans-serif;
outline:none;
color:#3B3F3F;
background:white;
margin-bottom:16px;
}

.forgot-view input[type=password]:focus,
.forgot-view input[type=text]:focus,
.forgot-view input[type=email]:focus{
border-color:#D31145;
box-shadow:0 0 0 3px rgba(211,17,69,.1);
}

.text-button{
display:block;
width:auto;
margin:12px auto 0;
border:none;
background:transparent;
color:#D31145;
font-family:'Source Sans 3','Source Sans Pro',Segoe UI,Arial,sans-serif;
font-size:18px;
font-weight:700;
cursor:pointer;
}

/* mobile/narrow viewport fix: hide the collage whenever the available viewport is tablet/mobile sized or portrait */
@media (max-width: 1300px), (orientation: portrait), (hover: none) and (pointer: coarse) {
.layout{
display:block;
height:auto;
min-height:100vh;
}

.left-image{
display:none;
visibility:hidden;
width:0;
height:0;
min-height:0;
overflow:hidden;
background-image:none;
}

.right-side{
width:100%;
min-height:100vh;
padding:24px 16px;
}
}

/* forgot-password fixes: full-size verification code field and standard reset form for password managers */
.forgot-view .verification-code-field,
.forgot-view input#verificationCodeField{
display:block;
width:100%;
height:56px;
min-height:56px;
border-radius:12px;
border:1.5px solid #d8d8d8;
padding:0 16px;
font-size:18px;
line-height:56px;
font-family:'Source Sans 3','Source Sans Pro',Segoe UI,Arial,sans-serif;
outline:none;
color:#3B3F3F;
background:white;
box-shadow:none;
margin-bottom:16px;
}

.forgot-view .verification-code-field:focus,
.forgot-view input#verificationCodeField:focus{
border-color:#D31145;
box-shadow:0 0 0 3px rgba(211,17,69,.1);
}

#resetPasswordForm{
width:100%;
}

#resetUsernameField[hidden]{
display:none;
}

/* ── Dark mode (follows the visitor's OS appearance setting) ── */
@media (prefers-color-scheme: dark){
  body{ background:#1a1a1a; color:#ededed; }
  .left-image{ background-color:#1a1a1a; }
  .right-side{ background:#1a1a1a; }

  .card{
    background:#242424 !important;
    border:1px solid #3a3a3a !important;
    box-shadow:0 10px 40px rgba(0,0,0,.45) !important;
  }

  .welcome{ color:#e7e7e7 !important; }
  p.headline{ color:#f4f4f4; }
  p.subtitle{ color:#b3b3b3; }
  label{ color:#e7e7e7; }
  .remember{ color:#e7e7e7; }

  input[type=email],
  input[type=text],
  .forgot-view input[type=password],
  .forgot-view input[type=text],
  .forgot-view input[type=email],
  .forgot-view .verification-code-field,
  .forgot-view input#verificationCodeField{
    background:#1c1c1c;
    color:#ededed;
    border-color:#4a4a4a;
  }
  input::placeholder{ color:#8a8a8a; }

  .password{ background:#1c1c1c; border-color:#4a4a4a; }
  .password input[type=password],
  .password input[type=text]{ color:#ededed; }
  .eye-btn{ background:#2e2e2e; }
  .eye-btn svg{ stroke:#cfcfcf; }

  /* Lighten CFIB red on links so it keeps WCAG AA contrast on a dark surface */
  a{ color:#ff6b86; }
  .get-started-link,
  .text-button{ color:#ff6b86; }
  .get-started-prompt{ color:#b3b3b3; }
  .get-started-row{ border-top-color:#3a3a3a; }

  .form-message{ color:#a8a8a8; }
  .form-message.error{ color:#ff6b86; }

  .forgot-copy{ color:#b3b3b3; }
  .success-copy{ color:#e7e7e7; }

  a.footer-link, a.footer-link span,
  a.staff-link, a.staff-link span,
  a#staffLoginLink, a#staffLoginLink span{ color:#9a9a9a !important; }
  a.footer-link:hover, a.footer-link:hover span,
  a.staff-link:hover, a.staff-link:hover span,
  a#staffLoginLink:hover, a#staffLoginLink:hover span{ color:#d0d0d0 !important; }
  .footer-sep{ color:#5a5a5a; }
}

/* ── First-time password row on sign-in screen ── */
.first-password-row{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:4px 0 8px;
margin-bottom:8px;
}

.first-password-prompt{
font-size:18px;
color:#555;
font-weight:500;
}

.first-password-link{
font-size:18px;
font-weight:700;
color:#D31145;
}

.first-password-link:hover{
text-decoration:underline;
}

@media (prefers-color-scheme: dark){
  .first-password-link,
  .first-password-prompt{ color:#b3b3b3; }
}


/* v66 mobile polish: keep controls touch-friendly and prevent small-screen overflow */
@media (max-width: 520px), (hover: none) and (pointer: coarse) {
  html, body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .right-side {
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    align-items: flex-start;
  }

  .card-wrap {
    max-width: 100% !important;
    gap: 12px !important;
  }

  .card {
    max-width: 100% !important;
    padding: 28px 20px !important;
    border-radius: 22px !important;
  }

  .logo {
    width: 132px;
    margin-bottom: 24px;
  }

  label,
  .remember,
  .options a,
  .get-started-row,
  .text-button,
  .forgot-copy {
    font-size: 17px;
  }

  input[type=email],
  input[type=text],
  .password,
  .forgot-view input[type=email],
  .forgot-view input[type=text],
  .forgot-view input[type=password],
  .signin,
  button.signin {
    min-height: 56px;
    font-size: 17px;
  }

  .eye-btn {
    min-width: 56px;
  }

  .options {
    gap: 12px;
    flex-wrap: wrap;
  }

  .get-started-row {
    padding-top: 22px;
    text-align: center;
  }

  .footer-links {
    flex-wrap: wrap;
    row-gap: 8px;
    justify-content: center;
    padding: 0 8px;
  }
}

@media (max-width: 360px) {
  .card {
    padding: 24px 16px !important;
  }

  .welcome {
    font-size: 19px !important;
  }

  .logo {
    width: 120px;
  }

  .options {
    align-items: flex-start;
  }
}