dialog.desk-billing-dialog {
  width:min(800px,calc(100vw - 32px)); padding:32px;
  color:var(--yd-ink); background:var(--yd-paper);
  font:400 15px/1.5 'Figtree',system-ui,sans-serif;
  border:1px solid var(--yd-chrome-border); border-radius:18px;
  box-shadow:0 24px 80px #0004;
}
.desk-billing-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.desk-billing-dialog .desk-billing-header h2 { margin:0; font:500 36px/1.15 var(--serif,Georgia,serif); letter-spacing:-.025em; }
.desk-billing-dialog .desk-billing-eyebrow { margin:0 0 8px; font-size:11px; font-weight:600; letter-spacing:.15em; color:var(--yd-light-ink); }
.desk-billing-dialog button { min-height:44px; cursor:pointer; }
.desk-billing-header > button { background:transparent; flex-shrink:0; margin:0; }
.desk-billing-summary { padding:20px 24px; border:1px solid var(--yd-chrome-border); background:var(--yd-chrome); border-radius:12px; }
.desk-billing-summary-heading { display:flex; align-items:center; gap:12px; }
.desk-billing-dialog .desk-billing-summary h3 { font:500 24px/1.2 var(--serif,Georgia,serif); margin:0; }
.desk-billing-tag { font-size:11px; color:var(--yd-light-ink); border:1px solid var(--yd-chrome-border); padding:3px 9px; border-radius:20px; }
.desk-billing-dialog .desk-billing-balance { margin:12px 0 8px; font-size:16px; }
.desk-billing-balance strong { font:500 34px/1.1 var(--serif,Georgia,serif); margin-right:3px; }
.desk-billing-meter { display:block; width:100%; height:5px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--yd-action); background:var(--yd-chrome-border); }
.desk-billing-meter::-webkit-progress-bar { background:var(--yd-chrome-border); }
.desk-billing-meter::-webkit-progress-value { background:var(--yd-action); border-radius:8px; }
.desk-billing-meter::-moz-progress-bar { background:var(--yd-action); border-radius:8px; }
.desk-billing-summary-details { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; font-size:13px; margin-top:9px; }
.desk-billing-dialog .desk-billing-reset { margin:8px 0 0; color:var(--yd-light-ink); font-size:12px; }
.desk-billing-dialog .desk-billing-choices > h3 { font:500 27px/1.2 var(--serif,Georgia,serif); margin:24px 0 5px; }
.desk-billing-dialog .desk-billing-intro { color:var(--yd-light-ink); margin:0 0 18px; }
.desk-billing-offers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.desk-billing-offer { display:flex; flex-direction:column; padding:22px; border:1px solid var(--yd-chrome-border); border-radius:12px; min-width:0; }
.desk-billing-offer-pro { background:#1d2428; color:#f6f0e4; border-color:#414c52; }
.desk-billing-offer h4 { font:500 26px/1.2 var(--serif,Georgia,serif); margin:0; }
.desk-billing-dialog .desk-billing-price { margin:12px 0 18px; }
.desk-billing-price strong { font:500 40px/1 var(--serif,Georgia,serif); letter-spacing:-.035em; }
.desk-billing-price span { font-size:13px; }
.desk-billing-features { padding:0; margin:0 0 20px; list-style:none; font-size:14px; }
.desk-billing-features li + li { margin-top:7px; }
.desk-billing-dialog .desk-billing-choose { width:100%; margin:auto 0 0; background:var(--yd-chrome-raised); color:var(--yd-ink); border:1px solid var(--yd-chrome-border); border-radius:7px; font-weight:600; }
.desk-billing-dialog .desk-billing-offer-pro .desk-billing-choose { background:#f6f0e4; color:#1d2428; border-color:#f6f0e4; }
.desk-billing-dialog .desk-billing-choose:hover { filter:brightness(.96); }
.desk-billing-explanation { margin:18px 0 14px; font-size:13px; }
.desk-billing-explanation strong { font-weight:600; }
.desk-billing-dialog .desk-billing-explanation p { margin:3px 0 0; color:var(--yd-light-ink); }
.desk-billing-detail { font-size:14px; line-height:1.55; color:var(--yd-light-ink); }
.desk-billing-terms,.desk-billing-retention { font-size:12px; line-height:1.6; color:var(--yd-light-ink); }
.desk-billing-dialog .desk-billing-retention { border-top:1px solid var(--yd-chrome-border); padding-top:14px; margin:14px 0 0; }
.desk-billing-notice { font-size:12px; color:var(--yd-light-ink); margin:10px 0 0; }
.desk-billing-notice:empty { display:none; }
@media(max-width:540px) {
  dialog.desk-billing-dialog { padding:22px 18px; width:calc(100vw - 20px); inset:10px; max-height:calc(100dvh - 20px); }
  .desk-billing-header { align-items:flex-start; gap:8px; margin-bottom:18px; }
  .desk-billing-dialog .desk-billing-header h2 { font-size:29px; }
  .desk-billing-header > button { font-size:12px; padding:8px 10px; }
  .desk-billing-summary { padding:18px; }
  .desk-billing-offers { grid-template-columns:1fr; gap:12px; }
  .desk-billing-offer { padding:20px; }
}
@media(min-width:541px) {
  .desk-billing-summary { display:grid; grid-template-columns:1fr auto; gap:8px 16px; padding:18px 22px; }
  .desk-billing-dialog .desk-billing-summary .desk-billing-balance { margin:0; text-align:right; }
  .desk-billing-meter,.desk-billing-summary-details,.desk-billing-reset,.desk-billing-summary .desk-billing-detail { grid-column:1 / -1; }
  .desk-billing-summary-details,.desk-billing-dialog .desk-billing-summary .desk-billing-reset { margin:0; }
}
.desk-billing-header { position:sticky; top:-32px; z-index:1; background:var(--yd-paper); padding:12px 0; margin-top:-12px; }
@media(max-width:540px) { .desk-billing-header { top:-22px; } }
/* Approved introduction banner: existing artwork, soft focus, sharp logo. */
dialog.desk-billing-dialog { padding:0; max-height:calc(100dvh - 32px); }
.desk-billing-header { position:relative; top:auto; margin:0; padding:24px 32px; min-height:150px; overflow:hidden; isolation:isolate; color:#fbf8f1; background:#292d29; }
.desk-billing-header::before { content:""; position:absolute; inset:-18px; z-index:-2; background:url('../brand/entry-scene.jpg') center 42% / cover; filter:blur(8px); }
.desk-billing-header::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#1a211be8,#18201b91); }
.desk-billing-header .desk-billing-logo { display:inline-block; width:auto; margin:12px 0 10px; }
.desk-billing-dialog .desk-billing-header h2 { color:#fbf8f1; }
.desk-billing-header > button { color:#fbf8f1; border:1px solid #fff6; border-radius:24px; background:#ffffff0c; }
.desk-billing-content { padding:24px 32px 12px; }
.desk-billing-dialog > .desk-billing-notice { margin:0; padding:0 32px 24px; }
.desk-billing-offer-free { grid-column:1 / -1; background:var(--yd-chrome); }
.desk-billing-offer-free .desk-billing-features { columns:2; column-gap:28px; }
.desk-billing-offer-free .desk-billing-features li { break-inside:avoid; }
.desk-billing-dialog .desk-billing-offer-free .desk-billing-price { margin-bottom:10px; }
.desk-billing-sharing { font:500 24px/1.25 var(--serif,Georgia,serif); }
.desk-billing-dialog .desk-billing-sharing-copy { max-width:520px; margin:8px 0 20px; }
.desk-billing-usage { grid-column:1 / -1; border-top:1px solid var(--yd-chrome-border); padding-top:14px; margin-top:6px; }
.desk-billing-usage-row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; margin:8px 0; font-size:13px; }
.desk-billing-usage-row strong { font-weight:500; }
.desk-billing-callout,.desk-billing-confirmation { border:1px solid var(--yd-chrome-border); border-radius:10px; padding:16px; background:var(--yd-chrome); }
.desk-billing-actions { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0; }
.desk-billing-dialog button:disabled { cursor:default; opacity:.6; }
.desk-billing-dialog button:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
@media(max-width:540px) {
  dialog.desk-billing-dialog { padding:0; margin:auto; inset:0; max-height:calc(100dvh - 20px); }
  .desk-billing-header { padding:20px 18px; margin:0; top:auto; min-height:136px; align-items:center; }
  .desk-billing-content { padding:18px; }
  .desk-billing-dialog > .desk-billing-notice { padding:0 18px 18px; }
  .desk-billing-offer-free .desk-billing-features { columns:1; }
  .desk-billing-sharing { font-size:23px; }
  .desk-billing-header .desk-billing-logo .brand-mark-word { font-size:26px; }
}

.desk-billing-header .desk-billing-logo .brand-mark-word { font-size:28px; }