/* ---------------------------- */
/* Early pay animation (payout policy) */
/* ---------------------------- */
.ep-anim {
  --ep-navy: #174a78; --ep-navy-dark: #0e2c48; --ep-lime: #ddfe55; --ep-lime-dark: #364009;
  --ep-green: #079455; --ep-green-bg: #ecfdf3; --ep-gray-50: #fafafa; --ep-gray-200: #e9eaeb;
  --ep-gray-300: #d5d7da; --ep-gray-500: #717680; --ep-gray-700: #414651; --ep-gray-900: #181d27; --ep-stage: #eef3f8;
  position: relative; width: min(440px, 100%); max-width: 100%; aspect-ratio: 1 / 1; border-radius: 24px;
  background: var(--ep-stage); box-shadow: 0 10px 40px rgba(0,0,0,.18); overflow: hidden;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ep-gray-900);
  text-align: left; line-height: 1.25; container-type: inline-size; transition: opacity .5s ease;
}
.ep-anim.is-resetting { opacity: 0; }
.ep-anim.is-instant * { transition: none !important; }
.ep-anim-inner { position: absolute; inset: 0; padding: 6cqw; font-size: 3.2cqw; }

.ep-anim-status { display: flex; align-items: center; justify-content: center; gap: .6em; height: 2.2em; font-size: 1.45em; font-weight: 600; letter-spacing: -.01em; color: var(--ep-navy-dark); white-space: nowrap; }
.ep-anim-status-text { transition: opacity .3s ease, transform .3s ease; }
.ep-anim-status-text.is-swapping { opacity: 0; transform: translateY(-.3em); }
.ep-anim-spinner { width: 1.1em; height: 1.1em; color: var(--ep-navy); animation: ep-spin 1.4s linear infinite; flex: none; }
.ep-anim-check { display: none; width: 1.1em; height: 1.1em; color: var(--ep-green); flex: none; }
.ep-anim.is-done .ep-anim-spinner { display: none; }
.ep-anim.is-done .ep-anim-check { display: block; animation: ep-pop .35s ease-out; }

.ep-anim-admin { position: absolute; inset: 0; transition: opacity .45s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.ep-anim.s-phone .ep-anim-admin { opacity: 0; transform: translateY(-8cqw) scale(.96); }
.pp-layer { position: absolute; left: 6cqw; right: 6cqw; top: 17cqw; bottom: 6cqw; opacity: 0; transform: translateY(1em) scale(.98); transition: opacity .4s ease, transform .45s ease; pointer-events: none; }

.pp-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(10,13,18,.1), 0 1px 2px rgba(10,13,18,.06); }

/* Act 1: the policy editor */
.ep-anim.s-editor .pp-editor { opacity: 1; transform: none; }
.ep-anim.s-list .pp-editor { opacity: 0; transform: scale(.94); }
.pp-editor .pp-card { padding: 1em 1.15em; font-size: .9em; display: grid; gap: .85em; }
.pp-label { font-size: .82em; font-weight: 600; color: var(--ep-gray-700); margin-bottom: .45em; }
.pp-input { display: inline-flex; align-items: center; height: 2.2em; padding: 0 .75em; border: 1px solid var(--ep-gray-300); border-radius: 8px; background: #fff; font-weight: 500; }
.pp-name { width: 100%; }
.pp-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; background: var(--ep-navy); opacity: 0; }
.ep-anim.is-typing .pp-caret { opacity: 1; animation: pp-blink .8s steps(1) infinite; }
.pp-opt { display: flex; align-items: center; gap: .6em; min-height: 1.75em; color: var(--ep-gray-700); }
.pp-dot { position: relative; width: 1.05em; height: 1.05em; border-radius: 50%; border: 1.5px solid var(--ep-gray-300); background: #fff; flex: none; transition: border-color .2s; }
.pp-dot::after { content: ""; position: absolute; inset: .2em; border-radius: 50%; background: var(--ep-navy); transform: scale(0); transition: transform .2s ease; }
.pp-opt.is-on .pp-dot { border-color: var(--ep-navy); }
.pp-opt.is-on .pp-dot::after { transform: scale(1); }
.pp-opt.is-on { color: var(--ep-gray-900); font-weight: 600; }
.pp-box { display: grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 4px; border: 1.5px solid var(--ep-gray-300); background: #fff; flex: none; transition: background .2s, border-color .2s; }
.pp-box svg { width: .8em; height: .8em; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.ep-anim.s-early .pp-box { background: var(--ep-navy); border-color: var(--ep-navy); }
.ep-anim.s-early .pp-box svg { opacity: 1; transform: none; }
.ep-anim.s-net .pp-opt-net,
.ep-anim.s-early .pp-opt-early { color: var(--ep-gray-900); font-weight: 600; }
.pp-mini { display: inline-flex; align-items: center; height: 1.75em; padding: 0 .55em; margin: 0 .35em; border: 1px solid var(--ep-gray-300); border-radius: 6px; font-weight: 600; color: var(--ep-gray-900); }
.pp-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s ease, opacity .35s ease; }
.pp-reveal > div { min-height: 0; overflow: hidden; }
.ep-anim.s-net .pp-reveal-net,
.ep-anim.s-early .pp-reveal-early { grid-template-rows: 1fr; opacity: 1; }
.pp-sub { padding: .3em 0 0 1.65em; color: var(--ep-gray-700); display: grid; gap: .1em; }
.pp-sub .pp-opt { min-height: 1.6em; }
.pp-foot { display: flex; justify-content: flex-end; }
.pp-btn-lime { display: inline-flex; align-items: center; gap: .45em; padding: .6em 1.3em; border-radius: 10px; background: var(--ep-lime); color: var(--ep-lime-dark); font-weight: 700; box-shadow: 0 2px 6px rgba(54,64,9,.18); transition: transform .15s, box-shadow .15s; }
.pp-btn-lime.is-pressing { transform: scale(.94); box-shadow: 0 0 0 .35em rgba(221,254,85,.45); }

/* Act 1 end: the policy list */
.ep-anim.s-list .pp-list { opacity: 1; transform: none; transition-delay: .2s; }
.ep-anim.s-roster .pp-list { opacity: 0; transform: scale(.94); transition-delay: 0s; }
.pp-list .pp-card { overflow: hidden; }
.pp-list-head { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.15em; border-bottom: 1px solid var(--ep-gray-200); }
.pp-list-head b { font-size: 1.1em; }
.pp-newbtn { font-size: .85em; font-weight: 600; padding: .45em .8em; border: 1px solid var(--ep-gray-300); border-radius: 8px; color: var(--ep-gray-700); }
.pp-policy { display: flex; justify-content: space-between; align-items: center; gap: .8em; padding: .95em 1.15em; border-bottom: 1px solid var(--ep-gray-200); }
.pp-policy:last-child { border-bottom: 0; }
.pp-policy-name { font-weight: 600; display: flex; align-items: center; gap: .5em; }
.pp-policy-desc { color: var(--ep-gray-500); font-size: .88em; margin-top: .2em; }
.pp-chev { color: var(--ep-gray-500); flex: none; }
.pp-badge { display: inline-flex; align-items: center; height: 1.6em; padding: 0 .6em; border-radius: 99px; font-size: .75em; font-weight: 600; }
.pp-badge-default { background: #e3f0fb; color: var(--ep-navy); }
.pp-badge-org { background: #eef4ff; color: #3538cd; }
.pp-badge-active { background: var(--ep-green-bg); color: var(--ep-green); }
.pp-policy-new { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s ease, opacity .45s ease; transition-delay: .7s; }
.pp-policy-new > div { min-height: 0; overflow: hidden; }
.pp-policy-new .pp-policy { background: #fbffe9; transition: background 1.2s ease 2.2s; border-bottom: 0; }
.ep-anim.s-list .pp-policy-new { grid-template-rows: 1fr; opacity: 1; }
.ep-anim.s-list .pp-policy-new .pp-policy { background: #fff; }

/* Act 2: the company's roster page */
.ep-anim.s-roster .pp-roster { opacity: 1; transform: none; transition-delay: .25s; }
.pp-crumb { font-size: .85em; color: var(--ep-gray-500); font-weight: 500; }
.pp-roster-title { display: flex; align-items: center; gap: .6em; font-size: 1.35em; font-weight: 700; letter-spacing: -.01em; margin: .25em 0 .7em; }
.pp-org-avatar { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 8px; background: #c3ddf4; color: var(--ep-navy-dark); font-size: .62em; font-weight: 800; }
.pp-panel { background: var(--ep-gray-50); border: 1px solid var(--ep-gray-200); border-radius: 10px; padding: .85em 1em; display: grid; gap: .7em; font-size: .92em; }
.pp-kv { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.pp-kv > span:first-child { font-weight: 600; color: var(--ep-gray-700); }
.pp-kv > span:last-child { color: var(--ep-gray-500); text-align: right; }
.pp-terms { border-top: 1px solid var(--ep-gray-200); padding-top: .75em; display: grid; gap: .55em; }
.pp-terms-label { font-weight: 600; color: var(--ep-gray-700); }
.pp-terms-text { color: var(--ep-gray-500); min-height: 2.5em; transition: color .3s; }
.ep-anim.s-assigned .pp-terms-text { color: var(--ep-gray-900); }
.pp-assign-row { position: relative; display: flex; gap: .5em; }
.pp-select { flex: 1; justify-content: space-between; background: #fff; transition: box-shadow .2s; }
.pp-select.is-open { box-shadow: 0 0 0 3px #c3ddf4; border-color: var(--ep-navy); }
.pp-select svg { width: 1em; height: 1em; color: var(--ep-gray-500); }
.pp-btn-sec { display: inline-flex; align-items: center; height: 2.2em; padding: 0 1em; border: 1px solid var(--ep-gray-300); border-radius: 8px; background: #fff; font-weight: 600; color: var(--ep-gray-300); transition: color .2s, transform .15s, box-shadow .15s; }
.ep-anim.s-picked .pp-btn-sec { color: var(--ep-gray-700); }
.pp-btn-sec.is-pressing { transform: scale(.94); box-shadow: 0 0 0 3px #c3ddf4; }
.pp-menu { position: absolute; left: 0; top: calc(100% + .35em); width: 70%; padding: .3em; background: #fff; border: 1px solid var(--ep-gray-200); border-radius: 10px; box-shadow: 0 12px 24px rgba(10,13,18,.12); opacity: 0; transform: translateY(-.4em); transition: opacity .2s, transform .2s; z-index: 2; }
.ep-anim.s-menu .pp-menu { opacity: 1; transform: none; }
.pp-menu div { padding: .55em .7em; border-radius: 6px; }
.pp-menu .is-current { color: var(--ep-gray-500); }
.pp-menu .pp-menu-pick { font-weight: 600; transition: background .2s; }
.pp-menu .pp-menu-pick.is-hover { background: #eef3f8; }
.pp-toast { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; display: flex; align-items: center; gap: .7em; padding: .85em 1em; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(10,13,18,.18); font-size: .92em; font-weight: 500; opacity: 0; transform: translateY(1.2em); transition: opacity .3s, transform .45s cubic-bezier(.2,.9,.3,1.15); }
.pp-toast svg { width: 1.4em; height: 1.4em; color: var(--ep-green); flex: none; }
.ep-anim.s-toast .pp-toast { opacity: 1; transform: none; }

/* Fake cursor (admin) */
.ep-anim-cursor { position: absolute; z-index: 5; width: 5.5cqw; height: 5.5cqw; left: 50%; top: 110%; opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); transition: left .75s cubic-bezier(.4,0,.2,1), top .75s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.ep-anim.is-cursor .ep-anim-cursor { opacity: 1; }

/* Act 3: the payee's phone. 1em = 1 design px of a 390pt-wide screen. */
.ep-phone {
  --t-navy: #10425d; --t-lime: #ddfe55; --t-gray-50: #f9fafb; --t-gray-100: #f3f4f6; --t-gray-200: #e5e7eb;
  --t-gray-500: #6b7280; --t-gray-600: #4b5563; --t-gray-700: #374151; --t-gray-800: #1f2937;
  --t-green-100: #d1fae5; --t-green-600: #059669; --t-emerald-500: #10b981;
  position: absolute; left: 50%; top: 17cqw; width: 66cqw; font-size: calc(66cqw / 414); padding: 12em; border-radius: 64em;
  background: #15171a; box-shadow: 0 0 0 2em #3a3d42, 0 30em 60em rgba(14,44,72,.28);
  opacity: 0; transform: translate(-50%, 60%); transition: opacity .4s ease, transform .75s cubic-bezier(.2,.9,.3,1);
}
.ep-anim.s-phone .ep-phone { opacity: 1; transform: translate(-50%, 0); transition-delay: .15s; }
.ep-phone-screen { position: relative; height: 844em; border-radius: 52em; overflow: hidden; background: #fff; font-family: -apple-system, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; }
.ep-phone-island { position: absolute; z-index: 6; left: 50%; top: 11em; width: 124em; height: 36em; margin-left: -62em; border-radius: 20em; background: #000; }
.ep-phone-header { height: 120em; background: var(--t-navy); color: #fff; }
.ep-phone-statusbar { display: flex; justify-content: space-between; align-items: center; height: 54em; padding: 0 34em 0 44em; }
.ep-phone-statusbar > span:first-child { font-size: 17em; font-weight: 600; }
.ep-phone-signal { display: inline-flex; align-items: flex-end; gap: 2em; height: 12em; }
.ep-phone-signal i { width: 3.4em; background: currentColor; border-radius: 1em; }
.ep-phone-signal i:nth-child(1) { height: 35%; } .ep-phone-signal i:nth-child(2) { height: 55%; }
.ep-phone-signal i:nth-child(3) { height: 78%; } .ep-phone-signal i:nth-child(4) { height: 100%; }
.ep-phone-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 66em; padding: 0 16em 0 19em; }
.ep-phone-logo { width: 28em; height: 28em; object-fit: contain; }
.ep-phone-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 17em; font-weight: 600; }
.ep-phone-actions { display: inline-flex; gap: 16em; }
.ep-phone-actions svg { width: 24em; height: 24em; }
.ep-phone-tabs { display: flex; justify-content: space-evenly; padding: 12em 0; background: #fff; border-bottom: 1em solid var(--t-gray-200); }
.ep-phone-tabs span { font-size: 14em; font-weight: 600; color: var(--t-gray-500); padding: .57em .86em; border-radius: 1.43em; }
.ep-phone-tabs span.is-active { background: var(--t-navy); color: #fff; }
.ep-phone-summary { padding: 16em 16em 14em; background: var(--t-gray-100); text-align: center; }
.ep-phone-summary-label { position: relative; height: 1.4em; font-size: 12em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t-gray-500); margin-bottom: .2em; }
.ep-phone-summary-label span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .3em; transition: opacity .3s, transform .3s; }
.ep-phone-summary-label .is-early { opacity: 0; transform: translateY(.5em); color: var(--t-navy); }
.ep-phone-summary-label svg { width: 1.2em; height: 1.2em; }
.ep-anim.s-elected .ep-phone-summary-label .is-sched { opacity: 0; transform: translateY(-.5em); }
.ep-anim.s-elected .ep-phone-summary-label .is-early { opacity: 1; transform: none; }
.ep-phone-summary-amount { font-size: 44em; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--t-navy); font-variant-numeric: tabular-nums; }

.ph-entry { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s ease, opacity .35s ease; }
.ph-entry > div { min-height: 0; overflow: hidden; }
.ep-anim.s-elected .ph-entry { grid-template-rows: 0fr; opacity: 0; }
.ph-entry-card { display: grid; gap: 14em; margin: 12em 16em; padding: 16em; border-radius: 16em; background: var(--t-lime); }
.ph-entry-head { display: flex; align-items: center; gap: 12em; }
.ph-flash-circle { display: grid; place-items: center; width: 44em; height: 44em; border-radius: 22em; background: var(--t-navy); color: var(--t-lime); flex: none; }
.ph-flash-circle svg { width: 22em; height: 22em; }
.ph-entry-title { font-size: 20em; font-weight: 800; color: var(--t-navy); }
.ph-entry-body { font-size: 14em; line-height: 1.36; color: var(--t-navy); margin-top: .15em; }
.ph-entry-btn { display: flex; align-items: center; justify-content: center; gap: 8em; padding: 14em 0; border-radius: 12em; background: var(--t-navy); transition: transform .15s; }
.ph-entry-btn.is-pressing, .ph-confirm.is-pressing { transform: scale(.96); }
.ph-entry-btn svg { width: 18em; height: 18em; color: var(--t-lime); }
.ph-entry-btn span { font-size: 16em; font-weight: 700; color: #fff; }

.ph-row-body { display: flex; justify-content: space-between; align-items: flex-start; padding: 16em; border-bottom: 1em solid var(--t-gray-200); background: #fff; }
.ph-row-title { font-size: 14em; font-weight: 600; color: var(--t-gray-800); margin-bottom: .29em; }
.ph-row-customer { font-size: 13em; color: var(--t-gray-600); margin-bottom: .31em; }
.ph-chip-slot { position: relative; height: 18em; margin-bottom: 5em; }
.ph-chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .3em; padding: .3em .8em; border-radius: 1em; font-size: 10em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; transition: opacity .3s, transform .3s; }
.ph-chip svg { width: 1.1em; height: 1.1em; }
.ph-chip-sched { border: .1em solid #93c5fd; background: #eff6ff; color: #1d4ed8; }
.ph-chip-early { border: .1em solid #a3b80c; background: #f7ffd1; color: var(--t-navy); opacity: 0; transform: scale(.85); }
.ep-anim.s-elected .ph-chip-sched { opacity: 0; transform: scale(.85); }
.ep-anim.s-elected .ph-chip-early { opacity: 1; transform: none; }
.ph-row-method { font-size: 13em; color: var(--t-gray-500); }
.ph-row-right { text-align: right; }
.ph-row-amount { font-size: 18em; font-weight: 700; color: var(--t-navy); margin-bottom: .22em; }
.ph-row-date { font-size: 12em; color: var(--t-gray-500); }
.ph-row-right .is-early { display: none; }
.ep-anim.s-elected .ph-row-right .is-sched { display: none; }
.ep-anim.s-elected .ph-row-right .is-early { display: inline-block; animation: ep-pop .4s ease-out; }
.ph-row-fee { display: none; font-size: 11em; color: var(--t-gray-500); margin-bottom: .3em; white-space: nowrap; }
.ep-anim.s-elected .ph-row-fee { display: block; animation: ep-pop .4s ease-out; }

/* Early pay screen slides over the Pay tab */
.ph-early { position: absolute; inset: 0; z-index: 3; background: var(--t-gray-50); transform: translateX(100%); transition: transform .5s cubic-bezier(.3,.8,.3,1); }
.ep-anim.s-early-screen .ph-early { transform: none; }
.ph-early-header { height: 110em; background: #fff; color: var(--t-gray-800); border-bottom: 1em solid var(--t-gray-200); }
.ph-early-nav { position: relative; display: flex; align-items: center; height: 56em; padding: 0 12em; }
.ph-early-nav svg { width: 24em; height: 24em; color: var(--t-gray-700); }
.ph-intro { font-size: 14em; line-height: 1.43; color: var(--t-gray-600); padding: 1.15em 1.15em .85em; }
.ph-offer { display: flex; gap: 12em; margin: 0 16em; padding: 16em; border-radius: 12em; background: #fff; border: 2em solid var(--t-navy); }
.ph-offer-box { display: grid; place-items: center; width: 22em; height: 22em; border-radius: 6em; background: var(--t-navy); color: #fff; flex: none; margin-top: 1em; }
.ph-offer-box svg { width: 14em; height: 14em; }
.ph-offer-main { flex: 1; min-width: 0; }
.ph-offer-top { display: flex; justify-content: space-between; gap: 8em; }
.ph-offer-top b { font-size: 15em; font-weight: 600; color: var(--t-gray-800); }
.ph-offer-top span { font-size: 15em; font-weight: 600; color: var(--t-gray-800); font-variant-numeric: tabular-nums; }
.ph-offer-line { font-size: 13em; color: var(--t-gray-500); margin-top: .35em; }
.ph-offer-fee { font-size: 13em; color: var(--t-gray-600); margin-top: .35em; }
.ph-offer-net { font-size: 14em; font-weight: 700; color: var(--t-navy); margin-top: .35em; }
.ph-totals { margin: 14em 16em 0; padding: 14em 16em; border-radius: 12em; background: #fff; display: grid; gap: 8em; }
.ph-totals div { display: flex; justify-content: space-between; font-size: 14em; color: var(--t-gray-600); font-variant-numeric: tabular-nums; }
.ph-totals div:last-child { font-weight: 700; color: var(--t-navy); font-size: 16em; }
.ph-confirm { display: flex; justify-content: center; margin: 16em; padding: 16em 0; border-radius: 12em; background: var(--t-navy); transition: transform .15s; }
.ph-confirm span { font-size: 16em; font-weight: 700; color: #fff; }

.ph-toast { position: absolute; z-index: 4; left: 16em; right: 16em; top: 64em; display: flex; align-items: center; gap: 10em; padding: 14em 16em; border-radius: 14em; background: #fff; border-left: 5em solid var(--t-green-600); box-shadow: 0 10em 30em rgba(5,15,24,.2); opacity: 0; transform: translateY(-30em); transition: opacity .3s, transform .45s cubic-bezier(.2,.9,.3,1.15); }
.ph-toast svg { width: 22em; height: 22em; color: var(--t-green-600); flex: none; }
.ph-toast span { font-size: 14em; font-weight: 600; color: var(--t-gray-800); }
.ep-anim.s-ph-toast .ph-toast { opacity: 1; transform: none; }

.ph-tap { position: absolute; z-index: 5; width: 44em; height: 44em; margin: -22em 0 0 -22em; border-radius: 50%; background: rgba(16,66,93,.25); border: 2em solid rgba(255,255,255,.9); box-shadow: 0 4em 12em rgba(0,0,0,.25); opacity: 0; transform: scale(.6); pointer-events: none; transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1), opacity .25s, transform .25s; }
.ep-anim.is-tap .ph-tap { opacity: 1; transform: none; }
.ph-tap.is-pressing { transform: scale(.75) !important; background: rgba(16,66,93,.45); }

.ep-phone-notif { position: absolute; z-index: 7; left: 10em; right: 10em; top: 56em; display: grid; grid-template-columns: 38em 1fr; gap: 10em; align-items: center; padding: 14em; border-radius: 24em; background: rgba(255,255,255,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10em 30em rgba(5,15,24,.25); opacity: 0; transform: translateY(-160em); transition: opacity .3s ease, transform .6s cubic-bezier(.2,.9,.3,1.15); }
.ep-anim.s-notif .ep-phone-notif { opacity: 1; transform: none; }
.ep-phone-notif img { width: 38em; height: 38em; border-radius: 9em; }
.ep-phone-notif-top { display: flex; justify-content: space-between; font-size: 12em; color: var(--t-gray-500); }
.ep-phone-notif-top b { color: var(--t-gray-800); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ep-phone-notif-title { font-size: 15em; font-weight: 600; color: #000; margin-top: .1em; }
.ep-phone-notif-body { font-size: 14em; color: #1f2937; line-height: 1.25; }

@keyframes ep-spin { to { transform: rotate(360deg); } }
@keyframes ep-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pp-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ep-anim *, .ep-anim { transition: none !important; animation: none !important; } }

/* ---------------------------- */
/* Early pay section (homepage) */
/* ---------------------------- */
.ep-section { padding: 1rem; }
/* Content box is the page width shared with the hero; the padding grows the card outward so edges line up. Mirrors the hero: animation left, copy right. */
.ep-card {
  box-sizing: content-box;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  width: var(--page-w, min(1100px, 92vw));
  margin: 0 auto;
  padding: var(--card-pad, 2.25rem);
  text-align: left;
}
.ep-section { padding: 0 1rem; }
.ep-copy { max-width: 640px; }
.ep-eyebrow {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5a7a00;
}
.ep-card h2 {
  margin: 0 0 .75rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}
.ep-card .ep-lede { margin: 0 0 1.25rem; opacity: .85; line-height: 1.6; }
.ep-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.vp-tile .ep-steps li { padding: 0; opacity: 1; }
.vp-tile .ep-steps li::before { content: none; }
.ep-step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .75rem;
  align-items: start;
  padding: .75rem .9rem !important;
  border-radius: 1rem;
  border: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.ep-step.is-live { background: rgba(255, 255, 255, .55); border-color: #c9e04a; }
.ep-step-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #174a78;
  color: #ddfe55;
  font-weight: 800;
  font-size: .9rem;
}
.ep-step b { display: block; margin-bottom: .15rem; }
.ep-step span.ep-step-text { display: block; opacity: .8; line-height: 1.5; font-size: .95rem; }
.ep-money { margin: 0 0 .5rem; line-height: 1.6; font-size: .95rem; opacity: .85; }
.ep-note { margin: 0 0 1.25rem; font-size: .85rem; opacity: .65; }
.ep-ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
.ep-stage { display: flex; justify-content: flex-start; order: -1; }

@media (max-width: 900px) {
  .ep-card { box-sizing: border-box; grid-template-columns: 1fr; width: auto; max-width: 720px; }
  .ep-copy { max-width: none; }
  .ep-stage { justify-content: center; order: 0; }
  .ep-anim { margin: 0 auto; border-radius: 20px; }
}