/*
 * The new look's screens: the redesigned portal home and quick check, phase 2.
 *
 * Brought over from the website's app prototype stylesheet
 * (site/app/demo/demo.css) by a script that put .portal-new-look in front of
 * every selector, so nothing here can match outside the new look. The same
 * reason as new-look.css: Next keeps a stylesheet loaded after the visit that
 * loaded it, so a member of staff going on to /crm still has this file, and only
 * the portal layout ever adds the class. With the portal_new_look flag off the
 * class is never on the page and this whole file matches nothing.
 *
 * Left out on the way over: the prototype's floating panel and its notices,
 * which the live app has no use for, and the rule that hid the website's own
 * menu and footer.
 *
 * Every screen drawn with these rules sits inside a .dm-screen element, the
 * prototype's .demo-app under a name that belongs here. Screens of the current
 * look on the same wrapper (the application, the tracker, sign in) have no
 * .dm-screen and are untouched.
 */

/*
 * What the prototype took from the website's base rules and the app's do not
 * give it. Most sit inside :where(), which gives them no weight at all, so every
 * rule below still wins over them, as the website's base rules did.
 */
.portal-new-look:has(.dm-screen, .dm-loading) {
  background: #fff;
}

/*
 * The flows carry the licence lines in their own panels, as on the website.
 * Hidden while a flow's screen is still loading too, or the current look's
 * blue footer shows for a moment between pages.
 */
.portal-new-look:has(.dm-screen, .dm-loading) > footer {
  display: none;
}

.portal-new-look .dm-screen {
  -webkit-font-smoothing: antialiased;
}

/*
 * The app's base rule draws every heading in Poppins, and phase 1 answers that
 * with the display face. The prototype's plain headings are body text; only
 * .dm-disp asks for the display face. This one carries the weight of two
 * classes, enough to beat phase 1's rule and no more, so .dm-disp, which comes
 * later at the same weight, still wins.
 */
.portal-new-look .dm-screen :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
}

:where(.portal-new-look .dm-screen) :where(button, summary, [role='button']) {
  cursor: pointer;
}

:where(.portal-new-look .dm-screen) :where(a) {
  color: inherit;
  text-decoration: none;
}

:where(.portal-new-look .dm-screen) :where(ol, ul) {
  list-style: none;
}

:where(.portal-new-look .dm-screen) :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}

:where(.portal-new-look .dm-screen) ::selection {
  background: var(--g1);
  color: var(--navy);
}

.portal-new-look .dm-screen {
  --sky: #7fb0ff;
  --soft: #b9c6e4;
  --bad: #c8322b;
  --bad-bg: #fff6f5;
  --bad-line: #f1b4ae;
  --warn: #92400e;
  font-family: var(--f-body);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
}

.portal-new-look .dm-screen h1,
.portal-new-look .dm-screen h2,
.portal-new-look .dm-screen h3,
.portal-new-look .dm-screen p {
  margin: 0;
}

.portal-new-look .dm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- type ---------- */

.portal-new-look .dm-disp {
  font-family: var(--f-disp);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  /* The tight tracking takes the gaps between words with it, and at phone sizes "WE CAN'T" read as one word. */
  word-spacing: 0.12em;
  line-height: 0.95;
  color: var(--ink);
  text-wrap: balance;
}
.portal-new-look .dm-eb {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.portal-new-look .dm-eb.blue {
  color: var(--blue);
}
.portal-new-look .dm-eb.sky {
  color: var(--sky);
}
.portal-new-look .dm-logo {
  font-family: var(--f-logo);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  font-size: 24px;
  color: var(--navy);
  line-height: 1;
  display: inline-block;
}
.portal-new-look .dm-logo.rev {
  color: #fff;
}
.portal-new-look .dm-logo.big {
  font-size: 30px;
}
.portal-new-look .dm-logo img {
  display: block;
  height: 1.45em;
  width: auto;
}
.portal-new-look .dm-ic {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.portal-new-look .dm-ic.sm {
  width: 18px;
  height: 18px;
}
.portal-new-look .dm-ic.xs {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}
.portal-new-look .dm-h1 {
  font-size: 34px;
  line-height: 0.98;
  outline: none;
}
.portal-new-look .dm-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--mut);
  margin-top: 12px !important;
  text-wrap: pretty;
}
.portal-new-look .dm-num {
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */

/* The logo, which links home, is about 35px tall. Padding to 44px to tap, given back in margin so nothing moves. */
.portal-new-look a:has(> .dm-logo) {
  display: inline-block;
  padding: 5px 0;
  margin: -5px 0;
}

.portal-new-look .dm-pl {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.portal-new-look .dm-pl b {
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  transition: background 0.2s;
}
.portal-new-look .dm-pl i {
  font-style: normal;
  width: 46px;
  height: 46px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px #fff;
  position: relative;
  z-index: 2;
  flex: none;
  transition: transform 0.35s var(--ease), background 0.2s;
}
.portal-new-look .dm-pl:hover i {
  transform: rotate(-45deg);
}
/* The turn reads as an arrow pointing on. A tick turned by it reads as broken, and on a phone the hover sticks after the tap. */
.portal-new-look .dm-pl:hover i:has(> svg[data-icon='check']) {
  transform: none;
}
.portal-new-look .dm-pl:hover b,
.portal-new-look .dm-pl:hover i {
  background: var(--blue-d);
}
.portal-new-look .dm-pl.lg b {
  padding: 16px 26px;
  font-size: 16px;
}
.portal-new-look .dm-pl.lg i {
  width: 54px;
  height: 54px;
}
.portal-new-look .dm-pl.navy b,
.portal-new-look .dm-pl.navy i {
  background: var(--navy);
}
.portal-new-look .dm-pl.white b,
.portal-new-look .dm-pl.white i {
  background: #fff;
  color: var(--navy);
}
.portal-new-look .dm-pl.white:hover b,
.portal-new-look .dm-pl.white:hover i {
  background: #eaf1ff;
}
/*
 * The one button a result screen exists for. Green, the colour of the
 * "pre-qualified" chip above it, so it reads as the next step of good news and
 * not as one more link. A white pill on the navy banner was being passed over:
 * passed quick checks carrying on fell from about a third to under a fifth when
 * it replaced the solid blue button.
 */
.portal-new-look .dm-pl.go b,
.portal-new-look .dm-pl.go i {
  background: #34d27b;
  color: var(--navy);
  font-weight: 700;
}
.portal-new-look .dm-pl.go b {
  box-shadow: 0 8px 24px rgba(52, 210, 123, 0.35);
}
.portal-new-look .dm-pl.go:hover b,
.portal-new-look .dm-pl.go:hover i {
  background: #22c06a;
}
.portal-new-look .dm-pl.go.pulse i {
  animation: dm-go-pulse 2.4s ease-out 1s infinite;
}
@keyframes dm-go-pulse {
  0% {
    box-shadow: 0 0 0 2px var(--navy), 0 0 0 2px rgba(52, 210, 123, 0.6);
  }
  70%,
  100% {
    box-shadow: 0 0 0 2px var(--navy), 0 0 0 16px rgba(52, 210, 123, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-new-look .dm-pl.go.pulse i {
    animation: none;
  }
}
.portal-new-look .dm-pl.on-dark i {
  box-shadow: 0 0 0 2px var(--navy);
}
.portal-new-look .dm-pl.wide {
  display: flex;
  width: 100%;
}
.portal-new-look .dm-pl.wide b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-new-look .dm-pl:focus-visible {
  outline: none;
}
.portal-new-look .dm-pl:focus-visible b {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.portal-new-look .dm-pg {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}
.portal-new-look .dm-pg b {
  background: linear-gradient(90deg, #c7dbff, #eef4ff);
  color: var(--navy);
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 600;
}
.portal-new-look .dm-pg i {
  font-style: normal;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surf);
  display: grid;
  place-items: center;
  margin-left: -2px;
  color: var(--navy);
}
.portal-new-look .dm-pg.sm b {
  padding: 11px 16px;
  font-size: 14px;
}
.portal-new-look .dm-pg.sm i {
  width: 44px;
  height: 44px;
}

.portal-new-look .dm-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 20px;
  min-height: 52px;
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.portal-new-look .dm-ghost:hover {
  border-color: #c5d3ec;
  background: var(--g2);
}
.portal-new-look .dm-tl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--blue);
  font-size: 15px;
  margin-top: 14px;
  cursor: pointer;
  position: relative;
}
/* A one-line text button is about 22px tall. This grows what a thumb can hit to 44px without moving anything. */
.portal-new-look .dm-tl::after {
  content: "";
  position: absolute;
  inset: -11px 0;
}
.portal-new-look .dm-tl.small {
  font-size: 14px;
  margin-top: 0;
  gap: 6px;
}
.portal-new-look .dm-tl.light {
  color: #dce5f7;
  margin-top: 0;
}
.portal-new-look .dm-tl:hover {
  text-decoration: underline;
}
.portal-new-look .dm-circ {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surf);
  display: grid;
  place-items: center;
  color: var(--navy);
  flex: none;
  cursor: pointer;
}
.portal-new-look .dm-btns {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.portal-new-look .dm-inlink {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- app shell ---------- */

.portal-new-look .dm-app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.portal-new-look .dm-loading {
  background: linear-gradient(180deg, var(--deep) 0, var(--navy) 150px, #fff 150px);
}
.portal-new-look .dm-side {
  display: none;
}
.portal-new-look .dm-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.portal-new-look .dm-top {
  background: linear-gradient(160deg, #0a2047 0%, #112b64 70%, #173478 100%);
  color: #fff;
  padding: 14px 20px 20px;
  border-radius: 0 0 28px 28px;
  position: relative;
  overflow: hidden;
}
.portal-new-look .dm-top::before {
  content: "";
  position: absolute;
  right: -110px;
  top: -130px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 176, 255, 0.28), transparent 70%);
  pointer-events: none;
}
.portal-new-look .dm-top > * {
  position: relative;
}
.portal-new-look .dm-top .row a,
.portal-new-look .dm-oband .row a {
  display: flex;
}
.portal-new-look .dm-top .row,
.portal-new-look .dm-oband .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
  gap: 12px;
}
.portal-new-look .dm-reg {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
  white-space: nowrap;
}
.portal-new-look .dm-top .stepline {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.portal-new-look .dm-top .nm {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.portal-new-look .dm-top .stepline .dm-eb {
  color: var(--sky);
  font-size: 12px;
  white-space: nowrap;
}
.portal-new-look .dm-top .segs {
  display: flex;
  gap: 5px;
  margin-top: 12px;
}
.portal-new-look .dm-top .segs i {
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}
.portal-new-look .dm-top .segs i.d {
  background: var(--sky);
}
.portal-new-look .dm-top .segs i.c::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--fs, 0.4));
  background: linear-gradient(90deg, #9dbfff, #fff);
  border-radius: 5px;
  transition: transform 0.6s var(--ease);
}
.portal-new-look .dm-top .msg {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--soft);
}
.portal-new-look .dm-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #d7e3ff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 6px 11px 6px 8px;
}
.portal-new-look .dm-save .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--deep);
  display: grid;
  place-items: center;
}
.portal-new-look .dm-save .dot .dm-ic {
  width: 10px;
  height: 10px;
  stroke-width: 3;
}
.portal-new-look .dm-save .spin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--deep);
  border-right-color: transparent;
  animation: dm-spin 0.8s linear infinite;
}

.portal-new-look .dm-main {
  flex: 1;
  padding: 26px 16px 28px;
}
.portal-new-look .dm-inner {
  max-width: 680px;
  margin: 0 auto;
}
.portal-new-look .dm-step {
  animation: dm-in 0.42s var(--ease) both;
}
.portal-new-look .dm-step > form > * + *,
.portal-new-look .dm-step > * + * {
  margin-top: 16px;
}
.portal-new-look .dm-head + * {
  margin-top: 22px !important;
}

@keyframes dm-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dm-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- cards ---------- */

.portal-new-look .dm-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 18px;
  background: #fff;
}
.portal-new-look .dm-card.dm-soft {
  background: var(--surf);
  border-color: transparent;
}
.portal-new-look .dm-card.dm-pale {
  background: linear-gradient(140deg, #dce8ff, #f3f7ff 70%);
  border-color: transparent;
}
.portal-new-look .dm-card.consent {
  border-color: #b9cff7;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}
.portal-new-look .dm-card > * + * {
  margin-top: 18px;
}
.portal-new-look .dm-ch {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.portal-new-look .dm-ch h2 {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.portal-new-look .dm-ch p {
  font-size: 14px;
  color: var(--mut);
  margin-top: 4px;
  line-height: 1.5;
}
.portal-new-look .dm-sub {
  border-left: 2px solid rgba(37, 99, 235, 0.25);
  padding-left: 14px;
}
.portal-new-look .dm-sub > * + * {
  margin-top: 18px;
}
.portal-new-look .dm-sub h3 {
  font-size: 15px;
  font-weight: 600;
}
.portal-new-look .dm-sub > .dm-sub-note {
  font-size: 13.5px;
  color: var(--mut);
  margin-top: 3px;
  line-height: 1.5;
}
.portal-new-look .dm-stack > * + * {
  margin-top: 12px;
}
.portal-new-look .dm-reas {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--mut);
  line-height: 1.5;
  margin-top: 10px !important;
}
.portal-new-look .dm-reas .dm-ic {
  color: var(--ok);
  margin-top: 2px;
}
.portal-new-look .dm-okb {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #ecfdf3;
  border: 1px solid #b7ebcd;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #05603a;
}
.portal-new-look .dm-okb .dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ok);
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}
.portal-new-look .dm-infob {
  background: var(--g2);
  border: 1px solid #cfe0ff;
  border-radius: 16px;
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}
.portal-new-look .dm-infob.warn {
  background: #fffbeb;
  border-color: #f7d48b;
  color: var(--warn);
}
.portal-new-look .dm-fine {
  font-size: 12px;
  color: #8a94a8;
  text-align: center;
  line-height: 1.6;
}
.portal-new-look .dm-fine {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}
.portal-new-look .dm-fine.left {
  text-align: left;
  margin-left: 0;
}
.portal-new-look .dm-fine.strong {
  color: var(--mut);
}
/* a fine-print line under a form or a list of choices gets clear air above it */
.portal-new-look .dm-step > .dm-fine,
.portal-new-look .dm-card > .dm-fine {
  margin-top: 24px;
}
.portal-new-look .dm-cht {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.portal-new-look .dm-chs {
  font-size: 14px;
  color: var(--mut);
  margin-top: 4px !important;
  line-height: 1.55;
}
.portal-new-look .dm-chs.big {
  font-size: 15px;
  margin-top: 12px !important;
}
.portal-new-look .dm-chs b {
  color: var(--ink);
}

/* ---------- error summary ---------- */

.portal-new-look .dm-errsum {
  border: 1px solid var(--bad-line);
  border-left: 5px solid var(--bad);
  background: var(--bad-bg);
  border-radius: 18px;
  padding: 16px 18px;
  outline: none;
}
.portal-new-look .dm-errsum .t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--bad);
  font-size: 15px;
}
.portal-new-look .dm-errsum ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.portal-new-look .dm-errsum li button {
  color: var(--bad);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  padding: 3px 0;
}
.portal-new-look .dm-errsum .n {
  font-size: 12.5px;
  color: var(--mut);
  margin-top: 10px;
}

/* ---------- fields ---------- */

.portal-new-look .dm-f {
  min-width: 0;
  border: 0;
  padding: 0;
}
.portal-new-look .dm-lb {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
  padding: 0;
  width: 100%;
}
.portal-new-look .dm-lb .opt {
  font-size: 12px;
  font-weight: 500;
  color: #8a94a8;
}
.portal-new-look .dm-inp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid #d5dbe6;
  border-radius: 14px;
  padding: 0 14px 0 16px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
/*
 * Room kept round a field when the browser scrolls to it, on focus, Enter to the
 * next field or a tap in the error list. Without it a field near the bottom
 * lands under the sticky bar, which on Android sits right on the keyboard. The
 * top leaves the label showing.
 */
.portal-new-look :is(input, select, textarea) {
  scroll-margin: 64px 0 120px;
}
.portal-new-look .dm-inp.narrow {
  max-width: 280px;
}
.portal-new-look .dm-inp:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}
.portal-new-look .dm-inp.done {
  border-color: #cbd8f2;
}
.portal-new-look .dm-inp.bad {
  border-color: var(--bad);
  background: var(--bad-bg);
}
.portal-new-look .dm-inp.bad:focus-within {
  box-shadow: 0 0 0 4px rgba(200, 50, 43, 0.14);
}
.portal-new-look .dm-inp input,
.portal-new-look .dm-inp select {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  height: 52px;
  padding: 0;
}
.portal-new-look .dm-inp input::placeholder {
  color: #9aa3b5;
  font-weight: 400;
}
.portal-new-look .dm-inp input.num {
  font-variant-numeric: tabular-nums;
}
.portal-new-look .dm-inp input.wide-track {
  letter-spacing: 0.04em;
}
.portal-new-look .dm-inp .pre {
  color: var(--mut);
  font-weight: 600;
}
.portal-new-look .dm-inp.sel select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 28px;
  margin-right: -28px;
}
.portal-new-look .dm-inp.sel.empty select {
  color: #9aa3b5;
  font-weight: 400;
}
.portal-new-look .dm-inp .chev {
  color: #8a94a8;
  pointer-events: none;
}
.portal-new-look .dm-inp .tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  pointer-events: none;
  animation: dm-pop 0.3s var(--ease) both;
}
@keyframes dm-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
.portal-new-look .dm-hint {
  font-size: 13px;
  color: var(--mut);
  margin-top: 7px !important;
  line-height: 1.45;
}
.portal-new-look .dm-err {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bad);
  margin-top: 8px !important;
  line-height: 1.4;
}
.portal-new-look .dm-err .dm-ic {
  margin-top: 2px;
}
.portal-new-look .dm-conf {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: #05603a;
  margin-top: 8px !important;
  line-height: 1.45;
}
.portal-new-look .dm-conf .dm-ic {
  color: var(--ok);
  margin-top: 2px;
}
.portal-new-look .dm-g2 {
  display: grid;
  gap: 18px 14px;
}
.portal-new-look .dm-g2.keep {
  grid-template-columns: 1fr 1fr;
}
.portal-new-look .dm-g-year {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
}

/* choices */
.portal-new-look .dm-fs legend {
  float: left;
}
.portal-new-look .dm-fs legend + * {
  clear: both;
}
.portal-new-look .dm-choices {
  display: grid;
  gap: 8px;
}
.portal-new-look .dm-choices.c2 {
  grid-template-columns: 1fr 1fr;
}
.portal-new-look .dm-choices.c4 {
  grid-template-columns: repeat(4, 1fr);
}
.portal-new-look .dm-co {
  position: relative;
  border: 1px solid #d5dbe6;
  border-radius: 16px;
  padding: 13px 14px;
  font-weight: 600;
  font-size: 15px;
  background: #fff;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 54px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.portal-new-look .dm-co:hover {
  border-color: #a9b8d6;
}
.portal-new-look .dm-co input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.portal-new-look .dm-co small {
  display: block;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--mut);
  margin-top: 3px;
}
.portal-new-look .dm-co.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.portal-new-look .dm-co.on small {
  color: var(--soft);
}
.portal-new-look .dm-co.bad:not(.on) {
  border-color: var(--bad-line);
  background: var(--bad-bg);
}
.portal-new-look .dm-co:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.portal-new-look .dm-choices.c4 .dm-co {
  text-align: center;
  align-items: center;
  padding: 13px 6px;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 16px;
}

/* chips */
.portal-new-look .dm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px !important;
}
.portal-new-look .dm-chips button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
  background: #fff;
  cursor: pointer;
  min-height: 44px;
}
.portal-new-look .dm-chips button.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* check cards */
.portal-new-look .dm-chk {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.portal-new-look .dm-chk input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.portal-new-look .dm-chk .bx {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid #c3ccdb;
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 1px;
  background: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.portal-new-look .dm-chk.on {
  border-color: #b7ebcd;
  background: #f3fcf6;
}
.portal-new-look .dm-chk.on .bx {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.portal-new-look .dm-chk.act.on {
  border-color: #bfd3f8;
  background: var(--g2);
}
.portal-new-look .dm-chk.act.on .bx {
  background: var(--blue);
  border-color: var(--blue);
}
.portal-new-look .dm-chk.bad {
  border-color: var(--bad-line);
  background: var(--bad-bg);
}
.portal-new-look .dm-chk.bad .bx {
  border-color: var(--bad);
}
.portal-new-look .dm-chk:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.portal-new-look .dm-chk .dm-tx {
  min-width: 0;
}
.portal-new-look .dm-chk b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.portal-new-look .dm-chk .d {
  display: block;
  font-size: 13.5px;
  color: var(--mut);
  margin-top: 4px;
  line-height: 1.5;
}

/* vehicle bits */
.portal-new-look .dm-sumrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--g2);
  border-radius: 16px;
  padding: 14px 16px;
}
.portal-new-look .dm-sumrow span {
  font-size: 14px;
  color: var(--mut);
}
.portal-new-look .dm-sumrow b {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.portal-new-look .dm-rate {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.portal-new-look .dm-range {
  width: 100%;
  accent-color: var(--blue);
  height: 28px;
  cursor: pointer;
}
.portal-new-look .dm-rlab {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #8a94a8;
  margin-top: 4px !important;
}
.portal-new-look .dm-bond > * + * {
  margin-top: 18px;
}
.portal-new-look .dm-bond + .dm-bond {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.portal-new-look .dm-bond-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.portal-new-look .dm-bond-h p {
  font-weight: 600;
  font-size: 14px;
}
.portal-new-look .dm-bond-h button {
  color: var(--bad);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* expenses total */
.portal-new-look .dm-total {
  position: sticky;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 4;
  background: linear-gradient(160deg, #0a2047, #112b64);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--sh);
}
.portal-new-look .dm-total .dm-eb {
  color: var(--soft);
}
.portal-new-look .dm-total .s {
  font-size: 13px;
  color: var(--soft);
  margin-top: 2px;
}
.portal-new-look .dm-total b {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

/* documents */
.portal-new-look .dm-cnt {
  flex: none;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--surf);
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.portal-new-look .dm-cnt.on {
  background: #ecfdf3;
  color: #05603a;
}
.portal-new-look .dm-optline {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--g2);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 14px !important;
}
.portal-new-look .dm-defer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px dashed #c5d3ec;
  border-radius: 18px;
  padding: 13px 14px;
  margin-top: 12px !important;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  background: #fff;
}
.portal-new-look .dm-defer.on {
  border-style: solid;
  border-color: #b7ebcd;
  background: #f3fcf6;
}
.portal-new-look .dm-defer .di,
.portal-new-look .dm-dr .di {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--pale);
  color: var(--navy);
  display: grid;
  place-items: center;
  flex: none;
}
.portal-new-look .dm-defer.on .di {
  background: var(--ok);
  color: #fff;
}
.portal-new-look .dm-defer .dt,
.portal-new-look .dm-dr .dt {
  flex: 1;
  min-width: 0;
}
.portal-new-look .dm-defer .dt b,
.portal-new-look .dm-dr .dt b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.portal-new-look .dm-defer .dt span,
.portal-new-look .dm-dr .dt span {
  display: block;
  font-size: 12.5px;
  color: var(--mut);
  margin-top: 2px;
  line-height: 1.4;
}
.portal-new-look .dm-dr .dt span.fn {
  /* Breaks at a hyphen or dot first, so "id-front-and-back.jpg" no longer ends on a lone "g". */
  overflow-wrap: anywhere;
}
.portal-new-look .dm-docs {
  display: grid;
  gap: 8px;
  margin-top: 12px !important;
}
.portal-new-look .dm-dr {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 10px 10px 12px;
}
.portal-new-look .dm-dr .di {
  background: var(--surf);
  color: var(--mut);
}
.portal-new-look .dm-dr.got {
  border-color: #b7ebcd;
  background: #f3fcf6;
}
.portal-new-look .dm-dr.got .di {
  background: var(--ok);
  color: #fff;
}
.portal-new-look .dm-dr.later {
  background: var(--surf);
  border-color: transparent;
}
.portal-new-look .dm-dr.later b {
  color: #8a94a8;
}
.portal-new-look .dm-dr .add {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px 10px 11px;
  font-size: 13.5px;
  font-weight: 600;
  flex: none;
  cursor: pointer;
  min-height: 44px;
}
.portal-new-look .dm-dr .add input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.portal-new-look .dm-dr .add:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.portal-new-look .dm-dr .lk {
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
  padding: 10px 6px;
  flex: none;
  cursor: pointer;
  min-height: 44px;
}

/* handoff offer */
.portal-new-look .dm-handoff {
  border: 1px solid #cfe0ff;
  background: var(--g2);
  border-radius: 20px;
  padding: 18px;
}
.portal-new-look .dm-handoff .t {
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
}
.portal-new-look .dm-handoff .d {
  font-size: 14px;
  color: var(--mut);
  margin-top: 4px;
}
.portal-new-look .dm-handoff .b {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* offline form */
.portal-new-look .dm-offl {
  background: var(--surf);
  border-radius: var(--r-md);
  padding: 18px;
}
.portal-new-look .dm-offl summary {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.portal-new-look .dm-offl summary::-webkit-details-marker {
  display: none;
}
.portal-new-look .dm-offl summary b {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.portal-new-look .dm-offl .fi {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #fff;
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}
.portal-new-look .dm-offl .chev {
  color: var(--mut);
  transition: transform 0.3s var(--ease);
}
.portal-new-look .dm-offl[open] .chev {
  transform: rotate(180deg);
}
.portal-new-look .dm-offl > p {
  font-size: 14px;
  color: var(--mut);
  margin-top: 12px;
  line-height: 1.55;
}
.portal-new-look .dm-offl .small {
  font-size: 12.5px;
  color: #8a94a8;
}
.portal-new-look .dm-offl .ob {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 14px;
}

/* finance type list */
.portal-new-look .dm-ftl {
  display: grid;
  gap: 10px;
}
.portal-new-look .dm-ft {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  background: #fff;
  width: 100%;
  text-align: left;
  cursor: pointer;
  min-height: 76px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.35s var(--ease);
}
.portal-new-look .dm-ft:hover {
  border-color: #a9b8d6;
  box-shadow: var(--sh-s);
}
.portal-new-look .dm-ft .fi {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--pale);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}
.portal-new-look .dm-ft b {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
}
.portal-new-look .dm-ft .go {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surf);
  display: grid;
  place-items: center;
  color: var(--navy);
  flex: none;
  transition: background 0.2s, color 0.2s;
}
.portal-new-look .dm-ft:hover .go,
.portal-new-look .dm-ft.on .go {
  background: var(--blue);
  color: #fff;
}
.portal-new-look .dm-ft.on {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}

/* account prompt */
.portal-new-look .dm-acc {
  max-width: 540px;
}
.portal-new-look .dm-acc > * + * {
  margin-top: 18px;
}
.portal-new-look .dm-acc .dm-head {
  margin-top: 26px;
}
.portal-new-look .dm-acc-row {
  display: flex;
  gap: 14px;
}
.portal-new-look .dm-acc-row .ai {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff;
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}

/* submitted */
.portal-new-look .dm-done {
  max-width: 580px;
}
.portal-new-look .dm-done > * + * {
  margin-top: 18px;
}
.portal-new-look .dm-bigicon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 36px -14px rgba(18, 161, 80, 0.55);
  animation: dm-pop 0.5s var(--ease) both;
}
.portal-new-look .dm-bigicon .dm-ic {
  width: 34px;
  height: 34px;
  stroke-width: 2.4;
}
.portal-new-look .dm-bigicon.grey {
  background: var(--surf);
  color: var(--mut);
  box-shadow: none;
}
.portal-new-look .dm-done .dm-head {
  margin-top: 24px;
}
.portal-new-look .dm-refrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px !important;
}
.portal-new-look .dm-refrow span {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: clamp(22px, 6.4vw, 30px);
  white-space: nowrap;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.portal-new-look .dm-cp {
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--sh-s);
  cursor: pointer;
}
.portal-new-look .dm-cp.on {
  color: #05603a;
}
.portal-new-look .dm-end {
  background: linear-gradient(160deg, #0a2047, #112b64 65%, #183a80);
  color: #fff;
  border-radius: var(--r-md);
  padding: 26px 22px;
  margin-top: 28px !important;
  position: relative;
  overflow: hidden;
}
.portal-new-look .dm-end::before {
  content: "";
  position: absolute;
  right: -100px;
  top: -110px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 176, 255, 0.3), transparent 70%);
}
.portal-new-look .dm-end > * {
  position: relative;
}
.portal-new-look .dm-end .t {
  font-family: var(--f-disp);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  font-size: 28px;
  line-height: 1;
  margin-top: 10px;
}
.portal-new-look .dm-end .d {
  color: var(--soft);
  font-size: 15px;
  margin-top: 10px;
}
.portal-new-look .dm-end .b {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: center;
  margin-top: 20px;
}

/* ---------- checking ---------- */

.portal-new-look .dm-checking {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding-top: 8px;
}
.portal-new-look .dm-checking .dm-lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
}
.portal-new-look .dm-checking .dm-eb {
  margin-top: 28px;
}
.portal-new-look .dm-checking .dm-h1 {
  margin-top: 10px;
}
.portal-new-look .dm-stages {
  list-style: none;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px;
  margin: 26px 0 0;
  background: #fff;
  box-shadow: var(--sh-s);
}
.portal-new-look .dm-stages li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border-radius: 16px;
  font-size: 15px;
  color: #9aa3b5;
  transition: background 0.3s, color 0.3s;
}
.portal-new-look .dm-stages li.d {
  color: var(--mut);
}
.portal-new-look .dm-stages li.a {
  background: var(--g2);
  color: var(--navy);
  font-weight: 600;
}
.portal-new-look .dm-stages .si {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: none;
}
.portal-new-look .dm-stages .d .si {
  background: var(--ok);
  border-radius: 50%;
  color: #fff;
}
.portal-new-look .dm-stages .pulse {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.18);
  animation: dm-pulse 1.4s ease-in-out infinite;
}
@keyframes dm-pulse {
  50% {
    box-shadow: 0 0 0 9px rgba(37, 99, 235, 0.08);
  }
}
.portal-new-look .dm-stages .todo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9d1df;
}
.portal-new-look .dm-cap {
  font-size: 14.5px;
  color: var(--mut);
  margin-top: 20px !important;
}

/* ---------- bottom bar ---------- */

.portal-new-look .dm-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
}
.portal-new-look .dm-bar .in {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
}
.portal-new-look .dm-bar .dm-pl {
  flex: 1;
  min-width: 0;
}
.portal-new-look .dm-bar .back-d {
  display: none;
}

/* ---------- side panel ---------- */

.portal-new-look .dm-side-in {
  padding: 36px 40px 32px;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
}
.portal-new-look .dm-side-in::-webkit-scrollbar {
  display: none;
}
.portal-new-look .dm-side-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.portal-new-look .dm-side-title {
  color: #fff;
  font-size: 44px;
  margin-top: 14px;
  line-height: 0.98;
}
.portal-new-look .dm-side-lede {
  color: var(--soft);
  font-size: 16px;
  margin-top: 18px !important;
  line-height: 1.55;
}
.portal-new-look .dm-vsteps {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.portal-new-look .dm-vsteps li > * {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  width: 100%;
  text-align: left;
}
.portal-new-look .dm-vsteps li button {
  cursor: pointer;
  transition: background 0.2s;
}
.portal-new-look .dm-vsteps li button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.portal-new-look .dm-vsteps .n {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  flex: none;
}
.portal-new-look .dm-vsteps li.d > * {
  color: #fff;
}
.portal-new-look .dm-vsteps li.d .n {
  background: var(--sky);
  border-color: var(--sky);
  color: var(--deep);
}
.portal-new-look .dm-vsteps li.c > * {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-weight: 600;
}
.portal-new-look .dm-vsteps li.c .n {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}
.portal-new-look .dm-vsteps .pct {
  margin-left: auto;
  font-size: 12px;
  color: var(--sky);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.portal-new-look .dm-side-msg {
  font-size: 14px;
  color: var(--soft);
  margin-top: 18px !important;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1.5;
}
.portal-new-look .dm-ticks {
  list-style: none;
  margin: auto 0 0;
  padding: 28px 0 0;
}
.portal-new-look .dm-ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: #dce5f7;
  line-height: 1.45;
}
.portal-new-look .dm-ticks .k {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--deep);
  display: grid;
  place-items: center;
  flex: none;
}
.portal-new-look .dm-sreg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.portal-new-look .dm-sreg span {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11.5px;
  color: #c9d3e6;
}

/* ---------- outcome screens ---------- */

.portal-new-look .dm-outcome {
  --acc: #34d27b;
  --acc-text: #a7f3c4;
  --acc-line: rgba(134, 239, 172, 0.38);
  --acc-glow: rgba(52, 210, 123, 0.28);
}
.portal-new-look .dm-outcome.t-review,
.portal-new-look .dm-outcome.t-problem {
  --acc: #f5b53d;
  --acc-text: #fcd98a;
  --acc-line: rgba(252, 211, 77, 0.36);
  --acc-glow: rgba(245, 181, 61, 0.24);
}
.portal-new-look .dm-outcome.t-declined {
  --acc: #b9c6e4;
  --acc-text: #e2e8f0;
  --acc-line: rgba(226, 232, 240, 0.28);
  --acc-glow: rgba(127, 176, 255, 0.22);
}
.portal-new-look .dm-oband {
  background: linear-gradient(160deg, #0a2047 0%, #112b64 62%, #173478 100%);
  color: #fff;
  padding: 14px 20px 96px;
  border-radius: 0 0 32px 32px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.portal-new-look .dm-oband::before,
.portal-new-look .dm-outcome .dm-side::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--acc-glow), transparent 70%);
  pointer-events: none;
}
.portal-new-look .dm-oband > * {
  position: relative;
}
.portal-new-look .dm-otile {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--acc-line);
  margin: 26px auto 0;
  color: var(--acc);
}
.portal-new-look .dm-otile .dm-ic {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}
.portal-new-look .dm-ochip {
  margin-top: 16px !important;
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acc-text);
}
.portal-new-look .dm-oh {
  color: #fff;
  font-size: 32px;
  margin-top: 10px !important;
  outline: none;
}
.portal-new-look .dm-obody {
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 14px auto 0 !important;
  max-width: 520px;
  text-wrap: pretty;
}
.portal-new-look .dm-onote {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  margin-top: 10px !important;
}
.portal-new-look .dm-octa {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.portal-new-look .dm-octa-card {
  margin: 20px 0 4px;
}
.portal-new-look .dm-octa-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.portal-new-look .dm-ocards {
  margin-top: -68px;
  padding: 0 14px 32px;
  position: relative;
  z-index: 2;
}
.portal-new-look .dm-ocard {
  box-shadow: var(--sh-s);
}
.portal-new-look .dm-ocards .dm-step > .dm-ocard:first-child {
  box-shadow: var(--sh);
}
.portal-new-look .dm-ocard > .dm-eb + * {
  margin-top: 14px;
}
.portal-new-look .dm-olist {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
}
.portal-new-look .dm-olist li {
  display: flex;
  gap: 14px;
}
.portal-new-look .dm-olist .n {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  flex: none;
}
.portal-new-look .dm-olist b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.portal-new-look .dm-olist .d {
  display: block;
  font-size: 14px;
  color: var(--mut);
  margin-top: 2px;
  line-height: 1.5;
}
.portal-new-look .dm-ocard .dm-fine {
  margin-top: 14px;
}
.portal-new-look .dm-ocard .dm-fine + .dm-fine {
  margin-top: 6px;
}
.portal-new-look .dm-ofact {
  text-align: center;
  padding: 6px 0;
}
.portal-new-look .dm-ofact .big {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 10px;
  text-transform: uppercase;
}
.portal-new-look .dm-ofact .d {
  font-size: 14px;
  color: var(--mut);
  margin-top: 10px;
  line-height: 1.5;
}
.portal-new-look .dm-times {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.portal-new-look .dm-times button {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 0;
  min-height: 50px;
  text-align: center;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  cursor: pointer;
  background: #fff;
}
.portal-new-look .dm-times button:hover {
  border-color: var(--navy);
  background: var(--g2);
}
.portal-new-look .dm-done-row {
  display: flex;
  gap: 12px;
}
.portal-new-look .dm-done-row .dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.portal-new-look .dm-ref {
  text-align: center;
  font-size: 12px;
  color: #8a94a8;
  margin-top: 22px !important;
  line-height: 1.7;
}
.portal-new-look .dm-ref b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.portal-new-look .dm-sref {
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.portal-new-look .dm-sref span {
  font-size: 13px;
  color: var(--soft);
}
.portal-new-look .dm-sref b {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 18px;
}
.portal-new-look .dm-rise {
  animation: dm-in 0.5s var(--ease) both;
}

/* ---------- home ---------- */

.portal-new-look .dm-home {
  padding-bottom: 0;
}
.portal-new-look .dm-hnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
}
.portal-new-look .dm-hnav .r {
  display: flex;
  align-items: center;
  gap: 20px;
}
.portal-new-look .dm-hnav .reg-d {
  display: none;
  font-size: 13px;
  color: var(--mut);
}
.portal-new-look .dm-hero {
  padding: 0 12px;
}
.portal-new-look .dm-hero .dm-media {
  position: relative;
  height: 430px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--deep);
}
.portal-new-look .dm-hero .dm-media img {
  object-fit: cover;
}
.portal-new-look .dm-hero .dm-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 32, 71, 0.05) 30%, rgba(10, 32, 71, 0.45));
  pointer-events: none;
}
/*
 * No photo on the portal's front door: the brand navy with two soft glows,
 * the same as the side panel of the not-found page. Shorter than a photo
 * needs, so the two ways in sit higher on the screen.
 */
.portal-new-look .dm-hero .dm-media.plain {
  height: 250px;
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(96, 140, 230, 0.45), transparent 60%),
    radial-gradient(60% 110% at 100% 100%, rgba(37, 99, 235, 0.4), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--deep) 100%);
}
.portal-new-look .dm-hero .dm-media.plain::after {
  display: none;
}
.portal-new-look .dm-hero .dm-media.plain .dm-hchip {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
.portal-new-look .dm-hero .dm-notch {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 64px);
  bottom: -1px;
  background: #fff;
  border-radius: 26px 26px 0 0;
  padding: 20px 18px 0;
  z-index: 2;
}
/* 1px wider than the curve, tucked under the panel, so no seam shows where they meet. */
.portal-new-look .dm-hero .dm-notch::before,
.portal-new-look .dm-hero .dm-notch::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 23px;
  height: 22px;
}
.portal-new-look .dm-hero .dm-notch::before {
  left: -22px;
  background: radial-gradient(circle at 0 0, transparent 21.5px, #fff 22px);
}
.portal-new-look .dm-hero .dm-notch::after {
  right: -22px;
  background: radial-gradient(circle at 100% 0, transparent 21.5px, #fff 22px);
}
.portal-new-look .dm-hero h1 {
  font-size: 29px;
  text-align: center;
  line-height: 0.98;
  outline: none;
}
.portal-new-look .dm-hero h1 span {
  display: block;
}
.portal-new-look .dm-hero .dm-hchip {
  position: absolute;
  z-index: 2;
  /* Dark enough for its small white label to pass 4.5:1 on the pale sky of the photo. */
  background: rgba(10, 32, 71, 0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  border-radius: 18px;
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 500;
}
.portal-new-look .dm-hero .dm-hchip span {
  opacity: 0.92;
}
.portal-new-look .dm-hero .dm-hchip b {
  display: block;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  margin-top: 2px;
  line-height: 1.1;
}
.portal-new-look .dm-hero .dm-c1 {
  left: 14px;
  top: 14px;
}
.portal-new-look .dm-hero .dm-c2 {
  right: 14px;
  top: 14px;
}
.portal-new-look .dm-hero .dm-under {
  text-align: center;
  font-size: 17px;
  color: var(--mut);
  padding: 26px 24px 0;
}
.portal-new-look .dm-routes {
  display: grid;
  gap: 14px;
  padding: 28px 12px 0;
}
.portal-new-look .dm-routes .dm-route {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  padding: 26px 22px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.portal-new-look .dm-routes .dm-route:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh);
}
.portal-new-look .dm-routes .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.portal-new-look .dm-routes .ci {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
}
.portal-new-look .dm-routes h2 {
  font-size: 34px;
  margin-top: 22px;
}
.portal-new-look .dm-routes p {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.55;
}
.portal-new-look .dm-routes .dm-pl {
  margin-top: 22px;
  align-self: flex-start;
}
.portal-new-look .dm-routes .tag {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
}
.portal-new-look .dm-routes .dm-route.quick {
  background: linear-gradient(140deg, #dce8ff, #f3f7ff 70%);
}
.portal-new-look .dm-routes .dm-route.quick .ci {
  background: #fff;
  color: var(--blue);
  box-shadow: var(--sh-s);
}
.portal-new-look .dm-routes .dm-route.quick p {
  color: var(--mut);
}
.portal-new-look .dm-routes .tag.ok {
  background: #fff;
  color: #05603a;
  box-shadow: inset 0 0 0 1px #b7ebcd;
}
.portal-new-look .dm-routes .dm-route.full {
  background: linear-gradient(160deg, #0a2047, #112b64 65%, #183a80);
  color: #fff;
}
.portal-new-look .dm-routes .dm-route.full::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 176, 255, 0.32), transparent 70%);
}
.portal-new-look .dm-routes .dm-route.full > * {
  position: relative;
}
.portal-new-look .dm-routes .dm-route.full h2 {
  color: #fff;
}
.portal-new-look .dm-routes .dm-route.full p {
  color: var(--soft);
}
.portal-new-look .dm-routes .dm-route.full .ci {
  background: rgba(127, 176, 255, 0.15);
  color: var(--sky);
}
.portal-new-look .dm-routes .tag.rec {
  background: var(--blue);
  color: #fff;
}
.portal-new-look .dm-already {
  margin: 14px 12px 0;
  background: var(--surf);
  border-radius: var(--r-md);
  padding: 26px 18px 18px;
}
.portal-new-look .dm-already h2 {
  font-size: 28px;
  margin-top: 10px;
}
.portal-new-look .dm-already .arows {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.portal-new-look .dm-already .arow {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.portal-new-look .dm-already .ai {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--pale);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}
.portal-new-look .dm-already .at {
  flex: 1;
  min-width: 0;
}
.portal-new-look .dm-already .at b {
  display: block;
  font-size: 15.5px;
}
.portal-new-look .dm-already .at span {
  display: block;
  font-size: 13.5px;
  color: var(--mut);
  margin-top: 2px;
  line-height: 1.45;
}
.portal-new-look .dm-already .go {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surf);
  display: grid;
  place-items: center;
  color: var(--navy);
  flex: none;
}
.portal-new-look .dm-trust {
  margin: 40px 12px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.portal-new-look .dm-trust .dm-cell {
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 14px 24px;
  text-align: center;
}
.portal-new-look .dm-trust .dm-cell::before {
  content: "+";
  position: absolute;
  left: 10px;
  top: 6px;
  font-size: 15px;
  color: #a6afc0;
  font-weight: 300;
}
.portal-new-look .dm-trust .n {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-new-look .dm-trust .n .dm-ic {
  width: 28px;
  height: 28px;
  color: var(--blue);
}
.portal-new-look .dm-trust .t {
  margin-top: 10px;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.4;
}
.portal-new-look .dm-notice {
  margin: 36px 12px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 20px;
}
.portal-new-look .dm-notice p {
  font-size: 14px;
  color: var(--mut);
  margin-top: 10px;
  line-height: 1.6;
}
.portal-new-look .dm-foot {
  background: var(--deep);
  color: #c9d3e6;
  border-radius: 28px 28px 0 0;
  margin-top: 48px;
  padding: 40px 20px 28px;
}
.portal-new-look .dm-foot .dm-logo {
  font-size: 34px;
}
.portal-new-look .dm-foot p {
  margin-top: 14px;
  font-size: 14.5px;
  color: #9fb0cf;
  max-width: 360px;
}
.portal-new-look .dm-foot .fl {
  display: flex;
  gap: 0 18px;
  flex-wrap: wrap;
  margin-top: 15px;
  font-size: 14px;
}
/* 44px to tap; the margin above gives back what the padding adds, so the footer looks as it did. */
.portal-new-look .dm-foot .fl a {
  padding: 11px 0;
}
.portal-new-look .dm-foot .fl a:hover {
  color: #fff;
}
.portal-new-look .dm-foot .fb {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  margin-top: 24px;
  font-size: 12.5px;
  color: #8c9bba;
}

/* ---------- wider screens ---------- */

@media (max-width: 639px) {
  .portal-new-look .dm-dr:not(.got) .di {
    display: none;
  }
  /*
   * In the account's upload list a received document also has its New copy
   * button, and with the tick as well its words were left about 70px, five
   * lines of two words. The green row and "Already uploaded" still say it.
   */
  .portal-new-look .dm-drw .dm-dr.got .di {
    display: none;
  }
  .portal-new-look .dm-dr {
    padding-left: 14px;
  }
}

/*
 * Beside the round Back button a 360px phone has about 160px for the main
 * button's words, and "Submit my application" was cut to "Submit my applicat...".
 * Less padding and a point smaller fits the longest label, "Sending your
 * application", down to 360px.
 */
@media (max-width: 419px) {
  .portal-new-look .dm-bar .dm-pl.lg b {
    padding: 16px 14px;
    font-size: 15px;
  }
}

@media (min-width: 640px) {
  .portal-new-look .dm-choices.c1 {
    grid-template-columns: 1fr 1fr;
  }
  .portal-new-look .dm-g2 {
    grid-template-columns: 1fr 1fr;
  }
  .portal-new-look .dm-btns.row2 {
    grid-template-columns: 1fr 1fr;
  }
  .portal-new-look .dm-ftl {
    grid-template-columns: 1fr 1fr;
  }
  .portal-new-look .dm-main {
    padding: 34px 28px 36px;
  }
  .portal-new-look .dm-card {
    padding: 26px 24px;
  }
  .portal-new-look .dm-top {
    padding: 16px 28px 22px;
  }
  .portal-new-look .dm-bar {
    padding-left: 28px;
    padding-right: 28px;
  }
  .portal-new-look .dm-h1 {
    font-size: 42px;
  }
  .portal-new-look .dm-ocards {
    padding: 0 28px 40px;
  }
  .portal-new-look .dm-oh {
    font-size: 40px;
  }
}

@media (min-width: 1024px) {
  .portal-new-look .dm-app {
    display: grid;
    grid-template-columns: minmax(380px, 460px) 1fr;
  }
  .portal-new-look .dm-side {
    display: block;
    position: sticky;
    top: 12px;
    align-self: start;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    margin: 12px 0 12px 12px;
    border-radius: var(--r-lg);
    background: linear-gradient(165deg, #0a2047 0%, #112b64 60%, #183a80 100%);
    color: #fff;
    overflow: clip;
  }
  .portal-new-look .dm-side::before {
    content: "";
    position: absolute;
    right: -200px;
    top: -200px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 176, 255, 0.22), transparent 70%);
    pointer-events: none;
  }
  .portal-new-look .dm-side > * {
    position: relative;
    z-index: 1;
  }
  .portal-new-look .dm-top,
  .portal-new-look .dm-oband {
    display: none;
  }
  .portal-new-look .dm-main {
    padding: 64px 64px 32px;
  }
  .portal-new-look .dm-h1 {
    font-size: 52px;
  }
  .portal-new-look .dm-lede {
    font-size: 18px;
  }
  .portal-new-look .dm-card {
    padding: 28px;
  }
  .portal-new-look .dm-total {
    position: static;
    box-shadow: none;
  }
  .portal-new-look .dm-ocards {
    margin-top: 0;
    padding: 64px 64px 56px;
  }
  .portal-new-look .dm-ocards .dm-inner {
    max-width: 620px;
    margin: 0;
  }
  .portal-new-look .dm-ocards .dm-step > .dm-ocard:first-child {
    box-shadow: var(--sh-s);
  }
  .portal-new-look .dm-ocards .dm-ref {
    text-align: left;
  }
  .portal-new-look .dm-oside .dm-otile {
    margin: 48px 0 0;
  }
  .portal-new-look .dm-oside .dm-ochip {
    margin-top: 22px !important;
  }
  .portal-new-look .dm-oside .dm-oh {
    font-size: 46px;
    margin-top: 12px !important;
    line-height: 0.98;
  }
  .portal-new-look .dm-oside .dm-obody {
    font-size: 17px;
    margin: 18px 0 0 !important;
  }
  .portal-new-look .dm-oside .dm-octa {
    align-items: flex-start;
    margin-top: 26px;
  }
  .portal-new-look .dm-outcome .dm-side-in .dm-sreg {
    margin-top: auto;
    padding-top: 28px;
  }

  /* home */
  .portal-new-look .dm-hnav {
    padding: 20px 56px;
    max-width: 1440px;
    margin: 0 auto;
  }
  .portal-new-look .dm-hnav .dm-logo {
    font-size: 28px;
  }
  .portal-new-look .dm-hnav .reg-d {
    display: inline;
  }
  .portal-new-look .dm-hero {
    padding: 4px 56px 0;
    max-width: 1440px;
    margin: 0 auto;
  }
  .portal-new-look .dm-hero .dm-media {
    height: 470px;
    border-radius: 40px;
  }
  .portal-new-look .dm-hero .dm-media.plain {
    height: 320px;
  }
  .portal-new-look .dm-hero .dm-notch {
    border-radius: 36px 36px 0 0;
    padding: 32px 56px 0;
  }
  .portal-new-look .dm-hero .dm-notch::before,
  .portal-new-look .dm-hero .dm-notch::after {
    width: 37px;
    height: 36px;
  }
  .portal-new-look .dm-hero .dm-notch::before {
    left: -36px;
    background: radial-gradient(circle at 0 0, transparent 35.5px, #fff 36px);
  }
  .portal-new-look .dm-hero .dm-notch::after {
    right: -36px;
    background: radial-gradient(circle at 100% 0, transparent 35.5px, #fff 36px);
  }
  .portal-new-look .dm-hero h1 {
    font-size: 58px;
  }
  .portal-new-look .dm-hero h1 span:nth-child(2),
  .portal-new-look .dm-hero h1 span:nth-child(3) {
    display: inline;
  }
  .portal-new-look .dm-hero .dm-hchip {
    padding: 16px 20px 15px;
    font-size: 13px;
    border-radius: 22px;
    min-width: 170px;
  }
  .portal-new-look .dm-hero .dm-hchip b {
    font-size: 28px;
  }
  .portal-new-look .dm-hero .dm-c1 {
    left: 36px;
    top: 36px;
  }
  .portal-new-look .dm-hero .dm-c2 {
    right: 36px;
    top: 36px;
  }
  .portal-new-look .dm-hero .dm-under {
    font-size: 19px;
    padding-top: 36px;
  }
  .portal-new-look .dm-routes {
    max-width: 1440px;
    margin: 0 auto;
    padding: 44px 56px 0;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
  }
  .portal-new-look .dm-routes .dm-route.full {
    order: 1;
    padding: 44px 44px 40px;
  }
  .portal-new-look .dm-routes .dm-route.quick {
    order: 2;
    padding: 44px 40px 40px;
  }
  .portal-new-look .dm-routes h2 {
    font-size: 52px;
    margin-top: 30px;
  }
  .portal-new-look .dm-routes p {
    font-size: 17px;
    max-width: 470px;
  }
  .portal-new-look .dm-routes .dm-route.full .dm-pl b {
    padding: 16px 28px;
    font-size: 16px;
  }
  .portal-new-look .dm-routes .dm-route.full .dm-pl i {
    width: 54px;
    height: 54px;
  }
  .portal-new-look .dm-routes .dm-pl {
    margin-top: 30px;
  }
  .portal-new-look .dm-mid {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 56px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
  }
  /*
   * One row since the tracker link went, so the card is shorter than the trust
   * grid beside it. Centred down its height rather than leaving a gap below.
   */
  .portal-new-look .dm-already {
    margin: 0;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .portal-new-look .dm-already h2 {
    font-size: 38px;
  }
  .portal-new-look .dm-trust {
    margin: 0;
  }
  .portal-new-look .dm-trust .dm-cell {
    padding: 40px 18px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .portal-new-look .dm-trust .n {
    font-size: 40px;
    height: 44px;
  }
  .portal-new-look .dm-trust .t {
    font-size: 14px;
  }
  /* The same 56px side margin as the cards above it, up to the 1328px column. */
  .portal-new-look .dm-notice {
    margin: 20px max(56px, calc((100% - 1328px) / 2)) 0;
    padding: 28px 36px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
  }
  .portal-new-look .dm-notice p {
    margin-top: 0;
    font-size: 14.5px;
  }
  .portal-new-look .dm-foot {
    border-radius: 40px 40px 0 0;
    margin-top: 72px;
    padding: 56px max(56px, calc((100% - 1328px) / 2)) 32px;
  }
  .portal-new-look .dm-foot .dm-logo {
    display: block;
    font-size: 40px;
  }
}

@media (min-width: 1024px) and (max-height: 960px) {
  .portal-new-look .dm-ticks {
    display: none;
  }
  .portal-new-look .dm-side-in .dm-sreg {
    margin-top: auto;
    padding-top: 24px;
  }
}



/* ======================= checking ring ======================= */

.portal-new-look .dm-ring {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto;
  overflow: visible;
}
.portal-new-look .dm-ring .orbit {
  transform-box: view-box;
  transform-origin: 80px 80px;
  animation: dm-spin 7s linear infinite;
  will-change: transform;
}
.portal-new-look .dm-ring .arc {
  transition: stroke-dashoffset 0.9s var(--ease);
}
.portal-new-look .dm-ring .shield {
  transform-box: view-box;
  transform-origin: 80px 80px;
  animation: dm-breathe 2.4s ease-in-out infinite;
}
@keyframes dm-breathe {
  50% {
    transform: scale(1.06);
  }
}
.portal-new-look .dm-checking {
  max-width: 560px;
}
.portal-new-look .dm-check-h {
  font-size: clamp(28px, 7.6vw, 44px);
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ======================= bar inside the form column ======================= */

.portal-new-look .dm-app.has-bar .dm-main {
  padding-bottom: 0;
}
.portal-new-look .dm-formcol > .dm-bar {
  margin: 24px -16px 0;
}
.portal-new-look .dm-gd {
  display: grid;
  gap: 18px 14px;
}
.portal-new-look .dm-choices.c3 {
  grid-template-columns: 1fr;
}
.portal-new-look .dm-hint,
.portal-new-look .dm-err,
.portal-new-look .dm-conf,
.portal-new-look .dm-ch p,
.portal-new-look .dm-sub > .dm-sub-note {
  max-width: 60ch;
}
.portal-new-look .dm-lede {
  max-width: 62ch;
}
.portal-new-look .dm-aside {
  display: none;
}

@media (min-width: 640px) {
  .portal-new-look .dm-formcol > .dm-bar {
    margin: 28px -28px 0;
  }
  .portal-new-look .dm-choices.c3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ======================= desktop form layout ======================= */

@media (min-width: 1024px) {
  .portal-new-look .dm-app {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .portal-new-look .dm-side {
    margin: 16px 0 16px 16px;
    top: 16px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    border-radius: 32px;
  }
  .portal-new-look .dm-side-in {
    padding: 28px 26px 22px;
  }
  .portal-new-look .dm-side-top {
    margin-bottom: 30px;
  }
  .portal-new-look .dm-logo.big {
    font-size: 26px;
  }
  .portal-new-look .dm-side-title {
    font-size: 32px;
    margin-top: 10px;
  }
  .portal-new-look .dm-side-lede {
    font-size: 14.5px;
    margin-top: 12px !important;
  }
  .portal-new-look .dm-vsteps {
    margin-top: 22px;
    gap: 2px;
  }
  .portal-new-look .dm-vsteps li > * {
    padding: 7px 10px;
    font-size: 14px;
    gap: 12px;
  }
  .portal-new-look .dm-vsteps .n {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
  .portal-new-look .dm-side-msg {
    font-size: 13.5px;
    padding: 12px 14px;
    margin-top: 14px !important;
  }
  .portal-new-look .dm-ticks {
    padding-top: 18px;
  }
  .portal-new-look .dm-ticks li {
    font-size: 13px;
    padding: 9px 0;
  }
  .portal-new-look .dm-sreg {
    margin-top: 14px;
  }
  .portal-new-look .dm-outcome .dm-oside .dm-oh {
    font-size: 38px;
  }
  .portal-new-look .dm-outcome .dm-oside .dm-obody {
    font-size: 15.5px;
  }
  .portal-new-look .dm-outcome .dm-oside .dm-otile {
    margin-top: 36px;
  }

  .portal-new-look .dm-main {
    padding: 72px 48px 0;
  }
  .portal-new-look .dm-app:not(.has-bar) .dm-main {
    padding-bottom: 48px;
  }
  .portal-new-look .dm-desk {
    max-width: 860px;
    margin: 0 auto;
  }
  .portal-new-look .dm-h1 {
    font-size: clamp(34px, 2.8vw, 44px);
    line-height: 1;
  }
  .portal-new-look .dm-lede {
    font-size: 16.5px;
    margin-top: 10px !important;
  }
  .portal-new-look .dm-head + * {
    margin-top: 26px !important;
  }
  .portal-new-look .dm-step > form > * + *,
  .portal-new-look .dm-step > * + * {
    margin-top: 18px;
  }
  .portal-new-look .dm-card {
    padding: 24px 28px 28px;
    border-color: #e9edf4;
    box-shadow: 0 1px 2px rgba(10, 32, 71, 0.04);
  }
  .portal-new-look .dm-card.dm-soft,
  .portal-new-look .dm-card.dm-pale {
    box-shadow: none;
  }
  .portal-new-look .dm-card > .dm-ch:first-child {
    padding-bottom: 14px;
    border-bottom: 1px solid #eef1f6;
  }
  .portal-new-look .dm-card > .dm-ch:first-child + * {
    margin-top: 20px;
  }
  .portal-new-look .dm-ch h2 {
    font-size: 14px;
  }
  .portal-new-look .dm-gd {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .portal-new-look .dm-gd.dm-endrow > .dm-sumrow {
    margin-top: 29px;
    min-height: 54px;
  }
  .portal-new-look .dm-choices.many {
    grid-template-columns: repeat(3, 1fr);
  }
  .portal-new-look .dm-choices.c4 {
    max-width: 460px;
  }
  .portal-new-look .dm-g2.g3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .portal-new-look .dm-ftl {
    gap: 14px;
  }
  .portal-new-look .dm-ft {
    min-height: 92px;
    padding: 18px;
  }

  /* the footer bar: under the form, stuck to the bottom of the window on a long step */
  .portal-new-look .dm-formcol > .dm-bar {
    position: sticky;
    bottom: 0;
    margin: 26px 0 0;
    padding: 14px 0 22px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .portal-new-look .dm-bar .in {
    max-width: none;
    justify-content: space-between;
  }
  .portal-new-look .dm-bar .back-m {
    display: none;
  }
  .portal-new-look .dm-bar .back-d {
    display: inline-flex;
    padding: 12px 20px 12px 16px;
    min-height: 50px;
  }
  .portal-new-look .dm-bar .dm-pl {
    flex: none;
  }
  .portal-new-look .dm-bar .dm-pl.wide {
    display: inline-flex;
    width: auto;
  }
  .portal-new-look .dm-bar .dm-pl.wide b {
    flex: none;
    padding: 15px 28px;
  }
  .portal-new-look .dm-bar .dm-pl.lg i {
    width: 52px;
    height: 52px;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .portal-new-look .dm-side-lede {
    display: none;
  }
  .portal-new-look .dm-side-top {
    margin-bottom: 22px;
  }
}

/* the context column appears once there is room for it beside a full-width form */
@media (min-width: 1420px) {
  .portal-new-look .dm-app.has-aside .dm-desk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px;
    max-width: 1132px;
    align-items: start;
  }
  .portal-new-look .dm-app.has-aside .dm-ticks {
    display: none;
  }
  .portal-new-look .dm-app.has-aside .dm-side-in .dm-sreg {
    margin-top: auto;
    padding-top: 22px;
  }
  .portal-new-look .dm-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 14px;
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .portal-new-look .dm-aside::-webkit-scrollbar {
    display: none;
  }
  .portal-new-look .dm-app.has-aside .dm-aside {
    margin-top: -56px;
    /* sticky counts from inside the column's 72px top padding, so this holds it 16px from the window top */
    top: -56px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
}

@media (min-width: 1680px) {
  .portal-new-look .dm-app {
    grid-template-columns: 380px minmax(0, 1fr);
  }
  .portal-new-look .dm-side-in {
    padding: 36px 36px 28px;
  }
  .portal-new-look .dm-side-title {
    font-size: 38px;
  }
  .portal-new-look .dm-main {
    padding: 76px 64px 0;
  }
  .portal-new-look .dm-app.has-aside .dm-desk {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    max-width: 1180px;
  }
}

/* outcome screens: on a desktop the next step leads the right-hand column */
.portal-new-look .dm-octa-d {
  display: none;
}
@media (min-width: 1024px) {
  .portal-new-look .dm-oside .dm-octa {
    display: none;
  }
  .portal-new-look .dm-octa-d {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    background: linear-gradient(140deg, #dce8ff, #f3f7ff 70%);
    border-radius: var(--r-md);
    padding: 22px 24px;
  }
  .portal-new-look .dm-octa-d p {
    font-size: 13.5px;
    color: var(--mut);
    flex: 1 1 220px;
  }
  .portal-new-look .dm-outcome .dm-oside .dm-otile {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    margin-top: 28px;
  }
  .portal-new-look .dm-outcome .dm-oside .dm-oh {
    font-size: clamp(30px, 2.6vw, 40px);
  }
  .portal-new-look .dm-outcome .dm-oside .dm-obody {
    font-size: 15px;
    margin-top: 14px !important;
  }
  .portal-new-look .dm-ocards {
    padding: 40px 48px 48px;
  }
  .portal-new-look .dm-ocards .dm-inner {
    max-width: 720px;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .portal-new-look .dm-outcome .dm-sref {
    display: none;
  }
}

/* ======================= aside cards ======================= */

.portal-new-look .dm-acard {
  min-width: 0;
  border: 1px solid #e9edf4;
  border-radius: 22px;
  padding: 18px 18px 20px;
  background: #fff;
}
.portal-new-look .dm-acard.dm-a-soft {
  background: var(--surf);
  border-color: transparent;
}
.portal-new-look .dm-acard.dm-a-navy {
  background: linear-gradient(160deg, #0a2047, #112b64 70%, #183a80);
  border-color: transparent;
  color: #fff;
}
.portal-new-look .dm-acard.dm-a-navy .dm-eb {
  color: var(--sky);
}
.portal-new-look .dm-acard > .dm-eb + * {
  margin-top: 10px;
}
.portal-new-look .dm-astep {
  font-family: var(--f-disp);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: 20px;
  line-height: 1.05;
}
.portal-new-look .dm-amsg {
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 8px;
  color: var(--mut);
}
.portal-new-look .dm-acard.dm-a-navy .dm-amsg {
  color: var(--soft);
}
.portal-new-look .dm-abar {
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
  margin-top: 14px;
  overflow: hidden;
}
.portal-new-look .dm-abar i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #9dbfff, #fff);
  transform-origin: left;
  transform: scaleX(var(--fs, 0.1));
  transition: transform 0.6s var(--ease);
}
.portal-new-look .dm-atime {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #dce5f7;
  margin-top: 12px;
}
.portal-new-look .dm-apoints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.portal-new-look .dm-acard > .dm-eb + .dm-apoints {
  margin-top: 14px;
}
.portal-new-look .dm-apoints li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}
.portal-new-look .dm-apoints .i {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--pale);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}
.portal-new-look .dm-acard.dm-a-soft .dm-apoints .i {
  background: #fff;
}
.portal-new-look .dm-acard .dm-olist {
  gap: 12px;
  margin-top: 14px;
}
.portal-new-look .dm-acard .dm-olist .n {
  width: 24px;
  height: 24px;
  font-size: 11.5px;
}
.portal-new-look .dm-acard .dm-olist b {
  font-size: 13.5px;
}
.portal-new-look .dm-acard .dm-olist .d {
  font-size: 12.5px;
}
.portal-new-look .dm-sum {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.portal-new-look .dm-sum li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #eef1f6;
}
.portal-new-look .dm-sum li:first-child {
  border-top: 0;
}
.portal-new-look .dm-sum .k {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 11px;
  color: var(--mut);
  flex: none;
}
.portal-new-look .dm-sum li.done .k {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.portal-new-look .dm-sum li.here .k {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.portal-new-look .dm-sum .t {
  flex: 1;
  min-width: 0;
}
.portal-new-look .dm-sum .t b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.portal-new-look .dm-sum .t span {
  display: block;
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-new-look .dm-sum li:not(.done) .t span {
  color: #9aa3b5;
}
.portal-new-look .dm-sum li.here .t span {
  color: var(--blue);
}
.portal-new-look .dm-sum button {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  padding: 4px 2px;
  flex: none;
}
.portal-new-look .dm-aregs {
  font-size: 12px;
  color: var(--mut);
  line-height: 1.6;
  padding: 0 6px;
}

@media (prefers-reduced-motion: reduce) {
  .portal-new-look .dm-screen *,
  .portal-new-look .dm-screen *::before,
  .portal-new-look .dm-screen *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 1023px) {
  .portal-new-look .dm-formcol > .dm-bar {
    margin-top: 72px;
  }
}

/* desktop: the window never scrolls; only the middle column does, so the blue panel and the context cards stay put */
@media (min-width: 1024px) {
  html:has(.portal-new-look .dm-app),
  body:has(.portal-new-look .dm-app) {
    height: 100%;
    overflow: hidden;
  }
  .portal-new-look .dm-app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .portal-new-look .dm-col {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .portal-new-look .dm-main,
  .portal-new-look .dm-ocards {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (min-width: 1680px) {
  .portal-new-look .dm-app.has-aside .dm-aside {
    margin-top: -60px;
    top: -60px;
  }
}

/* ---------- Section 92 pop-up ---------- */

.portal-new-look .dm-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: end center;
  background: rgba(10, 32, 71, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: dm-fade 0.2s ease both;
}
.portal-new-look .dm-modal-card {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px -20px rgba(10, 32, 71, 0.45);
  animation: dm-in 0.32s var(--ease) both;
  /* A phone on its side, or with the keyboard up, is shorter than the card: it scrolls rather than losing its heading off the top. */
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.portal-new-look .dm-modal-card h2 {
  font-size: 26px;
  line-height: 1.02;
  margin-top: 6px;
}
.portal-new-look .dm-modal-lede {
  margin-top: 10px;
  font-size: 15px;
  color: var(--mut);
  line-height: 1.55;
}
.portal-new-look .dm-modal-card .dm-f {
  margin-top: 18px;
}
.portal-new-look .dm-inp.dm-area {
  align-items: stretch;
  padding: 12px 14px 12px 16px;
}
.portal-new-look .dm-inp textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  resize: vertical;
}
.portal-new-look .dm-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 20px;
}
@keyframes dm-fade {
  from {
    opacity: 0;
  }
}
@media (min-width: 640px) {
  .portal-new-look .dm-modal {
    place-items: center;
    padding: 24px;
  }
  .portal-new-look .dm-modal-card {
    border-radius: 28px;
    padding: 32px;
  }
}

/* wide screens: the context cards sit against the right edge, mirroring the blue panel on the left */
@media (min-width: 1420px) {
  .portal-new-look .dm-app.has-aside .dm-desk {
    max-width: none;
    margin-right: -32px;
  }
  .portal-new-look .dm-app.has-aside .dm-formcol {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
  }
}
@media (min-width: 1680px) {
  .portal-new-look .dm-app.has-aside .dm-desk {
    margin-right: -48px;
  }
}
@media (max-width: 1023px) {
  .portal-new-look .dm-app.has-bar .dm-main {
    display: flex;
    flex-direction: column;
  }
  .portal-new-look .dm-app.has-bar .dm-inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .portal-new-look .dm-app.has-bar .dm-formcol {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  .portal-new-look .dm-app.has-bar .dm-formcol > .dm-step {
    flex: 1 0 auto;
  }
}

/*
 * The reference in the outcome side panel: the label above, the reference on a
 * line of its own below it, never broken. Side by side, a real reference such
 * as CF-2026-000684 ran out of the panel and was cut off.
 */
.portal-new-look .dm-sref {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}
.portal-new-look .dm-sref span,
.portal-new-look .dm-sref b {
  white-space: nowrap;
}

/* Desktop outcome cards read left to right, so their fine print lines up with the steps above it. */
@media (min-width: 1024px) {
  .portal-new-look .dm-ocard .dm-fine {
    text-align: left;
    margin-left: 0;
  }
}

/* ---------- live app only ---------- */

/*
 * States the prototype never had, because it sent nothing: a callback request
 * on its way, and a link inside a line of text.
 */
.portal-new-look .dm-times button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.portal-new-look .dm-chs a {
  color: var(--blue);
  font-weight: 600;
}

/* ---------- the full application, live app only ---------- */

/*
 * The live steps keep their own field kit, which names a group of fields with
 * an h2 (the prototype used an h3), wraps the address search in a box of its
 * own, and can be busy sending.
 */
.portal-new-look .dm-sub > h2 {
  font-size: 15px;
  font-weight: 600;
}
.portal-new-look .dm-inp.addr > div {
  flex: 1;
  min-width: 0;
  align-self: stretch;
}
.portal-new-look .dm-inp.addr > div > input {
  width: 100%;
}
.portal-new-look .dm-inp.addr > div > ul {
  z-index: 30;
}
.portal-new-look .dm-pl:disabled {
  opacity: 0.7;
  cursor: progress;
}
.portal-new-look .dm-ghost:disabled,
.portal-new-look .dm-tl:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* What a returned offline form could not read cleanly. */
.portal-new-look .dm-offl-warn {
  display: block;
  margin-top: 6px;
  color: #b45309;
}
.portal-new-look .dm-offl-warn > span {
  display: block;
}

/* ======================= phase 4: tracker, sign in, account, missing pages ======================= */

/* A neutral outcome: the tracker, a sent sign in link, a missing page. Reports, never judges. */
.portal-new-look .dm-outcome.t-info {
  --acc: #7fb0ff;
  --acc-text: #cfe0ff;
  --acc-line: rgba(127, 176, 255, 0.4);
  --acc-glow: rgba(127, 176, 255, 0.26);
}

/* the tracker's four digits */
.portal-new-look .dm-inp.dm-last4 {
  max-width: 180px;
}
.portal-new-look .dm-inp.dm-last4 input {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.4em;
}

/* the tracker's stages: done in green, here in navy, still to come pale. Not .d, which is the list's detail line. */
.portal-new-look .dm-olist.dm-track {
  gap: 12px;
}
.portal-new-look .dm-olist.dm-track li {
  align-items: center;
}
.portal-new-look .dm-olist.dm-track li.done .n {
  background: var(--ok);
}
.portal-new-look .dm-olist.dm-track li.here .n {
  box-shadow: 0 0 0 4px rgba(17, 43, 100, 0.14);
}
.portal-new-look .dm-olist.dm-track li.here .d {
  color: var(--blue);
  font-weight: 600;
  margin-top: 0;
}
.portal-new-look .dm-olist.dm-track li.todo .n {
  background: var(--surf);
  color: #8a94a8;
}
.portal-new-look .dm-olist.dm-track li.todo b {
  color: #8a94a8;
  font-weight: 500;
}
.portal-new-look .dm-olist.dm-track + .dm-fine {
  margin-top: 18px;
}

/* a card's buttons, side by side when there is room */
.portal-new-look .dm-card .dm-btns,
.portal-new-look .dm-ocard .dm-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 16px;
}
.portal-new-look .dm-card .dm-chs + .dm-btns {
  margin-top: 16px;
}

/* the account: one card per application */
.portal-new-look .dm-apphead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px 20px;
}
.portal-new-look .dm-appref {
  font-size: 26px;
  letter-spacing: -0.02em;
  margin-top: 4px !important;
  font-variant-numeric: tabular-nums;
}
.portal-new-look .dm-appupd {
  font-size: 13px;
  color: var(--mut);
  margin-top: 4px !important;
}
.portal-new-look .dm-appact {
  display: flex;
  align-items: center;
  gap: 14px;
}
.portal-new-look .dm-stchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pale);
  color: var(--navy);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.portal-new-look .dm-stchip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.portal-new-look .dm-appcard > .dm-sub {
  margin-top: 26px;
}
.portal-new-look .dm-sub > .dm-docs {
  margin-top: 12px;
}

/* a document's state on the account, and an upload row's own note */
.portal-new-look .dm-dstate {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mut);
  padding-right: 6px;
}
.portal-new-look .dm-dstate.ok {
  color: #05603a;
}
.portal-new-look .dm-dr.picked {
  border-color: #b9cff7;
  background: var(--g2);
}
.portal-new-look .dm-dr.picked .di {
  background: var(--pale);
  color: var(--navy);
}
.portal-new-look .dm-dr .add.quiet {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
}
.portal-new-look .dm-dr button.add:disabled,
.portal-new-look .dm-dr .lk:disabled {
  opacity: 0.6;
  cursor: progress;
}
.portal-new-look .dm-spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: dm-spin 0.8s linear infinite;
}
.portal-new-look .dm-drmsg {
  font-size: 13px;
  color: var(--warn);
  margin: 6px 0 0 14px !important;
}
.portal-new-look .dm-drmsg.ok {
  color: #05603a;
}

/* ---------- referral partner landing page ---------- */

.portal-new-look .dm-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  margin: 0 12px 12px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
}
.portal-new-look .dm-partner.dark {
  background: var(--navy);
  border-color: var(--navy);
}
.portal-new-look .dm-partner span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
}
.portal-new-look .dm-partner.dark span {
  color: rgba(255, 255, 255, 0.6);
}
.portal-new-look .dm-partner img {
  max-height: 40px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
}
.portal-new-look .dm-partner b {
  font-family: var(--f-disp);
  font-size: 18px;
  color: var(--navy);
}
.portal-new-look .dm-partner.dark b {
  color: #fff;
}
.portal-new-look .dm-hero .dm-under.fine {
  font-size: 14px;
  padding-top: 10px;
  max-width: 680px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .portal-new-look .dm-partner {
    max-width: 1328px;
    margin: 0 auto 16px;
  }
  .portal-new-look .dm-routes.one {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }
}