/* Shared decorative artwork. Controls, copy and data sit above this layer. */
.art-surface { position: relative; isolation: isolate; background: #0d1013; }
.background-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; border-radius: inherit; }
.background-art picture, .background-art img { display: block; width: 100%; height: 100%; }
.background-art img { object-fit: cover; object-position: var(--art-position, center 70%); opacity: var(--art-opacity, .72); }
.background-art::after { content: ''; position: absolute; inset: 0; background: var(--art-overlay, linear-gradient(90deg, #0d101370, #0d101310 75%)); }
.art-surface > :not(.background-art) { position: relative; z-index: 1; }

/* Pricing keeps artwork behind the introduction, away from rate tables. */
body.home-gold .page-head.art-surface { background: #0d1013; --art-opacity: .68; --art-position: center 65%; --art-overlay: linear-gradient(90deg, #0d1013bd, #0d101380 48%, #0d101310), linear-gradient(0deg, #0d1013, transparent 35%); }
body.home-gold .page-head.art-surface .shell { padding-block: 4px; }

/* Dark editorial introduction; the reference itself remains a light reading surface. */
.doc-table-scroll { width: 100%; overflow-x: auto; margin-top: 16px; }
.doc .doc-table-scroll table { margin-top: 0; min-width: 480px; }
.doc .doc-intro { margin: -48px -24px 36px; padding: 52px 32px 46px; border-bottom: 1px solid #434033; --art-opacity: .62; --art-position: center 60%; --art-overlay: linear-gradient(90deg, #0d1013c9, #0d101380 60%, #0d101340); }
.doc .doc-intro h1 { color: #f5f3ec; font-size: clamp(1.9rem, 4vw, 2.65rem); letter-spacing: -.045em; line-height: 1.16; max-width: 24ch; }
.doc .doc-intro p { color: #b1b8c2; font-size: .92rem; line-height: 1.85; max-width: 62ch; }
.doc .doc-intro .section-eyebrow { color: #ddc28d; font-size: .65rem; letter-spacing: .1em; margin: 0 0 18px; }
.doc .doc-intro a { color: #edcb82; }

/* Auth artwork is confined to the welcome panel. */
.auth-aside.art-surface { background: #0d1013; --art-opacity: .8; --art-position: 10% center; --art-overlay: linear-gradient(180deg, #0d101328, #0d101370 40%, #0d101340); }
.auth-aside.art-surface::before { content: none; }
.auth-aside.art-surface .wordmark { color: #f5f3ec; font-size: 1.3rem; letter-spacing: -.045em; }
.auth-aside.art-surface .glyph { background: #edcb82; color: #211c12; width: 36px; height: 36px; }
.auth-aside.art-surface .glyph svg { width: 20px; height: 20px; }
.auth-aside.art-surface h2 { color: #f3e8cc; }
.auth-aside.art-surface p { color: #c2c3be; }
.auth-aside.art-surface .receipt { background: #15191ee8; border-color: #e3c17b38; backdrop-filter: blur(12px); }
.auth-aside.art-surface .receipt div { border-color: #ffffff0d; }
.auth-aside.art-surface .receipt div:last-child { background: #edcb8214; }
.auth-aside.art-surface .receipt div:last-child span:last-child { color: #edcb82; }
.auth-mobile-label { display: none; }
.auth-page .auth-main { background: #f6f6f2; }
.auth-page .btn:not(.btn-line):not(.btn-ghost) { color: #211c12; background: #edcb82; box-shadow: 0 3px 12px #9b773314; }
.auth-page .btn:not(.btn-line):not(.btn-ghost):hover { background: #e4bd6d; }
.auth-page .input:focus { border-color: #af8b44; box-shadow: 0 0 0 3px #d9b56b24; }

/* The error screen continues the same visual language. */
.notfound-page { background: #0d1013; }
.notfound.art-surface { min-height: calc(100vh - 76px); --art-opacity: .7; --art-overlay: linear-gradient(180deg, #0d101340, #0d1013a0 50%, #0d101330); }
.notfound-copy { max-width: 620px; }
.notfound.art-surface h1 { color: #f5f3ec; font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -.05em; }
.notfound.art-surface p { color: #adb4bf; }
.notfound.art-surface .section-eyebrow { color: #ddc28d; font-size: .68rem; margin-bottom: 18px; }
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.notfound.art-surface .btn { background: #edcb82; color: #211c12; box-shadow: none; }
.notfound.art-surface .btn:hover { background: #f4d694; }
.notfound.art-surface .btn-line { background: #0d101340; color: #f5f3ec; border-color: #7d725a; }
.notfound.art-surface .btn-line:hover { background: #edcb8210; }

/* Crops adapt to short banners and narrow welcome panels. */
@media (max-width: 860px) {
  .auth-page { grid-template-rows: auto minmax(0, 1fr); }
  .auth-page .auth-aside.art-surface { display: flex; min-height: 170px; padding: 26px 24px 30px; gap: 18px; --art-position: 35% 70%; --art-opacity: .76; --art-overlay: linear-gradient(90deg, #0d101380, #0d101330); }
  .auth-aside.art-surface > .auth-intro, .auth-aside.art-surface > .auth-networks { display: none; }
  .auth-aside.art-surface .auth-mobile-label { display: block; font-size: .79rem; margin: 0; }
  .auth-page .auth-main { padding-top: 28px; align-items: start; }
}
@media (max-width: 580px) {
  body.home-gold .page-head.art-surface { --art-position: 40% center; --art-opacity: .58; --art-overlay: linear-gradient(180deg, #0d1013a0, #0d101370 55%, #0d1013); }
  .doc .doc-intro { padding: 38px 24px; --art-opacity: .52; --art-position: 50% center; }
  .doc .doc-intro p { font-size: .85rem; }
  .notfound.art-surface { --art-position: 25% center; }
  .notfound-actions { flex-direction: column; align-items: stretch; }
}