*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: rgba(0,0,0,0.12);
}

::after, ::before {
    --tw-content: ''
}

:host, html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b, strong {
    font-weight: bolder
}

code, kbd, pre, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    /*font-size: 75%;*/
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

.blur-3xl {
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    outline: none;
}

button, select {
    text-transform: none
}

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

menu, ol, ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::placeholder, textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button], button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle
}

img, video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

/*
 * 间距刻度（与 Tailwind 默认一致）
 * 工具类数字 n => calc(n * var(--tw-spacing))，其中 --tw-spacing = 0.25rem
 * 例：pb-6 = 1.5rem，pb-12 = 3rem，pb-20 = 5rem，pt-32 = 8rem
 */
:root {
    --tw-spacing: 0.25rem;
}

/*.container {*/
/*    width: 100%*/
/*}*/

@media (min-width: 640px) {
    /*.container {*/
    /*    max-width: 640px*/
    /*}*/
    .sm\:px-6 {
        padding-left: calc(6 * var(--tw-spacing));
        padding-right: calc(6 * var(--tw-spacing));
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    /*.container {*/
    /*    max-width: 768px*/
    /*}*/
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:gap-6 {
        gap: calc(6 * var(--tw-spacing));
    }
    .md\:p-5 {
        padding: calc(5 * var(--tw-spacing));
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    /*.container {*/
    /*    max-width: 1024px*/
    /*}*/
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:px-8 {
        padding-left: calc(8 * var(--tw-spacing));
        padding-right: calc(8 * var(--tw-spacing));
    }
}

@media (min-width: 1280px) {
    /*.container {*/
    /*    max-width: 1280px*/
    /*}*/
}

@media (min-width: 1536px) {
    /*.container {*/
    /*    max-width: 1536px*/
    /*}*/
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.fixed {
    position: fixed
}

.bottom-0 {
    bottom: 0px
}

.left-0 {
    left: 0px
}

.right-0 {
    right: 0px
}

.top-0 {
    top: 0px
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mb-2 {
    margin-bottom: calc(2 * var(--tw-spacing));
}

.mb-3 {
    margin-bottom: calc(3 * var(--tw-spacing));
}

.mb-4 {
    margin-bottom: calc(4 * var(--tw-spacing));
}

.mb-5 {
    margin-bottom: calc(5 * var(--tw-spacing));
}

.mb-6 {
    margin-bottom: calc(6 * var(--tw-spacing));
}

.mb-8 {
    margin-bottom: calc(8 * var(--tw-spacing));
}

.mb-10 {
    margin-bottom: calc(10 * var(--tw-spacing));
}

.mb-12 {
    margin-bottom: calc(12 * var(--tw-spacing));
}

.mb-16 {
    margin-bottom: calc(16 * var(--tw-spacing));
}

.ml-2 {
    margin-left: calc(2 * var(--tw-spacing));
}

.ml-3 {
    margin-left: calc(3 * var(--tw-spacing));
}

.ml-4 {
    margin-left: calc(4 * var(--tw-spacing));
}

.mr-2 {
    margin-right: calc(2 * var(--tw-spacing));
}

.mr-3 {
    margin-right: calc(3 * var(--tw-spacing));
}

.mt-1 {
    margin-top: calc(1 * var(--tw-spacing));
}

.mt-3 {
    margin-top: calc(3 * var(--tw-spacing));
}

.mt-4 {
    margin-top: calc(4 * var(--tw-spacing));
}

.mt-6 {
    margin-top: calc(6 * var(--tw-spacing));
}

.mt-8 {
    margin-top: calc(8 * var(--tw-spacing));
}

.mt-10 {
    margin-top: calc(10 * var(--tw-spacing));
}

.divider {
    border: 1px solid #F0F0F0;
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.flex-1 {
    flex: 1 1 0%
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.h-12 {
    height: calc(12 * var(--tw-spacing));
}

.h-48 {
    height: calc(48 * var(--tw-spacing));
}

.h-full {
    height: 100%
}

.w-1\/3 {
    width: 33.333333%
}

.w-12 {
    width: calc(12 * var(--tw-spacing));
}

.w-full {
    width: 100%
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-3xl {
    max-width: 48rem
}

.max-w-4xl {
    max-width: 56rem
}

.max-w-5xl {
    max-width: 64rem
}

.max-w-7xl {
    max-width: 80rem
}

.-translate-x-1\/4 {
    --tw-translate-x: -25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-1\/4 {
    --tw-translate-y: -25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-1\/4 {
    --tw-translate-x: 25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-y-1\/4 {
    --tw-translate-y: 25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-4 {
    gap: calc(4 * var(--tw-spacing));
}

.gap-5 {
    gap: calc(5 * var(--tw-spacing));
}

.gap-6 {
    gap: calc(6 * var(--tw-spacing));
}

.gap-8 {
    gap: calc(8 * var(--tw-spacing));
}

.whitespace-nowrap {
    white-space: nowrap;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2 * var(--tw-spacing) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2 * var(--tw-spacing) * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3 * var(--tw-spacing) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3 * var(--tw-spacing) * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(4 * var(--tw-spacing) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(4 * var(--tw-spacing) * var(--tw-space-y-reverse));
}

.overflow-hidden {
    overflow: hidden;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-l-full {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

.rounded-r-full {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}

.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-t {
    border-top-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.radius-4,.radius-small {
    border-radius: 4px;
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.object-cover {
    object-fit: cover;
}

.p-1 {
    padding: calc(1 * var(--tw-spacing));
}

.p-4 {
    padding: calc(4 * var(--tw-spacing));
}

.p-5 {
    padding: calc(5 * var(--tw-spacing));
}

.p-6 {
    padding: calc(6 * var(--tw-spacing));
}

.px-2 {
    padding-left: calc(2 * var(--tw-spacing));
    padding-right: calc(2 * var(--tw-spacing));
}

.px-3 {
    padding-left: calc(3 * var(--tw-spacing));
    padding-right: calc(3 * var(--tw-spacing));
}

.px-4 {
    padding-left: calc(4 * var(--tw-spacing));
    padding-right: calc(4 * var(--tw-spacing));
}

.px-6 {
    padding-left: calc(6 * var(--tw-spacing));
    padding-right: calc(6 * var(--tw-spacing));
}

.py-1 {
    padding-top: calc(1 * var(--tw-spacing));
    padding-bottom: calc(1 * var(--tw-spacing));
}

.py-3 {
    padding-top: calc(3 * var(--tw-spacing));
    padding-bottom: calc(3 * var(--tw-spacing));
}

.py-12 {
    padding-top: calc(12 * var(--tw-spacing));
    padding-bottom: calc(12 * var(--tw-spacing));
}

.py-16 {
    padding-top: calc(16 * var(--tw-spacing));
    padding-bottom: calc(16 * var(--tw-spacing));
}

.py-20 {
    padding-top: calc(20 * var(--tw-spacing));
    padding-bottom: calc(20 * var(--tw-spacing));
}

.pb-3 {
    padding-bottom: calc(3 * var(--tw-spacing));
}

.pb-6 {
    padding-bottom: calc(6 * var(--tw-spacing));
}

.pb-12 {
    padding-bottom: calc(12 * var(--tw-spacing));
}

.pb-20 {
    padding-bottom: calc(20 * var(--tw-spacing));
}

.pt-32 {
    padding-top: calc(32 * var(--tw-spacing));
}

.right-6 {
    right: calc(6 * var(--tw-spacing));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-active {
    color: #FF5500;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.border-default {
    border: 1px solid rgba(0,0,0,0.12);
}

.border-active {
    color: #FF5500;
}

.bg-active {
    background-color: rgba(255,90,7,0.1)
}

.bg-linear-gradient {
    background: linear-gradient( 270deg, #FF8000 0%, #FF5500 100%);
}

.font-sans {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-\[clamp\(1\.25rem\2c 3vw\2c 1\.5rem\)\] {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.25rem\)\] {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.text-\[clamp\(2rem\2c 5vw\2c 3\.5rem\)\] {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xxl {
    font-size: 1.5rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-tight {
    line-height: 1.25;
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, 0.6) !important;
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-primary {
    --tw-text-opacity: 1;
    color: #FF8F32;
}

.text-error {
    color: #F12900;
}

.text-dark {
    --tw-text-opacity: 1;
    color: #141414;
}

.text-secondary {
    --tw-text-opacity: 1;
    color: #FF8F32;
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, 0.6) !important;
}

.bg-primary\/10 {
    background-color: rgb(255 143 50 / 0.1);
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: #FF8F32;
}

.border {
    border-width: 1px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.border-primary {
    --tw-border-opacity: 1;
    border-color: #FF8F32;
}

.hover\:bg-primary\/5:hover {
    background-color: rgb(255 143 50 / 0.05);
}

.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.duration-500 {
    transition-duration: 500ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* transition-duration: 150ms; */
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function:
            cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bg-primary\/5 {
    background-color: rgb(255 143 50 / 0.05);
}
.bg-black-50 {
    background-color: rgba(0, 0, 0, 0.5);
}
.width-100vw {
    width: 100vw;
}
.height-100vh {
    height: 100vh;
}

.z-50 {
    z-index: 50;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(255, 122, 0, 0.1), 0 10px 10px -5px rgba(255, 122, 0, 0.04);
}

.plan-popular {
    position: relative;
}

.plan-popular::before {
    content: "POPULAR";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FF7D00;
    color: white;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.required-mark {
    margin-right: 5px;
    color: red;
    font-weight: 400;
}
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.z-0{z-index:0}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-stack-lg{margin-bottom:32px}.mt-1{margin-top:.25rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-8{height:2rem}.h-\[400px\]{height:400px}.h-full{height:100%}.max-h-\[360px\]{max-height:360px}.w-16{width:4rem}.w-8{width:2rem}.w-\[15\%\]{width:15%}.w-\[40\%\]{width:40%}.w-\[45\%\]{width:45%}.w-\[500px\]{width:500px}.w-full{width:100%}.min-w-max{min-width:-moz-max-content;min-width:max-content}.max-w-2xl{max-width:42rem}.max-w-container-max{max-width:1200px}.max-w-xl{max-width:36rem}.flex-shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-outline-variant>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(221 193 178/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.scroll-smooth{scroll-behavior:smooth}.whitespace-nowrap{white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-outline-variant{--tw-border-opacity:1;border-color:rgb(221 193 178/var(--tw-border-opacity,1))}.border-primary{--tw-border-opacity:1;border-color:rgb(255 143 50/var(--tw-border-opacity,1))}.bg-background{--tw-bg-opacity:1;background-color:rgb(248 249 251/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(255 143 50/var(--tw-bg-opacity,1))}.bg-primary-fixed{--tw-bg-opacity:1;background-color:rgb(255 226 204/var(--tw-bg-opacity,1))}.bg-surface{--tw-bg-opacity:1;background-color:rgb(248 249 251/var(--tw-bg-opacity,1))}.bg-surface-container-high{--tw-bg-opacity:1;background-color:rgb(231 232 234/var(--tw-bg-opacity,1))}.bg-surface-container-low{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-surface-container-lowest,.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-opacity-20{--tw-bg-opacity:0.2}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-margin-mobile{padding-left:16px;padding-right:16px}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:10rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-section-padding{padding-top:80px;padding-bottom:80px}.py-stack-lg{padding-top:32px;}.pb-1{padding-bottom:.25rem}.text-left{text-align:left}.text-center{text-align:center}.align-top{vertical-align:top}.font-display-lg,.font-headline-lg,.font-headline-md{font-family:"Plus Jakarta Sans"}.font-body-md,.font-label-md{font-family:Inter}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-\[20px\]{font-size:20px !important}.text-\[32px\]{font-size:32px !important}.text-\[48px\]{font-size:48px !important}.text-body-lg{font-size:16px;line-height:28px;font-weight:400}.text-body-md{font-size:16px;line-height:24px;font-weight:400}.text-display-lg{font-size:48px;line-height:56px;font-weight:700}.text-headline-lg{font-size:32px !important;line-height:40px;font-weight:600}.text-headline-md{font-size:24px;line-height:32px;font-weight:600}.text-label-md{font-size:14px;line-height:20px;font-weight:500}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-on-surface{--tw-text-opacity:1;color:rgb(25 28 30/var(--tw-text-opacity,1))}.text-on-surface-variant{--tw-text-opacity:1;color:rgb(86 67 55/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(255 143 50/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.line-through{text-decoration-line:line-through}.opacity-70{opacity:.7}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:-translate-y-2:hover{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-primary-fixed:hover{--tw-bg-opacity:1;background-color:rgb(255 226 204/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-high:hover{--tw-bg-opacity:1;background-color:rgb(231 232 234/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-low:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.hover\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:px-gutter{padding-left:24px;padding-right:24px}.md\:pb-0{padding-bottom:0}}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1280px){.xl\:w-\[600px\]{width:600px}}@media (min-width:1536px){.\32xl\:w-\[640px\]{width:640px}}
/* 精品CN2 专题页（精品CN2服务器 / 精品CN2裸机云）专属样式
 * 还原 Confluence 设计稿（CN2物理服务器.html / CN2裸机云.html）：
 * Material Design 3 橙色主题 + Plus Jakarta Sans / Inter 字体 + Material Symbols 图标。
 * 主题色板/间距/字号 token 由模板内联的 tailwind.config 提供（配合 Tailwind CDN）。
 * 此文件只承载非 Tailwind 的静态样式：字体默认值、图标字体类、装饰类。
 * 仅作用于带 .product-page 包裹的两个新页面，不影响导航/页尾/其它页面。
 */

/* ===== 页面默认字体（正文 Inter，标题类由 tailwind fontFamily 切到 Plus Jakarta） ===== */
.product-page {
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #191c1e;
    /* 对齐设计稿 body 的 font-body-md：16px / 24px / 400 */
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

/* ===== Material Symbols 图标字体类 ===== */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* ===== 设计稿装饰类 ===== */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 143, 50, 0.1);
}
.hero-pattern {
    background-color: #f8f9fb;
    background-image: radial-gradient(#FF8F32 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    background-position: 0 0;
}
.active-tab {
    box-shadow: 0 4px 12px rgba(255, 143, 50, 0.15);
}
.transition-all-custom {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 横向滚动条（地区切换） */
.custom-scrollbar::-webkit-scrollbar { height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 143, 50, 0.2); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 143, 50, 0.4); }

/* 设计稿用到的 active:scale-98（非默认 Tailwind 刻度） */
.product-page .active\:scale-98:active { transform: scale(0.98); }

/* 多IP（站群）专题页专属样式 —— 多IP物理服务器 / 多IP裸机云
 * 还原 Confluence 设计稿（RakSmart_多IP物理服务器_推荐配置标题版.html / 多IP裸机云同款）。
 * 主题 token（颜色/间距/字号/字体）沿用精品CN2 专题页那一套：
 *   cn2-fonts.css + cn2-tailwind.css + cn2.css
 * 本文件承载两部分：
 *   1) 设计稿用到、但已编译的 cn2-tailwind.css 里没有的 Tailwind 工具类（见下）
 *   2) cn2.css 里没有的、多IP页新增的装饰类（.product-page 作用域内）
 */

/* ============================================================================
 * 1) 补齐缺失的 Tailwind 工具类
 *
 * 本仓库没有 Tailwind 构建环境，cn2-tailwind.css 是按「精品CN2 页面用到的类」
 * 预编译出来的产物。多IP 页面用到的下列工具类不在其中，缺了就完全没有样式 ——
 * 例如线路 tab 与地区 tab 之间的 mt-6 间距、hero 图容器的 w-[370px]/h-[260px]。
 *
 * 取值与 Tailwind 默认刻度一致：1=.25rem 2=.5rem 3=.75rem 4=1rem 6=1.5rem 12=3rem
 * 断点沿用同一套：sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536
 * 注意 2xl: 的类名以数字开头，CSS 里必须转义成 .\32xl\:
 *
 * 只有引入 group.css 的多IP 页面会加载，不影响其它页面。
 * 以后如果补了 Tailwind 构建，这一段可以整体删掉。
 * ========================================================================== */

/* flex / 对齐 */
.flex-1 { flex: 1 1 0%; }
.items-start { align-items: flex-start; }
.gap-3 { gap: .75rem; }

/* 外距 */
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-\[10px\] { margin-top: 10px; }
.mx-1 { margin-left: .25rem; margin-right: .25rem; }

/* 内距 */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.pb-12 { padding-bottom: 3rem; }

/* 字号 */
/* text-sm and leading-* use the shared utility definitions above. */

/* 尺寸 */
.max-w-full { max-width: 100%; }
.max-h-full { max-height: 100%; }
.max-w-3xl { max-width: 48rem; }
.w-\[370px\] { width: 370px; }
.h-\[260px\] { height: 260px; }
@media (min-width: 1280px) { .xl\:w-\[420px\] { width: 420px; } }
@media (min-width: 1536px) { .\32xl\:w-\[450px\] { width: 450px; } }

/* ----------------------------------------------------------------------------
 * filter-new 组件用 closest('li.container') 定过滤作用域，所以包裹「tab 区 + 产品表格」
 * 的那个 li 必须叫 container。但 Tailwind 的 .container 自带 max-width（640~1536px），
 * 会把里面本该整宽的 section 背景带压窄、且左对齐。这里只对多IP 页的这个包裹层解除限制。
 * -------------------------------------------------------------------------- */
.group-table-wrap,
.group-table-wrap > li.container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================================================================
 * 2) 多IP页装饰类（cn2.css 里没有的）
 * ========================================================================== */

/* ===== 上新徽标（Banner 与「北美精品CN2方案」小节共用） ===== */
.product-page .launch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    margin-bottom: 18px;
    border-radius: 9999px;
    background: #fff1e5;
    border: 1px solid #ffd5b6;
    color: #b85000;
    font-size: 13px;
    font-weight: 700;
}
.product-page .launch-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #FF8F32;
    box-shadow: 0 0 0 5px rgba(255, 143, 50, .12);
}

/* ===== 线路类型选择 ===== */
.product-page #line-tabs {
    padding-top: 10px;
}
.product-page .line-button {
    position: relative;
}
/* 不可用线路（当前实现不渲染不可用线路，保留以备后用） */
.product-page .line-button[aria-disabled="true"] {
    color: #a7adb7;
    background: #f0f1f3;
    border-color: #e1e3e7;
    cursor: not-allowed;
    box-shadow: none;
}
.product-page .line-button[aria-disabled="true"]:hover {
    background: #f0f1f3;
    color: #a7adb7;
}
.product-page .line-recommend {
    position: absolute;
    right: -7px;
    top: -10px;
    z-index: 30;
    padding: 1px 7px;
    border-radius: 9999px;
    background: #FF8F32;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    letter-spacing: .3px;
    box-shadow: 0 4px 10px rgba(255, 143, 50, .22);
}
/* ===== 多IP页纵向节奏：每一块只负责自己的「上外边距」 =====
   这样任何一块缺席（比如该地区没有筛选项、或没有线路说明），
   下面的块自己带着间距顶上来，不会塌成 0，也不会出现双倍间距。

   ⚠️ 只限定在多IP页（.group-config-section / .group-list-section 这两个 class
      只在 group-product-list.html 里出现）。
      .filter-container 的样式写在 public/filter-new.html 的内联 <style> 里，
      那个片段被 5 类列表页共用（cn2 / 裸机 / 独服 / 产品列表 / 多IP），
      而其中 product-bare-list-new、product-dedicated-list-new、cn2-product-list
      紧跟其后的表格都没有自己的上边距 —— 直接去掉那份公共的 margin-bottom，
      那几个页面会塌。要全站铺开的话，得同时给它们各自的下一块补上 margin-top。

   ⚠️ 别用 tailwind 的 mt-4 / pb-12 这类工具类：cn2-tailwind.css 是手工维护的静态快照，
      仓库里没有 tailwind 构建，只有已经编译进去的那些类才生效（margin-top 一族只有 .mt-1）。 */
.product-page .group-config-section .filter-container {
    margin-bottom: 0;
}
.product-page .group-list-section {
    margin-top: 16px;
}

/* 线路说明（设计稿「线路资源方案D：竖线稍长对齐版」）
   不是卡片：没有底色、边框、圆角和阴影，只有左侧一根橙色竖线 + 一行文字。
   标题行（原 font-semibold 的线路名）按需求方要求已从模板里删掉，这里不再有对应样式。 */
.product-page .line-description {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 8px;
    padding: 6px 0 6px 22px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* 竖线：定高 18px 并垂直居中，比单行文字略短一点，多行时也不会拉长 */
.product-page .line-description::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 18px;
    background: #ff8f32;
    border-radius: 2px;
}
.product-page .line-description .line-copy {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
    color: #606773;
    overflow-wrap: anywhere;
}

/* ===== 多 IP × 精品CN2 示意图 ===== */
.product-page .multi-ip-visual {
    position: relative;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(145deg, #18243a, #2e4c77);
    box-shadow: 0 22px 55px rgba(28, 45, 74, .18);
}
.product-page .multi-ip-visual::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -80px;
    top: -90px;
    border-radius: 9999px;
    background: rgba(255, 143, 50, .16);
}
.product-page .multi-ip-visual::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: -100px;
    bottom: -110px;
    border-radius: 9999px;
    background: rgba(59, 111, 221, .18);
}
.product-page .multi-ip-visual svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Additional utilities used by the approved product prototypes. */

@media(min-width:1536px){.product-page .\32 xl\:w-\[450px\]{width:450px}}
@media(min-width:1536px){.product-page .\32 xl\:w-\[580px\]{width:580px}}
@media(min-width:1536px){.product-page .\32 xl\:w-\[640px\]{width:640px}}
.product-page .bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.product-page .duration-300{transition-duration:.3s}
.product-page .from-orange-500\/5{--tw-gradient-from:rgba(249,115,22,0.05);--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.product-page .gap-14{gap:3.5rem}
.product-page .h-24{height:6.0rem}
.product-page .hover\:bg-primary\/90:hover{background-color:rgba(255,143,50,0.9)}
.product-page .justify-start{justify-content:flex-start}
.product-page .leading-none{line-height:1}
.product-page .max-h-\[340px\]{max-height:340px}
@media(min-width:768px){.product-page .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.product-page .mr-4{margin-right:1.0rem}
.product-page .pt-24{padding-top:6.0rem}
.product-page .pt-4{padding-top:1.0rem}
.product-page .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.product-page .shrink-0{flex-shrink:0}
.product-page .text-\[28px\]{font-size:28px}
.product-page .text-\[clamp\(1\.25rem\,3vw\,1\.5rem\)\]{font-size:clamp(1.25rem,3vw,1.5rem)}
.product-page .text-\[clamp\(1\.5rem\,3vw\,2\.25rem\)\]{font-size:clamp(1.5rem,3vw,2.25rem)}
.product-page .text-\[clamp\(2rem\,5vw\,3\.5rem\)\]{font-size:clamp(2rem,5vw,3.5rem)}
.product-page .to-orange-500\/5{--tw-gradient-to:rgba(249,115,22,0.05)}
.product-page .via-primary\/10{--tw-gradient-stops:var(--tw-gradient-from),rgba(255,143,50,0.1),var(--tw-gradient-to)}
.product-page .w-\[440px\]{width:440px}
@media(min-width:1280px){.product-page .xl\:mr-8{margin-right:2.0rem}}
@media(min-width:1280px){.product-page .xl\:w-\[520px\]{width:520px}}