/* Sign in page (/sign-in/). A white page on the reference's structure: the site header's logo, one centred column about
   400px wide, and a quiet row of client logos at the foot of the screen. The field, message and send styles are the Urgent
   help form's (uh-* renamed si-*); the button is the family's coral .v9-btn at the column's full width, without the lift,
   since this is a multi-step form. Sailec only: bold for the headings, medium for everything else. */

@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_medium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_bold-webfont.woff2') format('woff2');font-weight:700;font-display:swap}

html,body{margin:0;padding:0;background:#fff}
body.si-page{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- base ---------- */
.v9{font-family:Sailec,Helvetica,Arial,sans-serif;font-weight:500;color:#232834;-webkit-font-smoothing:antialiased;text-wrap:pretty}
.v9 *{box-sizing:border-box}
.v9 :where(h1,h2,p){margin:0;padding:0;font:inherit;color:inherit}
.v9 a{color:inherit;text-decoration:none}
.v9 svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.si-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the page: the logo, the column, and the logo row pushed to the foot of the screen (at least 88px below the
   column on short screens). On phones the column is the full width, 24px in from each side ---------- */
.si{display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100svh;padding:0 24px}
.si-top{padding-top:40px}
.v9 .si-logo{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:4px;border-radius:6px}
.si-logo img{display:block;width:104px;height:auto}
.v9 .si-logo:focus-visible{outline:2px solid #232834;outline-offset:2px}
.si-col{width:100%;max-width:370px;margin-top:44px}
.v9 .si-h{font-weight:700;font-size:36px;line-height:1.15;letter-spacing:-.03em;text-align:center;text-wrap:balance;outline:0}
@media (max-width:560px){.si-top{padding-top:28px}.si-col{max-width:none;margin-top:32px}.v9 .si-h{font-size:32px}}

/* ---------- steps: one view at a time. The old view fades out, then the new one fades in (the heading and privacy line only
   when they change); the column's height eases to fit, so nothing below it jumps ---------- */
.si-stage{position:relative}
.si-stage.sizing{overflow:hidden;transition:height .32s cubic-bezier(.65,0,.35,1)}
.si-hw,.si-view,.si-pw{transition:opacity .2s cubic-bezier(.65,0,.35,1)}
.si-hw.out,.si-hw.pre,.si-view.out,.si-view.pre,.si-pw.out,.si-pw.pre{opacity:0}

/* ---------- signed out: a quiet bone note under the heading ---------- */
.v9 .si-note{display:flex;align-items:flex-start;gap:10px;margin-top:24px;padding:14px 16px;border-radius:8px;background:#F1EEEA;font-size:16px;line-height:1.45;color:#232834}
.si-note::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23232834' stroke-width='1.5'/%3E%3Cpath d='M8 7.3v4' fill='none' stroke='%23232834' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='.95' fill='%23232834'/%3E%3C/svg%3E") no-repeat center/16px 16px}
.si-note-w:not(:empty)+.si-form{margin-top:24px}

/* ---------- the field, as on the Urgent help form: the label always shown, the hint under it, then the field (52px, 16px
   text). Its message appears once it has been filled in and left, or after the step's button ---------- */
.si-form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}
.si-f{min-width:0}
.v9 .si-f label{display:block;margin:0 0 6px;font-size:16px;line-height:1.35;color:#232834}
.si-in{position:relative}
.v9 .si-in input{display:block;width:100%;height:48px;margin:0;padding:0 16px;border:1px solid #8E939E;border-radius:8px;background:#fff;font-family:inherit;font-weight:500;font-size:16px;line-height:1.4;color:#232834;-webkit-appearance:none;appearance:none;outline:0;transition:border-color .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1),color .2s cubic-bezier(.65,0,.35,1)}
.v9 .si-in input::placeholder{color:#6b7180;opacity:1}
/* the active field takes the button's coral as its outline */
.v9 .si-in input:focus,.v9 .si-f.fx .si-in input{border-color:#FA5478;box-shadow:0 0 0 1px #FA5478}
/* the email field's envelope, inside the field at its left */
.v9 .si-in-ic input{padding-left:44px}
.v9 .si-ic{position:absolute;left:14px;top:50%;z-index:1;width:20px;height:20px;margin-top:-10px;color:#4f5565;pointer-events:none}
.v9 .si-f.bad .si-in input{border-color:#d33d5c}
.v9 .si-f.bad .si-in input:focus{border-color:#d33d5c;box-shadow:0 0 0 1px #d33d5c}
.si-form.locked .si-in input{color:#4f5565}
/* a valid email: the family's small coral check in a blush disc, inside the field at its right */
.v9 .si-in-ck input{padding-right:48px}
.si-ck{position:absolute;top:50%;right:10px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#FDE0E6;pointer-events:none;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.v9 .si-ck svg{width:14px;height:14px;stroke:#d33d5c;stroke-width:2.6}
.si-f.ok .si-ck{transform:scale(1)}
/* a message: the family's icon and dark coral text, under its field (or above the button for the whole form) */
.v9 .si-err{display:none;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:16px;line-height:1.4;color:#d33d5c}
.v9 .si-err.on{display:flex}
.si-err::before{content:"";flex:none;width:16px;height:16px;margin-top:2.5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23d33d5c' stroke-width='1.5'/%3E%3Cpath d='M8 4.7v4' fill='none' stroke='%23d33d5c' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.1' r='.95' fill='%23d33d5c'/%3E%3C/svg%3E") no-repeat center/16px 16px}
.v9 .si-fe .si-err{margin:0 0 16px}
.v9 .si-err .si-a{color:inherit;text-decoration-color:currentColor}

/* ---------- the password step: the email they entered, read-only in a bone row with Change at its right (it stays in the
   form, so password managers pair the two); the password with Show / Hide inside the field; Caps Lock under it ---------- */
.si-who{display:flex;align-items:center;gap:8px;height:48px;padding:0 2px 0 16px;border-radius:8px;background:#F1EEEA}
.si-who:has(.si-who-in:focus-visible){box-shadow:0 0 0 2px #FA5478}
.v9 .si-who-in{flex:1 1 auto;min-width:0;height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-family:inherit;font-weight:500;font-size:16px;color:#232834;text-overflow:ellipsis;outline:0;-webkit-appearance:none;appearance:none}
.v9 .si-chg{flex:none;height:44px;margin:0;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#232834;font-family:inherit;font-weight:500;font-size:16px;cursor:pointer;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .si-chg:hover{text-decoration-color:#232834}}
.v9 .si-chg:focus-visible{outline:2px solid #232834;outline-offset:-2px}
.v9 .si-chg:disabled{cursor:default;color:#4f5565}
.v9 .si-in-eye input{padding-right:84px}
.v9 .si-eye{position:absolute;top:2px;right:2px;display:flex;align-items:center;justify-content:center;min-width:68px;height:44px;margin:0;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#232834;font-family:inherit;font-weight:500;font-size:16px;cursor:pointer;transition:background-color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .si-eye:hover{background:#F1EEEA}}
.v9 .si-eye:focus-visible{outline:2px solid #232834;outline-offset:0}
.v9 .si-eye:disabled{cursor:default;color:#4f5565;background:transparent}
.v9 .si-caps{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:16px;line-height:1.4;color:#232834}
.si-caps::before{content:"";flex:none;width:16px;height:16px;margin-top:2.5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.2 2.9 7.6h3v3.1h4.2V7.6h3Z' fill='none' stroke='%23232834' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5.9 13.6h4.2' fill='none' stroke='%23232834' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/16px 16px}
.si-fgt{display:flex;margin-top:-10px}

/* ---------- the family's coral button at the column's full width. No lift on hover or press: the colour deepens to dark
   coral, nothing moves ---------- */
.v9-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 26px;border:1px solid transparent;border-radius:9999px;background:#FA5478;color:#fff;font-family:inherit;font-weight:700;font-size:15px;line-height:20px;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .2s cubic-bezier(.65,0,.35,1)}
.v9 button.v9-btn{color:#fff}
@media (hover:hover){.v9-btn:hover{background:#C43A5C}}
.v9-btn:active{background:#C43A5C}
.v9-btn:focus-visible{outline:2px solid #232834;outline-offset:2px}
.v9-btn:disabled{cursor:default}
.v9 .si-go{display:flex;width:100%;height:48px;padding:0 24px;font-weight:500;font-size:16px}
/* sending: the fields lock and quieten, the label gives way to the family's spinner and the button quietens to #FCA3B6 */
.si-send{display:grid;grid-template-columns:minmax(0,1fr)}
.v9 .v9-btn .em-spin{display:none;width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;animation:emSpin .8s linear infinite}
@keyframes emSpin{to{transform:rotate(360deg)}}
.si-send.sending .si-go{background:#FCA3B6}
.si-send.sending .si-go .em-btn-lbl{visibility:hidden}
.v9 .si-send.sending .si-go .em-spin{display:block;position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px}
/* signed in: the button fades and the family's coral check disc arrives in its place with the message */
.si-go-st{display:grid;grid-template-columns:minmax(0,1fr)}
.si-go-st>*{grid-area:1/1;min-width:0}
.si-send.done .si-go{opacity:0;visibility:hidden;transition:opacity .25s cubic-bezier(.65,0,.35,1),visibility 0s linear .25s}
.si-done{pointer-events:none}
.em-talk-ic{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#FA5478}
.v9 .em-talk-ic svg{width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none}
.v9 .si-done-in{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;font-size:16px;line-height:1.45;color:#232834;pointer-events:auto;animation:siIn .5s cubic-bezier(.65,0,.35,1) .18s both}
@keyframes siIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- reset: a short line under the heading, the field and button, then Back to sign in; once sent, the coral check
   disc beside the confirmation ---------- */
.v9 .si-lead{margin-top:12px;font-size:16px;line-height:1.5;color:#4f5565;text-align:center;text-wrap:balance}
.si-lead+.si-form{margin-top:28px}
.si-sent-w{margin-top:28px}
.v9 .si-sent{display:flex;align-items:flex-start;gap:14px;font-size:16px;line-height:1.5;color:#4f5565}
.si-em{color:#232834;overflow-wrap:anywhere}
.v9 .si-back{display:flex;justify-content:center;margin-top:12px}

/* ---------- links and the privacy line: body grey, with ink links underlined in tint. Each link's tap area is 44px tall;
   its focus ring stays close to the words ---------- */
.v9 .si-a{position:relative;color:#232834;white-space:nowrap;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
.si-a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
@media (hover:hover){.v9 .si-a:hover{color:#232834;text-decoration-color:#232834}.v9 .si-err .si-a:hover{color:inherit;text-decoration-color:currentColor}}
.v9 .si-a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
.v9 button.si-a{margin:0;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.v9 .si-lnk{display:inline-flex;align-items:center;min-height:44px}
.v9 button.si-a:disabled{cursor:default;color:#4f5565}
.v9 .si-priv{margin-top:32px;font-size:12px;line-height:18px;color:#4f5565;text-align:center;text-wrap:balance}

/* ---------- the logo row: the homepage's line, then ten logos in two rows of five, in one flat grey and still. Each sits in
   a fixed box (the logo files share one 240 x 140 frame, cropped top and bottom), so nothing moves as they arrive; they load
   after the form. Phones: three a row, nine logos ---------- */
.si-cl{width:100%;max-width:640px;margin-top:auto;padding:88px 0 48px}
.v9 .si-cl-p{font-size:16px;line-height:24px;color:#4f5565;text-align:center;text-wrap:balance}
.si-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 20px;margin-top:16px}
.si-lg{position:relative;display:block;aspect-ratio:12/5;overflow:hidden}
.si-lg img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:brightness(0) opacity(.4);opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1)}
.si-lg img.on{opacity:1}
@media (max-width:559px){.si-cl{max-width:360px;padding:72px 0 40px}.si-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px}.si-lg:nth-child(n+10){display:none}}
/* ---------- short screens (phones on their side, small laptop windows): the space above and inside the form tightens and
   the field and button are 48px, so the form stays in the first screen and the password, Forgot your password? and Sign in
   fit together above the keyboard ---------- */
@media (max-height:540px) and (min-width:561px){
.si-top{padding-top:8px}
.si-col{margin-top:4px}
.v9 .si-h{font-size:28px}
.si-form,.si-lead+.si-form,.si-note-w:not(:empty)+.si-form{gap:12px;margin-top:14px}
.si-fgt{margin-top:-8px}
.v9 .si-priv{margin-top:20px}
.v9 .si-note{margin-top:14px;padding:12px 16px}
.v9 .si-lead{margin-top:6px}
.si-sent-w{margin-top:14px}
.si-cl{padding-top:56px;padding-bottom:32px}
}

/* ---------- the environment: a quiet menu button under Continue (Commercial, Federal, Government); its menu opens below it,
   the chosen one marked with the coral check ---------- */
.si-envw{position:relative;display:flex;justify-content:center;margin-top:20px}
.v9 .si-env{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0 4px;border:0;border-radius:4px;background:none;color:#232834;font-family:inherit;font-weight:500;font-size:16px;cursor:pointer}
.v9 .si-env span{text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .si-env:hover span{text-decoration-color:#232834}}
.v9 .si-env:focus-visible{outline:2px solid #232834;outline-offset:2px}
.v9 .si-chev{flex:none;width:14px;height:14px;stroke-width:1.75;transition:transform .2s cubic-bezier(.65,0,.35,1)}
.si-env[aria-expanded="true"] .si-chev{transform:rotate(180deg)}
.si-env-menu{position:absolute;left:50%;top:calc(100% + 4px);z-index:30;display:grid;gap:4px;width:240px;margin-left:-120px;padding:6px;border:1px solid #E4DFD9;border-radius:10px;background:#fff;box-shadow:0 10px 28px rgba(35,40,52,.12)}
.v9 .si-env-o{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:0;padding:0 12px;border:0;border-radius:6px;background:none;color:#232834;font-family:inherit;font-weight:500;font-size:16px;text-align:left;cursor:pointer;outline:0}
@media (hover:hover){.v9 .si-env-o:hover{background:#F1EEEA}}
.v9 .si-env-o:focus{background:#F1EEEA}
.v9 .si-env-o:focus-visible{box-shadow:inset 0 0 0 2px #232834}
.v9 .si-env-ck{flex:none;width:16px;height:16px;stroke:#d33d5c;stroke-width:2.4;visibility:hidden}
.si-env-o[aria-checked="true"] .si-env-ck{visibility:visible}
.si-env-l{display:flex;align-items:center;gap:12px;min-width:0}
.v9 .si-env-ic{flex:none;width:20px;height:20px;color:#4f5565;stroke-width:1.5}
@media (prefers-reduced-motion:reduce){.v9 .si-chev,.v9 .si-env span{transition:none}}

@media (prefers-reduced-motion:reduce){.v9 .si-in input,.si-ck,.v9-btn,.v9 .si-a,.v9 .si-chg,.v9 .si-eye,.si-lg img,.si-hw,.si-view,.si-pw,.si-stage.sizing,.si-send.done .si-go{transition:none}.v9 .si-done-in{animation:none}.v9 .v9-btn .em-spin{animation-duration:2.4s}}