.ai-pricing .rays { display: none; }
.ai-pricing-main { max-width: 1288px; margin: 0 auto; padding: 0 24px; }
.pricing-hero { padding: 80px 0 58px; text-align: center; }
.pricing-hero h1 { font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 76px); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; }
.pricing-hero > p:not(.section-eyebrow) { margin: 24px auto; color: #a1a1aa; font-size: 16px; line-height: 1.7; }
.plans-caption { display: flex; justify-content: space-between; margin-bottom: 18px; font-size: 13px; color: #aaaab2; }
.plans-caption > :first-child { color: #eeeeef; }
.plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.plan-card { padding: 25px 22px 26px; border: 1px solid #29292d; border-radius: 16px; background: #0c0c0e; min-width: 0; }
.plan-card.plan-featured { border-color: #6b8cff; background: #0e1428; }
.plan-title { min-height: 27px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-title h2 { font: 500 20px var(--font-body); letter-spacing: -.035em; }
.plan-tag { background: #6b8cff; color: #070d21; border-radius: 5px; padding: 5px 7px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.plan-tag.neutral { background: #27272b; color: #c9c9d0; }
.plan-description { min-height: 42px; margin-top: 10px; color: #a6a6af; font-size: 12px; line-height: 1.6; }
.plan-price { display: flex; gap: 6px; align-items: baseline; margin: 24px 0; white-space: nowrap; }
.plan-price > :first-child { font-size: clamp(30px, 2.7vw, 39px); letter-spacing: -.065em; font-weight: 500; font-variant-numeric: tabular-nums; }
.price-period { font-size: 11px; color: #9999a2; }
.plan-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #222226; color: #f4f4f5; padding: 12px 14px; border: 1px solid #37373d; border-radius: var(--button-radius); text-decoration: none; font-size: 12px; font-weight: 500; }
.plan-featured .plan-button { background: #6b8cff; border-color: #6b8cff; color: #070d21; }

.plan-features { margin-top: 24px; list-style: none; display: grid; gap: 13px; }
.plan-features li { position: relative; padding-left: 17px; color: #b7b7c0; font-size: 11px; line-height: 1.6; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: #8ca6ff; }
.plan-features strong { color: #eeeef0; font-weight: 500; }
.feature-note { display: block; color: #9999a2; font-size: 10px; }
.pricing-note { margin-top: 20px; color: #92929c; font-size: 12px; line-height: 1.7; }
.credit-explainer { margin-top: 88px; padding: 36px 0; border-top: 1px solid #27272c; border-bottom: 1px solid #27272c; }
.credit-explainer > h2, .plan-comparison > h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 500; letter-spacing: -.045em; line-height: 1.15; }
.credit-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; margin-top: 30px; }
.credit-columns h3 { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.credit-columns p, .plan-comparison > p { color: #a1a1aa; font-size: 14px; line-height: 1.8; }
.plan-comparison { padding-top: 88px; scroll-margin-top: 30px; }
.plan-comparison > p { margin: 16px 0 28px; }
.comparison-scroll { min-width: 0; border: 1px solid #29292e; border-radius: 12px; }
.comparison-scroll table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; font-size: 11px; }
.comparison-scroll th, .comparison-scroll td { padding: 20px 10px; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; vertical-align: top; }
.comparison-scroll thead th { font-size: 12px; color: #efeff1; background: #151517; }
.comparison-scroll tbody th { color: #c0c0c8; font-weight: 400; }
.comparison-scroll tbody td { color: #a7a7b0; font-variant-numeric: tabular-nums; }
.comparison-scroll tbody tr:nth-child(even) { background: #0c0c0f; }
.comparison-scroll .recommended-column { background: #6b8cff0a; color: #a4b7ff; }

@media (max-width: 1100px) { .plans-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .plan-price > :first-child { font-size: 40px; } }
@media (max-width: 720px) { .pricing-hero { padding: 54px 0 42px; } .credit-columns { grid-template-columns: 1fr; gap: 24px; } .plan-comparison { padding-top: 64px; } .credit-explainer { margin-top: 60px; } }
@media (max-width: 480px) { .ai-pricing-main { padding: 0 16px; } .plans-grid { grid-template-columns: 1fr; } .plan-card { padding: 24px; } .plan-description { min-height: auto; } .pricing-hero h1 { font-size: 46px; } .plans-caption { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .plan-button svg { transition: none; transform: none !important; } }

/* Reuse homepage components rather than a separate pricing variant. */
.pricing-talk { margin-top: 20px; }
.plan-button svg { flex-shrink: 0; }

/* DarkVeil stays behind the page; content gains the same dark layers as home. */
.ai-pricing { position: relative; isolation: isolate; }
#pricing-background { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow:hidden; background: radial-gradient(ellipse at 45% 0%, #0e292a 0%, #080c12 36%, #050607 76%); }
#pricing-background::after { content:""; position:absolute; inset:-14%; background:repeating-linear-gradient(100deg,#6b7280 0%,#6b7280 5%,transparent 8%,transparent 12%,#6b7280 16%),repeating-linear-gradient(100deg,#60a5fa 10%,#e879f9 15%,#60a5fa 20%,#5eead4 25%,#60a5fa 30%);background-size:300%,200%;background-position:50% 50%;filter:blur(32px) opacity(30%) saturate(150%) brightness(.62);mask-image:radial-gradient(ellipse at 100% 0%,#000 18%,transparent 72%); }
.ai-pricing-main { max-width: none; padding: 0; }
.pricing-hero { padding-left: 24px; padding-right: 24px; background: transparent; }
.pricing-content { padding-top: 32px; background: linear-gradient(180deg, #08090c00 0, #08090c18 120px, #08090c66 320px, #08090cc9 560px, #08090cf2 760px, #08090cf2 calc(100% - 800px), #08090ce6 calc(100% - 440px), #08090ccc 100%); }
.plans-section, .credit-explainer, .plan-comparison { width: calc(100% - 48px); max-width: 1240px; margin-left: auto; margin-right: auto; }
.ai-pricing .interested-section { background: linear-gradient(180deg, #08090ccc 0%, #08090cb3 25%, #08090c80 50%, #08090c33 78%, #08090c00 100%); }

.plan-card { background: #0c0d12ed; }
.plan-featured .plan-tag { background: var(--carelto-blue); color: #070d21; }
.plan-button { justify-content: center; gap: 12px; min-height: 46px; padding: 13px 18px; border: 1px solid transparent; border-radius: var(--button-radius); background: #efeff2; color: #131318; font-size: 13px; font-weight: 600; line-height: 1.3; }
.plan-button svg { width: 19px; height: 19px; }
.plan-featured .plan-button { background: var(--carelto-blue); color: #070d21; border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .plan-button:hover, .plan-button:focus-visible { background: #fff; border-color: transparent; }
  .plan-featured .plan-button:hover, .plan-featured .plan-button:focus-visible { background: #8ca6ff; }
}

@media (max-width: 480px) { .plans-section, .credit-explainer, .plan-comparison { width: calc(100% - 32px); } }

/* Keep FAQ on the continuous section veil instead of restarting its overlay. */
.ai-pricing .faq-section { background: transparent; }

button.plan-button { width: 100%; cursor: pointer; font-family: var(--font-body); }
#checkout-status { margin-bottom: 20px; padding: 14px 18px; border: 1px solid #6b8cff55; border-radius: 10px; color: #c4d0ff; background: #101728; font-size: 14px; }

/* Fit the comparison to its container; stack feature groups on narrow screens. */
.comparison-scroll tr > :first-child { width: 15%; }
@media (max-width: 720px) {
  .comparison-scroll table, .comparison-scroll tbody { display: block; }
  .comparison-scroll thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .comparison-scroll tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 8px; }
  .comparison-scroll tbody tr + tr { border-top: 1px solid #29292e; }
  .comparison-scroll tbody tr > th { grid-column: 1 / -1; width: auto; padding: 0 0 8px; color: #efeff1; font-weight: 600; font-size: 13px; }
  .comparison-scroll tbody td { padding: 10px; font-size: 12px; }
  .comparison-scroll tbody td::before { content: attr(data-pack); display: block; margin-bottom: 4px; color: #efeff1; font-weight: 600; }
  .comparison-scroll tbody td.recommended-column::before { color: #a4b7ff; }
}