.mini-bill-progress { --journey-progress: 20%; }
.mini-bill-progress::before { background: #526075; }
.mini-bill-progress::after { content: ''; position: absolute; left: 5px; top: 4px; height: 2px; width: calc((100% - 10px) * var(--journey-fraction, .2)); background: #e4bb63; transition: width .65s ease; }
.mini-bill-progress i { z-index: 1; transition: background .4s, border-color .4s, box-shadow .4s; }
.mini-bill-progress i:nth-child(n) { background: var(--navy); border-color: #6c7888; }
.mini-bill-progress i.journey-done { background: #e4bb63; border-color: #e4bb63; }
.mini-bill-progress i.journey-current { box-shadow: 0 0 0 4px #e4bb6328; }
.mini-status { min-height: 1.3em; }
.bill-dialog { width: min(980px, calc(100vw - 28px)); max-width: none; max-height: calc(100dvh - 28px); border: 1px solid #e1d3bc; border-radius: 24px; background: var(--ivory); color: var(--navy); padding: 42px 44px 20px; overflow: auto; box-shadow: 0 30px 120px #0005; }
.bill-dialog::backdrop { background: #071b36b8; backdrop-filter: blur(9px); }
.bill-dialog { transform-origin: top left; }
.bill-dialog.bill-is-expanding { overflow: hidden; will-change: transform; }
.bill-dialog.bill-is-collapsing { overflow: hidden; will-change: transform; }
.bill-is-collapsing > .bill-tour-layout, .bill-is-collapsing > .bill-dialog-close { pointer-events: none; }
.bill-is-collapsing::backdrop { animation: bill-backdrop-in .7s cubic-bezier(.4, 0, .2, 1) reverse both; }
.bill-tile-in-flight { animation-play-state: paused; }
.bill-is-expanding::backdrop { animation: bill-backdrop-in .76s cubic-bezier(.4, 0, .2, 1) both; }
.bill-tile-in-flight .bills-surface { visibility: hidden; }
.bill-expanding-tile { position: absolute; left: 0; top: 0; margin: 0; padding: 22px; border: 0; border-radius: 17px; background: #071b36; color: #fdf8f3; text-align: left; transform-origin: top left; pointer-events: none; z-index: 2; }
.bill-expanding-tile .float-eyebrow { color: #d4bc8b; }
.bill-expanding-tile .float-plus { color: #e8bd63; }
@keyframes bill-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1200px) { .bill-expanding-tile { padding: 17px; } }
.bill-dialog-close { position: sticky; float: right; top: 0; margin: -30px -30px 0 0; width: 34px; height: 34px; border: 1px solid #d6c9b9; border-radius: 50%; background: #eae1d6; font-size: 25px; z-index: 3; }
.bill-tour-layout { display: grid; grid-template-columns: 1fr 390px; align-items: center; gap: 45px; }
.bill-tour-guide .eyebrow { font-size: 12px; margin-bottom: 18px; }
.bill-tour-guide h2 { font-size: clamp(36px, 4vw, 52px); line-height: 1.03; letter-spacing: -.6px; }
.bill-tour-intro { margin: 20px 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 310px; }
.bill-tour-steps { display: grid; gap: 7px; }
.bill-tour-steps button { display: grid; grid-template-columns: 26px 1fr; gap: 5px 12px; padding: 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; transition: background .35s, border-color .35s; }
.bill-tour-steps button > span { grid-row: span 2; font-size: 12px; padding-top: 2px; color: var(--gold-text); }
.bill-tour-steps strong { font-size: 14px; }
.bill-tour-steps small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.bill-tour-steps button[aria-pressed="true"] { background: #fffdf9; border-color: #d9bc82; box-shadow: 0 5px 18px #071b3605; }
.bill-tour-hint { margin: 17px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.bill-phone { position: relative; width: 100%; height: min(670px, calc(100dvh - 150px)); min-height: 430px; display: flex; flex-direction: column; overflow: hidden; border: 7px solid #24262c; border-radius: 44px; background: #151b2b; color: #f0f2f8; box-shadow: 0 24px 50px -15px #071b3655, 0 0 0 1px #383b43; font-family: Arial, Helvetica, sans-serif; }
.bill-phone button:focus-visible, .bill-phone a:focus-visible { outline-color: #6b9fff; outline-offset: 2px; }
.bill-phone-status { padding: 20px 23px 8px; display: flex; justify-content: space-between; align-items: center; font-size: 17px; min-height: 53px; }
.bill-phone-island { position: absolute; width: 115px; height: 29px; border-radius: 24px; top: 12px; left: calc(50% - 57.5px); background: #000; }
.bill-phone-header { padding: 14px 17px 10px; border-bottom: 1px solid #2a3048; }
.bill-phone-header > strong { font-size: 24px; font-weight: 800; }
.bill-phone-header > span { display: block; width: 24px; height: 3px; margin-top: 7px; background: #6b9fff; }
.bill-phone-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #414963 transparent; }
.real-bill { padding-top: 18px; }
.real-bill-heading { display: flex; gap: 5px; align-items: center; justify-content: space-between; padding: 0 15px; }
.real-bill-heading b { color: #6b9fff; font-size: 14px; letter-spacing: .4px; }
.real-bill-heading small { color: #a8aebf; font-size: 12px; margin-left: 5px; }
.real-bill-heading button { width: 29px; height: 29px; flex-shrink: 0; border-radius: 50%; border: 0; background: #1c2336; color: #a8aebf; }
.real-bill h3 { font-family: inherit; font-size: 18px; font-weight: 700; margin: 10px 15px; }
.real-bill-provenance { font-size: 12px; line-height: 1.5; color: #a8aebf; margin: 0 15px 14px; }
.real-bill-progress { display: flex; justify-content: space-between; position: relative; margin: 0 15px; }
.real-bill-progress::before { content: ''; position: absolute; top: 9px; height: 2px; left: 5px; right: 5px; background: linear-gradient(to right, #6b9fff 20%, #2a3048 20%); }
.real-bill-progress i { display: grid; place-items: center; position: relative; width: 19px; height: 19px; border-radius: 50%; border: 1px solid #414963; background: #1c2336; font-size: 12px; font-style: normal; }
.real-bill-progress .done { background: #6b9fff; border-color: #6b9fff; }
.real-bill-progress .current { background: #4dd88a; border-color: #4dd88a; }
.real-bill-status { margin: 10px 15px 18px; font-size: 14px; color: #a8aebf; }
.real-bill-status strong { color: #f0f2f8; }
.real-bill-section { padding: 18px 15px; background: #1c2336; border-top: 1px solid #2a3048; border-left: 3px solid transparent; transition: background .45s, border-color .45s; scroll-margin-top: 8px; }
.real-bill-section.is-current { background: #222f48; border-left-color: #6b9fff; }
.real-bill-section h4 { font-size: 14px; letter-spacing: .4px; margin: 0 0 9px; }
.real-bill-section p { font-size: 16px; line-height: 1.5; color: #a8aebf; margin: 0 0 9px; }
.real-bill-section p:last-child { margin-bottom: 0; }
.real-bill-section small { display: block; font-size: 12px; line-height: 1.5; color: #a8aebf; }
.real-bill-section ol { padding-left: 18px; margin: 0; color: #a8aebf; font-size: 14px; line-height: 1.5; }
.real-bill-section li + li { margin-top: 12px; }
.real-bill-section time { display: block; font-size: 12px; color: #6b9fff; }
.real-bill-source { display: block; padding: 20px 17px; color: #6b9fff; font-size: 14px; }
.bill-phone-actions { display: flex; gap: 8px; border-top: 1px solid #2a3048; padding: 9px 12px; }
.bill-phone-actions button { flex: 1; min-height: 37px; padding: 7px; background: #1c2336; border: 1px solid #2a3048; border-radius: 7px; color: #6b9fff; font-size: 13px; }
.bill-phone-actions button[aria-pressed="true"] { background: #253653; }
.bill-phone-nav { display: flex; justify-content: space-around; gap: 3px; padding: 10px 8px 3px; border-top: 1px solid #1f2538; }
.bill-phone-nav > span { text-align: center; color: #7a8099; font-size: 22px; }
.bill-phone-nav small { display: block; font-size: 10px; margin-top: 2px; }
.bill-phone-nav .active { color: #6b9fff; }
.bill-phone-nav svg { display: block; width: 23px; height: 23px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bill-phone-home { height: 4px; width: 115px; border-radius: 8px; background: #a8aebf; margin: 8px auto; flex-shrink: 0; }
.bill-demo-tap { pointer-events: none; position: absolute; left: 79%; top: 49%; width: 22px; height: 22px; border: 2px solid #b8d1ff; border-radius: 50%; background: #6b9fff55; opacity: 0; }
.bill-demo-tap.is-tapping { animation: bill-tap .85s ease-out; }
.bill-dialog-note { text-align: center; margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
@keyframes bill-tap { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(2); } }
@media (max-width: 700px) {
  .bill-dialog { padding: 45px 16px 16px; }
  .bill-dialog-close { margin: -33px -5px 0 0; }
  .bill-tour-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bill-tour-guide h2 { font-size: 34px; }
  .bill-tour-guide h2 br { display: none; }
  .bill-tour-guide h2 em::before { content: ' '; }
  .bill-tour-guide .eyebrow { margin-bottom: 8px; }
  .bill-tour-intro { margin: 10px 0 14px; max-width: none; font-size: 14px; }
  .bill-tour-steps { grid-template-columns: 1fr 1fr; gap: 5px; }
  .bill-tour-steps button { padding: 9px 6px; gap: 4px; grid-template-columns: 19px 1fr; }
  .bill-tour-steps strong { font-size: 12px; }
  .bill-tour-steps small { display: none; }
  .bill-tour-hint { margin-top: 9px; }
  .bill-phone { width: min(100%, 390px); justify-self: center; height: 580px; min-height: 0; border-width: 5px; border-radius: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-bill-progress::after, .mini-bill-progress i, .real-bill-section, .bill-tour-steps button { transition: none; }
  .bill-demo-tap.is-tapping { animation: none; }
}
