body[data-page="pricing"] { background: #0c0c0f; }
.pricing-main { max-width: 1512px; padding: 44px 44px 72px; }
.plan-dialog-legal{margin:12px 0;color:#999;font-size:12px;line-height:1.6}.plan-dialog-legal a{color:#ddd;text-underline-offset:3px}
.pricing-hero { position: relative; display: flex; align-items: center; min-height: 272px; padding: 38px 44px; overflow: hidden; isolation: isolate; border: 1px solid #ffffff12; border-radius: 28px; background: radial-gradient(ellipse at 90% 20%, #ec277b14, transparent 65%), #131316; }
.pricing-hero-copy { position: relative; z-index: 1; max-width: 780px; }
.pricing-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; color: #c2b7c0; font-size: 11px; font-weight: 550; line-height: 1.5; letter-spacing: 1.6px; text-transform: uppercase; }
.pricing-eyebrow > span { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #f06aa9; box-shadow: 0 0 12px #f06aa930; }
.pricing-hero h1 { margin: 0; max-width: none; color: #f7f7f9; font-family: "Clap Sans", Arial, sans-serif; font-size: clamp(35px, 3.1vw, 46px); font-weight: 600; line-height: 1.16; letter-spacing: -2px; text-wrap: initial; }
.pricing-hero h1 > span { display: inline; color: #f071ac; }
.pricing-intro { max-width: 620px; margin: 19px 0 0; color: #a9a5ae; font-size: 14px; line-height: 1.8; }
.pricing-hero-art { position: absolute; right: 78px; top: 50%; width: 204px; height: 164px; transform: translateY(-50%); pointer-events: none; user-select: none; }
.pricing-art-card { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid #ffffff1a; border-radius: 24px; background: #1b1921; }
.pricing-art-card-back { transform: translate(24px, -15px) rotate(12deg); border-color: #ed70aa40; background: #34212c; }
.pricing-art-card-middle { transform: translate(9px, -6px) rotate(5deg); background: #25212a; }
.pricing-art-card-front { transform: rotate(-6deg); background: linear-gradient(135deg, #2a2630, #18171d); box-shadow: 0 24px 48px #0004, inset 0 1px 0 #ffffff09; }
.pricing-art-card-front img { display: block; opacity: .88; }
.pricing-plans { margin-top: 28px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pricing-card { --plan-accent: #fff; --plan-ink: #151518; --plan-button: #fff; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid #ffffff17; border-radius: 24px; background: #151518; box-shadow: 0 8px 28px #00000010; }
.pricing-card-pro { border-color: #77777f; background: linear-gradient(160deg, #222226, #19191d 45%); box-shadow: 0 0 0 1px #ffffff05, 0 16px 40px #0002; }
.pricing-card-ultra { --plan-accent: #e93489; --plan-ink: #fff; --plan-button: #ce165f; border-color: #b95b813d; background: radial-gradient(ellipse at 100% 0%, #cc246e18, transparent 42%), #171519; }
.pricing-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.pricing-card h3 { margin: 0; color: #f7f7f9; font-family: "Clap Sans", Arial, sans-serif; font-size: 27px; font-weight: 600; line-height: 1.25; letter-spacing: -.9px; }
.pricing-plan-category, .pricing-recommendation { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 5px 8px; border: 1px solid #ffffff12; border-radius: 7px; background: #ffffff05; color: #b9b9c2; font-size: 10px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.pricing-recommendation { border-color: #ffffff24; background: #ffffff0b; color: #f1f1f4; }
.pricing-recommendation > span { font-size: 12px; }
.pricing-card-ultra .pricing-plan-category { border-color: #ee6aa82b; background: #e94c9010; color: #f295be; }
.pricing-plan-description { min-height: 42px; margin: 10px 0 20px; color: #aaaab5; font-size: 13px; line-height: 1.65; }
.pricing-credit-panel { display: flex; flex-direction: column; min-height: 156px; padding: 17px 16px 12px; border: 1px solid #ffffff0c; border-radius: 14px; background: #ffffff03; }
.pricing-credit-amount { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px; row-gap: 3px; margin: 0; color: #f4f4f7; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.pricing-credit-amount > svg { align-self: center; flex-shrink: 0; margin-right: 2px; color: #a7a7b2; }
.pricing-credit-amount > span { white-space: nowrap; }
.pricing-credit-amount > span:last-child { color: #b3b3be; font-size: 11px; font-weight: 400; letter-spacing: -.1px; }
.pricing-credit-label { display: block; margin: 10px 0 0; color: #a7a7b3; font-size: 9px; font-weight: 450; line-height: 1.5; letter-spacing: .6px; }
.pricing-fixed-volume { display: flex; align-items: center; gap: 7px; min-height: 35px; margin-top: auto; padding-top: 12px; color: #b1b1bc; font-size: 11px; line-height: 1.5; }
.pricing-fixed-volume > span:first-child { flex-shrink: 0; color: #dadade; font-size: 12px; }
.pricing-slider-control { margin-top: auto; padding-top: 3px; }
.pricing-range { --range-fill: 0%; display: block; width: 100%; height: 28px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; border: 0; border-radius: 4px; }
.pricing-range[data-level="1"] { --range-fill: 50%; }
.pricing-range[data-level="2"] { --range-fill: 100%; }
.pricing-range::-webkit-slider-runnable-track { height: 3px; border: 0; border-radius: 8px; background: linear-gradient(90deg, #f1f1f4 0% var(--range-fill), #ffffff25 var(--range-fill) 100%); }
.pricing-range::-moz-range-track { height: 3px; border: 0; border-radius: 8px; background: #ffffff25; }
.pricing-range::-moz-range-progress { height: 3px; border-radius: 8px; background: #f1f1f4; }
.pricing-range::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6.5px; border: 3px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #ffffff0a, 0 2px 5px #0004; -webkit-appearance: none; }
.pricing-range::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #ffffff0a; }
.pricing-range:focus-visible { outline-offset: 3px; }
.pricing-range-ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.pricing-range-ticks button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 32px; padding: 3px 2px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #aaaab7; font-size: 11px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background 160ms ease, color 160ms ease; }
.pricing-range-ticks button > span { display: none; }
.pricing-range-ticks button[aria-pressed="true"] { border-color: #ffffff14; background: #ffffff0a; color: #fff; }
.pricing-range-ticks button:hover { background: #ffffff08; color: #fff; }
.pricing-range-ticks button:focus-visible { outline-offset: 2px; }
.pricing-card-purchase { margin-top: 22px; }
.pricing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-height: 50px; margin: 0 0 20px; font-variant-numeric: tabular-nums; }
.pricing-price-amount { display: inline-flex; align-items: baseline; gap: 3px; color: #fafafa; font-size: 43px; font-weight: 600; line-height: 1; letter-spacing: -1.8px; }
.pricing-currency { font-size: 30px; font-weight: 450; letter-spacing: -.8px; }
.pricing-price-period { color: #aaaab6; font-size: 13px; line-height: 1.5; }
.pricing-plan-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid transparent; border-radius: 10px; background: var(--plan-button, #fff); box-shadow: none; color: var(--plan-ink, #151518); font-size: 13px; font-weight: 600; line-height: 1.5; transition: background 180ms ease, border-color 180ms ease; }
.pricing-plan-button:hover { background: #e8e8ed; }
.pricing-card-ultra .pricing-plan-button:hover { background: #b81054; }
.pricing-plan-button:active { opacity: .9; }
.pricing-plan-button:focus-visible { outline-offset: 5px; }
.pricing-card-details { margin-top: 26px; padding-top: 22px; border-top: 1px solid #ffffff12; }
.pricing-details-label { display: flex; align-items: center; gap: 7px; margin: 0 0 15px; color: #efeff3; font-family: "Clap Sans", Arial, sans-serif; font-size: 10px; font-weight: 550; line-height: 1.5; letter-spacing: 1.2px; }
.pricing-details-label > span { color: #fff; font-size: 14px; letter-spacing: 0; }
.pricing-card-details ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.pricing-card-details li { display: flex; align-items: baseline; gap: 10px; color: #c6c6d0; font-size: 13px; line-height: 1.6; }
.pricing-card-details li > span { flex-shrink: 0; color: #e6e6ec; font-size: 11px; }
@media (max-width: 1200px) {
  .pricing-main { padding-inline: 30px; }
  .pricing-hero-copy { max-width: 710px; }
  .pricing-hero-art { right: 55px; width: 164px; height: 145px; }
  .pricing-grid { gap: 16px; }
  .pricing-card { padding: 24px 20px; }
  .pricing-plan-category, .pricing-recommendation { padding-inline: 6px; font-size: 9px; }
  .pricing-credit-panel { padding-inline: 12px; }
  .pricing-credit-amount { font-size: 20px; }
}
@media (max-width: 1100px) {
  .pricing-hero-art { display: none; }
}
@media (min-width: 801px) and (max-width: 1000px) {
  .pricing-card { padding-inline: 16px; }
  .pricing-card-heading { align-items: flex-start; flex-direction: column; gap: 9px; min-height: 74px; }
  .pricing-plan-description { min-height: 3.3em; }
  .pricing-credit-panel { padding-inline: 10px; }
  .pricing-credit-amount { column-gap: 4px; font-size: 19px; }
  .pricing-credit-amount > svg { display: none; }
  .pricing-credit-amount > span:last-child { font-size: 10px; }
  .pricing-credit-label { font-size: 8px; letter-spacing: .3px; }
  .pricing-fixed-volume { font-size: 10px; }
  .pricing-range-ticks button { font-size: 10px; }
}
@media (max-width: 800px) {
  .pricing-main { max-width: 620px; padding: 26px 24px 44px; }
  .pricing-hero { min-height: 0; padding: 32px 28px; border-radius: 24px; }
  .pricing-hero h1 { font-size: 35px; letter-spacing: -1.5px; }
  .pricing-intro { margin-top: 18px; font-size: 13px; line-height: 1.8; }
  .pricing-plans { margin-top: 24px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 18px; }
  .pricing-card { padding: 26px; }
  .pricing-plan-description { min-height: 0; margin-bottom: 22px; }
  .pricing-plan-category, .pricing-recommendation { padding-inline: 8px; font-size: 10px; }
  .pricing-credit-panel { min-height: 156px; padding-inline: 16px; }
  .pricing-credit-amount { font-size: 22px; }
  .pricing-range { height: 34px; }
  .pricing-range-ticks button { min-height: 36px; }
  .pricing-card-details li { font-size: 13px; }
}
@media (max-width: 420px) {
  .pricing-main { padding: 20px 14px 36px; }
  .pricing-hero { padding: 28px 22px; }
  .pricing-hero h1 { font-size: 30px; letter-spacing: -1.2px; }
  .pricing-eyebrow { font-size: 10px; letter-spacing: 1.2px; }
  .pricing-card { padding: 24px 20px; }
  .pricing-card h3 { font-size: 25px; }
  .pricing-plan-category, .pricing-recommendation { font-size: 9px; }
  .pricing-credit-panel { padding-inline: 12px; }
  .pricing-credit-amount { font-size: 20px; }
  .pricing-credit-amount > span:last-child { font-size: 10px; }
  .pricing-card-details li { font-size: 12px; }
}
.plan-dialog { position: fixed; width: min(490px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: auto; padding: 38px 32px 26px; border: 1px solid #404040; border-radius: 15px; background: #080808; color: #fff; }
.plan-dialog::backdrop { background: #000b; backdrop-filter: blur(10px); }
.plan-dialog[open] { animation: dialog-in 220ms ease both; }
.plan-dialog-close { position: absolute; right: 13px; top: 13px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #999; transition: color 180ms ease, background 180ms ease; }
.plan-dialog-close:hover { color: #fff; background: #202020; }
.plan-dialog-eyebrow { margin: 3px 0 24px; color: #999; font-size: 8px; letter-spacing: 1.5px; }
.plan-dialog h2 { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -1.2px; }
.plan-dialog #plan-dialog-description { margin: 14px 0 24px; color: #aaa; font-size: 12px; line-height: 1.7; }
.plan-dialog-summary { padding: 23px; border: 1px solid #303030; border-radius: 9px; background: #121212; }
.plan-dialog-summary > span { display: block; font-size: 13px; font-weight: 650; letter-spacing: .8px; }
.plan-dialog-summary p { margin: 13px 0 23px; color: #aaa; font-size: 12px; font-variant-numeric: tabular-nums; }
.plan-dialog-summary strong { display: block; font-size: 27px; font-weight: 550; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.plan-dialog-note { margin: 18px 0 21px; color: #aaa; font-size: 11px; line-height: 1.7; }
.pricing-payment-availability { max-width: 620px; margin: 12px 0 0; color: #c7b8c3; font-size: 12px; line-height: 1.65; }
.pricing-plan-button:disabled { cursor: default; opacity: .55; }
.plan-dialog-consent { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 22px; color: #c9c9cc; font-size: 12px; line-height: 1.75; }
.plan-dialog-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: #f0f0f4; }
.plan-dialog-consent input:focus-visible { outline-offset: 3px; }
.plan-dialog-billing { align-self: center; padding: 10px; color: #bbb; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.plan-dialog-error { margin: 0 0 15px; color: #eee; font-size: 11px; line-height: 1.7; }
.plan-dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.plan-dialog-secondary { min-height: 44px; padding: 9px; border: 0; border-radius: 7px; background: transparent; color: #999; font-size: 11px; transition: color 180ms ease, background 180ms ease; }
.plan-dialog-secondary:hover { color: #fff; background: #151515; }
.plan-payment-provider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 17px 0 0; color: #999; font-size: 11px; line-height: 1.5; }
.plan-payment-provider img { display: block; flex: 0 0 46px; object-fit: contain; }
body:has(.plan-dialog[open]) { overflow: hidden; }
@media (max-width: 620px) {
  .plan-dialog { padding: 36px 23px 21px; }
  .plan-dialog h2 { font-size: 29px; }
  .plan-dialog-eyebrow { font-size: 7px; }
}