/* HPAY only: Invoice's cream workspace, ink type and red action. Existing controllers own state. */
.hpay-workspace {
  --hp-paper: #eeeae2; --hp-sheet: #faf7f0; --hp-ink: #171615; --hp-quiet: #61594f;
  --hp-line: #c6bbad; --hp-red: #c8102e; --hp-space: 8px;
  --ink-950: #f5f0e7; --ink-900: #eeeae2; --ink-850: #faf7f0; --ink-800: #e9e1d5; --ink-700: #ded5c7;
  --fg: #171615; --fg-2: #534b43; --fg-3: #655b51;
  --line: #d1c7ba; --line-2: #b9ad9d; --red: #c8102e; --red-hi: #b20c29; --red-dim: #9b0b24;
  --ok: #21613f; --warn: #735408; --r: 0px; --pad: clamp(16px, 5vw, 72px);
  background: var(--hp-paper); color: var(--hp-ink); font-family: var(--body); font-variant-numeric: tabular-nums;
  overflow-x: visible;
}
.hpay-workspace::before { display: none; }
.hpay-workspace [hidden] { display: none !important; }
.hpay-workspace *, .hpay-workspace *::before, .hpay-workspace *::after { box-sizing: border-box; }
.hpay-workspace :focus-visible { outline: 3px solid var(--hp-red); outline-offset: 4px; }
.hpay-workspace a { text-underline-offset: 4px; }
.hpay-workspace .nav { position: relative; background: #171615; border-bottom: 1px solid #49403c; color: #faf7f0; backdrop-filter: none; }
.hpay-workspace .nav-inner { max-width: 1328px; padding: 16px var(--pad); min-height: 88px; gap: 28px; }
.hpay-workspace .nav-logo { display: flex; align-items: center; min-height: 44px; gap: 12px; font-size: 20px; color: #faf7f0; letter-spacing: .03em; }
.hpay-workspace .nav-logo img { width: 36px; height: 36px; object-fit: contain; }
.hpay-workspace .nav-links { gap: 20px; }
.hpay-workspace .nav-links a { min-height: 44px; display: inline-flex; align-items: center; color: #e6ded2; font-size: 12px; }
.hpay-workspace .nav-links a[aria-current] { color: #fff; border-bottom: 1px solid #ee2544; }
.hpay-workspace .pl-page { padding-block: 48px 64px; }
.hpay-workspace .pl-wrap, .hpay-workspace .ht-wrap, .hpay-workspace .pos-wrap { max-width: 1328px; margin-inline: auto; padding-inline: var(--pad); }
.hpay-workspace .hp-head, .hpay-workspace .ht-head { align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.hpay-workspace .ht-title { align-items: flex-start; gap: 20px; }
.hpay-workspace .ht-mark { margin-top: 36px; max-width: 64px; }
.hpay-workspace .ht-mark svg { max-width: 56px; height: auto; }
.hpay-workspace h1, .hpay-workspace .ht-head h1 { font: 500 clamp(42px, 5.8vw, 80px)/1.02 var(--display); letter-spacing: -.06em; color: var(--hp-ink); max-width: 900px; margin: 10px 0 0; overflow-wrap: anywhere; }
.hpay-workspace h2 { font: 500 28px/1.12 var(--display); letter-spacing: -.045em; color: var(--hp-ink); text-transform: none; }
.hpay-workspace h3 { color: var(--hp-ink); }
.hpay-workspace .eyebrow { color: var(--hp-quiet); font: 400 10px/1.7 var(--mono); letter-spacing: .1em; }
.hpay-workspace .ht-badge, .hpay-workspace .ht-beta, .hpay-workspace .hp-beta { display: inline-block; color: var(--hp-red); border: 1px solid var(--hp-red); border-radius: 0; font: 400 10px/1.3 var(--mono); padding: 3px 6px; margin-left: 8px; }
.hpay-workspace .lede { color: var(--hp-quiet); font-size: 15px; line-height: 1.65; max-width: 700px; margin-block: 16px 32px; }
.hpay-workspace .ht-head .lede { margin-bottom: 8px; }
.hpay-workspace .hp-ledger-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; border-block: 1px solid var(--hp-line); padding-block: 8px; margin-block: 28px 32px; }
.hpay-workspace .hp-ledger-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: none; }
.hpay-workspace .hp-ledger-nav a:hover { color: var(--hp-red); text-decoration: underline; }
.hpay-workspace .hp-ledger-nav a[aria-current] { color: var(--hp-red); font-weight: 600; }
.hpay-workspace .hp-workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 40px; align-items: start; }
.hpay-workspace .hp-workspace > *, .hpay-workspace .hp-context { min-width: 0; }
.hpay-workspace .hp-panel { border: 1px solid var(--hp-line); background: var(--hp-sheet); border-radius: 0; box-shadow: none; }
.hpay-workspace .hp-tabs { background: transparent; border-color: var(--hp-line); }
.hpay-workspace .hp-tab { flex-direction: row; font-size: 14px; min-height: 60px; }
.hpay-workspace .hp-tab[aria-selected="true"] { color: var(--hp-ink); background: #e5ddd0; border-bottom-color: var(--hp-red); }
.hpay-workspace .hp-form, .hpay-workspace .hp-receive { padding: 28px; }
.hpay-workspace .pl-card, .hpay-workspace .ht-slip { border: 1px solid var(--hp-line); background: var(--hp-sheet); color: var(--hp-ink); padding: 28px; border-radius: 0; box-shadow: none; margin-top: 0; }
.hpay-workspace .hp-confirm, .hpay-workspace #pl-result { margin-bottom: 24px; position: relative; }
.hpay-workspace .hp-confirm::after, .hpay-workspace .ht-slip::after { content: ''; position: absolute; left: -1px; right: -1px; bottom: -8px; height: 8px; background: linear-gradient(135deg, var(--hp-sheet) 4px, transparent 0) 0 0/8px 8px, linear-gradient(225deg, var(--hp-sheet) 4px, transparent 0) 0 0/8px 8px; }
.hpay-workspace .ht-slip { position: relative; max-width: none; margin-block: 24px; }
.hpay-workspace .hp-confirm h2, .hpay-workspace .pl-card h2 { margin-bottom: 24px; font-size: 27px; text-transform: none; }
.hpay-workspace .pl-row, .hpay-workspace .ht-kv > div { border-color: var(--hp-line); padding-block: 12px; gap: 16px; }
.hpay-workspace .pl-row .k { color: var(--hp-quiet); font-size: 12px; }
.hpay-workspace .pl-row .v { color: var(--hp-ink); font: 400 12px/1.6 var(--mono); max-width: 72%; overflow-wrap: anywhere; }
.hpay-workspace .hp-confirm .hp-big, .hpay-workspace .pl-amount, .hpay-workspace .ht-slip-amount { font: 500 clamp(28px, 3.2vw, 48px)/1.2 var(--display); letter-spacing: -.06em; overflow-wrap: anywhere; }
.hpay-workspace .pl-input { color: var(--hp-ink); background: #fffdf8; border: 1px solid #ac9e8c; border-radius: 0; min-height: 48px; font-size: 16px; padding: 12px 14px; max-width: 100%; }
.hpay-workspace .pl-input::placeholder { color: #766a5e; opacity: 1; }
.hpay-workspace .pl-input:focus { border-color: var(--hp-red); box-shadow: none; }
.hpay-workspace .pl-label, .hpay-workspace .ht-field > label { color: var(--hp-ink); font-size: 12px; line-height: 1.6; letter-spacing: 0; }
.hpay-workspace .pl-help, .hpay-workspace .ht-note, .hpay-workspace .ht-checked, .hpay-workspace .ht-reason { color: var(--hp-quiet); font-size: 12px; line-height: 1.75; }
.hpay-workspace .hp-asset { border-radius: 0; min-height: 48px; background: #e9e1d5; }
.hpay-workspace .hp-asset-choice { margin-top: 12px; }
.hpay-workspace .hp-amount-row:has(#hp-unit[hidden]) { grid-template-columns: minmax(0, 1fr); }
.hpay-workspace .hp-amount-row:has(#hp-unit[hidden]) > .pl-field:nth-child(2) { display: none; }
.hpay-workspace .hp-asset-choice .pl-input { width: 100%; }
.hpay-workspace .hp-more > summary, .hpay-workspace .ht-more > summary, .hpay-workspace .ht-details > summary { min-height: 44px; color: var(--hp-ink); font-size: 12px; cursor: pointer; }
.hpay-workspace .btn, .hpay-workspace .btn.ht-small, .hpay-workspace .ht-btn-row .btn.ht-small { min-height: 44px; border-radius: 0; border: 1px solid #ab9b87; color: var(--hp-ink); background: transparent; font-size: 12px; box-shadow: none; transform: none; padding: 12px 16px; }
.hpay-workspace .btn:hover { background: #e2d9cc; border-color: var(--hp-ink); transform: none; }
.hpay-workspace .btn.btn-primary { background: var(--hp-red); border-color: var(--hp-red); color: #fff; font-weight: 600; }
.hpay-workspace .btn.btn-primary:hover { background: #a60c26; }
.hpay-workspace .btn:disabled, .hpay-workspace .btn[aria-disabled="true"] { opacity: 1; color: #665b4e; background: #e1d9cb; border-color: #b5a793; cursor: not-allowed; }
.hpay-workspace .btn.btn-primary:disabled { color: #665b4e; background: #e1d9cb; border-color: #b5a793; }
.hpay-workspace .ib-copy-btn, .hpay-workspace .ib-pdf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; }
.hpay-workspace #pl-send:disabled { opacity: 1; }
.hpay-workspace .pl-error, .hpay-workspace .ht-reason[data-tone="error"] { color: #a10d26; }
.hpay-workspace .ht-slip-head[data-tone="bad"], .hpay-workspace .ht-glyph[data-tone="bad"], .hpay-workspace .ht-step[data-state="error"], .hpay-workspace .ht-outcome[data-tone="error"], .hpay-workspace .ht-empty[data-tone="error"] strong, .hpay-workspace .ht-checks li[data-result="differ"] b, .hpay-workspace .ht-problems li, .hpay-workspace .ht-toast[data-tone="error"], .hpay-workspace .pos-charge-error, .hpay-workspace .pos-danger { color: #a10d26; }
.hpay-workspace .pl-success { color: var(--ok); }
.hpay-workspace .pl-link-box { min-width: 0; flex-wrap: wrap; gap: 8px; }
.hpay-workspace .pl-link-box .pl-input { flex: 1 1 220px; min-width: 0; }
.hpay-workspace .pl-qr-wrap { margin-block: 24px; }
.hpay-workspace .pl-qr-plate { border-radius: 0; background: #fff; max-width: 100%; }
.hpay-workspace .pl-qr-plate canvas { max-width: 100%; height: auto; }
.hpay-workspace .hp-guide { padding: 28px 0; border-top: 1px solid var(--hp-line); color: var(--hp-quiet); min-width: 0; }
.hpay-workspace .hp-guide .hp-guide-kicker { font: 400 10px/1.5 var(--mono); color: var(--hp-red); letter-spacing: .08em; margin-bottom: 20px; }
.hpay-workspace .hp-guide h2 { font-size: 29px; color: var(--hp-ink); margin-bottom: 20px; }
.hpay-workspace .hp-guide ol { list-style: none; counter-reset: help; margin: 0; padding: 0; }
.hpay-workspace .hp-guide li { counter-increment: help; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-block: 12px; font-size: 13px; line-height: 1.65; border-bottom: 1px solid var(--hp-line); }
.hpay-workspace .hp-guide li::before { content: '0' counter(help); color: var(--hp-red); font: 400 10px/1.6 var(--mono); padding-top: 3px; }
.hpay-workspace .hp-guide strong { display: block; color: var(--hp-ink); font-weight: 500; }
.hpay-workspace .hp-guide .hp-privacy { margin-top: 20px; font-size: 12px; line-height: 1.75; }
.hpay-workspace .hp-guide .hp-guide-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--hp-ink); font-size: 12px; margin-top: 8px; }
.hpay-workspace .hp-guide--wide { margin-top: 40px; }
.hpay-workspace .hp-guide--wide ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.hpay-workspace .hp-guide--wide .hp-privacy { max-width: 800px; }
.hpay-workspace .hp-context:has(.hp-confirm:not([hidden]), #pl-result:not([hidden])) .hp-guide { padding-top: 16px; }
.hpay-workspace .ht-tools { border-top: 1px solid var(--hp-line); margin-top: 48px; padding-top: 28px; }
.hpay-workspace .ht-tools h2 { font-size: 28px; }
.hpay-workspace .ht-tools ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; padding: 0; }
.hpay-workspace .ht-tools li { border: 0; border-bottom: 1px solid var(--hp-line); background: none; border-radius: 0; }
.hpay-workspace .ht-tools li a { min-height: 100px; border: 0; padding: 20px 0; }
.hpay-workspace .ht-tools li a:hover { background: transparent; color: var(--hp-red); }
.hpay-workspace .ht-tools li b { font: 500 20px/1.25 var(--display); letter-spacing: -.04em; }
.hpay-workspace .ht-tools li span { color: var(--hp-quiet); font-size: 12px; }
.hpay-workspace .ht-strip { color: var(--hp-quiet); font-size: 11px; padding-block: 16px; border-color: var(--hp-line); }
.hpay-workspace .ht-grid { gap: 0; border-color: var(--hp-line); background: var(--hp-sheet); }
.hpay-workspace .ht-grid--inbox { grid-template-columns: minmax(280px, .7fr) minmax(0, 1.7fr); }
.hpay-workspace .ht-grid--inbox > .ht-panel + .ht-panel { border-top: 0; border-left: 1px solid var(--hp-line); }
.hpay-workspace .ib-side-grid { display: block; }
.hpay-workspace .ib-side-right { margin-top: 24px; }
.hpay-workspace .ht-chips--period button { min-height: 44px; }
.hpay-workspace .ht-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.hpay-workspace #sp-panel-activity { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--hp-line); }
.hpay-workspace .ht-panel { padding: 28px; min-width: 0; }
.hpay-workspace .ht-panel > h2, .hpay-workspace .ht-panel-head h2 { font: 500 25px/1.2 var(--display); letter-spacing: -.04em; }
.hpay-workspace .ht-empty { color: var(--hp-quiet); border-color: var(--hp-line); background: transparent; padding-block: 24px; font-size: 13px; }
.hpay-workspace .ht-empty strong { color: var(--hp-ink); font: 500 24px/1.2 var(--display); margin-bottom: 12px; }
.hpay-workspace .ht-chip, .hpay-workspace .ht-seg, .hpay-workspace .ht-chip[aria-pressed="true"] { border-radius: 0; color: var(--hp-ink); }
.hpay-workspace .ht-chip[aria-pressed="true"] { background: #e1d6c6; }
.hpay-workspace .ht-table, .hpay-workspace .pos-table { color: var(--hp-ink); font-size: 12px; }
.hpay-workspace .ht-table th, .hpay-workspace .pos-table th { color: var(--hp-quiet); font: 400 10px/1.5 var(--mono); }
.hpay-workspace .ht-table th button, .hpay-workspace .pos-table th button { min-height: 44px; }
.hpay-workspace .ht-table td, .hpay-workspace .pos-table td { border-color: var(--hp-line); }
.hpay-workspace .ht-code { border-radius: 0; background: #e8dfd1; border-color: var(--hp-line); }
.hpay-workspace pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--hp-ink); }
.hpay-workspace .ht-code pre { color: var(--hp-ink); }
.hpay-workspace .ht-live[data-health="stale"], .hpay-workspace [data-state="unknown"], .hpay-workspace [data-state="pending"] { color: var(--warn); }
.hpay-workspace .ht-live[data-health="offline"] { color: var(--hp-red); }
.hpay-workspace .ht-reason:empty { min-height: 0; }
.hpay-workspace .ht-wrap:has(#rc-slip[hidden]) #rc-print { display: none; }
.hpay-workspace .ht-dialog, .hpay-workspace dialog { background: var(--hp-sheet); color: var(--hp-ink); border: 1px solid #92816b; border-radius: 0; max-width: calc(100vw - 32px); }
.hpay-workspace dialog::backdrop { background: #171615aa; }
.hpay-workspace .pos-setup { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
.hpay-workspace .pos-setup-card { max-width: none; }
.hpay-workspace .pos-how { border-color: var(--hp-line); color: var(--hp-quiet); }
.hpay-workspace .pos-grid { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.hpay-workspace .pos-pad, .hpay-workspace .pos-sale { border-radius: 0; border-color: var(--hp-line); background: var(--hp-sheet); padding: 28px; }
.hpay-workspace .pos-usd { font: 500 64px/1.2 var(--display); letter-spacing: -.06em; }
.hpay-workspace .pos-key { min-height: 64px; border-radius: 0; color: var(--hp-ink); background: #eae1d5; border: 1px solid var(--hp-line); font-weight: 500; }
.hpay-workspace .pos-key:hover { background: #dacebb; }
.hpay-workspace .pos-charge { min-height: 64px; }
.hpay-workspace .pos-clear, .hpay-workspace .pos-chip { min-height: 44px; border-radius: 0; }
.hpay-workspace .pos-tile { border-radius: 0; background: none; border-color: var(--hp-line); }
/* An earlier sale's live notice must not float across the next customer's Charge control. */
.hpay-workspace .pos-toast { position: static; transform: none; max-width: 100%; margin: 0 0 24px; border-radius: 0; border-color: var(--ok); background: var(--hp-sheet); box-shadow: none; pointer-events: none; }
.hpay-workspace .pos-paid { border-color: var(--ok); background: #addfb1; color: #17452c; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; inset: 0; }
.hpay-workspace .pos-paid-title, .hpay-workspace .pos-paid h2 { color: #17452c; font: 500 clamp(56px, 15vw, 112px)/.95 var(--display); letter-spacing: -.06em; }
.hpay-workspace .pos-paid-new { background: #17452c; color: #faf7f0; border-radius: 0; }
.hpay-workspace .footer { border-top: 1px solid var(--hp-line); background: transparent; padding-block: 24px; }
.hpay-workspace .footer .wrap { max-width: 1328px; }
.hpay-workspace .foot-note { color: var(--hp-quiet); font-size: 12px; }

@media (max-width: 1050px) {
  .hpay-workspace .hp-workspace { gap: 24px; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
  .hpay-workspace .nav-links { gap: 12px; flex-wrap: wrap; }
  .hpay-workspace .nav-inner { align-items: center; }
  .hpay-workspace .ht-grid--split, .hpay-workspace .pos-grid { gap: 0; }
}
@media (max-width: 760px) {
  .hpay-workspace { --pad: 16px; }
  .hpay-workspace .pl-wrap, .hpay-workspace .ht-wrap, .hpay-workspace .pos-wrap { padding-inline: 16px; }
  .hpay-workspace .nav-inner { min-height: 76px; padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .hpay-workspace .nav-links { gap: 16px; overflow: visible; flex-wrap: wrap; }
  .hpay-workspace .nav-links a { font-size: 11px; }
  .hpay-workspace .nav-links a:not([aria-current]):not(:last-child) { display: none; }
  .hpay-workspace .pl-page { padding-top: 32px; }
  .hpay-workspace .hp-head, .hpay-workspace .ht-title, .hpay-workspace .ht-head { gap: 12px; }
  .hpay-workspace .ht-mark { margin-top: 31px; }
  .hpay-workspace .ht-mark svg { max-width: 30px; }
  .hpay-workspace h1, .hpay-workspace .ht-head h1 { font-size: 44px; letter-spacing: -.055em; }
  .hpay-workspace .lede { font-size: 14px; margin-bottom: 24px; }
  .hpay-workspace .hp-workspace, .hpay-workspace .pos-setup, .hpay-workspace .pos-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hpay-workspace .hp-form, .hpay-workspace .hp-receive, .hpay-workspace .pl-card, .hpay-workspace .ht-slip, .hpay-workspace .ht-panel, .hpay-workspace .pos-pad, .hpay-workspace .pos-sale { padding: 20px; }
  .hpay-workspace .hp-tab { min-height: 56px; font-size: 12px; gap: 8px; flex-direction: row; }
  .hpay-workspace .hp-tab-glyph { display: none; }
  .hpay-workspace .hp-amount-row { grid-template-columns: minmax(0, 1fr) 112px; }
  .hpay-workspace .hp-r-addr { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hpay-workspace .hp-r-qr { justify-items: start; }
  .hpay-workspace .hp-r-linkqr .hp-r-qr { grid-template-columns: minmax(0, 1fr); }
  .hpay-workspace .hp-guide { padding-block: 24px; }
  .hpay-workspace .hp-guide--wide ol, .hpay-workspace .ht-tools ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hpay-workspace .hp-ledger-nav { gap: 4px 16px; margin-block: 20px 24px; }
  .hpay-workspace .hp-ledger-nav a { font-size: 11px; }
  .hpay-workspace .ht-grid, .hpay-workspace .ht-grid--split { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .hpay-workspace .ht-grid > :nth-child(n) { grid-area: auto; grid-column: auto; border-left: 0; }
  .hpay-workspace .ht-grid--inbox > .ht-panel + .ht-panel { border-left: 0; border-top: 1px solid var(--hp-line); }
  .hpay-workspace .ht-panel-head { align-items: flex-start; }
  .hpay-workspace .ht-panel-head .ht-btn-row { width: 100%; }
  .hpay-workspace .ht-panel-head .ht-btn-row .btn { flex: 1 1 120px; }
  .hpay-workspace .ht-table-wrap { max-width: 100%; overflow-x: auto; }
  .hpay-workspace .ht-dates { grid-template-columns: minmax(0, 1fr); }
  .hpay-workspace .pos-usd { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .hpay-workspace *, .hpay-workspace *::before, .hpay-workspace *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}
@media print {
  .hpay-workspace { background: #fff; color: #000; --fg: #000; --fg-2: #333; --fg-3: #444; --hp-sheet: #fff; --hp-ink: #000; --hp-quiet: #333; }
  .hpay-workspace .nav, .hpay-workspace .footer, .hpay-workspace .hp-guide, .hpay-workspace .hp-ledger-nav, .hpay-workspace #rc-more, .hpay-workspace #rc-actions { display: none !important; }
  .hpay-workspace .pl-page, .hpay-workspace .ht-wrap { padding: 0; }
  .hpay-workspace .ht-slip { border: 1px solid #999; box-shadow: none; padding: 24px; break-inside: avoid; }
  .hpay-workspace .ht-slip::after { display: none; }
  .hpay-workspace .ht-kv dd, .hpay-workspace #rc-print-link { overflow-wrap: anywhere; }
}

/* HPAY hero (owner 2026-10-12): the HPAY brand lockup is the background of the first part of /hpay. The image's own ground is the
   sheet colour (#faf7ef next to --hp-sheet #faf7f0), so the banner reads as one sheet on the paper page. The h1, eyebrow and lede
   stay real text below the lockup; the old pixel "h" mark stays removed (the lockup carries the camel and the name). */
.hpay-workspace .hp-head.hp-hero { display: block; position: relative; margin-bottom: 8px; padding: 0 0 clamp(18px, 3vw, 32px); background: var(--hp-sheet); border: 1px solid var(--hp-line); border-bottom-color: var(--hp-red); overflow: hidden; }
.hpay-workspace .hp-head.hp-hero::before { content: ""; display: block; width: 100%; height: clamp(150px, 17vw, 240px); background: #faf7ef url("/brand/hpay-hero.webp") center 50% / auto 195% no-repeat; }
.hpay-workspace .hp-head.hp-hero > div { padding: clamp(10px, 1.6vw, 22px) clamp(16px, 3vw, 40px) 0; }
.hpay-workspace .hp-head.hp-hero h1 { margin-top: 6px; }
@media (max-width: 640px) {
  .hpay-workspace .hp-head.hp-hero::before { height: 116px; background-size: 112% auto; }
}
@media (forced-colors: active) { .hpay-workspace .hp-head.hp-hero::before { forced-color-adjust: none; } }
/* /hpay only: the lockup's own paper is the page ground, so the banner is not a card on a darker page but part of the page. */
.hpay-workspace.hp-home { --hp-paper: #faf7ef; background: #faf7ef; }
.hpay-workspace.hp-home .hp-head.hp-hero { background: transparent; border: 0; border-bottom: 1px solid var(--hp-red); }
.hpay-workspace.hp-home .hp-head.hp-hero::before { background-color: transparent; }
/* /hpay link-first workspace (owner 2026-10-12): your own link and its QR code come first, the raw address after, the inbox in the side column. */
.hpay-workspace .hp-r-link:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hpay-workspace .hp-r-link:first-child .hp-r-linkqr .pl-qr-plate canvas { width: 196px; height: 196px; }
.hpay-workspace .hp-r-link ~ .hp-r-addr { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hp-line); }
.hpay-workspace .hp-r-link ~ .hp-r-addr .hp-r-qr .pl-qr-plate canvas { width: 128px; height: 128px; }
.hpay-workspace button.hp-r-getname { margin-top: 10px; background: transparent; color: var(--hp-ink); border: 1px solid var(--hp-ink); text-decoration: none; border-radius: 0; }
.hpay-workspace button.hp-r-getname:hover { background: var(--hp-ink); color: var(--hp-sheet); }
.hpay-workspace .hp-inbox-card { padding: 22px 0; border-top: 1px solid var(--hp-line); min-width: 0; }
.hpay-workspace .hp-inbox-card .hp-guide-kicker { margin-bottom: 14px; }
.hpay-workspace .hp-inbox-card h2 { font-size: 24px; color: var(--hp-ink); margin-bottom: 10px; }
.hpay-workspace .hp-ibx-line { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--hp-quiet); }
.hpay-workspace .hp-ibx-list { list-style: none; margin: 0 0 6px; padding: 0; }
.hpay-workspace .hp-ibx-list:empty { display: none; }
.hpay-workspace .hp-ibx-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hp-line); font-size: 13px; }
.hpay-workspace .hp-ibx-dir { font: 400 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hp-quiet); }
.hpay-workspace .hp-ibx-row.is-received .hp-ibx-dir { color: #21613f; }
.hpay-workspace .hp-ibx-row.is-sent .hp-ibx-dir { color: var(--hp-red); }
.hpay-workspace .hp-ibx-who { font: 12px var(--mono); color: var(--hp-ink); overflow: hidden; text-overflow: ellipsis; }
.hpay-workspace .hp-ibx-amt { font: 500 13px var(--mono); color: var(--hp-ink); text-align: right; }
.hpay-workspace .hp-ibx-day { grid-column: 2 / -1; font: 11px var(--mono); color: var(--hp-quiet); }
@media (max-width: 640px) { .hpay-workspace .hp-r-link:first-child .hp-r-linkqr .pl-qr-plate canvas { width: 176px; height: 176px; } }
/* Compact hero on /hpay so the link you make for yourself is near the first screen: a smaller banner and title. */
.hpay-workspace.hp-home .hp-head.hp-hero::before { height: clamp(150px, 13vw, 190px); }
.hpay-workspace.hp-home .hp-head.hp-hero h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1.05; }
.hpay-workspace.hp-home .hp-head.hp-hero { padding-bottom: clamp(12px, 2vw, 20px); }