/* Service gallery / approved concept 04. Scoped presentation; no payment logic. */
body.plan-gallery-active {
    --pg-bg: #111111;
    --pg-panel: #20201f;
    --pg-panel-top: #252524;
    --pg-panel-bottom: #1e1e1d;
    --pg-text: #f0eee7;
    --pg-muted: #a8a7a6;
    --pg-line: #363635;
    --pg-border: #4a4947;
    --pg-gold: #dcc28c;
    --pg-gold-border: #8b7b4d;
    --pg-button-start: #e6ce9a;
    --pg-button-end: #c6a36a;
    --pg-on-gold: #28281c;
    background: #111111;
    background: var(--pg-bg);
    color: #f0eee7;
    color: var(--pg-text);
}
body.plan-gallery-active .xl-starfield { display: none !important; }
#xl-plan-gallery, #xl-plan-gallery * { box-sizing: border-box; }
#xl-plan-gallery {
    display: block;
    position: relative;
    width: 100%; max-width: none; height: auto; min-height: 0;
    margin: 0; padding: 0; overflow: hidden;
    background: #111111; background: var(--pg-bg);
    color: #f0eee7; color: var(--pg-text);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 15px; line-height: 1.65;
}
#xl-plan-gallery h1, #xl-plan-gallery h2, #xl-plan-gallery h3,
#xl-plan-gallery p, #xl-plan-gallery ul { margin: 0; padding: 0; }
#xl-plan-gallery h1, #xl-plan-gallery h2, #xl-plan-gallery h3 { font-family: inherit; }
#xl-plan-gallery a { text-decoration: none; }
#xl-plan-gallery .pg-wrap { width: calc(100% - 64px); max-width: 1080px; margin: 0 auto; }
#xl-plan-gallery .pg-hero { position: relative; overflow: hidden; background: var(--pg-bg); }
#xl-plan-gallery .pg-hero-inner { position: relative; display: flex; align-items: center; min-height: 410px; }
#xl-plan-gallery .pg-hero-copy { position: relative; z-index: 2; width: 53%; padding: 38px 0; }
#xl-plan-gallery .pg-title { color: var(--pg-text); font-size: 46px; line-height: 1.4; letter-spacing: -.04em; font-weight: 500; text-shadow: none; }
#xl-plan-gallery .pg-title > span { display: block; }
#xl-plan-gallery .pg-title .pg-gold { color: #dcc28c; color: var(--pg-gold); }
#xl-plan-gallery .pg-title--batch { font-size: 37px; }
#xl-plan-gallery .pg-description { color: var(--pg-muted); margin-top: 24px; font-size: 15px; line-height: 1.9; max-width: 400px; }
#xl-plan-gallery .pg-hero-art { position: absolute; width: 760px; right: -170px; bottom: 0; pointer-events: none; }
#xl-plan-gallery .pg-hero-art img { display: block; width: 100%; max-width: none; height: auto; mix-blend-mode: lighten; }
#xl-plan-gallery .pg-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pg-bg) 0%, transparent 18%, transparent 90%, var(--pg-bg) 100%); }
#xl-plan-gallery .pg-group { position: relative; margin: 0; padding: 0; }
#xl-plan-gallery .pg-group--local { background: #20201f; background: var(--pg-panel); border-top: 1px solid var(--pg-line); border-bottom: 1px solid var(--pg-line); }
#xl-plan-gallery .pg-group--credits { padding: 40px 0 0; }
#xl-plan-gallery .pg-group-heading { margin-bottom: 24px; text-align: center; }
#xl-plan-gallery .pg-group-heading h2 { font-size: 25px; line-height: 1.5; font-weight: 500; color: var(--pg-text); letter-spacing: .01em; }
#xl-plan-gallery .pg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: 100%; }
#xl-plan-gallery .pg-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    padding: 29px 22px 23px; border: 1px solid #4a4947; border-color: var(--pg-border); border-radius: 12px;
    background: #20201f; background: linear-gradient(135deg, var(--pg-panel-top), var(--pg-panel-bottom));
    color: var(--pg-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color .2s, box-shadow .2s; overflow: visible;
}
#xl-plan-gallery .pg-card::before, #xl-plan-gallery .pg-card::after { display: none; }
#xl-plan-gallery .pg-card:hover { border-color: #72706b; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
#xl-plan-gallery .pg-card--annual { border-color: var(--pg-gold-border); box-shadow: inset 0 0 0 1px rgba(220,194,140,.16), 0 10px 30px rgba(0,0,0,.1); }
#xl-plan-gallery .pg-card--annual:hover { border-color: var(--pg-gold); }
#xl-plan-gallery .pg-card-heading { text-align: center; }
#xl-plan-gallery .membership-card-title { color: var(--pg-text); font-size: 21px; line-height: 1.5; font-weight: 500; text-shadow: none; }
#xl-plan-gallery .membership-price-row { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0; border: 0; }
#xl-plan-gallery .pg-current-price { display: inline-flex; align-items: baseline; gap: 3px; color: var(--pg-gold); white-space: nowrap; }
#xl-plan-gallery .membership-price-unit { font-size: 20px; font-weight: 500; color: inherit; }
#xl-plan-gallery .membership-price { color: inherit; font-size: 42px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; text-shadow: none; }
#xl-plan-gallery .membership-old-price { color: #8d8c89; font-size: 15px; font-weight: 400; text-decoration: line-through; white-space: nowrap; }
#xl-plan-gallery .pg-entitlements { margin-top: 16px; text-align: center; }
#xl-plan-gallery .pg-quota { color: var(--pg-gold); font-size: 22px; font-weight: 500; line-height: 1.5; }
#xl-plan-gallery .pg-validity { color: var(--pg-muted); font-size: 14px; line-height: 1.7; margin-top: 2px; }
#xl-plan-gallery .membership-benefit-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin-top: 13px; }
#xl-plan-gallery .membership-benefit-list li { display: inline; padding: 0; margin: 0; color: var(--pg-muted); font-size: 13px; line-height: 1.8; font-weight: 400; overflow-wrap: anywhere; }
#xl-plan-gallery .membership-benefit-list li + li::before { content: "·"; display: inline; padding: 0 5px; color: #777670; }
#xl-plan-gallery .membership-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; margin-top: auto; }
#xl-plan-gallery .membership-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 42px; padding: 9px 14px;
    border: 1px solid #4b4a48; border-color: var(--pg-border); border-radius: 7px;
    background: #262625; color: #d6d5d3; color: var(--pg-text);
    font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center;
    box-shadow: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; touch-action: manipulation;
}
#xl-plan-gallery .membership-btn::before, #xl-plan-gallery .membership-btn::after { display: none; }
#xl-plan-gallery .membership-btn:hover { background: #333231; border-color: #797874; color: var(--pg-text); }
#xl-plan-gallery .pg-card--annual .membership-btn--primary,
#xl-plan-gallery .pg-card--local .membership-btn--primary {
    background: #dcc28c; background: linear-gradient(110deg, var(--pg-button-start), var(--pg-button-end));
    color: #28281c; color: var(--pg-on-gold); border-color: #e1c792; box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
#xl-plan-gallery .pg-card--annual .membership-btn--primary:hover,
#xl-plan-gallery .pg-card--local .membership-btn--primary:hover { background: #ead5a6; background: var(--pg-button-start); border-color: var(--pg-gold); }
#xl-plan-gallery .membership-btn:active { transform: translateY(1px); }
#xl-plan-gallery .membership-btn:focus-visible { outline: 2px solid #e1c488; outline-color: var(--pg-gold); outline-offset: 4px; }
#xl-plan-gallery .membership-btn--ghost { min-height: 35px; background: transparent; color: var(--pg-muted); font-size: 13px; }
#xl-plan-gallery .membership-btn--ghost em { font-style: normal; color: var(--pg-gold); }
#xl-plan-gallery [data-loading="1"], #xl-plan-gallery [aria-disabled="true"] { opacity: .55; cursor: wait; pointer-events: none; }
#xl-plan-gallery .pg-card-notices { position: absolute; top: -11px; right: 16px; }
#xl-plan-gallery .membership-ribbon,
#xl-plan-gallery .membership-activity-strip { position: static; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; width: auto; min-height: 22px; height: auto; padding: 2px 9px; margin: 0; border: 1px solid var(--pg-border); border-radius: 4px; background: var(--pg-panel); color: var(--pg-muted); font-size: 11px; font-weight: 400; line-height: 1.5; box-shadow: none; transform: none; animation: none; }
#xl-plan-gallery .membership-activity-label { font-size: inherit; line-height: inherit; font-weight: 400; letter-spacing: normal; }
#xl-plan-gallery .membership-activity-time { color: var(--pg-gold); font-size: inherit; font-weight: 500; }
#xl-plan-gallery .membership-card--activity { box-shadow: none; }
#xl-plan-gallery .pg-group--local .pg-grid { display: block; }
#xl-plan-gallery .pg-card--local {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 26px;
    padding: 22px 0 18px; border: 0; border-radius: 0;
    background: none; box-shadow: none; color: var(--pg-text);
}
#xl-plan-gallery .pg-card--local:hover { box-shadow: none; }
#xl-plan-gallery .pg-card--local .pg-card-heading { grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 17px; text-align: left; }
#xl-plan-gallery .pg-eyebrow { display: block; flex: 0 0 100%; color: var(--pg-gold); font-size: 10px; letter-spacing: .14em; line-height: 1.4; }
#xl-plan-gallery .pg-card--local .membership-card-title { font-size: 27px; line-height: 1.25; }
#xl-plan-gallery .pg-card--local .membership-price-row { display: inline-flex; margin: 0; justify-content: flex-start; }
#xl-plan-gallery .pg-card--local .membership-price { font-size: 31px; }
#xl-plan-gallery .pg-card--local .membership-price-unit { font-size: 20px; }
#xl-plan-gallery .pg-card--local .pg-entitlements { grid-column: 1; grid-row: 2; margin: 0; text-align: left; }
#xl-plan-gallery .pg-card--local .membership-benefit-list { justify-content: flex-start; margin: 0; }
#xl-plan-gallery .pg-card--local .membership-benefit-list li { font-size: 14px; }
#xl-plan-gallery .pg-card--local .membership-benefit-list li + li::before { content: "/"; padding: 0 6px; }
#xl-plan-gallery .pg-card--local .membership-actions { grid-column: 2; grid-row: 1 / span 3; justify-content: center; align-self: center; width: 144px; margin: 0; padding: 0; }
#xl-plan-gallery .pg-card--local .pg-card-notices { position: static; grid-column: 1; grid-row: 3; }
#xl-plan-gallery .pg-card--local .membership-activity-strip { padding: 0; border: 0; min-height: 17px; background: transparent; font-size: 10px; }
#xl-plan-gallery .pg-closing { margin-top: 49px; padding: 22px 0 30px; border-top: 1px solid var(--pg-line); text-align: center; color: #888783; font-size: 13px; letter-spacing: .06em; }
#xl-plan-gallery .pg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Keep payment DOM/JS unchanged; only harmonize its existing shell with this page. */
body.plan-gallery-active .membership-pay-mask { background: rgba(10,10,10,.8); color: var(--pg-text); }
body.plan-gallery-active .membership-pay-dialog { background: var(--pg-panel); color: var(--pg-text); border-color: var(--pg-border); box-shadow: 0 24px 64px rgba(0,0,0,.48); }
body.plan-gallery-active .membership-pay-head { border-color: var(--pg-line); }
body.plan-gallery-active .membership-pay-head h2 { color: var(--pg-text); }
body.plan-gallery-active .membership-pay-body { background: var(--pg-bg); }
body.plan-gallery-active .membership-pay-channel-switch { background: var(--pg-panel); border-color: var(--pg-border); }
body.plan-gallery-active .membership-pay-channel, body.plan-gallery-active .membership-pay-close { background: #262625; color: var(--pg-text); border-color: var(--pg-border); }
body.plan-gallery-active .membership-pay-channel.is-active { background: var(--pg-gold); color: var(--pg-on-gold); }
body.plan-gallery-active .membership-pay-channel:hover, body.plan-gallery-active .membership-pay-close:hover { background: #3a3831; color: var(--pg-text); }
body.plan-gallery-active .membership-pay-channel:focus-visible, body.plan-gallery-active .membership-pay-close:focus-visible { outline: 2px solid var(--pg-gold); outline-offset: 2px; }
body.plan-gallery-active .membership-pay-eyebrow, body.plan-gallery-active .membership-pay-expiry { color: var(--pg-gold); }
body.plan-gallery-active .membership-pay-head p, body.plan-gallery-active .membership-pay-channel-status, body.plan-gallery-active .membership-pay-tip { color: var(--pg-muted); }
body.plan-gallery-active .membership-pay-tip.is-error, body.plan-gallery-active .membership-pay-expiry.is-expired { color: #eea2ab; }
/* Preserve the site's other theme choices instead of deleting the theme switcher. */
html[data-theme-preset]:not([data-theme-preset="black-gold-theme"]) body.plan-gallery-active,
html[data-theme="light"] body.plan-gallery-active {
    --pg-bg: var(--xl-theme-bg, #111111);
    --pg-panel: var(--xl-theme-panel, #20201f);
    --pg-panel-top: var(--xl-theme-panel, #252524);
    --pg-panel-bottom: var(--xl-theme-bg, #1e1e1d);
    --pg-text: var(--xl-theme-fg, #f0eee7);
    --pg-muted: var(--xl-theme-muted, #a8a7a6);
    --pg-line: var(--xl-theme-border, #363635);
    --pg-border: var(--xl-theme-border, #4a4947);
    --pg-gold: var(--xl-theme-accent, #dcc28c);
    --pg-gold-border: var(--xl-theme-accent, #8b7b4d);
    --pg-button-start: var(--xl-theme-accent, #e6ce9a);
    --pg-button-end: var(--xl-theme-accent-2, #c6a36a);
    --pg-on-gold: var(--xl-theme-on-accent, #28281c);
}
@media (prefers-reduced-motion: reduce) {
    #xl-plan-gallery *, #xl-plan-gallery *::before, #xl-plan-gallery *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}