.credits-page { background: #f4f0e9; }
.credits-page .app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.credits-sidebar { position: relative; }
.sidebar-kicker { margin: 47px 10px -11px; color: #8f8980; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.preview-sidebar-note { display: flex; gap: 9px; align-items: flex-start; margin: 0 8px 12px; padding: 13px 0; border-top: 1px solid #45423d; color: #aba59a; font-size: 10px; line-height: 1.5; }
.preview-sidebar-dot { flex: none; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: var(--orange); }
.credits-main { min-width: 0; }
.credits-header { position: sticky; grid-column: auto; }
.credits-header .header-actions { gap: 16px; }
.language-picker { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 700; }
.language-picker select { min-height: 34px; padding: 0 25px 0 9px; border: 1px solid var(--platinum-300); border-radius: 4px; background: #fffefa; color: var(--ink); font-size: 11px; }
.credits-content { width: min(1300px, 100%); margin: 0 auto; padding: 0 clamp(24px, 4.8vw, 76px); }
.credits-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); gap: clamp(35px, 6vw, 110px); align-items: center; padding: clamp(60px, 7vw, 105px) 0 62px; }
.hero-copy .eyebrow, .section-heading .eyebrow { margin: 0 0 18px; color: var(--orange-deep); font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.hero-copy h1 { max-width: 670px; margin: 0; color: #24211d; font: 500 clamp(43px, 5vw, 76px)/1.03 Georgia, "Noto Serif SC", serif; letter-spacing: -.045em; }
.hero-copy > p:not(.eyebrow) { max-width: 570px; margin: 24px 0 0; color: #666056; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.75; }
.text-link { display: inline-flex; gap: 24px; align-items: center; margin-top: 30px; padding-bottom: 7px; border-bottom: 1px solid var(--orange-deep); color: #a44219; font-size: 12px; font-weight: 800; text-decoration: none; }
.text-link:hover { gap: 30px; }
.wallet-card { position: relative; overflow: hidden; min-height: 306px; padding: 29px; border: 1px solid #4a443d; border-radius: 7px; background: radial-gradient(circle at 88% 0, rgba(225, 107, 48, .2), transparent 39%), linear-gradient(145deg, #292724, #171615); color: #f6f0e7; box-shadow: 16px 24px 42px rgba(43, 37, 31, .19); }
.wallet-card::before { position: absolute; right: -42px; bottom: -105px; width: 270px; height: 270px; border: 1px solid rgba(244, 237, 227, .12); border-radius: 50%; content: ""; }
.wallet-card::after { position: absolute; right: 12px; bottom: -60px; width: 178px; height: 178px; border: 1px solid rgba(244, 237, 227, .08); border-radius: 50%; content: ""; }
.wallet-top { display: flex; align-items: center; justify-content: space-between; color: #d9cdc0; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.wallet-symbol { color: #eb7545; font: 42px/1 Georgia, serif; }
.wallet-amount { position: relative; z-index: 1; margin: 31px 0 18px; font: 400 clamp(56px, 5vw, 82px)/1 Georgia, serif; }
.wallet-amount small { color: #c7bdb1; font: 500 12px/1.3 "PingFang SC", "Microsoft YaHei", sans-serif; }
.wallet-rule { height: 1px; background: rgba(246, 240, 231, .25); }
.wallet-card p { max-width: 230px; margin: 17px 0 0; color: #aaa39a; font-size: 11px; line-height: 1.55; }
.wallet-stamp { position: absolute; right: 27px; bottom: 28px; padding: 7px 9px; border: 1px solid rgba(239, 113, 65, .65); color: #f0a17e; font-size: 8px; font-weight: 800; letter-spacing: .12em; transform: rotate(-5deg); }
.notice-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid #e2d0bd; border-left: 3px solid var(--orange); background: #fbf5ed; color: #5f5144; }
.notice-bar > span { color: var(--orange); font-size: 7px; }
.notice-bar strong { flex: none; font-size: 11px; }
.notice-bar p { margin: 0; font-size: 11px; line-height: 1.5; }
.account-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .55fr); gap: 18px 36px; margin-top: 24px; padding: 27px; border: 1px solid #d9d0c4; border-left: 3px solid #b65b32; background: #fffdf9; }
.account-plan .eyebrow { margin: 0 0 8px; color: #ad5028; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.account-plan h2 { margin: 0; color: #28231f; font: 500 clamp(22px, 2.4vw, 31px)/1.14 Georgia, serif; }
.account-plan p { margin: 9px 0 0; color: #736b61; font-size: 11px; line-height: 1.55; }
.account-plan-state { display: grid; align-content: center; gap: 5px; padding-left: 20px; border-left: 1px solid #e1d8ce; }
.account-plan-state strong { color: #332720; font: 500 27px/1.1 Georgia, serif; }
.account-plan-state span, .account-plan-state a { color: #756b61; font-size: 11px; line-height: 1.5; }
.account-plan-state a { color: #a84620; font-weight: 800; }
.account-plan-features { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; }
.account-plan-features li { padding: 7px 10px; border: 1px solid #e3d6c8; border-radius: 2px; color: #766b62; font-size: 10px; }
.account-plan-features li[data-enabled="true"] { border-color: #c7dbce; background: #f2f8f3; color: #326346; }
.account-plan .account-plan-footnote { grid-column: 1 / -1; margin: 0; font-size: 10px; }
.plans-section { padding: 100px 0 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 27px; }
.section-heading .eyebrow { margin-bottom: 10px; }
.section-heading h2 { margin: 0; color: #24211d; font: 500 clamp(31px, 3vw, 44px)/1.1 Georgia, "Noto Serif SC", serif; letter-spacing: -.03em; }
.section-heading > p { max-width: 410px; margin: 0 0 3px; color: #746d64; font-size: 12px; line-height: 1.65; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 15px; }
.credits-page [hidden] { display: none !important; }
.plan-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #d8cec1; border-radius: 8px; background: #fcfaf5; box-shadow: 0 14px 38px rgba(48, 35, 26, .05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.plan-card:hover { transform: translateY(-5px); box-shadow: 0 24px 45px rgba(48, 35, 26, .11); }
.plan-card.featured { border-color: #b75025; background: #fff9f2; box-shadow: 0 20px 46px rgba(155, 69, 26, .12); }
.plan-card[data-plan-card="stelar"] { border-color: #48403a; background: #24211f; color: #f6eee3; box-shadow: 0 20px 48px rgba(28, 24, 22, .18); }
.plan-card.is-active { outline: 2px solid #e66a33; outline-offset: 3px; }
.plan-art { position: relative; isolation: isolate; height: clamp(136px, 13vw, 190px); overflow: hidden; border-bottom: 1px solid rgba(54, 42, 34, .12); background: radial-gradient(circle at 64% 72%, #e8e0d6, transparent 34%), repeating-linear-gradient(90deg, transparent 0 29px, rgba(97, 76, 59, .04) 30px), #edeae3; }
.plan-art::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(255,255,255,.36), transparent 60%); content: ""; }
.plan-art-number { position: absolute; left: 18px; bottom: -36px; color: rgba(95, 77, 59, .1); font: 500 clamp(136px, 14vw, 205px)/1 Georgia, serif; letter-spacing: -.09em; }
.plan-orbit { position: absolute; top: -88px; right: -42px; width: 280px; height: 280px; border: 1px solid rgba(113, 91, 75, .31); border-radius: 50%; transform: rotate(-22deg) scaleY(.78); }
.plan-orbit::before, .plan-orbit::after { position: absolute; inset: 25px; border: 1px solid rgba(113, 91, 75, .2); border-radius: 50%; content: ""; }
.plan-orbit::after { inset: 58px; }
.plan-core { position: absolute; top: 36px; right: 74px; width: 84px; height: 84px; border: 1px solid rgba(111, 85, 62, .22); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffcf6, #cfc6b7 64%, #a99e8c); box-shadow: 13px 18px 28px rgba(89, 68, 49, .15); }
.plan-card.featured .plan-art { background: radial-gradient(circle at 75% 58%, rgba(255, 225, 179, .85), transparent 36%), linear-gradient(135deg, #ce5930, #f19457 57%, #e46a34); }
.plan-card.featured .plan-art-number { color: rgba(255, 246, 225, .22); }
.plan-card.featured .plan-orbit { border-color: rgba(255, 239, 217, .56); transform: rotate(-28deg) scaleY(.66); }
.plan-card.featured .plan-orbit::before, .plan-card.featured .plan-orbit::after { border-color: rgba(255, 239, 217, .35); }
.plan-card.featured .plan-core { width: 102px; height: 102px; top: 29px; right: 62px; border-color: rgba(255, 234, 190, .65); background: radial-gradient(circle at 34% 28%, #ffe6b2, #f29a55 46%, #b64422 85%); box-shadow: 18px 20px 34px rgba(104, 37, 18, .3), inset -9px -12px 16px rgba(109, 32, 17, .18); }
.plan-card[data-plan-card="stelar"] .plan-art { border-color: rgba(255,255,255,.1); background: radial-gradient(circle at 78% 53%, rgba(244, 125, 62, .18), transparent 26%), radial-gradient(circle at 16% 25%, rgba(252, 239, 219, .7) 0 1px, transparent 2px), radial-gradient(circle at 48% 56%, rgba(252, 239, 219, .5) 0 1px, transparent 2px), linear-gradient(150deg, #272727, #100f10); }
.plan-card[data-plan-card="stelar"] .plan-art-number { color: rgba(241, 195, 145, .15); }
.plan-card[data-plan-card="stelar"] .plan-orbit { border-color: rgba(242, 185, 137, .55); transform: rotate(28deg) scaleY(.58); }
.plan-card[data-plan-card="stelar"] .plan-orbit::before, .plan-card[data-plan-card="stelar"] .plan-orbit::after { border-color: rgba(242, 185, 137, .25); }
.plan-card[data-plan-card="stelar"] .plan-core { top: 45px; right: 76px; width: 66px; height: 66px; border-color: #cfa483; background: radial-gradient(circle at 38% 27%, #fbe0b8, #a96642 55%, #302424 86%); box-shadow: 0 0 32px rgba(226, 129, 67, .24); }
.plan-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: clamp(19px, 2.1vw, 27px); }
.plan-index { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #b64c23; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.plan-index span:last-child { color: #897d72; font-size: 8px; text-align: right; }
.plan-card[data-plan-card="stelar"] .plan-index { color: #e99564; }
.plan-card[data-plan-card="stelar"] .plan-index span:last-child { color: #c7b6a7; }
.plan-card h3 { margin: 24px 0 5px; font: 500 clamp(29px, 3vw, 42px)/1.05 Georgia, "Noto Serif SC", serif; letter-spacing: -.045em; }
.plan-quota { display: flex; align-items: baseline; gap: 9px; margin: 5px 0 10px; color: #b94f26; }
.plan-quota strong { font: 500 32px/1 Georgia, serif; letter-spacing: -.05em; }
.plan-quota span { font-size: 11px; font-weight: 800; }
.plan-card[data-plan-card="stelar"] .plan-quota { color: #e99d69; }
.plan-card .plan-desc { min-height: 38px; margin: 0 0 16px; color: #777065; font-size: 11px; line-height: 1.55; }
.plan-card .plan-price { margin: 0; padding: 18px 0; border-top: 1px solid #ddd2c5; color: #28211c; font: 500 34px/1 Georgia, serif; letter-spacing: -.04em; }
.plan-price small { color: #85776b; font: 600 11px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
.plan-card ul { display: grid; gap: 11px; min-height: 135px; margin: 0 0 18px; padding: 15px 0 0 19px; border-top: 1px solid #e5dcd1; color: #5f554c; font-size: 11px; line-height: 1.5; }
.plan-card li::marker { color: #d96530; }
.plan-card[data-plan-card="stelar"] .plan-desc, .plan-card[data-plan-card="stelar"] ul { color: #cbc0b6; }
.plan-card[data-plan-card="stelar"] .plan-price { border-color: #4a403a; color: #fff5e9; }
.plan-card[data-plan-card="stelar"] .plan-price small { color: #c0ae9f; }
.plan-card[data-plan-card="stelar"] ul { border-color: #4a403a; }
.plan-card button { width: 100%; min-height: 46px; margin-top: auto; border: 1px solid #b55c39; border-radius: 3px; background: transparent; color: #a9421a; font-size: 11px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.plan-card.featured button, .plan-card[data-plan-card="stelar"] button { border-color: #e96730; background: #e96730; color: #fff; }
.plan-card button:hover, .plan-card button:focus-visible { transform: translateY(-2px); background: #b54619; border-color: #b54619; color: #fff; }
.plan-card button:focus-visible { outline: 2px solid #e66a33; outline-offset: 2px; }
.simulator-section { padding-top: 100px; scroll-margin-top: 100px; }
.demo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; border: 1px solid #d9d0c4; background: #fbf8f2; }
.demo-toolbar > div:first-child { display: grid; gap: 5px; }
.demo-toolbar span, .balance-tile > span, .flow-heading > span, .reservation-box span, .demo-aside > span { color: #a44a23; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.demo-toolbar strong { color: #28231f; font: 500 20px/1.2 Georgia, serif; }
.demo-toolbar-actions, .flow-actions, .outcome-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.demo-toolbar button, .demo-workspace button { min-height: 37px; padding: 8px 13px; border: 1px solid #cfc3b7; border-radius: 3px; background: #fffdf9; color: #5c483c; font-size: 11px; font-weight: 700; cursor: pointer; }
.demo-toolbar button:hover:not(:disabled), .demo-workspace button:hover:not(:disabled) { border-color: var(--orange); color: #a34219; }
.demo-workspace button:disabled { opacity: .48; cursor: not-allowed; }
.demo-workspace .demo-primary { border-color: #e4622c; background: #e4622c; color: #fff; }
.demo-workspace .demo-primary:hover:not(:disabled) { background: #be4c1d; color: #fff; }
.balance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.balance-tile { display: flex; flex-direction: column; min-height: 138px; padding: 18px; border: 1px solid #ded5c8; background: #fffdf9; }
.balance-tile strong { margin: 18px 0 7px; color: #25211d; font: 500 clamp(23px, 2.5vw, 35px)/1 Georgia, serif; }
.balance-tile small { color: #8b8176; font-size: 10px; line-height: 1.5; }
.demo-workspace { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); gap: 12px; }
.demo-flow, .demo-aside { min-width: 0; padding: 24px; border: 1px solid #ded5c8; background: #fffdf9; }
.flow-heading { display: grid; gap: 9px; }
.flow-heading strong { color: #26211d; font: 500 26px/1.2 Georgia, serif; }
.flow-explanation { max-width: 580px; margin: 13px 0 22px; color: #776c61; font-size: 12px; line-height: 1.65; }
.demo-directions { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e1d8cc; }
.demo-directions p { margin: 0 0 12px; color: #544b43; font-size: 11px; font-weight: 700; }
.direction-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.demo-workspace .demo-choice { border-radius: 20px; }
.demo-workspace .demo-choice[aria-pressed="true"] { border-color: #dc5c26; background: #fff0e7; color: #a13c14; }
.reservation-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px; margin-top: 24px; padding: 17px; border: 1px solid #e2ccbb; background: #fcf4ec; }
.reservation-box > div:first-child { display: grid; gap: 8px; }
.reservation-box strong { color: #3e3028; font: 500 22px/1 Georgia, serif; }
.demo-feedback { min-height: 18px; margin: 15px 0 0; color: #557463; font-size: 11px; line-height: 1.5; }
.demo-feedback[data-kind="error"] { color: #b6461d; }
.demo-aside { background: #f7f0e8; }
.demo-history { display: grid; gap: 10px; min-height: 80px; margin: 19px 0 24px; padding-left: 19px; color: #5d5148; font-size: 11px; line-height: 1.5; }
.demo-history li::marker { color: var(--orange); font-weight: 800; }
.demo-aside-actions { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid #dcd0c1; }
.demo-aside-actions button { width: 100%; text-align: left; }
.demo-aside > p { margin: 20px 0 0; color: #85786c; font-size: 10px; line-height: 1.6; }
.credits-footer { display: flex; align-items: center; gap: 18px; margin-top: 100px; padding: 24px 0 40px; border-top: 1px solid #d7cfc2; color: #857a6e; font-size: 10px; }
.credits-footer > span { color: #3d3730; font-weight: 800; letter-spacing: .1em; }
.credits-footer p { flex: 1; margin: 0; }
.credits-footer a { color: #a4431b; font-weight: 800; text-decoration: none; }
@media (max-width: 1250px) { .credits-hero { gap: 35px; } .plan-grid { gap: 10px; } }
@media (max-width: 1040px) { .credits-page .app-shell { display: block; } .credits-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(284px, 88vw); min-height: 100vh; overflow-y: auto; box-shadow: 18px 0 42px rgba(0, 0, 0, .28); transform: translateX(-104%); transition: transform .22s ease; } .credits-page.nav-open .credits-sidebar { transform: translateX(0); } .credits-page.nav-open .nav-scrim { display: block; position: fixed; z-index: 35; inset: 0; border: 0; background: rgba(20, 19, 17, .45); } .credits-header .mobile-nav-toggle { display: inline-flex; } }
@media (max-width: 830px) { .credits-hero { grid-template-columns: 1fr; padding-top: 55px; } .wallet-card { width: min(440px, 100%); } .plan-grid { grid-template-columns: 1fr; } .plan-art { height: 170px; } .plan-card ul { min-height: 0; } .plan-card .plan-desc { min-height: 0; } .section-heading { align-items: start; flex-direction: column; gap: 12px; } .plans-section, .simulator-section { padding-top: 74px; } .demo-workspace { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .credits-header { padding: 0 18px; } .credits-header .crumb { display: none; } .credits-header .header-actions { width: 100%; justify-content: space-between; } .credits-content { padding: 0 19px; } .hero-copy h1 { font-size: clamp(40px, 11vw, 57px); } .notice-bar { align-items: start; flex-wrap: wrap; gap: 7px; } .notice-bar p { flex-basis: 100%; padding-left: 16px; } .account-plan { grid-template-columns: 1fr; padding: 21px; } .account-plan-state { padding: 0; border: 0; } .balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demo-toolbar { align-items: start; flex-direction: column; } .demo-toolbar-actions { width: 100%; } .credits-footer { flex-wrap: wrap; margin-top: 65px; } .credits-footer p { flex-basis: 100%; order: 2; } }
@media (prefers-reduced-motion: reduce) { .credits-sidebar, .text-link, .plan-card, .plan-card button { transition: none; } .plan-card:hover, .plan-card button:hover { transform: none; } }