/* ============================================================
   Sign up - front/layouts/signup_v2.blade.php and the pages that extend it,
   when CommonHelper::SIGNUP_V2 is on. The old views and their rules are untouched.

   White page with the four faint line drawings the legal and error pages carry,
   the progress bar on top, the title with its yellow bar, then one card.

   Scoped to .su-v2 throughout, because these pages keep the site's header and
   footer and so share the document with bootstrap and custom.css. The field,
   eye and code-box rules are the log in screens' own, copied rather than linked:
   auth-v2.css scopes them to .auth-v2, which is a different page.
   ============================================================ */
.su-v2{
  --brand:#ffcc2a;
  --brand-dark:#e6b415;
  --ink:#1a1a1a;
  --ink-2:#3f4550;
  --muted:#6b7280;
  --faint:#9aa1ad;
  --line:#e6e8ec;
  --line-2:#f0f1f4;
  --bg:#f4f5f7;
  --red:#b42318;
  --blue:#1c4f9c;
  --green:#12805c;
  --green-bg:#e6f6ef;
  --r:10px;

  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;
  /* .nav-top-fixed stands over the top of the page; this is the room it needs */
  padding-top:138px;
}
.su-v2 *{box-sizing:border-box}
.su-v2 h1,.su-v2 h2,.su-v2 h3{margin:0;font-weight:700;letter-spacing:-.01em}
.su-v2 p{margin:0}
.su-v2 ul,.su-v2 ol{margin:0;padding:0;list-style:none}
.su-v2 a{color:inherit;text-decoration:none}
.su-v2 img{max-width:100%}
/* the sprite in front/_partials/signup_icons_v2: each icon takes the colour of
   whatever it sits in, so only the size is set at each place */
.su-v2 svg{display:block;fill:none;stroke:currentColor}
.su-v2 button{font-family:inherit;font-size:inherit;cursor:pointer}
/* bootstrap rings every focused button, and it shows on a plain click */
.su-v2 button:focus{outline:none;box-shadow:none}
.su-v2 button:focus-visible{outline:2px solid var(--brand-dark);outline-offset:-2px}

.su-v2 .su-page{padding:34px 16px 72px}
.su-v2 .su-stage{
  max-width:1120px;margin:0 auto;min-height:560px;
  display:flex;flex-direction:column;align-items:center;
  background:
    url("../../images/barchart_lightdark.svg") left 0 top 150px / 120px auto no-repeat,
    url("../../images/hand-coin.svg") left 0 bottom 60px / 140px auto no-repeat,
    url("../../images/apartment.svg") right 0 top 130px / 140px auto no-repeat,
    url("../../images/money-light.svg") right 0 bottom 30px / 140px auto no-repeat;
}

.su-v2 .card{background:#fff;border:1px solid var(--line);border-radius:var(--r)}

/* ------------------------------------------------------------
   The progress bar: a dot per step joined by a line, done steps ticked
   ------------------------------------------------------------ */
.su-v2 .su-progress{width:100%;max-width:980px;margin-bottom:30px}
.su-v2 .su-count{display:none;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.su-v2 .su-steps{display:flex}
.su-v2 .su-steps li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.su-v2 .su-steps li + li::before{content:"";position:absolute;top:14px;right:calc(50% + 20px);left:calc(-50% + 20px);height:2px;border-radius:1px;background:var(--line)}
.su-v2 .su-steps li.is-done::before,
.su-v2 .su-steps li.is-on::before{background:var(--brand)}
.su-v2 .su-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:#fff;color:var(--faint);font-size:12.5px;font-weight:700}
.su-v2 .su-dot svg{width:14px;height:14px}
.su-v2 .is-done .su-dot{border-color:var(--brand);background:var(--brand);color:var(--ink)}
.su-v2 .is-on .su-dot{border-color:var(--ink);background:var(--ink);color:#fff;box-shadow:0 0 0 4px #fff1c2}
.su-v2 .su-label{padding:0 4px;font-size:11px;font-weight:600;color:var(--faint);line-height:1.3}
.su-v2 .is-done .su-label{color:var(--ink-2)}
.su-v2 .is-on .su-label{color:var(--ink)}

.su-v2 .su-head{text-align:center;max-width:620px;margin-bottom:24px}
.su-v2 .su-head h1{font-size:26px;line-height:1.3}
.su-v2 .su-head h1::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--brand);margin:12px auto 0}
.su-v2 .su-head p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--muted)}
.su-v2 .su-head p b{color:var(--ink);font-weight:600;word-break:break-all}

.su-v2 .su-card{width:100%;padding:8px 34px 30px;box-shadow:0 14px 36px rgba(16,24,40,.10)}
.su-v2 .su-card-wide{max-width:760px}
.su-v2 .su-card-narrow{max-width:440px}

/* ------------------------------------------------------------
   One part of a long form: an icon, a title, a line, then its fields
   ------------------------------------------------------------ */
.su-v2 .su-sec{padding:24px 0 26px}
.su-v2 .su-sec + .su-sec{border-top:1px solid var(--line-2)}
.su-v2 .su-sec-hd{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.su-v2 .su-sec-ic{flex:none;width:38px;height:38px;border-radius:10px;background:#fff7dd;color:#8a6b00;display:grid;place-items:center}
.su-v2 .su-sec-ic svg{width:19px;height:19px}
.su-v2 .su-sec-hd h2{display:flex;align-items:center;gap:6px;font-size:16px;line-height:1.4}
.su-v2 .su-sec-hd p{margin-top:2px;font-size:13px;line-height:1.55;color:var(--muted)}

.su-v2 .su-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.su-v2 .su-full{grid-column:1 / -1}
.su-v2 .su-opt{font-weight:500;color:var(--faint)}
.su-v2 .su-q{display:block;margin-bottom:10px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.su-v2 .su-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.su-v2 .su-ssn{max-width:340px;margin-bottom:20px}

/* ------------------------------------------------------------
   Fields - the log in screens' own, so the two read alike
   ------------------------------------------------------------ */
.su-v2 .auth-field[hidden]{display:none}
.su-v2 .auth-field > label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.su-v2 .auth-input{position:relative;display:flex;align-items:center}
.su-v2 .auth-input .auth-icon{position:absolute;left:14px;width:17px;height:17px;color:var(--faint);pointer-events:none}
.su-v2 .auth-input input.form-control{
  width:100%;height:46px;padding:0 14px 0 40px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-family:inherit;font-size:14px;color:var(--ink);box-shadow:none;transition:border-color .12s,box-shadow .12s;
}
.su-v2 .auth-input input.form-control::placeholder{color:var(--faint)}
.su-v2 .auth-input input.form-control:focus{outline:none;border-color:var(--brand-dark);box-shadow:0 0 0 3px #ffe89a}
.su-v2 .auth-input input.form-control:disabled{background:#f7f8fa;color:var(--faint)}
/* no icon in the box, so the text starts where the box does */
.su-v2 .auth-input.is-plain input.form-control{padding-left:14px}

/* the eye keeps its two classes, so custom.js still shows and hides the password. The room for
   it is asked for by the eye being there, not by the field's type: custom.js swaps the type to
   text to reveal the password, and the text would then run under the eye. */
.su-v2 .auth-input:has(.toggle-password) input.form-control{padding-right:46px}
.su-v2 .auth-input .toggle-password{
  position:absolute;right:6px;top:50%;float:none;margin:0;transform:translateY(-50%);
  display:grid;place-items:center;cursor:pointer;
  width:34px;height:34px;padding:0;border-radius:7px;
  background-color:transparent;background-image:none !important;color:var(--faint);
}
.su-v2 .auth-input .toggle-password:hover{background-color:#f4f5f7;color:var(--ink-2)}
.su-v2 .auth-input .toggle-password svg{width:19px;height:19px}
.su-v2 .auth-input .toggle-password .eye-open,
.su-v2 .auth-input .toggle-password.open-eye .eye-shut{display:none}
.su-v2 .auth-input .toggle-password.open-eye .eye-open{display:block}

/* jquery.validate marks the field as well as writing the message */
.su-v2 .auth-input input.form-control.error{border-color:var(--red)}
.su-v2 .auth-input input.form-control.error:focus{border-color:var(--red);box-shadow:0 0 0 3px #fdeceb}
.su-v2 label.error{display:block;margin:6px 0 0;font-size:12px;font-weight:500;color:var(--red)}
.su-v2 label.error:empty{display:none}
.su-v2 .su-err{margin-top:6px;font-size:12px;font-weight:500;color:var(--red)}

/* the date field keeps only the browser's own picker icon, on the right */
.su-v2 .su-date input.form-control{padding:0 12px 0 14px}

/* selects in the same box as the inputs, with a caret */
.su-v2 .su-select select{
  width:100%;height:46px;padding:0 38px 0 14px;border:1px solid var(--line);border-radius:9px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 13px center / 15px no-repeat;
  -webkit-appearance:none;appearance:none;font-family:inherit;font-size:14px;color:var(--ink);transition:border-color .12s,box-shadow .12s;
}
.su-v2 .su-select select:focus{outline:none;border-color:var(--brand-dark);box-shadow:0 0 0 3px #ffe89a}
.su-v2 .su-select select:disabled{background-color:#f7f8fa;color:var(--faint);cursor:not-allowed}
.su-v2 .su-select select.error{border-color:var(--red)}

/* +1 in front of the number, the only code live offers */
.su-v2 .su-phone input.form-control{padding-left:72px}
.su-v2 .su-cc{position:absolute;left:1px;top:1px;bottom:1px;z-index:1;display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;border-right:1px solid var(--line);border-radius:8px 0 0 8px;background:#f7f8fa;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.su-v2 .su-cc img{border-radius:2px}
/* the code is a real select, because it is one live - drawn as part of the chip */
.su-v2 .su-cc select{
  width:auto;padding:0;border:0;background:none;color:inherit;
  font-family:inherit;font-size:inherit;font-weight:inherit;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.su-v2 .su-cc select:focus{outline:none}

/* ------------------------------------------------------------
   One-of-many choices as cards, with a round mark
   ------------------------------------------------------------ */
.su-v2 .su-choices{display:grid;gap:12px}
.su-v2 .su-choices-2{grid-template-columns:1fr 1fr}
.su-v2 .su-choices-3{grid-template-columns:repeat(3,1fr)}
.su-v2 .su-choice{
  position:relative;display:flex;flex-direction:column;gap:4px;margin:0;padding:15px 16px 15px 46px;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;
}
.su-v2 .su-choice:hover{border-color:#d3d7de}
.su-v2 .su-choice input{position:absolute;opacity:0;pointer-events:none}
.su-v2 .su-radio{position:absolute;left:16px;top:16px;width:18px;height:18px;border-radius:50%;border:2px solid #c9ced6;background:#fff;transition:border-color .12s}
.su-v2 .su-choice b{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.su-v2 .su-choice small{font-size:12.5px;line-height:1.55;color:var(--muted)}
.su-v2 .su-choice:has(input:checked){border-color:var(--brand-dark);background:#fffbea;box-shadow:0 0 0 1px var(--brand-dark)}
.su-v2 .su-choice:has(input:focus-visible){outline:2px solid var(--brand-dark);outline-offset:2px}
/* the mark and the icon are matched on the input instead, so a browser without :has()
   still shows which answer was picked - only the card's wash is lost */
.su-v2 .su-choice input:checked ~ .su-radio{border:5px solid var(--ink)}

/* account type: the icon above the words, the mark in the corner */
.su-v2 .su-choices-tall .su-choice{align-items:flex-start;padding:18px 16px 16px}
.su-v2 .su-choices-tall .su-radio{left:auto;right:14px;top:14px}
.su-v2 .su-choice-ic{width:40px;height:40px;margin-bottom:8px;border-radius:10px;background:var(--bg);color:var(--ink-2);display:grid;place-items:center}
.su-v2 .su-choice-ic svg{width:20px;height:20px}
.su-v2 .su-choice input:checked ~ .su-choice-ic{background:var(--brand);color:var(--ink)}

/* the (i) beside Accredited investor status: the live hover card */
.su-v2 .su-tip{position:relative;display:inline-flex}
.su-v2 .su-tip-btn{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--faint);display:grid;place-items:center}
.su-v2 .su-tip-btn:hover{color:var(--ink)}
.su-v2 .su-tip-btn svg{width:17px;height:17px}
.su-v2 .su-tip-card{
  position:absolute;z-index:5;top:calc(100% + 8px);left:50%;width:320px;transform:translateX(-50%);
  padding:14px 16px;border-radius:10px;background:var(--ink);color:#e9ebef;box-shadow:0 12px 30px rgba(16,24,40,.25);
  font-size:12.5px;font-weight:400;line-height:1.6;letter-spacing:0;text-align:left;visibility:hidden;opacity:0;transition:opacity .15s;
}
.su-v2 .su-tip-card b{display:block;margin-bottom:6px;color:#fff;font-size:13px}
.su-v2 .su-tip:hover .su-tip-card,
.su-v2 .su-tip:focus-within .su-tip-card{visibility:visible;opacity:1}

/* ------------------------------------------------------------
   The foot of a card: whatever has to be agreed to, then the button
   ------------------------------------------------------------ */
.su-v2 .su-foot{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:22px;border-top:1px solid var(--line-2);text-align:center}
.su-v2 .su-check{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--ink-2);cursor:pointer}
.su-v2 .su-check input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.su-v2 .su-terms{align-items:flex-start;text-align:left;line-height:1.5}
.su-v2 .su-terms input{margin-top:2px;flex:none}
/* the foot is a flex column with an 18px gap, which lands above this message too, so pull it back to about 6px under the checkbox */
.su-v2 .su-foot label.error{text-align:center;margin-top:-12px}
.su-v2 .su-link{color:var(--blue);font-weight:600}
.su-v2 .su-link:hover{color:var(--blue);text-decoration:underline}

.su-v2 .su-btn{
  border:1px solid transparent;border-radius:9px;padding:9px 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:600;white-space:nowrap;transition:background .12s;
}
.su-v2 .su-btn-primary{background:var(--brand);border-color:var(--brand-dark);color:var(--ink)}
.su-v2 .su-btn-primary:hover{background:var(--brand-dark);color:var(--ink);text-decoration:none}
.su-v2 .su-btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.su-v2 .su-btn-ghost:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.su-v2 .su-btn:focus{outline:none;box-shadow:0 0 0 3px #ffe89a}
.su-v2 .su-btn:disabled{background:#f7f8fa;border-color:var(--line);color:var(--faint);cursor:not-allowed}
.su-v2 .su-submit{min-width:240px;height:48px}
.su-v2 .su-alt{margin-top:24px;font-size:13px;color:var(--muted);text-align:center}

/* ------------------------------------------------------------
   Plans: one card per plan, the button at the foot of each
   ------------------------------------------------------------ */
.su-v2 .su-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,300px));justify-content:center;gap:22px;width:100%}
.su-v2 .su-plan{display:flex;flex-direction:column;padding:26px 24px 24px;box-shadow:0 10px 30px rgba(16,24,40,.08);transition:transform .15s,box-shadow .15s}
.su-v2 .su-plan:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(16,24,40,.12)}
.su-v2 .su-plan h2{font-size:17px}
.su-v2 .su-price{display:flex;align-items:baseline;gap:6px;margin:12px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.su-v2 .su-price b{font-size:34px;font-weight:700;letter-spacing:-.02em}
.su-v2 .su-price span{font-size:13px;color:var(--muted)}
/* yearly plan: the monthly figure on its own line under the price */
.su-v2 .su-price{flex-wrap:wrap}
.su-v2 .su-price .su-price-note{flex-basis:100%;margin-top:2px;font-size:13px;color:var(--muted)}
/* the admin writes the description in a rich text box, so it arrives as markup */
.su-v2 .su-plan-desc{margin-bottom:24px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.su-v2 .su-plan-desc ul,.su-v2 .su-plan-desc ol{display:flex;flex-direction:column;gap:11px}
.su-v2 .su-plan-desc li{display:flex;gap:10px;line-height:1.45}
.su-v2 .su-plan-desc li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;
  background:#fff1c2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6b00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.su-v2 .su-plan-desc p{margin-bottom:11px}
.su-v2 .su-plan-btn{height:46px;margin-top:auto}

/* ------------------------------------------------------------
   Identity and bank: one short card around the button that opens Plaid
   ------------------------------------------------------------ */
.su-v2 .su-connect{text-align:center;padding:30px 30px 28px}
.su-v2 .su-connect > p{margin-bottom:22px;font-size:14px;line-height:1.6;color:var(--ink-2)}
/* the one-account-per-bank note on the bank step. Borrows .su-note for its colours, one line instead of a list */
.su-v2 .su-connect > p.su-connect-lead{margin-bottom:14px}
.su-v2 .su-connect > p.su-connect-rule{
    display:flex;gap:9px;align-items:flex-start;margin-bottom:20px;padding:5px 13px;
    text-align:left;font-size:12.5px;line-height:1.55;color:var(--ink-2);
}
.su-v2 .su-connect-rule svg{
    flex:none;width:16px;height:16px;margin-top:1px;color:#b28900;
    fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;
}
/* the "connect your bank again" note for a user moved from another processor: blue, to stand apart from the yellow rule below it */
.su-v2 .su-connect > p.su-connect-moved{margin-bottom:8px;border-color:#c7d7f1;background:#eef3fb}
.su-v2 .su-connect-moved svg{color:var(--blue)}
.su-v2 .su-badge{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:14px;background:#fff7dd;color:#8a6b00}
.su-v2 .su-badge svg{width:24px;height:24px}
.su-v2 .su-badge-wait{background:#fff4e0;color:#b25e09}
.su-v2 .su-badge-bad{background:#fdecea;color:var(--red)}
.su-v2 .su-plaid-btn{width:100%;height:48px;background:var(--ink);border-color:var(--ink);color:#fff}
.su-v2 .su-plaid-btn:hover{background:#000;color:#fff}
.su-v2 .su-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12.5px;color:var(--faint)}
.su-v2 .su-or::before,.su-v2 .su-or::after{content:"";flex:1;height:1px;background:var(--line)}
.su-v2 .su-wide-btn{width:100%;height:46px}
.su-v2 .su-spin{width:15px;height:15px;border:2px solid rgba(26,26,26,.25);border-top-color:var(--ink);border-radius:50%;animation:su-v2-spin .7s linear infinite}
.su-v2 .su-spin[hidden]{display:none}
.su-v2 .is-going{pointer-events:none;opacity:.85}
@keyframes su-v2-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .su-v2 .su-spin{animation-duration:2.4s}
  .su-v2 .su-plan:hover{transform:none}
}

/* ------------------------------------------------------------
   The code screens: four boxes, one digit each
   ------------------------------------------------------------ */
.su-v2 .otp-boxes{display:flex;justify-content:center;gap:12px}
.su-v2 .otp-boxes input{
  width:58px;height:62px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font-family:inherit;font-size:24px;font-weight:700;text-align:center;color:var(--ink);
  transition:border-color .12s,box-shadow .12s;
}
.su-v2 .otp-boxes input:focus{outline:none;border-color:var(--brand-dark);box-shadow:0 0 0 3px #ffe89a}
.su-v2 .otp-boxes.is-bad input{border-color:var(--red)}
.su-v2 .su-resend{margin-top:16px;font-size:13px;color:var(--muted)}
.su-v2 .su-resend button{padding:0;border:0;background:none;color:var(--blue);font-size:13px;font-weight:600}
.su-v2 .su-resend button:hover{text-decoration:underline}
.su-v2 .su-resend button:disabled{color:var(--faint);cursor:not-allowed;text-decoration:none}

/* ------------------------------------------------------------
   Documents: one box per document, empty or showing the chosen file
   ------------------------------------------------------------ */
.su-v2 .su-drop{
  position:relative;display:block;margin:0;border:1.5px dashed #d3d7de;border-radius:10px;background:#fafbfc;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.su-v2 .su-drop:hover{border-color:var(--brand-dark);background:#fffbea}
.su-v2 .su-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.su-v2 .su-drop:has(input:focus-visible){outline:2px solid var(--brand-dark);outline-offset:2px}
.su-v2 .su-drop-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;text-align:center}
.su-v2 .su-drop-ic{width:40px;height:40px;margin-bottom:4px;border-radius:50%;background:#fff1c2;color:#8a6b00;display:grid;place-items:center}
.su-v2 .su-drop-ic svg{width:19px;height:19px}
.su-v2 .su-drop-empty b{font-size:13.5px;color:var(--ink)}
.su-v2 .su-drop-empty small{font-size:12px;color:var(--muted)}
.su-v2 .su-drop-file{display:none;align-items:center;gap:12px;padding:14px 16px}
.su-v2 .su-drop.is-filled{border-style:solid;border-color:var(--line);background:#fff}
.su-v2 .su-drop.is-filled .su-drop-empty{display:none}
.su-v2 .su-drop.is-filled .su-drop-file{display:flex}
.su-v2 .su-drop-thumb{flex:none;width:44px;height:44px;border-radius:8px;background:#fdecea center / cover no-repeat;color:var(--red);display:grid;place-items:center}
.su-v2 .su-drop-thumb svg{width:21px;height:21px}
.su-v2 .su-drop-thumb.has-img svg{display:none}
.su-v2 .su-drop-thumb.has-img{background-color:var(--line-2)}
.su-v2 .su-drop-meta{display:flex;flex-direction:column;min-width:0}
.su-v2 .su-drop-meta b{overflow:hidden;font-size:13.5px;font-weight:600;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.su-v2 .su-drop-meta small{font-size:12px;color:var(--muted)}
/* a label that wraps to two lines would push its box below the one beside it */
.su-v2 .su-docs .su-grid > .auth-field{display:flex;flex-direction:column}
.su-v2 .su-docs .su-grid > .auth-field > .su-q{flex:1 0 auto}
.su-v2 .su-textarea{
  display:block;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-family:inherit;font-size:14px;line-height:1.55;color:var(--ink);resize:vertical;transition:border-color .12s,box-shadow .12s;
}
.su-v2 .su-textarea:focus{outline:none;border-color:var(--brand-dark);box-shadow:0 0 0 3px #ffe89a}
.su-v2 .su-textarea.error{border-color:var(--red)}

/* The accredited document boxes keep the old page's own classes, because
   js/modules/accredited_document_upload.js finds them by those names and paints the
   preview onto the label's background. Only how they look is new. */
/* custom.css gives the wrapper a dashed border of its own, which would sit round the box */
.su-v2 .browsfile-wrapper{display:flex;flex-direction:column;border:0;background:none}
.su-v2 .browsfile-subwrapper{position:relative;height:190px;border:1.5px dashed #d3d7de;border-radius:10px;background:#fafbfc;overflow:hidden;transition:border-color .12s,background .12s}
.su-v2 .browsfile-subwrapper:hover{border-color:var(--brand-dark);background:#fffbea}
.su-v2 .file-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.su-v2 .browsfile-subwrapper label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;margin:0;padding:16px;
  background-position:center;background-size:contain;background-repeat:no-repeat;
  font-size:13.5px;font-weight:600;color:var(--ink-2);text-align:center;cursor:pointer;
}
.su-v2 .browsfile-subwrapper label i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff1c2;color:#8a6b00;font-size:17px}
.su-v2 .browsfile-wrapper > p{margin-top:8px;font-size:12px;color:var(--muted);text-align:center}
.su-v2 .file-input-1-error{display:block;margin-top:8px;font-size:12px;font-weight:500;color:var(--red)}

/* what to upload for the answer that was given, above the boxes */
.su-v2 .su-note{padding:14px 18px;border:1px solid #ffe08a;border-radius:10px;background:#fffbea}
.su-v2 .su-note li{display:flex;gap:9px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.su-v2 .su-note li + li{margin-top:6px}
.su-v2 .su-note li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;background:var(--brand-dark)}

/* ------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------ */
@media (max-width:991px){
  /* the drawings are wider than the room left beside the card */
  .su-v2 .su-stage{background:none;min-height:0}
  .su-v2 .su-card{padding:4px 22px 26px}
}
@media (max-width:767px){
  /* the bar: dots only, the step named above them */
  .su-v2 .su-count{display:block}
  .su-v2 .su-label{display:none}
  .su-v2 .su-progress{margin-bottom:22px}
  .su-v2 .su-grid,
  .su-v2 .su-choices-2,
  .su-v2 .su-choices-3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .su-v2{padding-top:110px}
  .su-v2 .su-page{padding:22px 14px 48px}
  .su-v2 .su-head h1{font-size:22px}
  .su-v2 .su-card{padding:4px 18px 22px}
  .su-v2 .su-ssn{max-width:none}
  .su-v2 .su-submit{width:100%;min-width:0}
  .su-v2 .otp-boxes{gap:10px}
  .su-v2 .otp-boxes input{width:52px;height:56px;font-size:22px}
  .su-v2 .su-tip-card{position:fixed;top:auto;bottom:16px;left:16px;right:16px;width:auto;transform:none}
}