.package-page {
    background: var(--gs-body-bg);
    color: var(--gs-black);
    position: relative
}

.package-hero {
    min-height: clamp(530px, 82vh, 780px);
    padding-top: clamp(10rem,14dvw, 12rem);
    align-items: flex-start;
    padding-bottom: 20dvw;
    display: flex;
    position: relative;
    overflow: hidden
}

.package-hero-bg {
    will-change: transform;
    background-image: linear-gradient(#0003 0%, #0000 100%), url(../../../storage/2026/08/setup-hong-kong-company.webp);
    background-position: 50%;
    background-size: cover;
    position: absolute;
    inset: 0;
    transform: translate(0, 0)scale(1.05)
}

.package-hero-content {
    z-index: 1;
    will-change: transform;
    padding-top: clamp(2rem, 7vw, 4rem);
    padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
    position: relative;
    transform: translate(0, 0)
}

@media (prefers-reduced-motion:reduce) {

    .package-hero-bg,
    .package-hero-content {
        transform: none
    }
}

.package-kicker {
    letter-spacing: .08em;
    color: var(--gs-white);
    background: var(--gs-bangladesh);
    border-radius: 1rem;
    margin-bottom: .8rem;
    padding: .25rem .5rem;
    font-size: clamp(.76rem, 1vw, .94rem);
    display: inline-block
}

.package-kicker mark {
    color: var(--gs-peridot);
    background-color: #0000
}

.package-hero h1 {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    line-height: .9
}

.package-subhead {
    color: #f6f8ff;
    font-size: var(--section-sm-copy-font-size);
    max-width: 64ch;
    margin-bottom: 1.5rem
}

.package-pricing-card {
    background: #fff;
    border-radius: 2.25rem;
    width: min(1280px, 100%);
    margin-top: clamp(1.1rem, 3vw, 2.1rem);
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 45px #09102c47
}

.package-pricing-ribbon {
    text-align: center;
    color: var(--gs-white);
    letter-spacing: .01em;
    text-transform: none;
    z-index: 2;
    background: var(--gs-indigo);
    width: 12.5rem;
    padding: .5rem 0;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: 1.15rem;
    right: -4rem;
    transform: rotate(45deg);
    box-shadow: 3px 3px 3px #00000059
}

.package-pricing-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.4rem, 4vw, 4.5rem);
    display: grid
}

.package-price-block {
    text-align: center
}

.package-price-title {
    font-size: var(--section-sm-copy-font-size);
    margin-bottom: 1rem
}

.package-price {
    color: var(--gs-black);
    margin-bottom: .5rem;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    line-height: .95
}

.package-price-features {
    align-content: center;
    gap: clamp(1rem, 1.8vw, 1.9rem);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.package-price-features li {
    font-size: var(--section-sm-copy-font-size);
    color: var(--gs-black);
    padding-left: 2.2rem;
    font-weight: 400;
    line-height: 1.32;
    position: relative
}

.package-price-features li:before {
    content: "✓";
    color: var(--gs-carrot);
    font-size: 1.2em;
    font-weight: 900;
    position: absolute;
    top: .02em;
    left: 0
}

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

.check-list li {
    padding-left: 2.2rem;
    position: relative
}

.check-list li:before {
    content: "✓";
    color: var(--gs-carrot);
    font-size: 1.2em;
    font-weight: 900;
    position: absolute;
    top: .02em;
    left: 0
}

.package-price-features li.feature-link {
    padding-left: 2.2rem
}

.package-price-features li.feature-link:before {
    content: ""
}

.package-price-features li.feature-link a {
    color: var(--gs-black);
    text-underline-offset: var(--text-underline-offset);
    font-weight: 700;
    text-decoration: underline
}

.package-price-features li.feature-link a:hover {
    color: var(--gs-carrot)
}

.package-feature-trigger {
    color: var(--gs-black);
    font: inherit;
    text-underline-offset: var(--text-underline-offset);
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 700;
    text-decoration: underline
}

.package-feature-trigger:hover {
    color: var(--gs-carrot)
}

.package-modal-open {
    overflow: hidden
}

.package-feature-modal {
    z-index: 1300;
    place-items: start center;
    padding: clamp(.75rem, 1.8vw, 1.6rem);
    display: grid;
    position: fixed;
    inset: 0
}

.package-feature-modal[hidden] {
    display: none
}

.package-feature-modal-overlay {
    opacity: 0;
    background: #131b3b85;
    border: 0;
    transition: opacity .24s;
    position: absolute;
    inset: 0
}

.package-feature-modal-panel {
    opacity: 0;
    background: #f2eee7;
    border: 1px solid #dad8d4;
    border-radius: 2.3rem;
    width: min(1780px, 100%);
    max-height: calc(100vh - clamp(1.5rem, 4vw, 3.2rem));
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .24s;
    position: relative;
    overflow: hidden auto;
    transform: translateY(-42px);
    box-shadow: 0 26px 54px #050e2854
}

.panel-payment-methods {
    width: 100%;
    max-width: 200px;
    height: auto
}

.package-feature-modal.is-open .package-feature-modal-overlay {
    opacity: 1
}

.package-feature-modal.is-open .package-feature-modal-panel {
    opacity: 1;
    transform: translate(0, 0)
}

.package-feature-modal-close {
    color: #7a7a7a;
    background: 0 0;
    border: 0;
    padding: .1rem .4rem;
    font-size: 3rem;
    line-height: 1;
    position: absolute;
    top: 1.15rem;
    right: 1.2rem
}

.package-feature-modal-content {
    padding: clamp(2.4rem, 4.4vw, 4.1rem) clamp(1.2rem, 3vw, 4rem) 1.6rem
}

.package-feature-modal-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 4rem);
    display: grid
}

.package-feature-modal-columns section {
    text-align: left
}

.package-feature-modal-columns h3 {
    font-size: var(--section-sm-title-font-size);
    text-underline-offset: var(--text-underline-offset);
    margin-bottom: 1rem;
    font-weight: 700;
    text-decoration: underline
}

.package-feature-modal-columns ul {
    gap: .52rem;
    margin: 0 0 1.65rem;
    padding: 0;
    list-style: none;
    display: grid
}

.package-feature-modal-columns li {
    font-size: var(--section-sm-copy-font-size);
    color: var(--gs-black);
    padding-left: 2.45rem;
    line-height: 1.35;
    position: relative
}

.package-feature-modal-columns li:before {
    content: "✓";
    color: var(--gs-carrot);
    font-weight: 900;
    position: absolute;
    top: .02em;
    left: 0
}

.package-feature-modal-columns .info-wrap {
    vertical-align: middle;
    align-items: center;
    display: inline-flex;
    position: relative
}

.package-feature-modal-columns .info-dot {
    color: #8a8a8a;
    background: 0 0;
    border: 1px solid #b0b0b0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 1.18em;
    height: 1.18em;
    margin-left: .22rem;
    padding: 0;
    font-size: .72em;
    font-weight: 700;
    line-height: 1;
    display: inline-flex
}

.package-feature-modal-columns .info-dot:hover {
    color: #636363;
    border-color: #8d8d8d
}

.package-feature-modal-columns .info-tooltip {
    transform: translateX(calc(-50% + var(--info-tooltip-shift-x, 0px))) translateY(8px);
    color: #222;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: .65rem;
    width: min(420px, 80vw);
    max-width: calc(100vw - 2rem);
    max-height: min(52vh, 420px);
    padding: .58rem .66rem;
    font-size: .85rem;
    line-height: 1.4;
    transition: opacity .15s, transform .18s;
    position: absolute;
    bottom: calc(100% + .65rem);
    left: 50%;
    overflow: auto;
    box-shadow: 0 12px 28px #0812302e
}

.package-feature-modal-columns .info-wrap.is-open .info-tooltip {
    opacity: 1;
    transform: translateX(calc(-50% + var(--info-tooltip-shift-x, 0px))) translateY(0);
    pointer-events: auto
}

.package-feature-modal-columns .info-tooltip ul {
    margin: 0;
    padding-left: 1rem;
    list-style: outside;
    display: block
}

.package-feature-modal-columns .info-tooltip li {
    color: #2b2b2b;
    margin: 0 0 .48rem;
    padding: 0;
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.45;
    position: static
}

.package-feature-modal-columns .info-tooltip li:last-child {
    margin-bottom: 0
}

.package-feature-modal-columns .info-tooltip li:before {
    content: none
}

.package-feature-modal-columns .info-tooltip:after {
    content: "";
    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translate(-50%)rotate(45deg)
}

.package-feature-modal-columns .info-wrap[data-placement=bottom-start] .info-tooltip,
.package-feature-modal-columns .info-wrap[data-placement=bootm-start] .info-tooltip {
    transform: translateX(var(--info-tooltip-shift-x, 0px)) translateY(-8px);
    inset: calc(100% + .65rem) auto auto 0
}

.package-feature-modal-columns .info-wrap[data-placement=bottom-start].is-open .info-tooltip,
.package-feature-modal-columns .info-wrap[data-placement=bootm-start].is-open .info-tooltip {
    transform: translateX(var(--info-tooltip-shift-x, 0px)) translateY(0)
}

.package-feature-modal-columns .info-wrap[data-placement=bottom-start] .info-tooltip:after,
.package-feature-modal-columns .info-wrap[data-placement=bootm-start] .info-tooltip:after {
    top: -7px;
    bottom: auto;
    left: .95rem;
    transform: rotate(225deg)
}

.package-feature-modal-footnote {
    text-align: left;
    border-top: 1px solid #ddd8cf;
    padding: .95rem clamp(1.2rem, 3vw, 4rem)
}

.package-feature-modal-footnote p {
    font-size: var(--section-xs-copy-font-size);
    color: var(--gs-black);
    margin: 0
}

.package-network {
    z-index: 1;
    margin-top: -20dvw;
    position: relative
}

.package-network-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.2rem;
    margin-bottom: 1.6rem;
    display: grid
}

.package-network-tabs .network-tab {
    background: var(--gs-white);
    border: 3px solid #2f356f;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    margin: 0;
    padding: .9rem 1rem;
    font-size: .95rem;
    display: flex;
    box-shadow: 0 0 0 2px #ffffff38, 0 8px 22px #b6caff59
}

.package-network-tabs .network-tab:nth-child(2n) {
    border-color: #ff7f32;
    box-shadow: 0 0 0 2px #ffffff38, 0 8px 22px #ff9d5a59
}

.package-network-tabs .network-tab img {
    width: 100%;
    max-width: 180px;
    height: auto;
    display: block
}

.package-network-tabs .network-tab:last-child img {
    max-width: 160px
}

.package-compare-grid {
    z-index: 3;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
    margin-top: 5rem;
    display: grid;
    position: relative
}

.package-compare-card {
    margin-bottom: 6rem;
    padding: 2.1rem 3.5rem 2.7rem;
    position: relative
}

.package-compare-card:before {
    content: "";
    background: var(--gs-white);
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    width: 100%;
    height: calc(100% + 5.8rem);
    position: absolute;
    top: -1rem;
    left: -1rem
}

.package-compare-card:after {
    content: "";
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
    width: 100%;
    height: 6rem;
    position: absolute;
    bottom: -5.8rem;
    left: 0
}

.package-compare-card.primary {
    background: var(--gs-carrot);
    color: var(--gs-white)
}

.package-compare-card.primary:after {
    background: var(--gs-carrot)
}

.package-compare-card.secondary {
    color: #5c5c5c;
    background: #e9e9e9
}

.package-compare-card.secondary:after {
    background: #e9e9e9
}

.package-compare-card h3 {
    font-size: var(--section-sm-title-font-size);
    margin-bottom: 1.4rem;
    font-weight: 700;
    line-height: 1.02
}

.package-compare-card p {
    font-size: var(--section-copy-font-size);
    margin-bottom: 1.4rem;
    font-weight: 700;
    line-height: 1.1
}

.package-compare-card ul {
    font-size: var(--section-sm-copy-font-size);
    gap: .5rem;
    margin: 0;
    padding-left: 1.15rem;
    line-height: 1.5;
    display: grid
}

.package-accounting {
    padding: clamp(4rem, 7vw, 7rem) 0;
    position: relative
}

.package-accounting-copy {
    font-size: var(--section-sm-copy-font-size);
    line-height: 1.68
}

.package-accounting-copy ul {
    margin-top: .9rem;
    margin-bottom: .9rem
}

.package-accounting-media {
    position: relative
}

.package-accounting-media img {
    object-fit: cover;
    aspect-ratio: 4/5;
    width: 100%;
    height: auto;
    margin-bottom: 8rem;
    display: block
}

.package-accounting-note {
    background: var(--gs-carrot);
    color: #fff;
    width: 90%;
    padding: .9rem 1.5rem;
    font-size: .92rem;
    line-height: 1.45;
    position: absolute;
    bottom: calc(-1*clamp(5rem, 60dvw, 8rem));
    left: auto;
    right: -1rem
}

.package-accounting-note:after {
    content: "";
    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
    background: var(--gs-carrot);
    width: 100%;
    height: 6rem;
    position: absolute;
    bottom: -5.8rem;
    left: 0
}

.package-process {
    margin-top: clamp(5rem, 10dvw, 10rem)
}

.package-process-title {
    color: var(--gs-white)
}

.package-process-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
    display: grid
}

.package-process-step p {
    line-height: 1.2
}

.package-process-image {
    border-radius: .95rem;
    overflow: hidden
}

.package-process-image img {
    aspect-ratio: 4/5;
    object-fit: cover;
    width: 100%;
    display: block
}

.testimonials-section {
    margin-top: clamp(5rem, 10dvw, 10rem);
    margin-bottom: clamp(5rem, 10dvw, 10rem)
}

.package-contact {
    padding: clamp(5rem, 10dvw, 10rem) 0;
    position: relative
}

.package-contact .container {
    z-index: 1;
    position: relative
}

.package-contact-card {
    background: #ffffffb3;
    border-radius: 1rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    box-shadow: 0 20px 36px #11162c1f
}

.hero-rating {
	display: flex;
	align-items: center;
    justify-content: center;
	gap: 0.35rem;
	color: rgba(255, 255, 255, 0.95);
	font-size: clamp(0.95rem, 1.28vw, 1.65rem);
	line-height: 1;
	font-weight: 500;
	opacity: 0;
    will-change: opacity, transform;
	animation: hero-rating-slide-up 1.08s cubic-bezier(0.22, 1, 0.36, 1) 0.54s forwards;
}
@keyframes hero-rating-slide-up {
	0% {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes hero-rating-scroll-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 46px, 0) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@supports (animation-timeline: view()) {
    .hero-rating {
        opacity: 0;
        animation-name: hero-rating-scroll-in;
        animation-duration: 1ms;
        animation-delay: 0s;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-timeline: view(block);
        animation-range: entry 10% cover 42%;
    }
}

@media (prefers-reduced-motion: reduce) {
	.hero-rating {
		opacity: 1;
		animation: none;
		transform: none;
	}
}

.hero-rating-google .google-rating-logo {
	width: auto;
	height: clamp(1.25rem, 1.58vw, 1.95rem);
}

.hero-rating-score {
	color: #ff7a2f;
	font-weight: 700;
}

.hero-rating-stars {
	color: #ff7a2f;
	letter-spacing: 0.03em;
	font-size: 0.94em;
}

.hero-rating-reviews {
	color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 991.98px) {
	.hero-rating {
		font-size: clamp(0.92rem, 2.6vw, 1.24rem);
		flex-wrap: wrap;
	}
}

@media (width>=768px) {
    .package-pricing-body {
        grid-template-columns: minmax(0, .68fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(1.4rem, 2.2vw, 2.6rem)
    }

    .package-price-block {
        border-right: 1px solid #e8e9ef;
        padding-right: clamp(1rem, 2vw, 2.2rem)
    }

    .package-compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem
    }

    .package-process-grid,
    .package-feature-modal-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 767.98px) {
	.hero-rating {
		font-size: 0.95rem;
		gap: 0.25rem;
	}
}

@media (width>=992px) {
    .package-pricing-card {
        margin-bottom: 2rem
    }
}

@media (width<=767.98px) {
    .package-pricing-card {
        border-radius: 1.3rem
    }

    .package-pricing-body {
        gap: 1.1rem;
        padding: 1.35rem 1.15rem 1.45rem
    }

    .package-price-features {
        gap: .72rem;
        width: 90%;
        margin: 1rem auto
    }

    .package-price-features li,
    .package-price-features li.feature-link {
        padding-left: 1.6rem
    }

    .package-network-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .package-compare-card {
        min-height: auto;
        padding: 1.55rem 2rem 2rem
    }

    .package-feature-modal-panel {
        border-radius: 1.15rem
    }

    .package-feature-modal-close {
        font-size: 2.2rem;
        top: .6rem;
        right: .72rem
    }

    .package-feature-modal-content {
        padding-top: 2.35rem
    }
}