/*
 * V2 Platform Product Page Styles
 * Design base: 1920px (1rem = 16px)
 * Figma: 957:3991 Platform — 间距/字号仅来自 Dev Mode 相邻标注
 * Layout: section (full-width bg) > .v2-container > inner
 */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

#tg-contact {
    scroll-margin-top: 0rem;
    padding-top: 0 !important;
    background: #f5f5f7;
}

/* /product/open-api/ 或 #open-api：JS scrollIntoView({ block: 'center' }) 垂直居中 */
#open-api {
    scroll-margin-top: 0;
}

.v2-platform-page {
    background-color: #f5f5f7;
}

/* ==========================================
 * 1. Hero — banner (1101:5948) h=600
 * platform-banner.avif 为整幅背景（非右侧插图）
 * ========================================== */
.v2-platform-hero {
    position: relative;
    width: 100%;
    height: 37.5rem; /* 600 */
    overflow: hidden;
    background-color: #d2ebff;
    background-image: url(/uploads/image/v2/platform/platform-banner.avif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.v2-platform-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 5.75rem; /* 92 */
}

.v2-platform-hero-title {
    margin: 0;
    max-width: 48.625rem;
}

.v2-platform-hero-title span {
    display: block;
    font-family: "Gotham-Bold", sans-serif;
    font-size: 2.75rem; /* 44 */
    line-height: normal;
    color: #323232;
}

.v2-platform-hero-body {
    margin: 0.25rem 0 0; /* title h≈53 → body y149 → gap 4 */
    max-width: 43.25rem; /* 692 */
    font-family: "GothamPro-Regular", "Gotham-Book", sans-serif;
    font-size: 1.375rem; /* 22 */
    line-height: normal;
    color: #323232;
}

.v2-platform-hero-pills {
    list-style: none;
    margin: 1.6875rem 0 0; /* body bottom 201 → first pill 238 → gap 37 */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8 between pills */
}

.v2-platform-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* icon 9+20=29 → text 37 → 8 */
    height: 2.375rem; /* 38 */
    width: fit-content;
    max-width: 100%;
    padding: 0 1rem 0 0.5625rem; /* left 9 */
    background-color: #fafdff;
    border-radius: 3.75rem; /* 60 */
    font-size: 1.25rem; /* 20 — 只写在父级，随 html rem 缩放 */
    line-height: normal;
    color: #323232;
    white-space: nowrap;
}

/* 对抗 * { font-size:16px; color:#343434 }：span 须 inherit rem，勿自写死字号 */
.v2-platform-hero-pill,
.v2-platform-hero-pill span {
    font-family: "Gotham-Medium", sans-serif;
    font-weight: normal;
    color: #323232;
}

.v2-platform-hero-pill span {
    font-size: inherit;
}

.v2-platform-hero-pill-icon {
    width: 1.25rem; /* 20 */
    height: 1.25rem;
    flex-shrink: 0;
    object-fit: contain;
}

/* Talk to Sales — 交互对齐顶栏 Contact（::before hover / ::after active） */
.v2-platform-hero-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.875rem; /* last pill bottom 460 → CTA 500 → gap 40 */
    height: 2.5rem; /* 40 */
    min-width: 9.5625rem; /* 153 */
    padding: 0 1.25rem; /* 20 */
    border-radius: 3.5rem; /* 56 */
    background-image: linear-gradient(90.93deg, rgb(12, 136, 215) 1.72%, rgb(100, 215, 155) 100%);
    font-family: "Gotham-Medium", sans-serif;
    font-size: 1.125rem; /* 18 */
    line-height: normal;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.v2-platform-hero-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(139deg, #6DC6FF 0%, #ADFFD4 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.v2-platform-hero-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(139deg, #034EA6 0%, #3BC877 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.v2-platform-hero-btn:hover {
    color: #fff;
}

.v2-platform-hero-btn:hover::before {
    opacity: 1;
}

.v2-platform-hero-btn:hover::after {
    opacity: 0;
}

.v2-platform-hero-btn:active {
    color: #fff;
}

.v2-platform-hero-btn:active::after {
    opacity: 1;
}

/* ==========================================
 * Shared section title / feature
 * ========================================== */
.v2-platform-section-title {
    margin: 0;
}

.v2-platform-section-title span {
    display: block;
    font-family: "Gotham-Bold", sans-serif;
    font-size: 2.75rem; /* 44 */
    line-height: normal;
    color: #323232;
}

.v2-platform-section-subtitle {
    margin: 0;
    font-family: "GothamPro-Regular", "Gotham-Book", sans-serif;
    font-size: 1.375rem; /* 22 */
    line-height: normal;
    color: #323232;
}

.v2-platform-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem; /* icon 20 + text left 28 → 8 */
}

.v2-platform-feature-dot {
    width: 1.25rem; /* 20 */
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.3125rem; /* ~5 — Figma icon inset */
    object-fit: contain;
}

.v2-platform-feature-text {
    flex: 1;
    min-width: 0;
}

.v2-platform-feature-title {
    margin: 0;
    font-family: "Gotham-Bold", sans-serif;
    font-size: 1.625rem; /* 26 */
    line-height: normal;
    color: #323232;
}

.v2-platform-feature-desc {
    margin: 0.4375rem 0 0; /* title block to body ≈ within feature */
    font-family: "GothamPro-Regular", "Gotham-Book", sans-serif;
    font-size: 1.125rem; /* 18 */
    line-height: normal;
    letter-spacing: -0.01125rem; /* -0.18px */
    color: #323232;
}

/* ==========================================
 * Tabs (Basic / Value-Added) — 滑动色块 + hover 变蓝 + 面板切换
 * 横向节奏：item 无水平 padding；gap = 上文案尾→下一 icon = 52
 * 激活浅蓝底由 indicator 外扩（--tab-indicator-pad-*），不占用 flex 间距
 * ========================================== */
.v2-platform-tabs {
    --tab-indicator-pad-left: 0.875rem; /* 14 — 色块相对 icon 左内边距 */
    --tab-indicator-pad-right: 1rem; /* 16 */
    position: relative;
    display: flex;
    align-items: center;
    gap: 3.25rem; /* 52 — 文案尾 → 下一 icon */
    height: 4.375rem; /* 70 */
    /* 左：12 栏内边距 + 14 色块垫，使首项 icon 落在稿面约 26 */
    padding: 0.625rem 0.75rem 0.625rem 1.625rem; /* 10 / 12 / 10 / 26 */
    background-color: #fff;
    border-radius: 0.875rem; /* 14 */
    box-shadow: 0 0 0.625rem 0 rgba(34, 50, 72, 0.1);
    box-sizing: border-box;
}

.v2-platform-tab-indicator {
    position: absolute;
    top: 0.625rem; /* 10 */
    left: 0.75rem;
    height: 3.125rem; /* 50 */
    width: 0;
    border-radius: 0.625rem; /* 10 */
    background-color: #eaf1fe;
    z-index: 0;
    pointer-events: none;
    transition: left 0.3s ease, width 0.3s ease;
}

.v2-platform-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem; /* 10 — icon → 文案 */
    height: 3.125rem; /* 50 — 命中区高度 */
    padding: 0; /* 水平零 padding，避免与 gap 叠成「假 52」 */
    margin: 0;
    border: 0;
    background: transparent;
    border-radius: 0.625rem;
    font-size: 1.25rem; /* 20 */
    line-height: normal;
    color: #86909c;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* 对抗 header_v2 / * { font-family; font-size:16px } */
.v2-platform-tab,
.v2-platform-tab > span {
    font-family: "Gotham-Medium", sans-serif;
    font-weight: normal;
    color: #86909c; /* Figma 未选中 */
}

.v2-platform-tab > span {
    font-size: inherit;
}

.v2-platform-tab.is-active,
.v2-platform-tab.is-active > span {
    color: #008cff; /* Figma 选中 */
}

/* 未激活：悬停文字+图标区域变蓝（色块仅点击后移动） */
.v2-platform-tab:not(.is-active):hover,
.v2-platform-tab:not(.is-active):hover > span {
    color: #008cff;
}

.v2-platform-tab-icon {
    display: block;
    width: 1.25rem; /* 20 */
    height: 1.25rem;
    flex-shrink: 0;
    overflow: visible;
    color: inherit;
}

/* 不用 currentColor：部分环境下 SVG path 会落到初始黑 */
.v2-platform-tab .v2-platform-tab-icon,
.v2-platform-tab .v2-platform-tab-icon path {
    fill: #86909c;
    transition: fill 0.2s ease;
}

.v2-platform-tab.is-active .v2-platform-tab-icon,
.v2-platform-tab.is-active .v2-platform-tab-icon path,
.v2-platform-tab:not(.is-active):hover .v2-platform-tab-icon,
.v2-platform-tab:not(.is-active):hover .v2-platform-tab-icon path {
    fill: #008cff;
}

.v2-platform-tab-icon--22 {
    width: 1.375rem; /* 22 */
    height: 1.375rem;
}

.v2-platform-tab-icon--playback {
    width: 1.25rem;
    height: 1.25625rem; /* 20.1 */
}

.v2-platform-tab-icon--attendance {
    width: 1.375rem; /* 22 */
    height: 1.1rem; /* 17.6 */
}

.v2-platform-tab-icon--geofence {
    width: 1.25rem;
    height: 1.2375rem;
}

.v2-platform-basic-section .v2-platform-tabs,
.v2-platform-added-section .v2-platform-tabs {
    margin-top: 2.375rem; /* 38 */
}

/* Panel */
.v2-platform-panel {
    display: none;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 1rem; /* tab→panel 16 */
    min-height: 26.25rem; /* 420 */
    padding: 4.75rem 3.75rem 2.6875rem; /* 76 / 60 */
    background-color: #fff;
    border-radius: 0.875rem;
    box-shadow: 0 0 0.625rem 0 rgba(34, 50, 72, 0.1);
    box-sizing: border-box;
    position: relative;
}

.v2-platform-panel.is-active {
    display: flex;
}

.v2-platform-panel-content {
    display: flex;
    flex-direction: column;
    gap: 1.4375rem; /* 23 */
    width: 33rem; /* 528 */
    position: relative;
    z-index: 1;
}

/* Tab 切换：左侧 feature 自下而上依次出现 */
.v2-platform-panel-content .v2-platform-feature {
    opacity: 0;
    transform: translateY(2.5rem); /* 40 — 入场位移加大 */
}

.v2-platform-panel-content .v2-platform-feature.is-enter {
    animation: v2-platform-feature-enter 0.6s ease forwards;
}

@keyframes v2-platform-feature-enter {
    from {
        opacity: 0;
        transform: translateY(2.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2-platform-panel-content .v2-platform-feature,
    .v2-platform-panel-content .v2-platform-feature.is-enter {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.v2-platform-panel-content .v2-platform-feature-title {
    max-width: 31.25rem; /* 500 */
}

.v2-platform-panel-content .v2-platform-feature-desc {
    max-width: 31.25rem;
    margin-top: 0.4375rem;
}

.v2-platform-panel-img {
    position: absolute;
    top: 2.6875rem; /* 43 */
    right: 9.375rem; /* 150 */
    width: 27.5rem; /* 440 */
    height: 20.875rem; /* 334 */
    object-fit: contain;
    object-position: top center;
}

/* ==========================================
 * 2. Basic Location Services (1101:5800)
 * banner 底→本区：72；subtitle gap：title→56 = 3px≈0.1875
 * ========================================== */
.v2-platform-basic-section {
    padding: 4.5rem 0 0; /* 72 */
}

.v2-platform-basic-subtitle {
    margin-top: 0.1875rem; /* 3 — title h53 → y56 */
    max-width: 43.75rem; /* 700 */
}

.v2-platform-basic-section .v2-platform-tabs {
    margin-top: 2.375rem; /* subtitle bottom 108 → tabs 146 → 38 */
}

/* ==========================================
 * 3. Value-Added Applications (1101:5749)
 * Basic 底→本区：72；subtitle y64 → gap 11
 * ========================================== */
.v2-platform-added-section {
    padding: 4.5rem 0 0; /* 72 */
}

.v2-platform-added-subtitle {
    margin-top: 0.6875rem; /* 11 — 64-53 */
    max-width: 37.75rem; /* 604 */
}

.v2-platform-added-section .v2-platform-tabs {
    margin-top: 2.375rem; /* 116→154 = 38 */
}

.v2-platform-added-section .v2-platform-panel {
    margin-top: 1rem; /* 224→240 = 16 */
}

.v2-platform-added-section .v2-platform-panel-content {
    gap: 1.4375rem; /* 212-76-113 = 23 */
}

/* ==========================================
 * 4. Mobile Applications (1101:5729)
 * Value-Added 底→本区：80
 * ========================================== */
.v2-platform-mobile-section {
    padding: 5rem 0 0; /* 80 */
}

.v2-platform-mobile-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 35rem; /* 560 */
    padding: 4.5rem 0 0 5rem; /* top 72 / left 80 */
    background-color: #fff;
    border-radius: 0.875rem;
    box-shadow: 0 0 0.625rem 0 rgba(34, 50, 72, 0.1);
    box-sizing: border-box;
    overflow: hidden;
}

.v2-platform-mobile-content {
    width: 32.8125rem; /* 525 */
    position: relative;
    z-index: 1;
}

.v2-platform-mobile-title {
    margin: 0;
}

.v2-platform-mobile-title span {
    display: block;
    font-family: "Gotham-Bold", sans-serif;
    font-size: 2.75rem;
    line-height: normal;
    color: #323232;
}

.v2-platform-mobile-body {
    margin: 0.625rem 0 0; /* title→body：63-53≈10 */
    max-width: 32.8125rem;
    font-family: "GothamPro-Regular", "Gotham-Book", sans-serif;
    font-size: 1.375rem;
    line-height: normal;
    color: #323232;
}

.v2-platform-mobile-features {
    margin-top: 2.125rem; /* text block bottom 213 → feature 247 ≈ 34 */
    display: flex;
    flex-direction: column;
    gap: 1.4375rem; /* 352-247-82 = 23 */
}

.v2-platform-mobile-features .v2-platform-feature-desc {
    margin-top: 0.4375rem; /* body top 38 within 82 feature — title single line */
    max-width: 31.0625rem; /* 497 */
}

.v2-platform-mobile-img {
    position: absolute;
    top: 5rem; /* 80 */
    right: 7.625rem; /* 1520-795-603=122 → 7.625 */
    width: 37.6875rem; /* 603 */
    height: 28.75rem; /* 460 */
    object-fit: contain;
    object-position: top center;
}

/* ==========================================
 * 5. Open API (1101:5697) full-bleed h=520
 * Mobile 底→本区：80
 * ========================================== */
.v2-platform-openapi-section {
    position: relative;
    margin-top: 5rem; /* 80 */
    width: 100%;
    min-height: 32.5rem; /* 520 */
    background-color: #030c29;
    overflow: hidden;
}

.v2-platform-openapi-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.v2-platform-openapi-decor img {
    position: absolute;
    /* Figma Rectangle193：left 39.7%, top -49.04%, w 58.37%, h 222.81% */
    left: 39.7%;
    top: -49.04%;
    width: 58.37%;
    height: 222.81%;
    object-fit: cover;
    object-position: center;
}

.v2-platform-openapi-content {
    position: relative;
    z-index: 1;
    padding-top: 6.3125rem; /* 101 */
    padding-bottom: 6rem;
}

.v2-platform-openapi-title-img {
    display: block;
    width: 12.95375rem; /* 207.26 */
    height: 2.398rem; /* 38.37 */
    object-fit: contain;
}

.v2-platform-openapi-body {
    margin: 1rem 0 0; /* logo bottom → body ≈ 16 */
    max-width: 36.0625rem; /* 577 */
    font-family: "GothamPro-Regular", "Gotham-Book", sans-serif;
    font-size: 1.375rem; /* 22 */
    line-height: normal;
    color: #c4daff; /* Figma 正文浅蓝；非特点标签 */
}

.v2-platform-openapi-pills {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem; /* 20 — 与 Union 三块间距一致 */
    width: 38.625rem; /* 618 */
    height: 3.125rem; /* 50 */
    margin-top: 2.375rem; /* body→pills ≈ 38 */
}

/* Figma Union SVG：内含整条 linearGradient（#B260FF→#5A93FF，opacity 0.3） */
.v2-platform-openapi-pills-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.v2-platform-openapi-pills-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.v2-platform-openapi-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem; /* icon→text：12 */
    height: 3.125rem; /* 50 */
    padding: 0 1.5rem 0 1.25rem; /* icon inset ~20 */
    box-sizing: border-box;
    background: transparent;
    font-size: 1.5rem; /* 24 */
    line-height: 1;
    white-space: nowrap;
}

/* 显式字号：对抗 * { font-size:16px }，与父级同为 rem */
.v2-platform-openapi-pill,
.v2-platform-openapi-pill span {
    font-family: "Gotham-Medium", sans-serif;
    font-weight: normal;
    font-size: 1.5rem; /* 24 */
    color: #ffffff;
}

.v2-platform-openapi-pill span {
    display: block;
    line-height: 1;
    transform: translateY(0.0625rem);
}

.v2-platform-openapi-pill:nth-child(2) {
    width: 13.8125rem; /* 221 */
    flex-shrink: 0;
}

.v2-platform-openapi-pill:nth-child(3) {
    width: 13.0625rem; /* 209 */
    flex-shrink: 0;
}

.v2-platform-openapi-pill--http {
    width: 9.25rem; /* 148 */
    flex-shrink: 0;
}

.v2-platform-openapi-pill-icon {
    display: block;
    width: 1.375rem; /* 22 */
    height: 1.375rem;
    flex-shrink: 0;
    object-fit: contain;
}

.v2-platform-openapi-pill-icon--http {
    width: 1.375rem;
    height: 1.5rem; /* 24 */
}

/* ==========================================
 * 6. Ecosystem — 使用 v2_eco.css；区前间距 72
 * ========================================== */
.v2-platform-page .v2-eco-section {
    padding-top: 4.5rem; /* 72 — Open API 底→Full RTLS */
}

/* ==========================================
 * 7. Demo Kit CTA (1101:5642)
 * Full RTLS 底→Demo：约 37；卡片 top offset 63
 * ========================================== */
.v2-platform-demo-section {
    padding: 0 0 6.25rem; /* 37 top；底至表单 ≈100 → 6.25rem=100 */
    background-color: #f5f5f7;
}

.v2-platform-demo-card {
    background: linear-gradient(-74.79deg, rgb(119, 240, 177) 0.13%, rgb(0, 140, 255) 31.39%, rgb(0, 104, 208) 53.97%, rgb(0, 45, 127) 88.17%);
    border-radius: 1.125rem; /* 18 */
    box-shadow: 0 0 0.9375rem 0 rgba(34, 50, 72, 0.1);
    height: 26.25rem; /* 420 */
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
}

.v2-platform-demo-content {
    padding: 4.5rem 0 0 3.75rem; /* card 内：135-63=72 top；left 60 */
    position: relative;
    z-index: 1;
    max-width: 43.0625rem; /* 689 */
}

.v2-platform-demo-title {
    margin: 0;
}

.v2-platform-demo-title span {
    display: block;
    font-family: "Gotham-Bold", sans-serif;
    font-size: 2.75rem;
    line-height: normal;
    color: #fff;
}

.v2-platform-demo-body {
    margin: 0.8125rem 0 0; /* 66-53≈13 */
    max-width: 43.0625rem;
    font-family: "GothamPro-Regular", "Gotham-Book", sans-serif;
    font-size: 1.125rem; /* 18 */
    line-height: normal;
    color: #fff;
}

.v2-platform-demo-highlight {
    margin: 0.8125rem 0 0; /* 123-(66+44)≈13 */
    font-family: "Gotham-Bold", sans-serif;
    font-size: 1.6875rem; /* 27 */
    line-height: normal;
    color: #fff;
}

.v2-platform-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem; /* highlight→btn：322-(135+155)≈32 相对内容；用 2rem 贴近稿 */
    height: 2.5rem; /* 40 */
    min-width: 8.75rem; /* 140 */
    padding: 0 1.25rem;
    border-radius: 3.75rem; /* 60 */
    background-image: linear-gradient(100.85deg, rgb(255, 125, 113) 21.84%, rgb(255, 152, 79) 95.64%);
    font-family: "Gotham-Medium", sans-serif;
    font-size: 1.125rem;
    line-height: normal;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.v2-platform-demo-btn:hover,
.v2-platform-demo-btn:active {
    color: #fff;
}

.v2-platform-demo-img {
    position: absolute;
    right: 5rem;
    top: -3.9375rem; /* 卡片上方溢出，对齐 Tag 页 demokit 图位 */
    width: 38rem;
    height: 36.4375rem;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

/* ==========================================
 * 响应式：仅保证不破坏；桌面优先
 * ========================================== */
@media (max-width: 1200px) {
    .v2-platform-hero {
        height: auto;
        min-height: 37.5rem;
        background-position: right center;
    }

    .v2-platform-hero-content {
        padding-bottom: 3rem;
        max-width: 55%;
    }

    .v2-platform-hero-pill {
        white-space: normal;
    }

    .v2-platform-panel {
        flex-direction: column;
        padding: 2.5rem 1.5rem;
        min-height: 0;
    }

    .v2-platform-panel-img {
        position: static;
        width: 100%;
        max-width: 27.5rem;
        height: auto;
        margin-top: 2rem;
        align-self: center;
    }

    .v2-platform-panel-content {
        width: 100%;
    }

    .v2-platform-tabs {
        flex-wrap: wrap;
        height: auto;
        gap: 0.5rem !important;
    }

    .v2-platform-tab-indicator {
        display: none;
    }

    .v2-platform-tab.is-active {
        background-color: #eaf1fe;
    }

    .v2-platform-mobile-card {
        flex-direction: column;
        padding: 2.5rem 1.5rem;
        min-height: 0;
    }

    .v2-platform-mobile-img {
        position: static;
        width: 100%;
        max-width: 37.6875rem;
        height: auto;
        margin-top: 2rem;
    }

    .v2-platform-mobile-content {
        width: 100%;
    }

    .v2-platform-openapi-pills {
        flex-wrap: wrap;
        width: 100%;
        height: auto;
    }

    .v2-platform-openapi-pills-bg {
        display: none;
    }

    .v2-platform-openapi-pill,
    .v2-platform-openapi-pill:nth-child(2),
    .v2-platform-openapi-pill:nth-child(3),
    .v2-platform-openapi-pill--http {
        width: auto;
        min-width: 0;
        background: linear-gradient(90deg, rgba(178, 96, 255, 0.3) 25.63%, rgba(90, 147, 255, 0.3) 100%);
        border-radius: 0.625rem;
    }

    .v2-platform-demo-card {
        height: auto;
        min-height: 26.25rem;
        overflow: hidden;
    }

    .v2-platform-demo-img {
        position: static;
        width: 100%;
        max-width: 28rem;
        height: auto;
        margin: 1rem auto 0;
        display: block;
    }

    .v2-platform-demo-content {
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .v2-platform-hero {
        background-position: center top;
    }

    .v2-platform-hero-content {
        max-width: 100%;
        padding-top: 3rem;
    }

    .v2-platform-hero-title span,
    .v2-platform-section-title span,
    .v2-platform-mobile-title span,
    .v2-platform-demo-title span {
        font-size: 2rem;
    }

    .v2-platform-hero-body,
    .v2-platform-section-subtitle,
    .v2-platform-mobile-body,
    .v2-platform-openapi-body {
        font-size: 1.125rem;
    }

    .v2-platform-feature-title {
        font-size: 1.25rem;
    }
}