/* ===== Pricing Page ===== */
.pricingPageWrap {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-500: oklch(63.7% .237 25.331);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-300: oklch(83.7% .128 66.29);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-teal-500: oklch(70.4% .14 182.503);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-black: #000000;
    --color-white: #ffffff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: 1.5rem;
    --leading-relaxed: 1.625;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;

    background: var(--color-black);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.pageContent.pricingPage {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 64px;
    padding: 50px 0 100px;
    overflow: hidden;
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    color: var(--color-white);
}

/* 背景光晕 */
.pricingBgGlow {
    position: absolute;
    top: -104px;
    left: -100px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    /* 回退色：变量未定义时仍可见 */
    background-color: rgba(246, 111, 20, 0.2);
    background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
    filter: blur(120px);
}

.pageContent.pricingPage>* {
    position: relative;
    z-index: 1;
}

/* Hero */
.pricingHero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.pricingHeroTitle {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 600;
    font-size: 48px;
    line-height: 1.35;
    color: var(--color-white);
    margin: 0 0 20px;
    letter-spacing: 1px;
}

/* 标题渐变文字 */
.text-transparent {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.from-white {
    --tw-gradient-from: var(--color-white);
    --tw-gradient-from-position: 0%;
    --tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via, transparent) var(--tw-gradient-via-position, 50%), var(--tw-gradient-to, transparent) var(--tw-gradient-to-position, 100%);
}

.via-neutral-200 {
    --tw-gradient-via: var(--color-neutral-200);
    --tw-gradient-via-position: 50%;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

.to-neutral-500 {
    --tw-gradient-to: var(--color-neutral-500);
    --tw-gradient-to-position: 100%;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

.bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.text-neutral-400 {
    color: var(--color-neutral-400);
}

.leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
}

.max-w-2xl {
    max-width: var(--container-2xl);
}

@media (width >=48rem) {
    .md\:text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
}

.pricingHeroSub {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 400;
    font-size: 14px;
    margin: 0 auto 40px;
    text-align: center;
}

/* Toggle 切换 */
.pricingToggle {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background: color-mix(in oklab, var(--color-neutral-900) 90%, transparent);
    border: 1px solid color-mix(in oklab, var(--color-white) 8%, transparent);
    border-radius: 999px;
    gap: 0;
    position: relative;
}

.absoluteTxt {
    position: absolute;
    top: -13px;
    right: -2px;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--color-yellow-400);
    font-weight: 700;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 20px;
    border: 1px solid var(--color-yellow-400);

}

@supports (color:color-mix(in lab, red, red)) {
    .bg-yellow-400\/15 {
        background-color:
            color-mix(in oklab, var(--color-yellow-400) 15%, transparent);
    }
}

@supports (color:color-mix(in lab, red, red)) {
    .shadow-yellow-400\/20 {
        --tw-shadow-color:
            color-mix(in oklab,
                color-mix(in oklab, var(--color-yellow-400) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
}

.pricingToggleBtn {
    position: relative;
    padding: 10px 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    white-space: nowrap;
}

.pricingToggleBtn:hover {
    color: #ffffff;
}

.pricingToggleBtn.pricingAct {
    background: var(--color-orange-500);
    color: #ffffff;
    box-shadow: 0 0 20px color-mix(in oklab, var(--color-orange-500) 45%, transparent), inset 0 1px 0 color-mix(in oklab, var(--color-white) 15%, transparent);
}

/* Panel 面板 */
.pricingPanel {
    display: none;
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 0 24px;
    animation: pricingFadeIn 0.35s ease;
}

.pricingPanel.pricingAct {
    display: block;
}

.pricingPanel.pricingPanelNoAnim,
html.pricing-init-air .pricingPanel {
    animation: none !important;
}

.pricingToggleBtn.pricingToggleNoAnim,
.pricingToggleBtn.pricingToggleNoAnim.transition-all {
    transition: none !important;
}

/* ?tab=air 首屏直接显示 Air，避免先闪 Studio 再切换 */
html.pricing-init-air .pricingToggleBtn[data-tab="studio"] {
    background: transparent;
    box-shadow: none;
}

html.pricing-init-air .pricingToggleBtn[data-tab="air"] {
    background: var(--color-orange-500);
    color: #ffffff;
    box-shadow: 0 0 20px color-mix(in oklab, var(--color-orange-500) 45%, transparent), inset 0 1px 0 color-mix(in oklab, var(--color-white) 15%, transparent);
}

html.pricing-init-air .pricingPanel[data-panel="studio"] {
    display: none !important;
}

html.pricing-init-air .pricingPanel[data-panel="air"] {
    display: block;
}

@keyframes pricingFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pricingSectionTitle {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 600;
    font-size: 28px;
    color: var(--color-white);
    text-align: center;
    margin: 0 0 40px;
}

/* Air 标签 */
.pricingAirLabels {
    margin-bottom: 16px;
}

.pricingAirLabel {
    display: block;
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 400;
    font-size: 22px;
    color: var(--color-white);
    padding-left: 4px;
}

/* 卡片行 - 同组卡片等高（跟随最高项） */
.pricingCardsRow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 25px;
    margin: 0 !important;
}

.pricingCardWrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    /* max-width: 436px; */
}

.pricingCardWrap>.pricingCard {
    flex: 1;
    width: 100%;
}



.pricingCardWrap {
    /* max-width: 436px; */
}

.pricingCardsRow>.pricingCard,
.pricingCardsRow>[class*="layui-col"] {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.pricingCardsRow.layui-row {
    display: flex;
    align-items: stretch;
}

.pricingCardsRow.flexCenter {
    align-items: stretch;
}

.pricingCardsRow>[class*="layui-col"]>.pricingCard {
    flex: 1;
    width: 100%;
}

/* 定价卡片 */
.border {
    border-style: solid;
    border-width: 1px;
}

@supports (color: color-mix(in lab, red, red)) {
    .border-orange-500\/70 {
        border-color: color-mix(in oklab, var(--color-orange-500) 70%, transparent);
    }
}


.bg-\[\#111111\] {
    background-color: #111;
}

.shadow-\[0_0_60px_-10px_rgba\(249\,115\,22\,0\.45\)\] {
    --tw-shadow: 0 0 60px -10px var(--tw-shadow-color, #f9731673);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.pricingCard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 36px 32px 40px;
    background: var(--color-neutral-950);
    border: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
    border-radius: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.mr25 {
    margin-right: 25px;
}

.pricingCardFeatured {
    background-color: #111;
    border: 1px solid rgba(249, 115, 22, 0.7);
    border-color: color-mix(in oklab, var(--color-orange-500) 70%, transparent);
    --tw-shadow: 0 0 60px -10px #f9731673;
    box-shadow: var(--tw-shadow);
}

.pricingCardBadge {
    padding: 4px 14px;
    background: var(--color-orange-500);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.4;
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -38px;
}

/* 价格区 */
.pricingCardPrice {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 16px;

}

.pricingCardCurrency {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
}

.pricingCardAmount {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
}

.pricingCardPeriod {
    font-size: 13px;
    color: var(--color-neutral-500);
    margin-left: 4px;
}

.pricingCardPeriodOrigin {
    text-decoration: line-through;
    color: var(--color-neutral-500);
}

.pricingCardName {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-white);
    margin: 0 0 12px;
}

.pricingCardDesc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-neutral-500);
    margin: 0 0 28px;
}

/* Air 卡片特有 */
.pricingAirCardHint {
    font-size: 14px;
    color: var(--color-neutral-500);
    margin: 0 0 12px;
}

.pricingAirPrice {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 28px;
}

.pricingAirPriceNum {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
}

.pricingAirPriceUnit {
    font-size: 16px;
    color: var(--color-white);
    font-weight: 500;
}

.pricingAirCardTitle {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 600;
    font-size: 22px;
    color: var(--color-white);
    margin: 0 0 10px;
}

.pricingAirCardDesc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-neutral-500);
    margin: 0 0 28px;
}

/* 按钮 */
.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
    .shadow-orange-500\/40 {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 40%, transparent) var(--tw-shadow-alpha, 100%), transparent);
    }
}

.pricingCardBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border-radius: 12px;
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.pricingCardBtnOutline {
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--color-white) 25%, transparent);
    color: var(--color-white);
}

.pricingCardBtnOutline:hover {
    border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    background: color-mix(in oklab, var(--color-white) 4%, transparent);
    color: var(--color-white);
}

.pricingCardBtnPrimary {
    background: var(--color-orange-500);
    border: 1px solid var(--color-orange-700);
    color: var(--color-white);
    --tw-shadow-color: color-mix(in oklab, var(--color-orange-500) 40%, transparent);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-shadow);
}

.pricingCardBtnPrimary:hover {
    background: var(--color-orange-600);
    color: var(--color-white);
}

/* 功能列表 */
.pricingFeatureList {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.pricingFeatureGroup {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-amber-400);
    margin: 20px 0 12px;
    padding: 0;
}

.pricingFeatureGroup:first-child {
    margin-top: 0;
}

.pricingFeatureItem {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-300);
    margin-bottom: 12px;
}

.pricingFeatureItemSub {
    padding-left: 4px;
}

.pricingFeatureItemSub .pricingCheckIcon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-top: 3px;
}

.pricingFeatureItemSub .pricingCheckIcon::after {
    width: 5px;
    height: 8px;
    top: 2px;
    left: 5px;
}

/* 勾选图标 */
.pricingCheckIcon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    background: var(--color-orange-500);
    border-radius: 50%;
    flex-shrink: 0;
}

.pricingCheckIcon::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.text-orange-400 {
    color: var(--color-orange-400);
}

.mb10 {
    margin-bottom: 10px;
}

/* 底部注释 */
.pricingNote {
    margin: 40px auto 0;
    font-size: 14px;
    /* line-height: 1.8; */
    color: var(--color-neutral-500);
    text-align: center;
}

/* API 工作流卡片 */
.pricingApiWorkflowCard {
    margin-top: 56px;
    padding: 32px 36px 36px;
    background: var(--color-neutral-950);
    border: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
    border-radius: 16px;
    box-sizing: border-box;
}

.pricingApiWorkflowHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.pricingApiWorkflowTitleRow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.pricingApiWorkflowTitle {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 600;
    font-size: 22px;
    color: var(--color-white);
    margin: 0;
    white-space: nowrap;
}

.pricingApiWorkflowBadge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border: 1px solid var(--color-orange-500);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-orange-500);
    line-height: 1.4;
    white-space: nowrap;
}

.pricingApiWorkflowHighlights {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pricingApiWorkflowHighlight {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricingApiWorkflowIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-orange-500);
}

.pricingApiWorkflowHighlightText {
    display: flex;
    gap: 2px;
}

.pricingApiWorkflowHighlightTitle {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.4;
}

.pricingApiWorkflowHighlightSub {
    font-size: 14px;
    color: color-mix(in oklab, var(--color-orange-500) 55%, var(--color-neutral-500));
    line-height: 1.4;
    white-space: nowrap;
}

.pricingApiPricingBox {
    background: color-mix(in oklab, var(--color-black) 40%, var(--color-neutral-950));
    border: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
    border-radius: 12px;
    overflow: hidden;
}

.pricingApiPricingTitle {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 500;
    font-size: 16px;
    color: var(--color-white);
    text-align: center;
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
}

.pricingApiPricingGrid {
    display: flex;
    align-items: stretch;
}

.pricingApiPricingCol {
    flex: 1;
    padding: 24px 28px 28px;
    border-right: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
    min-width: 0;
}

.pricingApiPricingColLast {
    border-right: none;
}

.pricingApiPricingColName {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-white);
    margin: 0 0 16px;
}

.pricingApiPricingList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pricingApiPricingItem {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-400);
    margin-bottom: 10px;
}

.pricingApiPricingItem:last-child {
    margin-bottom: 0;
}

.pricingApiCheckIcon {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-top: 3px;
    background: color-mix(in oklab, var(--color-neutral-600) 80%, transparent);
    border-radius: 50%;
    flex-shrink: 0;
}

.pricingApiCheckIcon::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 7px;
    border: solid var(--color-neutral-300);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* API 表格区 */
.pricingApiSection {
    margin-top: 80px;
    text-align: center;
}

.pricingApiTitle {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", var(--font-sans);
    font-weight: 600;
    font-size: 32px;
    color: var(--color-white);
    margin: 0 0 12px;
}

.pricingApiSub {
    font-size: 15px;
    color: var(--color-neutral-500);
    margin: 0 0 36px;
}

.pricingApiTable {
    background: var(--color-neutral-950);
    border: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
}

.pricingApiTableHead,
.pricingApiTableRow {
    display: flex;
    align-items: center;
    padding: 0 32px;
}

.pricingApiTableHead {
    height: 56px;
    border-bottom: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
}

.pricingApiTableRow {
    min-height: 64px;
    border-bottom: 1px solid color-mix(in oklab, var(--color-white) 4%, transparent);
}

.pricingApiTableRow:last-child {
    border-bottom: none;
}

.pricingApiTableCol {
    flex: 1;
    font-size: 14px;
    color: var(--color-neutral-300);
}

.pricingApiTableHead .pricingApiTableCol {
    font-size: 14px;
    color: var(--color-neutral-500);
    font-weight: 400;
}

.pricingApiTableColModel {
    flex: 1.2;
    color: var(--color-white);
    font-weight: 500;
}

.pricingApiTableColDash {
    color: var(--color-neutral-600);
}

/* 响应式 */
@media screen and (max-width: 992px) {
    .pricingHeroTitle {
        font-size: 36px;
    }

    .pricingSectionTitle,
    .pricingApiTitle {
        font-size: 24px;
    }

    .pricingCardAmount,
    .pricingAirPriceNum {
        font-size: 40px;
    }

    .pricingCardsRow {
        flex-wrap: wrap;
    }

    .pricingCardWrap {
        /* max-width: 100%; */
        flex: 1 1 100%;
    }

    .pricingApiWorkflowHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .pricingApiWorkflowHighlights {
        justify-content: flex-start;
        gap: 24px;
    }

    .pricingApiPricingGrid {
        flex-wrap: wrap;
    }

    .pricingApiPricingCol {
        flex: 1 1 calc(50% - 1px);
        border-right: none;
        border-bottom: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
    }

    .pricingApiPricingCol:nth-child(odd) {
        border-right: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
    }

    .pricingApiPricingColLast {
        flex: 1 1 100%;
        border-right: none;
    }
}

@media screen and (max-width: 768px) {
    .pageContent.pricingPage {
        padding: 25px 0 60px;
    }

    .pricingHeroTitle {
        font-size: 28px;
    }

    .pricingToggleBtn {
        padding: 8px 20px;
        font-size: 14px;
    }

    .pricingCard {
        padding: 28px 20px 32px;
    }

    .pricingApiTableHead,
    .pricingApiTableRow {
        padding: 0 16px;
        flex-wrap: wrap;
    }

    .pricingApiTableCol {
        font-size: 13px;
    }

    .pricingAirLabel {
        margin-bottom: 8px;
    }

    .pricingApiWorkflowCard {
        padding: 24px 20px;
    }

    .pricingApiWorkflowHighlights {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .pricingApiWorkflowHighlightSub {
        white-space: normal;
    }

    .pricingApiPricingGrid {
        flex-direction: column;
    }

    .pricingApiPricingCol,
    .pricingApiPricingCol:nth-child(odd) {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid color-mix(in oklab, var(--color-white) 6%, transparent);
        padding: 20px;
    }

    .pricingApiPricingColLast {
        border-bottom: none;
    }
}

@media screen and (max-width: 576px) {

    .pricingApiTableHead,
    .pricingApiTableRow {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 8px;
    }

    .pricingApiTableHead {
        display: none;
    }

    .pricingApiTableRow {
        border-bottom: 1px solid color-mix(in oklab, var(--color-white) 8%, transparent);
    }

    .pricingApiTableColModel {
        font-weight: 600;
        color: var(--color-orange-500);
        margin-bottom: 4px;
    }
}

.mt28 {
    margin-top: 28px;
}

.downItemTitle5 {
    color: #8D8D8D;
    cursor: pointer;
    margin-bottom: 30px;
}