/* mock-v13 · public billing details · sheet chrome only
   Accent = white neon glow from oph-one-look. No amber. */
.mark {
  margin: 0; padding: 28px 0 8px; text-align: center;
  font: 450 13px/1 var(--font); letter-spacing: .28em; text-transform: uppercase; color: #fff;
}
.mark span {
  display: block; margin-top: 10px;
  font: 250 12px/1.3 var(--font); letter-spacing: .04em; text-transform: none; color: var(--fg-4);
}
.job-wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--pad) 80px; }
.stages {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 18px;
}
.stages span {
  font: 450 9px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 8px; border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.18); color: var(--fg-4);
}
.stages .done { color: var(--fg-3); }
.stages .now { color: #fff; border-color: rgba(255,255,255,.9); text-shadow: var(--btn2-text-glow); box-shadow: var(--btn-glow); }

/* sheet sits in page (public), still uses .osheet glass tokens */
.billing-sheet {
  margin-top: 8px; padding: 8px 18px 28px;
  border-radius: var(--r) var(--r) 0 0;
}
.billing-sheet .grab-line {
  width: 40px; height: 5px; border-radius: 2px;
  background: rgba(255,255,255,.4); margin: 4px auto 16px;
}
.check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--line);
  font: 250 15px/1.35 var(--font); color: var(--fg-2);
}
.check-row .box {
  width: 22px; height: 22px; flex: none;
  border-radius: var(--r); border: 1px solid rgba(255,255,255,.5);
  display: grid; place-items: center;
  font: 450 12px/1 var(--font); color: transparent; background: transparent;
}
.check-row.on .box {
  background: #fff; color: #0a0a0b; border-color: #fff; box-shadow: var(--btn-glow);
}
.kv.edit span:last-child {
  flex: 1; text-align: right; color: var(--fg-2);
  border-bottom: 1px solid rgba(255,255,255,.14); padding: 4px 0; margin-left: 16px;
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}
.kv { align-items: flex-start; }
.kv .eyebrow { flex: none; max-width: 42%; padding-top: 4px; }

.quiet-link {
  display: inline-block; margin-top: 8px;
  font: 450 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-4); border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 2px;
}
.pf-acts .btn.pri { flex: 1; width: 100%; }
.pf-acts.one { margin-top: 18px; }
.wait-box {
  padding: 14px; border-radius: var(--r); border: var(--glass-border);
  background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  font: 250 14px/1.45 var(--font); color: var(--fg-2);
}
.wait-box b { font-weight: 450; color: #fff; }
.foot {
  margin: 24px 0 0; text-align: center;
  font: 250 12px/1.4 var(--font); color: var(--fg-4);
}