/* THE LIVE HIGHLIGHTS (assets/js/hl.js). Each highlight tile is the real
   screen rebuilt at 800px square, the size its screenshot was cut at, and
   scaled down to the tile, so every measure below is a pixel of that
   screenshot. The screens are product UI: they keep their own fonts and
   colors, and like the screenshots they stand in for, they are the same in
   both themes.

   Prefixes: .hlx the frame, cursor and finger. .hlst the stage a case
   study shows its four screens on (at the end of this file). .lw Lending Workflow,
   .dw Deposit Workspace, .scx Service Central, .fq Support FAQ. */

/* ── the frame ── */
.hlx-p { overflow: hidden; }
.hlx { position: absolute; inset: 0; display: none; overflow: hidden; background: #fff; }
.hlx-p.is-live > img { opacity: 0; }
/* the screenshot under a tile used as a thumbnail, for a reader without script */
.hlx-p > img.hlx-fb { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the Up next plate is wide, and holds its screenshot to the right: so does the screen */
.mynxt__card.is-next .hlx { --hlx-ax: 1; }
.hlx-p.is-live > .hlx { display: block; }
.hlx__s {
  position: absolute; left: var(--hx, 0px); top: var(--hy, 0px); width: 800px; height: 800px; overflow: hidden;
  transform: scale(var(--k, .32)); transform-origin: 0 0;
  background: #fff; color: #161616; text-align: left;
  font-size: 14px; line-height: 1.35; letter-spacing: 0; font-weight: 400;
  -webkit-font-smoothing: antialiased; transition: opacity .32s ease;
}
.hlx.is-fade .hlx__s { opacity: 0; }
/* The site's own element rules stop at the screen's edge. shell.css sets every
   heading in the display face and caps images and svgs at their box, and
   case.css stretches every image in a highlight plate to cover it; inside a
   rebuilt screen each of those would redraw the product in the portfolio's
   voice, or blow a 42px handset up to the size of the tile. The heading reset
   is kept at one class of weight so any screen's own face still wins. */
.hlx__s :where(h1, h2, h3, h4, h5, h6) { font-family: inherit; }
.hlx .hlx__s img, .hlx .hlx__s svg { max-width: none; }
.hlx .hlx__s img { width: auto; height: auto; object-fit: fill; }
.hlx__s * { box-sizing: border-box; }
.hlx__s p, .hlx__s h1, .hlx__s h2, .hlx__s h3, .hlx__s ul, .hlx__s ol { margin: 0; padding: 0; }
.hlx__s ul, .hlx__s ol { list-style: none; }
.hlx__s b, .hlx__s strong { font-weight: 600; }
.hlx__s i { font-style: normal; }

/* ── the pointer: an arrow that turns into a hand over what it can press ── */
.hlx-cur {
  position: absolute; left: 0; top: 0; z-index: 50; width: 0; height: 0; pointer-events: none;
  transform: translate3d(820px, 620px, 0); opacity: 0;
  transition: transform .7s cubic-bezier(.45, .05, .2, 1), opacity .25s ease;
}
.hlx-cur.is-on { opacity: 1; }
.hlx-cur::before, .hlx-cur::after {
  content: ""; position: absolute; background: no-repeat center / contain; transition: opacity .12s;
}
.hlx-cur::before { /* arrow, point at its hotspot */
  left: -2px; top: -2px; width: 22px; height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M2 2v22.5l5.6-5.4 3.8 8.6 3.9-1.7-3.7-8.4h7.9z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hlx-cur::after { /* hand, fingertip at the hotspot */
  left: -10px; top: -2px; width: 25px; height: 29px; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 29'%3E%3Cpath d='M8 14.5V3.8a2 2 0 0 1 4 0v8.4l.3-1.3a2 2 0 0 1 3.8.4v1.6a2 2 0 0 1 3.8.5v1.2a1.9 1.9 0 0 1 3.7.6v5.4c0 4.2-3 7.4-7.2 7.4h-2.8c-2.4 0-4-1-5.4-2.8L2.6 19.6c-1-1.3-.5-3 1-3.4 1-.3 2 .1 2.7.9L8 19.4z' fill='%23fff' stroke='%23111' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 12.4v5.4M16.1 13.1v4.7M19.9 14.2v3.6' stroke='%23111' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hlx-cur.is-hand::before { opacity: 0; }
.hlx-cur.is-hand::after { opacity: 1; }
/* the click: a quick dip and a ring off the hotspot */
.hlx-cur.is-press::before, .hlx-cur.is-press::after { animation: hlx-dip .28s ease; }
@keyframes hlx-dip { 40% { scale: .84; } }
.hlx-cur.is-press > b { animation: hlx-ring .5s ease-out; }
.hlx-cur > b { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(20, 20, 20, .38); opacity: 0; }
@keyframes hlx-ring { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.25); } }

/* the finger, for phones: a soft disc that lands, holds, and lifts */
.hlx-dot { position: absolute; z-index: 50; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(225, 225, 225, .9); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; }
.hlx-dot.is-on { animation: hlx-tap .75s ease; }
@keyframes hlx-tap { 0% { opacity: 0; transform: scale(1.35); } 22% { opacity: 1; transform: scale(1); } 60% { opacity: .95; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.05); } }

.hlx-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: currentColor; animation: hlx-blink .8s steps(1) infinite; }
@keyframes hlx-blink { 50% { opacity: 0; } }

/* a press on a button: a small sink, then back */
.hlx-sink { animation: hlx-sink .3s ease; }
@keyframes hlx-sink { 40% { transform: scale(.95); filter: brightness(.94); } }


/* ══ JPMORGAN: shared ═════════════════════════════════════════════════════
   Salt, the firm's design system: Open Sans, teal for where you are, hairline
   gray tables. */
.hlx--jpm .hlx__s { font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif; color: #1e1e1e; }
.jp-a { color: #155f93; text-decoration: underline; text-decoration-color: rgba(21, 95, 147, .55); text-underline-offset: 3px; }
.jp-chev { display: inline-block; width: 9px; height: 9px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.jp-caret { display: inline-block; width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid #333; border-bottom: 0; }
.jp-caret.is-r { border: 5px solid transparent; border-left: 6px solid #333; border-right: 0; }

/* the ticket bar every lending screen has across the top */
.jp-bar { position: absolute; left: 0; right: 0; top: 0; height: 78px; border-bottom: 1px solid #d6d6d6; background: #fff; font-size: 13.5px; }
.jp-bar__t { position: absolute; top: 33px; left: var(--x, 14px); color: #333; }
.jp-bar__dd { position: absolute; top: 25px; left: var(--dx, 63px); width: var(--dw, 258px); height: 30px; border: 1px solid #8d8d8d; border-radius: 2px;
  padding: 5px 34px 0 12px; white-space: nowrap; overflow: hidden; font-size: 13px; color: #222; }
.jp-bar__dd .jp-chev { position: absolute; right: 14px; top: 7px; width: 10px; height: 10px; }
/* the ticket name cuts itself short before the arrow, whatever the box's width */
.jp-bar__v { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-bar__kv { position: absolute; top: 18px; left: var(--x); display: flex; flex-direction: column; gap: 6px; white-space: nowrap; color: #333; font-size: 13px; }
.jp-bar__kv b { color: #111; margin-left: 6px; }

.jp-tbl { width: 100%; border-collapse: collapse; font-size: 12.6px; }
.jp-tbl th { text-align: left; font-weight: 500; color: #333; padding: 7px 0 7px 0; border-bottom: 1.5px solid #9a9a9a; white-space: nowrap; position: relative; }
.jp-tbl td { padding: 0; height: 29.5px; border-bottom: 1px solid #dcdcdc; white-space: nowrap; color: #222; }

/* ══ LENDING 01: the stage rail ══ */
.lw-top { position: absolute; left: 0; right: 0; top: 0; height: 25px; border-bottom: 1px solid #dadada; font-size: 13px; padding: 4px 0 0 47px; color: #222; }
.lw-top svg { position: absolute; left: 14px; top: 4px; width: 22px; height: 16px; }
.lw-side { position: absolute; left: 0; top: 25px; bottom: 0; width: 364px; border-right: 1.5px solid #d9d9d9; }
.lw-who { position: absolute; left: 24px; top: 27px; display: flex; align-items: flex-start; gap: 9px; }
.lw-av { width: 44px; height: 44px; border-radius: 50%; background: #cfe9d9; display: grid; place-items: center; flex: none; }
.lw-who h3 { font-size: 19px; font-weight: 600; letter-spacing: -.1px; line-height: 1.2; margin-top: -1px; white-space: nowrap; }
.lw-who h3 span { display: inline-block; margin-left: 9px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; background: #d8d8d8; border-radius: 9px; vertical-align: 2px; }
.lw-who p { font-size: 14px; color: #333; margin-top: 3px; }
.lw-who p i { display: inline-block; width: 1px; height: 13px; background: #999; margin: 0 4px; vertical-align: -1px; }

.lw-rail { position: absolute; left: 25px; right: 24px; top: 105px; }
.lw-rail::before { content: ""; position: absolute; left: 11.5px; top: 26px; bottom: 26px; border-left: 1.6px dashed #8a8a8a; }
.lw-st { position: relative; display: flex; align-items: center; height: 51.6px; font-size: 16px; color: #333; }
.lw-st.is-now { font-weight: 600; color: #1e1e1e; }
.lw-st > i { position: relative; flex: none; width: 25px; height: 25px; border-radius: 50%; border: 1.6px solid #6c6c6c; background: #fff; margin-right: 18px;
  transition: background-color .35s ease, border-color .35s ease; }
.lw-st > i::after, .lw-sub li > i::after { content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.34, 1.4, .5, 1); }
.lw-st .jp-caret { margin-right: 11px; transition: transform .3s ease; transform: rotate(-90deg); }
.lw-st.is-open .jp-caret { transform: none; border-top-color: #1f6ea8; }
.lw-st.is-plain > i { margin-right: 35px; }
.lw-st.is-now > i { border: 2.2px solid #1f5d74; }
.lw-st.is-hov { color: #111; }
.lw-st.is-done > i, .lw-sub li.is-done > i { background: #2e7a3c; border-color: #2e7a3c; }
.lw-st.is-done > i::after, .lw-sub li.is-done > i::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.lw-sub { height: 0; overflow: hidden; transition: height .45s cubic-bezier(.4, 0, .2, 1); }
.lw-sub.is-open { height: var(--h, 150px); }
.lw-sub li { position: relative; display: flex; align-items: center; justify-content: space-between; height: 36.5px; padding-left: 30px; font-size: 14px; color: #8a8a8a; transition: color .3s, background-color .2s; }
.lw-sub li.is-hov { background: #f1f5f7; }
.lw-sub li:first-child { margin-top: -2px; }
.lw-sub li > i { position: relative; flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.4px solid #8a8a8a; background: #fff; transition: background-color .3s, border-color .3s; }
.lw-sub li > i::after { width: 3.5px; height: 7px; border-width: 0 1.6px 1.6px 0; }
.lw-sub li.is-now { color: #17607c; font-weight: 600; }
.lw-sub li.is-now > i { border-color: #17607c; }
.lw-sub li.is-done { color: #2a2a2a; }

.lw-main { position: absolute; left: 365px; right: 0; top: 25px; bottom: 0; }
.lw-main .jp-bar { top: 0; height: 86px; border-bottom-color: #dcdcdc; }
.lw-tabs { position: absolute; left: 44px; top: 100px; display: flex; gap: 28px; font-size: 15px; color: #333; }
.lw-tabs span { padding-bottom: 8px; }
.lw-tabs span.is-on { color: #17607c; font-weight: 600; box-shadow: inset 0 -2.5px 0 #17607c; }
.lw-main__rule { position: absolute; left: 0; right: 0; top: 134px; border-top: 1px solid #dcdcdc; }
.lw-h { position: absolute; left: 43px; top: 139px; font-size: 19px; font-weight: 600; }
.lw-card { position: absolute; left: 42px; right: -2px; border: 1px solid #d0d0d0; background: #fff; }
.lw-card h4 { margin: 0; font-size: 16.5px; font-weight: 600; }
.lw-parties { top: 185px; height: 241px; padding: 25px 0 0 25px; }
.lw-parties .jp-tbl { margin-top: 11px; width: 380px; }
.lw-parties .jp-tbl th { padding-left: 13px; font-weight: 600; font-size: 13px; border-right: 1px solid #dcdcdc; }
.lw-parties .jp-tbl th:last-child { border-right: 0; }
.lw-parties .jp-tbl td { height: 31px; padding-left: 13px; font-size: 13.3px; }
.lw-parties tr.is-hov td { background: #eef4f7; }
.lw-parties tbody tr { transition: background-color .2s; }
.lw-acc { height: 47px; display: flex; align-items: center; gap: 13px; padding-left: 24px; font-size: 16.5px; font-weight: 600; }
.lw-acc .jp-chev { width: 8px; height: 8px; transform: rotate(-45deg); color: #444; border-width: 0 1.6px 1.6px 0; }
.lw-acc.is-open .jp-chev { transform: rotate(45deg); color: #17607c; margin-top: -4px; }

/* ══ LENDING 02: certifying good standing ══ */
.lw2 { padding: 0 0 0 38px; }
.lw2 h2 { position: absolute; left: 38px; top: 112px; font-size: 22px; font-weight: 600; }
.lw2 h3 { font-size: 18px; font-weight: 600; }
.lw2 h4 { margin: 0; font-size: 16px; font-weight: 600; }
.lw2-sec { position: absolute; left: 38px; right: -40px; }
.lw2 .jp-tbl th { padding: 7px 0 7px 0; }
.lw2 .jp-tbl td { height: 29.5px; }
.lw2 .jp-tbl th + th { padding-left: 12px; border-left: 1px solid #dcdcdc; }
.lw2 .jp-tbl td + td { padding-left: 12px; }
.lw2-dd { width: 298px; height: 30px; margin-top: 10px; border: 1px solid #8f8f8f; border-radius: 2px; position: relative; padding: 5px 0 0 12px; font-size: 14px; transition: border-color .2s, box-shadow .2s; }
.lw2-dd.is-open { border-color: #17607c; box-shadow: 0 0 0 1px #17607c; }
.lw2-dd::after { content: "\00d7"; position: absolute; right: 30px; top: 1px; font-size: 21px; color: #333; }
.lw2-dd .jp-chev { position: absolute; right: 11px; top: 7px; }
.lw2-menu { position: absolute; left: 0; top: 33px; width: 298px; z-index: 5; background: #fff; border: 1px solid #c9c9c9; box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  font-size: 14px; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .25s ease; pointer-events: none; }
.lw2-dd.is-open .lw2-menu { opacity: 1; transform: none; }
.lw2-menu li { height: 32px; padding: 6px 12px 0; display: flex; gap: 10px; align-items: flex-start; transition: background-color .15s; }
.lw2-menu li i { width: 14px; height: 14px; margin-top: 2px; border: 1.3px solid #666; border-radius: 2px; flex: none; position: relative; }
.lw2-menu li.is-on i { background: #1c6784; border-color: #1c6784; }
.lw2-menu li.is-on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.lw2-menu li.is-hov { background: #eef4f7; }
.lw2-fold { overflow: hidden; transition: height .45s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.lw2-row-hl td { background: #eef4f7; transition: background-color .3s; }
.lw2 tr td { transition: background-color .3s, opacity .3s; }
.lw2-doc { opacity: 0; transition: opacity .3s; display: inline-flex; gap: 6px; align-items: center; }
.lw2-doc.is-on { opacity: 1; }
.lw2-ok { display: inline-block; font-size: 12px; font-weight: 600; color: #19713c; background: #e3f3e8; border-radius: 9px; padding: 1px 8px; text-decoration: none; }

/* ══ LENDING 03: risk up front ══ */
.lw3-tabs { position: absolute; left: 36px; right: 0; top: 86px; height: 36px; border-bottom: 1px solid #d6d6d6; display: flex; gap: 25px; font-size: 14px; font-weight: 500; color: #333; }
.lw3-tabs span { padding-top: 3px; }
.lw3-tabs span.is-on { color: #17607c; font-weight: 600; box-shadow: inset 0 -2.5px 0 #17607c; }
.lw3-badge { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px; border-radius: 50%; background: #ad1f45; color: #fff; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.lw3-badge.is-pulse { animation: lw3-pulse .9s ease 2; }
@keyframes lw3-pulse { 40% { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(173, 31, 69, .18); } }
.lw3-ban { position: absolute; left: 36px; right: -10px; top: 145px; height: 74px; background: #fdf3d8; border-left: 4px solid #c4691e; padding: 12px 0 0 42px;
  transform-origin: 0 0; transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .3s; }
.lw3-ban.is-hide { opacity: 0; transform: translateY(-10px); }
.lw3-ban svg { position: absolute; left: 13px; top: 14px; }
.lw3-ban h3 { font-size: 17px; font-weight: 600; color: #2a2a2a; }
.lw3-ban h3 a { color: #145a99; margin-left: 5px; text-decoration: none; transition: box-shadow .2s; }
.lw3-ban h3 a.is-hov { box-shadow: inset 0 -1.5px 0 #145a99; }
.lw3-ban p { font-size: 12.8px; margin-top: 5px; color: #333; }
.lw3-sub { position: absolute; left: 36px; right: 0; top: 245px; height: 37px; border-bottom: 1px solid #d6d6d6; display: flex; gap: 26px; font-size: 14px; font-weight: 500; color: #333; }
.lw3-sub span.is-on { color: #17607c; font-weight: 600; box-shadow: inset 0 -2.5px 0 #17607c; }
.lw3-box { position: absolute; border: 1.5px solid #d4d4d4; background: #fff; }
.lw3-box h4 { margin: 0; font-size: 15px; font-weight: 600; }
.lw3-fac { left: 35px; right: -10px; top: 302px; height: 102px; padding: 21px 0 0 22px; }
.lw3-fac h4 { font-size: 17.5px; }
.lw3-fac p { font-size: 13px; margin-top: 16px; display: flex; gap: 72px; }
.lw3-don { left: 35px; width: 262px; top: 419px; height: 293px; padding: 23px 0 0 22px; text-align: center; }
.lw3-don h4 { text-align: left; font-size: 14.5px; }
.lw3-tr h4 { font-size: 14.5px; }
.lw3-don svg { position: absolute; left: 60px; top: 54px; }
.lw3-don__v { position: absolute; left: 0; right: 0; top: 105px; font-size: 18px; font-weight: 600; }
.lw3-don__v small { display: block; font-size: 11px; font-weight: 400; margin-top: 0; }
.lw3-don__t { position: absolute; left: 0; right: 0; top: 204px; font-size: 12.8px; line-height: 18px; }
.lw3-arc { transition: stroke-dashoffset 1.3s cubic-bezier(.3, .8, .3, 1); }
.lw3-tr { left: 320px; right: -10px; top: 419px; height: 293px; padding: 23px 0 0 22px; }
.lw3-seg { position: absolute; left: 22px; top: 62px; display: flex; font-size: 11.5px; }
.lw3-seg span { width: 40px; height: 25px; display: grid; place-items: center; border: 1px solid #9a9a9a; margin-left: -1px; background: #fff; transition: background-color .2s, border-color .2s; }
.lw3-seg span:first-child { border-radius: 2px 0 0 2px; margin: 0; }
.lw3-seg span:last-child { width: 48px; border-radius: 0 2px 2px 0; }
.lw3-seg span.is-on { background: #eaf1fb; border-color: #3c6d8e; font-weight: 600; position: relative; z-index: 1; }
.lw3-tr svg { position: absolute; left: 20px; top: 98px; overflow: visible; font-size: 8px; }
.lw3-line { fill: none; stroke: #99c4b8; stroke-width: 1.8; transition: d .8s cubic-bezier(.3, .8, .3, 1); }
.lw3-draw { stroke-dasharray: 420; stroke-dashoffset: 420; animation: lw3-draw 1.2s .2s cubic-bezier(.3, .8, .3, 1) forwards; }
@keyframes lw3-draw { to { stroke-dashoffset: 0; } }
.lw3-ov { left: 35px; right: -10px; top: 727px; height: 120px; }
.lw3-ov h4 { position: absolute; left: 42px; top: 12px; font-size: 15px; }
.lw3-ov .jp-chev { position: absolute; left: 20px; top: 16px; color: #17607c; }
.lw3-ov > i { position: absolute; left: 0; right: 0; top: 42px; border-top: 1px solid #d6d6d6; }
.lw3-ov p { position: absolute; top: 62px; font-size: 13px; }

/* ══ LENDING 04: every proposed change in one table ══ */
.lw4-tbl { position: absolute; left: 29px; top: 108px; width: 820px; font-size: 12px; }
.lw4-tbl .r { display: grid; grid-template-columns: 38px 143px 108px 103px 104px 116px 128px 60px; height: 26.8px; align-items: center; border-bottom: 1px solid #d7d7d7;
  transition: background-color .25s; white-space: nowrap; }
.lw4-tbl .r > * { padding-left: 12px; }
.lw4-tbl .r > *:first-child { padding-left: 12px; }
.lw4-tbl .r.is-h { height: 30px; border-bottom: 1.5px solid #8f8f8f; font-size: 12px; font-weight: 500; color: #333; }
.lw4-tbl .r.is-h > * + * { border-left: 1px solid #d7d7d7; height: 100%; display: flex; align-items: center; }
.lw4-tbl .r.is-g { grid-template-columns: 38px 1fr; font-weight: 600; font-size: 11.8px; }
.lw4-tbl .r.is-g > span { padding-left: 13px; display: flex; align-items: center; gap: 6px; }
.lw4-tbl .r.is-g .jp-caret { border-width: 4.5px; border-top-width: 5.5px; border-top-color: #17607c; }
.lw4-tbl .r.is-sel { background: #edf1fc; }
.lw4-tbl .r:not(.is-h):not(.is-g) > span:nth-child(2) { padding-left: 21px; }
.lw4-cb { width: 14px; height: 14px; border: 1.3px solid #6a6a6a; border-radius: 2px; background: #fff; position: relative; display: block; transition: background-color .15s, border-color .15s; }
.lw4-cb::after { content: ""; position: absolute; left: 3.6px; top: .6px; width: 3.8px; height: 7.5px; border: solid #fff; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg) scale(0); transition: transform .2s cubic-bezier(.34, 1.4, .5, 1); }
.is-sel .lw4-cb, .lw4-cb.is-all { background: #1c6784; border-color: #1c6784; }
.is-sel .lw4-cb::after, .lw4-cb.is-all::after { transform: rotate(45deg) scale(1); }
.lw4-cb.is-some { background: #1c6784; border-color: #1c6784; }
.lw4-cb.is-some::after { left: 2.5px; top: 5.2px; width: 7px; height: 0; border-width: 0 0 1.8px 0; transform: none; }
.lw4-st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: #1f6c60; vertical-align: 1px; }
.lw4-st.is-m::before { background: #7a3ab0; }
.lw4-st.is-go::before { background: #2f64b5; }
.lw4-ph { color: #8a8a8a; }
.lw4-sel { display: inline-flex; gap: 5px; align-items: center; font-size: 11.6px; }
.lw4-sel .jp-chev { flex: none; width: 7px; height: 7px; margin: -3px 0 0 4px; border-width: 0 1.4px 1.4px 0; }
.lw4-foot { position: absolute; left: 0; right: 0; top: 740px; border-top: 1px solid #d0d0d0; }
.lw4-btns { position: absolute; right: 8px; top: 759px; display: flex; gap: 14px; }
.lw4-btns span { height: 27px; padding: 3px 20px 0; border: 1.3px solid #2c5d9a; border-radius: 2px; color: #22508e; font-size: 13px; font-weight: 600; transition: background-color .2s, color .2s; }
.lw4-btns span:first-child { border-color: #ad2748; color: #a3203f; }
.lw4-toast { position: absolute; left: 30px; top: 755px; height: 34px; padding: 7px 14px 0 34px; background: #242a30; color: #fff; font-size: 13px; border-radius: 3px; z-index: 8;
  opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .4s cubic-bezier(.34, 1.4, .5, 1); }
.lw4-toast::before { content: ""; position: absolute; left: 12px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #3aa76d; }
.lw4-toast::after { content: ""; position: absolute; left: 17px; top: 12.5px; width: 3px; height: 6.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.lw4-toast.is-on { opacity: 1; transform: none; }
.lw4-btns span.is-rej { background: #a3203f; color: #fff; border-color: #a3203f; }
.lw4-st.is-x::before { background: #e36c0a; } /* orange, like every other status: a dot, not an alarm */

/* the reject dialog: which rows, and why */
.lw4-dlg { position: absolute; inset: 0; z-index: 6; background: rgba(22, 24, 26, .38); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.lw4-dlg.is-on { opacity: 1; }
.lw4-dlg__box { width: 560px; background: #fff; border-top: 4px solid #a3203f; box-shadow: 0 16px 48px rgba(0, 0, 0, .28); padding: 22px 26px 22px;
  transform: translateY(14px) scale(.98); transition: transform .35s cubic-bezier(.2, .9, .25, 1); }
.lw4-dlg.is-on .lw4-dlg__box { transform: none; }
.lw4-dlg h3 { position: relative; font-size: 20px; font-weight: 600; }
.lw4-x { position: absolute; right: 0; top: 4px; width: 16px; height: 16px; }
.lw4-x::before, .lw4-x::after { content: ""; position: absolute; left: 7px; top: -1px; width: 1.6px; height: 18px; background: #444; transform: rotate(45deg); }
.lw4-x::after { transform: rotate(-45deg); }
.lw4-dlg__p { font-size: 13.5px; color: #333; margin-top: 8px; }
.lw4-dlg__t { margin-top: 16px; font-size: 12.5px; }
.lw4-dlg__t .r { display: grid; grid-template-columns: 150px 100px 140px 1fr; height: 32px; align-items: center; border-bottom: 1px solid #dcdcdc; padding-left: 10px; }
.lw4-dlg__t .r.is-h { border-bottom: 1.5px solid #8f8f8f; font-weight: 500; color: #333; background: #f4f5f6; }
.lw4-dlg__l { display: block; margin-top: 18px; font-size: 13px; font-weight: 600; color: #333; }
.lw4-dlg__l::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #b3203f; margin-right: 6px; vertical-align: 2px; }
.lw4-dlg__ta { position: relative; margin-top: 7px; height: 82px; border: 1px solid #8f8f8f; border-radius: 2px; padding: 8px 10px; font-size: 13.5px; color: #1e1e1e; transition: border-color .2s, box-shadow .2s; }
.lw4-dlg__ta.is-focus { border-color: #1f6ea8; box-shadow: 0 0 0 1px #1f6ea8; }
.lw4-dlg__ta em { position: absolute; right: 10px; bottom: 7px; font-style: normal; font-size: 11.5px; color: #777; transition: opacity .2s; }
.lw4-dlg__ta.is-filled em { opacity: 0; }
.lw4-dlg__f { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.lw4-dlg__f span { height: 32px; padding: 6px 22px 0; border: 1.3px solid #2c5d9a; border-radius: 2px; color: #22508e; font-size: 13.5px; font-weight: 600; }
.lw4-dlg__f span[data-ok] { background: #a3203f; border-color: #a3203f; color: #fff; transition: opacity .25s; }
.lw4-dlg__f span[data-ok].is-off { opacity: .4; }

/* ══ DEPOSITS 01: the delivery board, cut down to what reads at a quarter
   column: the claim, four weeks, seven bars, and the one that is red. ══ */
.dw1 { --board: #fff; --dot: #dcdcda; --ink: #1e1e1e; --ink-2: #5a5a58; --ink-3: #8c8c8a; --edge: rgba(30, 30, 30, .16); --grid: rgba(30, 30, 30, .1);
  --blue: #bfe3ff; --violet: #ddd0ff; --red: #f24822; --orange: #ffdcb3; --green: #c6f0d6; --yellow: #ffe9a8; --shade: rgba(28, 28, 28, .1);
  background: var(--board) radial-gradient(circle, var(--dot) 1.4px, transparent 1.7px) 0 0 / 28px 28px; color: var(--ink); }
.dw1-bar[data-c="blue"] { --c: var(--blue); } .dw1-bar[data-c="violet"] { --c: var(--violet); } .dw1-bar[data-c="red"] { --c: var(--red); }
.dw1-bar[data-c="orange"] { --c: var(--orange); } .dw1-bar[data-c="green"] { --c: var(--green); } .dw1-bar[data-c="yellow"] { --c: var(--yellow); }
/* The board is light everywhere, dark theme included: on its study it is a
   screenshot plate, and as a project thumbnail it stays light like the rest. */
.dw1-eb { position: absolute; left: 48px; top: 46px; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.dw1-h { position: absolute; left: 45px; top: 86px; font-family: "Bricolage Grotesque", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-optical-sizing: auto; font-variation-settings: "opsz" 96; font-weight: 800; font-size: 51px; line-height: 1.1; letter-spacing: -.035em; }
.dw1-mark { position: relative; display: inline-block; }
.dw1-mark svg { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .34em; overflow: visible; }
.dw1-mark path { fill: none; stroke: #f24822; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 0; }
.dw1-mark path + path { opacity: .55; }
.dw1-mark.is-draw path { animation: dw1-ink .7s cubic-bezier(.3, .8, .3, 1) both; }
.dw1-mark.is-draw path + path { animation-delay: .12s; }
@keyframes dw1-ink { from { stroke-dashoffset: 220; } }
.dw1-mark.is-off path { stroke-dashoffset: 220; }
.dw1-ax { position: absolute; left: 48px; width: 704px; top: 262px; height: 36px; border-bottom: 1.5px solid var(--edge); display: grid; grid-template-columns: repeat(4, 1fr); }
.dw1-ax span { padding-left: 12px; border-left: 1.5px solid var(--edge); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.dw1-ax span:first-child { border-left: 0; padding-left: 0; }
.dw1-row { position: absolute; left: 48px; width: 704px; height: 62px; background: linear-gradient(90deg, transparent 175px, var(--grid) 175px 176.5px, transparent 176.5px 351px, var(--grid) 351px 352.5px, transparent 352.5px 527px, var(--grid) 527px 528.5px, transparent 528.5px); }
.dw1-bar { position: absolute; top: 12px; height: 38px; border-radius: 4px; background: var(--c); box-shadow: 0 3px 0 var(--shade); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .9, .25, 1); }
.dw1-bar b { position: absolute; top: 9px; left: calc(100% + 12px); white-space: nowrap; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #f24822; transition: opacity .3s .2s; }
.dw1-bar.is-off { transform: scaleX(0); }
.dw1-bar.is-off b { opacity: 0; transition-delay: 0s; }
.dw1-bar.is-pulse { animation: dw1-pulse .9s ease 2; }
@keyframes dw1-pulse { 45% { box-shadow: 0 0 0 9px rgba(242, 72, 34, .22), 0 3px 0 rgba(28, 28, 28, .1); } }
.dw1-now { position: absolute; top: 262px; width: 0; height: 494px; border-left: 2px solid var(--ink); opacity: 0; transition: opacity .3s; }
.dw1-now::before { content: attr(data-d); position: absolute; left: -38px; top: -30px; width: 76px; text-align: center; background: var(--ink); color: var(--board); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: .1em; padding: 3px 0; border-radius: 4px; }
.dw1-now.is-on { opacity: 1; }

/* ══ DEPOSITS 02: the Blotter ══ */
.dw-tabs { position: absolute; left: 14px; top: 20px; width: 526px; height: 38px; border-bottom: 1.5px solid #cfcfcf; display: flex; font-size: 15.5px; font-weight: 600; color: #444; }
.dw-tabs span { padding: 5px 16px 0; }
.dw-tabs span i { font-weight: 400; margin-left: 5px; }
.dw-tabs span.is-on { color: #145ab8; box-shadow: inset 0 -3px 0 #145ab8; margin-bottom: -1.5px; }
.dw2-tbl { position: absolute; left: 13px; top: 121px; width: 800px; font-size: 13.8px; color: #222; }
.dw2-tbl .r { display: grid; grid-template-columns: 130px 317px 95px 72px 1fr; height: 36px; align-items: center; border-bottom: 1px solid #dcdcdc; white-space: nowrap; }
.dw2-tbl .r > * { padding-left: 13px; }
.dw2-tbl .r.is-h { height: 37px; border-bottom: 1.5px solid #9d9d9d; color: #444; font-size: 14px; }
.dw2-tbl .r.is-h > * + * { border-left: 1px solid #dcdcdc; height: 100%; display: flex; align-items: center; }
.dw2-tbl .r.is-h > :last-child { color: #222; font-weight: 600; }
.dw2-u { border-bottom: 1.3px dashed #888; padding-bottom: 1px; }
.dw2-g b { font-weight: 600; }
.dw2-g .jp-caret { border-top-color: #145ab8; margin-right: 9px; vertical-align: 2px; transition: transform .3s ease; }
.dw2-g.is-shut .jp-caret { transform: rotate(-90deg); }
.dw2-g em { font-style: normal; color: #555; margin-left: 7px; }
.dw2-lnk { color: #145ab8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20, 90, 184, .6); }
.dw2-st::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #145ab8; margin-right: 10px; vertical-align: 0; transition: background-color .3s; }
.dw2-st.is-o::before { background: #e8620b; }
.dw2-kid > :nth-child(2) { padding-left: 67px; }
.dw2-kid > :nth-child(3) { margin-top: -6px; }
.dw2-fold { overflow: hidden; transition: height .45s cubic-bezier(.4, 0, .2, 1); }
.dw2-tbl .r.is-hl { background: #eef4fc; }
.dw2-tbl .r { transition: background-color .3s; }

/* ══ DEPOSITS 03: ticket details ══ */
.dw3 { font-size: 13px; }
.dw3-top { position: absolute; left: 0; right: 0; top: 0; height: 25px; border-bottom: 1px solid #d8d8d8; padding: 1px 0 0 7px; font-size: 15px; font-weight: 600; }
.dw3-top::after { content: "\00d7"; position: absolute; right: 12px; top: -5px; font-size: 26px; font-weight: 300; color: #333; }
.dw3-kpi { position: absolute; left: 0; right: 0; top: 25px; height: 51px; border-bottom: 1px solid #d8d8d8; display: flex; }
.dw3-kpi > div { padding: 8px 15px 0 7px; border-right: 1px solid #d8d8d8; font-size: 13px; color: #444; white-space: nowrap; }
.dw3-kpi b { display: block; font-size: 15px; color: #111; margin-top: 0; }
.dw3-tabs { position: absolute; left: 7px; right: 15px; top: 97px; height: 28px; border-bottom: 1.5px solid #cfcfcf; display: flex; font-size: 13.5px; color: #333; }
.dw3-tabs span { padding: 3px 10px 0; }
.dw3-tabs span.is-on { color: #145ab8; font-weight: 600; box-shadow: inset 0 -2.5px 0 #145ab8; }
.dw3-tabs a { margin-left: auto; color: #145ab8; font-size: 13.5px; padding-top: 3px; }
/* drawn, not typed: Open Sans has no ↗, and iOS fills that gap from its emoji font */
.dw3-tabs a .dw3-out { display: inline-block; width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; }
.dw3-card { position: absolute; left: 7px; right: 15px; top: 145px; height: 523px; border: 1px solid #cfcfcf; border-radius: 3px; }
.dw3-card__h { height: 39px; border-bottom: 1px solid #dcdcdc; display: flex; align-items: center; padding: 0 17px; gap: 12px; font-size: 13px; font-weight: 600; }
.dw3-card__h small { font-size: 11px; font-weight: 600; color: #145ab8; background: #e3edfb; border-radius: 9px; padding: 1px 8px 1px 7px; }
.dw3-card__h small::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #145ab8; margin-right: 5px; vertical-align: 1px; }
.dw3-card__h span { margin-left: auto; font-weight: 400; font-size: 12.5px; }
.dw3-card__h span b { font-weight: 600; }
.dw3-f { position: absolute; top: 57px; width: 132px; }
.dw3-f label { display: block; font-size: 13px; color: #333; }
.dw3-f label.is-req::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #b3203f; margin: 0 6px 0 2px; vertical-align: 2px; }
.dw3-in { position: relative; margin-top: 3px; height: 27px; border: 1px solid #9a9a9a; border-radius: 2px; padding: 4px 9px 0; font-size: 13px; background: #fff; transition: border-color .2s, box-shadow .2s, background-color .4s; }
.dw3-in.is-ro { background: #ececec; border-color: #c9c9c9; font-weight: 600; }
.dw3-in.is-on { border-color: #145ab8; box-shadow: 0 0 0 1px #145ab8; }
.dw3-in.is-flash { background: #fff6cf; }
.dw3-in .jp-chev { position: absolute; right: 11px; top: 6px; width: 7px; height: 7px; border-width: 0 1.5px 1.5px 0; }
.dw3-in svg { position: absolute; right: 9px; top: 7px; }
.dw3-menu { position: absolute; left: -1px; top: 28px; width: 176px; z-index: 5; background: #fff; border: 1px solid #c9c9c9; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); font-size: 13px; opacity: 0; transform: translateY(-5px); transition: opacity .2s, transform .25s; pointer-events: none; }
.dw3-in.is-open .dw3-menu { opacity: 1; transform: none; }
.dw3-menu li { height: 29px; padding: 5px 10px 0; transition: background-color .15s; }
.dw3-menu li.is-sel { font-weight: 600; }
.dw3-menu li.is-hov { background: #eaf1fb; }
.dw3-cmp { position: absolute; top: 135px; width: 352px; height: 108px; border: 1px solid #c8c8c8; border-radius: 3px; background: #f2f2f2; padding: 11px 13px 0; transition: background-color .4s, border-color .4s, box-shadow .4s; }
.dw3-cmp h5 { margin: 0 0 3px; font-size: 11.5px; font-weight: 700; color: #333; }
.dw3-cmp p { display: flex; justify-content: space-between; height: 24px; align-items: center; font-size: 12.3px; color: #333; }
.dw3-cmp p b { font-size: 12.8px; color: #111; }
.dw3-cmp.is-new { background: #e7f1fb; border: 1.5px solid #3b82d6; }
.dw3-cmp.is-new h5 { color: #145ab8; }
.dw3-cmp.is-idle { background: #f7f7f7; border-color: #dcdcdc; }
.dw3-cmp.is-idle h5, .dw3-cmp.is-idle p { opacity: .55; }
.dw3-cmp.is-pop { box-shadow: 0 0 0 4px rgba(59, 130, 214, .18); }
.dw3-arrow { position: absolute; left: 383px; top: 181px; font-size: 16px; color: #444; transition: transform .3s; }
.dw3-arrow.is-go { transform: translateX(4px); color: #145ab8; }
.dw3-cm { position: absolute; left: 17px; right: 17px; top: 259px; transition: top .5s cubic-bezier(.2, .9, .25, 1); }
/* before any edit there is nothing to compare, so the before/after pair
   waits folded away and the comment sits up under the fields */
.dw3-ba { position: absolute; left: 0; right: 0; top: 0; transition: opacity .35s .1s, transform .45s cubic-bezier(.2, .9, .25, 1) .05s; }
.dw3-card.is-noba .dw3-ba { opacity: 0; transform: translateY(-8px); transition-delay: 0s; }
.dw3-card.is-noba .dw3-cm { top: 135px; }
.dw3-card.is-noba .dw3-eh { top: 246px; }
.dw3-sel { background: #b8d3f5; }
.dw3-ta { margin-top: 3px; height: 65px; border: 1px solid #9a9a9a; border-radius: 2px; padding: 8px 9px; font-size: 13px; color: #555; transition: border-color .2s, box-shadow .2s; }
.dw3-ta.is-on { border-color: #145ab8; box-shadow: 0 0 0 1px #145ab8; color: #1e1e1e; }
.dw3-eh { position: absolute; left: 17px; right: 17px; top: 378px; transition: top .5s cubic-bezier(.2, .9, .25, 1); border-top: 1px solid #dcdcdc; padding-top: 14px; font-size: 11.5px; color: #555; }
.dw3-eh b { font-size: 13px; color: #1e1e1e; margin: 0 4px 0 8px; }
.dw3-eh .jp-caret { border-top-color: #145ab8; border-width: 4px; border-top-width: 5px; vertical-align: 2px; margin-left: 4px; }
.dw3-ht { margin-top: 11px; border: 1px solid #cfcfcf; font-size: 12.3px; color: #222; }
.dw3-ht .r { display: grid; grid-template-columns: 103px 75px 201px 93px 106px 67px 1fr; padding-left: 11px; white-space: nowrap; }
.dw3-ht .r.is-h { height: 26px; align-items: center; border-bottom: 1.5px solid #9d9d9d; color: #333; font-weight: 500; }
.dw3-ht .r:not(.is-h) { padding-top: 7px; height: 60px; line-height: 15px; }
.dw3-ht .r:not(.is-h) > span:nth-child(3) { white-space: normal; padding-right: 14px; }
.dw3-pill { display: inline-block; font-size: 11px; font-weight: 600; color: #145ab8; background: #e3edfb; border-radius: 9px; padding: 0 8px; height: 17px; }
.dw3-biz { position: absolute; left: 7px; right: 15px; top: 688px; border: 1px solid #cfcfcf; border-radius: 3px; background: #fff; transition: top .5s cubic-bezier(.2, .9, .25, 1); }
.dw3-biz .dw3-biz__h { height: 34px; border-bottom: 1px solid #dcdcdc; padding: 0 17px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.dw3-biz__h span { font-weight: 400; font-size: 12px; color: #555; }
.dw3-biz dl { margin: 0; padding: 0 17px; }
.dw3-biz dd { margin: 3px 0 0; font-size: 12.8px; line-height: 16px; font-weight: 600; color: #1e1e1e; }
.dw3-biz dt { font-size: 12.3px; line-height: 15px; color: #444; }
.dw3-biz__g { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 20px; padding-top: 11px !important; }
.dw3-biz__j { padding: 11px 24px 11px 17px !important; }
.dw3-biz__j dd { max-width: 700px; }
/* with nothing to compare, the decisions card is shorter by the before/after
   pair, and the business case rides up under it; it moves back as the pair
   opens. The footer keeps its place: the case scrolls under it, as it does */
.dw3-card { transition: height .5s cubic-bezier(.2, .9, .25, 1); }
.dw3-card.is-noba { height: 393px; }
.dw3-card.is-noba ~ .dw3-biz { top: 549px; }
.dw3-foot { position: absolute; left: 0; right: 0; top: 747px; height: 60px; background: #fff; border-top: 1px solid #d0d0d0; }
.dw3-btns { position: absolute; right: 13px; top: 15px; display: flex; gap: 12px; }
.dw3-btns span { height: 28px; padding: 4px 21px 0; border: 1.3px solid #145ab8; border-radius: 2px; color: #145ab8; font-size: 13px; font-weight: 600; }
.dw3-btns span:first-child { border-color: #b3203f; color: #a3203f; }
.dw3-btns span:nth-child(2) { background: #145ab8; color: #fff; }
.dw3-toast { position: absolute; left: 16px; top: 12px; height: 34px; padding: 7px 14px 0 34px; background: #242a30; color: #fff; font-size: 13px; border-radius: 3px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .4s cubic-bezier(.34, 1.4, .5, 1); }
.dw3-toast::before { content: ""; position: absolute; left: 12px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #3aa76d; }
.dw3-toast::after { content: ""; position: absolute; left: 17px; top: 12.5px; width: 3px; height: 6.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.dw3-toast.is-on { opacity: 1; transform: none; }

/* ══ DEPOSITS 04: why reach out now ══ */
.dw4 { color: #262626; }
.dw4-h { position: absolute; left: 24px; right: 13px; top: 15px; display: flex; justify-content: space-between; font-size: 20px; font-weight: 600; }
.dw4-h span { font-size: 15.5px; font-weight: 400; color: #555; padding-top: 3px; }
.dw4-rule { position: absolute; left: 0; right: 0; border-top: 1px solid #dcdcdc; }
.dw4-k { font-size: 14.5px; font-weight: 600; letter-spacing: .06em; color: #555; }
.dw4-pri { position: absolute; right: 13px; top: 86px; font-size: 15.5px; font-weight: 600; color: #b8350b; }
.dw4-pri::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #b8350b; margin-right: 8px; vertical-align: 1px; }
.dw4-pri.is-pulse::before { animation: dw4-pulse 1s ease 3; }
@keyframes dw4-pulse { 50% { box-shadow: 0 0 0 6px rgba(184, 53, 11, .22); } }
.dw4-nba { position: absolute; left: 24px; right: 30px; top: 86px; }
.dw4-nba h3 { font-size: 21.5px; font-weight: 600; margin-top: 16px; }
.dw4-nba p { font-size: 17.6px; line-height: 26px; color: #333; margin-top: 10px; }
.dw4-nba small { display: block; margin-top: 10px; font-size: 15.5px; font-weight: 600; color: #777; }
.dw4-stats { position: absolute; left: 24px; right: 13px; top: 292px; display: grid; grid-template-columns: 259px 259px 1fr; font-size: 15.5px; color: #444; }
.dw4-stats b { display: block; font-size: 24px; font-weight: 600; color: #262626; margin: 3px 0 4px; font-variant-numeric: tabular-nums; }
.dw4-stats .is-med { color: #b45f06; }
.dw4-stats small { font-size: 15.5px; color: #666; }
.dw4-sig { position: absolute; left: 24px; right: 13px; top: 423px; display: flex; justify-content: space-between; }
.dw4-sig span { font-size: 15.5px; color: #555; }
.dw4-alert { position: absolute; left: 23px; right: 13px; top: 459px; height: 87px; background: #fbede8; border: 1.3px solid #efb3a2; border-radius: 7px; padding: 17px 0 0 76px;
  transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .3s; }
.dw4-alert.is-off { opacity: 0; transform: translateY(8px); }
/* the signal is written, not faded in: the card thinks (a shimmer, two
   placeholder lines, a sparkle turning in the icon), the title types, the
   badge lands, the line writes word by word, and one sheen crosses it */
.dw4-alert { overflow: hidden; }
.dw4-alert h4 b { font-weight: 600; }
.dw4-alert > i svg { position: absolute; transition: opacity .3s, transform .45s cubic-bezier(.34, 1.4, .5, 1); }
.dw4-spark { opacity: 0; transform: scale(.4) rotate(-90deg); }
/* it starts as any AI bubble, gray, with the sparkle turning, and only takes
   the signal's red once it has recognised what the signal is */
.dw4-alert { transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .3s, background-color .6s ease, border-color .6s ease; }
.dw4-alert > i { transition: background-color .6s ease, box-shadow .4s ease; }
.dw4-alert.is-grey { background-color: #f4f4f4; border-color: #dcdcdc; }
.dw4-alert.is-grey > i { background: #8f8f8f; }
.dw4-alert.is-grey .dw4-spark { opacity: 1; transform: none; animation: dw4-spin 1.6s linear infinite; }
.dw4-alert.is-grey .dw4-bolt { opacity: 0; transform: scale(.4); }
.dw4-alert.is-hit > i { animation: dw4-hit .6s ease; }
@keyframes dw4-hit { 40% { box-shadow: 0 0 0 9px rgba(193, 57, 26, .2); } }
@keyframes dw4-spin { to { rotate: 360deg; } }
.dw4-alert.is-gen > i { animation: dw4-glow 1.2s ease-in-out infinite; }
@keyframes dw4-glow { 50% { box-shadow: 0 0 0 7px rgba(0, 0, 0, .08); } }
.dw4-alert__sk { position: absolute; left: 76px; top: 22px; right: 120px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.dw4-alert__sk i { display: block; height: 13px; border-radius: 7px; margin-bottom: 12px;
  background: linear-gradient(90deg, #e6e6e6 0 35%, #f6f6f6 50%, #e6e6e6 65%) 0 0 / 300% 100%; animation: fq-sh 1.1s linear infinite; }
.dw4-alert__sk i + i { width: 62%; }
.dw4-alert.is-gen .dw4-alert__sk { opacity: 1; }
.dw4-alert.is-gen { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); background-size: 300% 100%; animation: fq-sh 1.4s linear infinite; }
.dw4-alert h4 span { transition: opacity .2s, transform .4s cubic-bezier(.34, 1.6, .5, 1); }
.dw4-alert.is-nobadge h4 span { opacity: 0; transform: scale(.5); }
.dw4-alert p span { display: inline-block; transition: opacity .35s, filter .35s, transform .35s; }
.dw4-alert.is-nowords p span { opacity: 0; filter: blur(3px); transform: translateY(3px); }
.dw4-alert::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); }
.dw4-alert.is-sheen::after { animation: dw4-sheen .9s ease-out; }
@keyframes dw4-sheen { 0% { opacity: 1; left: -40%; } 100% { opacity: 1; left: 120%; } }
.dw4-alert > i { position: absolute; left: 20px; top: 21px; width: 41px; height: 41px; border-radius: 50%; background: #c1391a; display: grid; place-items: center; }
.dw4-alert h4 { margin: 0; font-size: 19.5px; font-weight: 600; display: flex; align-items: center; gap: 11px; }
.dw4-alert h4 span { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #2e7a39; background: #e0f2e2; border-radius: 4px; padding: 3px 8px 2px; }
.dw4-alert p { font-size: 16.5px; margin-top: 6px; color: #333; }
.dw4-chips { position: absolute; left: 24px; top: 563px; display: flex; gap: 10px; }
.dw4-chips span { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1.3px solid #cdcdcd; border-radius: 16px; font-size: 16px; color: #333; background: #fff; transition: background-color .2s, border-color .2s, color .2s; }
.dw4-chips span em { font-style: normal; color: #777; }
.dw4-chips span.is-on { background: #e6f0fb; border-color: #6b9fd9; color: #1c5aa6; }
.dw4-chips span.is-on em { color: #1c5aa6; font-weight: 600; }
.dw4-list { position: absolute; left: 24px; right: 13px; top: 609px; }
.dw4-list li { position: relative; height: 50px; display: flex; align-items: center; border-bottom: 1px solid #dfdfdf; font-size: 18.6px; font-weight: 500; overflow: hidden;
  transition: height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s, background-color .2s; }
.dw4-list li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--d, #6c4ea5); margin: 0 16px 0 3px; flex: none; }
.dw4-list li span { margin-left: auto; font-size: 16px; font-weight: 400; color: #666; }
.dw4-list li .jp-chev { width: 8px; height: 8px; margin: 0 8px 0 18px; transform: rotate(-45deg); color: #777; border-width: 0 1.6px 1.6px 0; transition: transform .2s; }
.dw4-list li.is-out { height: 0; opacity: 0; border-bottom-width: 0; }
.dw4-list li.is-hov { background: #f5f7fa; }
.dw4-list li.is-hov .jp-chev { transform: translateX(3px) rotate(-45deg); }


/* ══ VERIZON: shared ══════════════════════════════════════════════════════
   Neue Haas Grotesk is Verizon's own face and is not ours to serve; the
   stack falls to Helvetica Neue, which it was drawn from. */
.hlx--vz .hlx__s { font-family: "Neue Haas Grotesk Display Pro", "NHaasGroteskDSPro", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; }
.vz-logo { font-weight: 700; letter-spacing: -.055em; color: #ee0000; line-height: 1; background: linear-gradient(90deg, #f5153a, #ee0000 40%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ic] { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
[data-ic] svg { display: block; width: 100%; height: 100%; }
.vz-ic { position: absolute; }
.vz-dotred { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ee0000; }
.vz-pill { display: inline-block; background: #0b62ad; color: #fff; font-weight: 700; border-radius: 3px; transition: background-color .3s; }
.vz-pill.is-ok { background: #008331; }
.vz-pill.is-pop { animation: vz-pop .45s cubic-bezier(.34, 1.4, .5, 1); }
@keyframes vz-pop { 40% { transform: scale(1.14); } }
.vz-btn { display: inline-grid; place-items: center; border: 1.4px solid #000; border-radius: 999px; font-weight: 700; background: #fff; color: #000; transition: background-color .25s, color .25s, border-color .25s; }
.vz-btn.is-dark { background: #000; color: #fff; }
.vz-btn.is-off { background: #d8dada; border-color: #d8dada; color: #fff; }
.vz-sel { position: absolute; border: 1px solid #6f6f6f; border-radius: 4px; background: #fff; padding-left: 10px; display: flex; align-items: center; }
.vz-sel [data-ic] { position: absolute; right: 10px; }

/* the Android handset in the request-form shots */
.vz-and { position: absolute; border-radius: 46px; background: #151515; box-shadow: inset 0 0 0 2px #2a2a2a; }
.vz-and::before, .vz-and::after { content: ""; position: absolute; right: -4px; width: 5px; border-radius: 0 2px 2px 0; background: #1d1d1d; }
.vz-and::before { top: 132px; height: 60px; }
.vz-and::after { top: 250px; height: 46px; }
.vz-and.is-silver { background: #111; box-shadow: inset 0 0 0 3px #d4d4d8, inset 0 0 0 4px #a9a9ae; }
.vz-and.is-silver::before, .vz-and.is-silver::after { background: #cfcfd3; }
.vz-scr { position: absolute; left: 9px; top: 9px; right: 9px; bottom: 9px; border-radius: 36px; background: #fff; overflow: hidden; }
/* the iPhone outline in the app shots */
.vz-iph { position: absolute; width: 231px; height: 513px; border: 1.3px solid #b3b3b3; border-radius: 24px; background: #fff; overflow: hidden; }
.vz-iph__red { position: absolute; left: 0; right: 0; top: 0; height: 35px; background: #ee0000; color: #fff; }
.vz-iph__red b { position: absolute; left: 26px; top: 9px; font-size: 11px; }
.vz-iph__red .vz-bars { position: absolute; right: 13px; top: 10px; display: flex; gap: 4px; align-items: center; }
.vz-iph__red h4 { position: absolute; left: 40px; top: 12px; margin: 0; font-size: 11px; font-weight: 700; }
.vz-bars i { display: block; }
.vz-sig { width: 15px; height: 9px; background: linear-gradient(90deg, #fff 0 3px, transparent 3px 4px, #fff 4px 7px, transparent 7px 8px, #fff 8px 11px, transparent 11px 12px, #fff 12px); clip-path: polygon(0 70%, 25% 70%, 25% 45%, 50% 45%, 50% 22%, 75% 22%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.vz-bat { width: 21px; height: 10px; border: 1.2px solid #fff; border-radius: 3px; padding: 1.3px; }
.vz-bat::before { content: ""; display: block; height: 100%; background: #fff; border-radius: 1px; }
.vz-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 55px; background: #fff; border-top: 1px solid #e5e5e5; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-size: 8.5px; font-weight: 700; padding-top: 5px; }
.vz-tabs span [data-ic] { display: block; width: 15px; height: 15px; margin: 0 auto 2px; }
.vz-tabs span:last-child { color: #ee0000; }
.vz-tabs::after { content: ""; position: absolute; left: 72px; right: 72px; bottom: 6px; height: 3.5px; border-radius: 2px; background: #111; }
/* the real handset, cut from the design at the size it was placed */
.hlx .hlx__s img.vz-dev { position: absolute; display: block; width: 42px; height: 51px; }

/* ══ SERVICE CENTRAL 01: track a support request ══ */
.scx1-nav { position: absolute; left: 26px; top: 16px; display: flex; align-items: center; gap: 0; }
.scx1-nav .vz-logo { font-size: 31px; margin-right: 22px; }
.scx1-nav span { font-size: 15.5px; font-weight: 700; margin-right: 22px; }
.scx1-rule { position: absolute; left: 0; right: 0; top: 67px; border-top: 1px solid #d8dada; }
.scx1-l { position: absolute; left: 26px; top: 96px; width: 340px; }
.scx1-l .k { font-size: 14px; }
.scx1-l h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; }
.scx1-l .g { font-size: 14.5px; color: #6f6f6f; line-height: 18px; }
.scx1-l h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.scx1-trk { position: relative; margin-top: 30px; padding-left: 31px; }
/* the line runs circle to circle and stops at the last one: Completed is the end */
.scx1-trk::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 30px; width: 1.5px; background: #000; }
.scx1-stp:last-child { height: 40px; min-height: 0; }
.scx1-stp { position: relative; min-height: 60px; }
.scx1-stp > i { position: absolute; left: -31px; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #000; background: #fff; transition: border-color .3s; }
.scx1-stp > i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #008331; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.34, 1.4, .5, 1); }
.scx1-stp.is-done > i { border-color: #008331; }
.scx1-stp.is-done > i::after { transform: rotate(45deg) scale(1); }
.scx1-stp p { font-size: 15px; line-height: 20px; }
.scx1-stp small { display: block; font-size: 13px; color: #6f6f6f; margin-top: 4px; }
.scx1-card { background: #f5f5f5; border-radius: 8px; padding: 14px 14px 12px; margin: -4px 0 0; width: 305px; transform-origin: 0 0; transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .25, 1), max-height .45s; max-height: 130px; overflow: hidden; }
.scx1-stp.is-gone { opacity: 0; max-height: 0; min-height: 0 !important; margin-bottom: 0 !important; overflow: hidden; }
.scx1-stp { transition: opacity .35s, max-height .45s cubic-bezier(.2, .9, .25, 1), margin-bottom .45s; max-height: 160px; }
.scx1-card.is-off { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; }
.scx1-card mark { display: inline-block; background: #ffd400; color: #000; font-size: 12px; font-weight: 700; padding: 1px 4px; }
.scx1-card b { display: block; font-size: 17.5px; line-height: 21px; margin-top: 7px; letter-spacing: -.01em; }
.scx1-card small { display: block; font-size: 13px; color: #6f6f6f; margin-top: 9px; }
.scx1-chat { position: absolute; left: 433px; top: 232px; width: 400px; height: 561px; background: #f5f5f5; border-radius: 12px; }
.scx1-chat h4 { position: absolute; left: 14px; top: 19px; margin: 0; font-size: 17px; font-weight: 700; }
.scx1-msgs { position: absolute; left: 14px; right: 0; top: 104px; }
.scx1-day { position: relative; height: 16px; font-size: 12.5px; color: #6f6f6f; padding-left: 280px; margin-bottom: 12px; }
.scx1-day::before { content: ""; position: absolute; left: 0; width: 263px; top: 7px; border-top: 1px solid #d0d0d0; }
.scx1-m { position: relative; padding-left: 32px; margin-bottom: 22px; font-size: 13px; line-height: 16px; white-space: nowrap; transition: opacity .3s, transform .35s ease; }
.scx1-m em { display: block; font-style: normal; font-size: 12.5px; font-weight: 700; color: #6f6f6f; margin-bottom: 2px; }
.scx1-m em span { font-weight: 400; }
.scx1-m > i { position: absolute; left: 3px; top: 3px; }
.scx1-v { width: 17px; height: 17px; }
.scx1-v::before { content: "V"; display: block; font-size: 17px; font-weight: 800; line-height: 17px; font-style: normal; letter-spacing: -.02em; background: linear-gradient(180deg, #f5153a, #d8000f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: scaleX(1.12); }
.scx1-m > i[data-ic] { width: 22px; height: 22px; left: 0; top: 2px; }
.scx1-m.is-off { opacity: 0; transform: translateY(6px); }
.scx1-typing { position: absolute; left: 32px; top: 0; display: flex; gap: 4px; padding: 9px 11px; background: #e6e6e6; border-radius: 12px; opacity: 0; transition: opacity .2s; }
.scx1-typing.is-on { opacity: 1; }
.scx1-typing i { width: 6px; height: 6px; border-radius: 50%; background: #6f6f6f; animation: scx-dot 1s infinite; }
.scx1-typing i:nth-child(2) { animation-delay: .15s; } .scx1-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes scx-dot { 30% { transform: translateY(-3px); opacity: .5; } }
.scx1-ask { position: absolute; left: 13px; top: 513px; font-size: 14.5px; }
.scx1-ask .vz-btn { position: absolute; left: 281px; top: -13px; height: 31px; padding: 0 14px; font-size: 12.5px; white-space: nowrap; }

/* ══ SERVICE CENTRAL 02: the activity list ══ */
.scx2 { background: #f6f5f3; }
.scx2-card { position: absolute; left: 76px; top: 38px; width: 648px; height: 722px; background: #fff; border-radius: 22px; }
.scx2-hd { position: absolute; left: 32px; top: 51px; font-size: 26px; letter-spacing: -.01em; }
.scx2-hd p + p { font-size: 21px; color: #6f6f6f; line-height: 32px; }
.scx2-hd p:nth-child(2) { margin-top: 10px; }
.scx2-ph { position: absolute; left: 501px; top: 50px; width: 82px; height: 146px; border: 1.3px solid #8a8a8a; border-radius: 6px; background: linear-gradient(to top right, transparent calc(50% - .7px), #8a8a8a calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)), linear-gradient(to top left, transparent calc(50% - .7px), #8a8a8a calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)); }
.scx2-row { position: absolute; left: 32px; width: 584px; height: 146px; z-index: 1; transition: top .62s cubic-bezier(.3, .8, .25, 1); }
/* the row's highlight is drawn wider than the row: the arrow sits flush on
   the row's right edge by design, so a highlight cut to the row would jam
   it against the edge. Out here it has the same air on both sides */
.scx2-row::before { content: ""; position: absolute; top: 0; bottom: 0; left: -20px; right: -20px; border-radius: 8px; background: #f6f6f6; opacity: 0; transition: opacity .3s ease; }
.scx2-row > * { z-index: 1; }
.scx2-row.is-press::before { opacity: 1; background: #f2f2f2; transition-duration: .15s; }
/* a pinned row is picked up flat, the way the product marks a selected row:
   an opaque light gray, so it passes over the rows it overtakes instead of
   through them, then clears as it settles. No shadow, no scale */
.scx2-row.is-lift { z-index: 2; }
.scx2-row.is-lift::before { opacity: 1; }
.scx2-sep { transition: opacity .25s ease; }
.scx2-card.is-moving .scx2-sep { opacity: 0; }
.scx2-row [data-ic="pin"], .scx2-row [data-ic="pinfill"] { position: absolute; left: 21px; top: 39px; width: 30px; height: 30px; }
.scx2-row h3 { position: absolute; left: 95px; top: 23px; font-size: 27px; font-weight: 700; letter-spacing: -.01em; }
.scx2-row p { position: absolute; left: 95px; top: 64px; font-size: 21.5px; }
.scx2-row .vz-pill { position: absolute; right: 63px; top: 39px; height: 38px; padding: 5px 9px 0; font-size: 22px; letter-spacing: .01em; }
.scx2-row [data-ic="arrow"] { position: absolute; right: 0; top: 43px; width: 30px; height: 30px; }
.scx2-sep { position: absolute; left: 32px; width: 584px; border-top: 1.3px solid #d8dada; }

/* ══ SERVICE CENTRAL 03: create a support request ══ */
.scx3 .vz-scr { font-size: 14px; }
.scx3-hd { position: absolute; left: 0; right: 0; top: 0; height: 61px; border-bottom: 1px solid #e5e5e5; }
.scx3-hd .vz-logo { position: absolute; left: 17px; top: 20px; font-size: 22.5px; }
.scx3-hd [data-ic] { position: absolute; top: 23px; width: 19px; height: 19px; }
.scx3-info { position: absolute; left: 17px; right: 17px; top: 82px; height: 94px; background: #dff0fa; padding: 14px 0 0 35px; font-size: 12.3px; font-weight: 700; line-height: 14.5px; }
.scx3-info [data-ic] { position: absolute; left: 14px; top: 13px; width: 15px; height: 15px; }
.scx3-info .vz-btn { margin-top: 11px; height: 27px; padding: 0 13px; font-size: 12.5px; }
.scx3 h2 { position: absolute; left: 17px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.scx3 .g { position: absolute; left: 17px; right: 14px; font-size: 16.8px; line-height: 21px; color: #6f6f6f; letter-spacing: -.01em; }
.scx3 .l { position: absolute; left: 17px; font-size: 12.5px; }
.scx3 .vz-sel { left: 17px; right: 17px; height: 38px; font-size: 14.5px; }
.scx3-list { position: absolute; left: 17px; right: 17px; z-index: 4; background: #fff; border: 1px solid #6f6f6f; border-radius: 4px; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); font-size: 14.5px; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .25s; pointer-events: none; }
.scx3-list.is-on { opacity: 1; transform: none; }
.scx3-list li { height: 38px; padding: 10px 12px 0; border-bottom: 1px solid #eee; transition: background-color .15s; }
.scx3-list li.is-hov { background: #f2f2f2; }
.scx3-btns { position: absolute; left: 17px; top: 525px; display: flex; gap: 11px; }
.scx3-btns .vz-btn { width: 140px; height: 37px; font-size: 14.5px; }
.scx3-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); transition: opacity .3s; }
.scx3-dim.is-off { opacity: 0; }
.scx3-mod { position: absolute; left: 31px; top: 243px; width: 260px; background: #fff; border-radius: 10px; padding: 14px 14px 0; transition: opacity .25s, transform .35s cubic-bezier(.34, 1.3, .5, 1); }
.scx3-mod.is-off { opacity: 0; transform: scale(.92); }
.scx3-mod h4 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 20.5px; letter-spacing: -.01em; }
.scx3-mod ul { margin-top: 8px; padding-left: 20px; list-style: disc; font-size: 14px; line-height: 17.5px; }
.scx3-mod li { padding-left: 2px; }
.scx3-mod p { margin: 12px -14px 0; border-top: 1px solid #ddd; height: 39px; display: grid; place-items: center; font-size: 14.5px; transition: background-color .2s; }
.scx3-mod p.is-press { background: #f2f2f2; }
.scx3-ta { position: absolute; left: 17px; right: 17px; top: 426px; height: 76px; border: 1px solid #6f6f6f; border-radius: 4px; }

/* ══ SERVICE CENTRAL 04: one pattern for every journey ══ */
.scx4 .vz-iph { top: 156px; height: 488px; font-size: 11px; }
.scx4-body { position: absolute; left: 0; right: 0; top: 35px; bottom: 55px; overflow: hidden; }
.scx4-in { position: absolute; left: 0; right: 0; top: 0; transition: transform 1.3s cubic-bezier(.45, .05, .2, 1); }
.scx4 h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
.scx4-gray { position: absolute; left: 0; right: 0; background: #f6f6f6; }
.scx4-card { position: absolute; left: 10px; right: 10px; background: #fff; border-radius: 8px; }
.scx4-row { position: absolute; left: 10px; right: 10px; height: 44px; border-radius: 4px; transition: background-color .2s; }
.scx4-row.is-press { background: #f0f0f0; }
.scx4-row b { position: absolute; left: 0; top: 0; font-size: 11px; }
.scx4-row small { position: absolute; left: 0; top: 16px; font-size: 9px; }
.scx4-row .vz-pill { position: absolute; right: 26px; top: 6px; height: 13px; padding: 1px 4px 0; font-size: 8.8px; }
.scx4-row [data-ic] { position: absolute; right: 4px; top: 5px; width: 13px; height: 13px; }
.scx4-line { position: absolute; left: 10px; right: 10px; border-top: 1px solid #d8dada; }
.scx4-tl { position: absolute; left: 11px; right: 12px; }
.scx4-tl .st { position: relative; padding-left: 23px; margin-bottom: 8px; font-size: 10px; line-height: 12.5px; }
.scx4-tl .st > i { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; border: 1.2px solid #111; background: #fff; transition: border-color .3s; z-index: 1; }
.scx4-tl .st > i::after { content: ""; position: absolute; left: 3.6px; top: 1.4px; width: 2.6px; height: 5.5px; border: solid #008331; border-width: 0 1.3px 1.3px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.34, 1.4, .5, 1); }
.scx4-tl .st.is-done > i { border-color: #008331; }
.scx4-tl .st.is-done > i::after { transform: rotate(45deg) scale(1); }
.scx4-tl .st::before { content: ""; position: absolute; left: 6px; top: 13px; bottom: -8px; width: 1.2px; background: #111; }
.scx4-tl .st:last-child::before { display: none; }
.scx4-tl .st b { display: block; font-size: 11px; font-weight: 400; margin-bottom: 5px; }
.scx4-tl .st p { margin-bottom: 9px; }

/* ══ SUPPORT FAQ: shared ══ */
.fq-cream { position: absolute; background: #f7f1e6; border-radius: 14px; }
.fq-white { position: absolute; background: #fff; border-radius: 10px; }
.fq-gen { display: flex; align-items: center; gap: 6px; }
.fq-gen [data-ic] { width: 14px; height: 14px; }
.fq-th { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: #ececec; display: grid; place-items: center; transition: background-color .25s, color .25s; }
.fq-th [data-ic] { width: 15px; height: 15px; }
.fq-th.is-on { background: #000; color: #fff; }
.fq-sk { display: block; height: 11px; border-radius: 6px; margin: 0 0 10px; background: linear-gradient(90deg, #eee 0 40%, #f7f7f7 50%, #eee 60%) 0 0 / 300% 100%; animation: fq-sh 1.1s linear infinite; }
@keyframes fq-sh { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fq-rev > * { transition: opacity .35s, transform .35s; }
.fq-rev.is-off > * { opacity: 0; transform: translateY(4px); }
.fq-hdr { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid #e3e3e3; }
.fq-hdr .vz-logo { position: absolute; }
.fq-hdr [data-ic] { position: absolute; }

/* ══ SUPPORT FAQ 01: search on the page ══ */
.fq1-nav { position: absolute; left: 23px; top: 50px; display: flex; align-items: center; }
.fq1-nav .vz-logo { font-size: 33px; margin-right: 21px; }
.fq1-nav span { font-size: 15.5px; font-weight: 700; margin-right: 23px; }
.fq1-bc { position: absolute; left: 23px; top: 125px; font-size: 12.8px; }
.fq1-h { position: absolute; left: 21px; top: 194px; font-size: 44.5px; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; }
.fq1-box { position: absolute; left: 23px; top: 346px; right: -40px; height: 296px; padding: 56px 30px 0; font-size: 15px; line-height: 19px; }
.fq1-box h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.fq1-box .a { text-decoration: underline; text-underline-offset: 2px; }
.fq1-skel { position: absolute; left: 30px; right: 70px; top: 58px; opacity: 0; transition: opacity .3s; }
.fq1-skel span { display: flex; gap: 12px; margin: 20px 0 14px; }
.fq1-skel span .fq-sk { height: 29px; border-radius: 15px; margin: 0; }
.fq1-skel span .fq-sk:first-child { width: 316px; }
.fq1-skel span .fq-sk:last-child { flex: 1; }
.fq1-chips { display: flex; gap: 12px; margin-top: 22px; }
.fq1-chips span { height: 29px; padding: 0 14px; border: 1.3px solid #000; border-radius: 15px; display: grid; place-items: center; font-size: 12.8px; font-weight: 700; white-space: nowrap; background: #fff; }
.fq1-srch { position: absolute; left: 23px; top: 272px; width: 744px; height: 50px; background: #fff; border-radius: 16px; box-shadow: 0 4px 22px rgba(0, 0, 0, .12); transition: height .35s cubic-bezier(.2, .9, .25, 1), box-shadow .3s; overflow: hidden; }
.fq1-srch.is-open { height: 189px; }
.fq1-srch.is-rest { box-shadow: none; border: 1px solid #6f6f6f; border-radius: 25px; }
.fq1-q { position: absolute; left: 22px; right: 22px; top: 10px; height: 34px; border-bottom: 1.3px solid #000; padding: 4px 0 0 21px; font-size: 17px; }
.fq1-srch.is-rest .fq1-q { border-bottom-color: transparent; }
.fq1-q [data-ic="search"] { position: absolute; left: 0; top: 5px; width: 17px; height: 17px; }
.fq1-q [data-ic="xc"] { position: absolute; right: 2px; top: 4px; width: 21px; height: 21px; transition: opacity .2s; }
.fq1-ph { color: #6f6f6f; }
.fq1-sug { position: absolute; left: 22px; top: 71px; font-size: 15px; }
.fq1-sug h5 { margin: 0 0 14px; font-size: 17.5px; font-weight: 700; }
.fq1-sug p { height: 30px; padding-top: 1px; transition: text-decoration-color .2s; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.fq1-sug p.is-hov { color: #ee0000; font-weight: 700; } /* per the search spec: the hovered suggestion goes red */
.fq1-help { position: absolute; left: 23px; top: 712px; font-size: 15px; color: #6f6f6f; }
.fq1-help .fq-th { width: 40px; height: 40px; top: -12px; }
.fq1-help .fq-th [data-ic] { width: 18px; height: 18px; color: #000; }

/* ══ SUPPORT FAQ 02–04: the phone pages ══ */
.fq-ph { position: absolute; background: #fff; border: 1.3px solid #cfcfcf; border-radius: 22px; overflow: hidden; }
.fq-ph.is-sharp { border-radius: 12px; }
.fq-bc { position: absolute; }
.fq-h { position: absolute; font-weight: 700; letter-spacing: -.03em; }
.fq-bm { position: absolute; }
.fq-s { position: absolute; border: 1.3px solid #bdbdbd; border-radius: 999px; display: flex; align-items: center; color: #6f6f6f; white-space: nowrap; overflow: hidden; }
.fq-s [data-ic] { flex: none; }
.fq-b { position: absolute; }
.fq-b .vz-btn { height: 100%; }
.fq-ul { list-style: disc !important; }
.fq-ul li { margin-left: 21px; }
/* centred on the screen and pinned to its foot, like the real floating bar */
.fq-pill { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; z-index: 3; background: #fff; border-radius: 16px; box-shadow: 0 3px 14px rgba(0, 0, 0, .14); display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .3s; }
.fq-pill.is-off { opacity: 0; transform: translateY(24px); }
.fq-pill b { text-decoration: underline; }
.fq-bar { position: absolute; height: 8px; border-radius: 4px; background: #ececec; overflow: hidden; }
.fq-bar i { display: block; height: 100%; width: 100%; background: #ff7700; border-radius: 4px; transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.3, .8, .3, 1); }
.fq-bar.is-zero i { transform: scaleX(0); transition: none; }
.fq-warn { display: inline-flex; align-items: center; gap: 3px; color: #e35d00; font-weight: 700; transition: opacity .3s, transform .3s; }
.fq-warn.is-off { opacity: 0; transform: scale(.8); }
.fq-warn.is-shake { animation: fq-shake .5s ease; }
@keyframes fq-shake { 25% { transform: translateX(-2px) rotate(-3deg); } 75% { transform: translateX(2px) rotate(3deg); } }
.fq-acc { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(.2, .9, .25, 1), opacity .3s; }
.fq-acc.is-on { max-height: 120px; opacity: 1; }

/* the journey tabs stay put under the header once the tracker scrolls up to them */
.scx4-tabs { position: absolute; left: 0; right: 0; z-index: 3; padding: 7px 0 0 10px; box-sizing: border-box; font-size: 11px; font-weight: 700; margin-top: 35px;
  background: linear-gradient(#d8dada, #d8dada) 10px 100% / calc(100% - 21px) 1px no-repeat, #fff; transition: box-shadow .3s; }
.scx4-tabs.is-stuck { box-shadow: 0 7px 8px -7px rgba(0, 0, 0, .14); }

/* ══ THE STAGE: one screen at a time, four chapters ═══════════════════════
   "Get the highlights" on a case study (hl.js, stage()). Four small tiles
   all moving at once were hard to read and hard to look at. Here one screen
   plays, at more than twice a tile's size, and nothing else on the page
   moves.

   THE CHAPTERS are the captions and the control. All four titles are
   readable at rest, so a skim still gets all four. Each has a faint rule
   beside it; the playing chapter's rule is inked from the top for exactly
   as long as its scene runs. When it ends the ink leaves through the bottom
   and the next chapter's begins: one line, moving down the list.

   BETWEEN CHAPTERS the screen does not fade. The next one travels in from
   the right as the last one leaves to the left. */
.hlst { display: grid; gap: 28px; }

/* The panel is as wide as its column and square from that. Safari, left to
   stretch a square to its row, takes the row's height (the chapter list's)
   and makes the panel that small, so the width is stated and the height
   follows it. */
.hlst__panel {
  position: relative; order: -1; width: 100%; align-self: start; aspect-ratio: 1; overflow: hidden;
  background: var(--tile); border: 1px solid var(--line); border-radius: 16px;
}
.hlst__slide {
  position: absolute; inset: 0; visibility: hidden;
  transition: transform .95s cubic-bezier(.32, .72, 0, 1);
}
.hlst__slide.is-on { visibility: visible; }
/* the screenshot under each screen, for a reader without script */
.hlst__slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hlst__side { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; }
.hlst__chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hlst__ch {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline;
  width: 100%; margin: 0; padding: 11px 0 12px 24px; border: 0; background: none;
  font: inherit; text-align: left; color: var(--ink-3); cursor: pointer;
  transition: color .45s var(--ease);
}
.hlst__ch:hover { color: var(--ink-2); }
.hlst__ch[aria-selected="true"] { color: var(--ink); }
.hlst__ch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
/* the rule beside a chapter, and the ink drawn down it */
.hlst__ch::before, .hlst__bar {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1.5px; border-radius: 1px;
}
.hlst__ch::before { background: rgba(0, 0, 0, .12); }
.hlst__bar { background: var(--ink); transform: scaleY(0); transform-origin: 50% 0; }
.hlst__n { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.hlst__t {
  font-family: var(--voice); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(21px, 1.15vw + 12px, 28px); line-height: 1.16; text-wrap: balance;
}

/* The one control. Anything that moves for more than a few seconds can be
   stopped by the person looking at it. */
.hlst__pp {
  align-self: flex-start; margin-left: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .14); background: none; color: var(--ink-2); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.hlst__pp:hover { color: var(--ink); border-color: rgba(0, 0, 0, .4); }
.hlst__pp:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hlst__pp svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hlst__pp .is-play, .hlst.is-paused .hlst__pp .is-pause { display: none; }
.hlst.is-paused .hlst__pp .is-play { display: block; }

@media (min-width: 900px) {
  /* Chapters left, screen right. Where the window allows it the panel is
     held to what is left of the first screen under the title (a two-line
     subtitle included), so the whole stage is in view as the page opens. It
     never goes below 440px, the size at which the screens stay readable. */
  .hlst {
    grid-template-columns: minmax(0, 1fr) min(54%, 600px, max(440px, calc(100svh - 416px)));
    gap: clamp(36px, 5vw, 76px); align-items: stretch;
  }
  .hlst__panel { order: 0; }
  /* The list sits at the panel's middle; the control is pinned to the
     panel's foot, on the same left edge as the chapters' rules. */
  .hlst__pp { position: absolute; left: 0; bottom: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hlst__slide { transition: none; }
  .hlst__pp { display: none; }
}