/* Category landing pages — Figma node 977:13879 and 995:366 */
.cp-page {
    --cp-navy: #00275b;
    --cp-blue: #014aad;
    --cp-bright-blue: #0868dc;
    --cp-text: #14213a;
    --cp-muted: #667085;
    --cp-line: #e8edf4;
    --cp-body-size: 16px;
    --cp-small-size: 14px;
    --cp-heading-size: 40px;
    color: var(--cp-text);
    overflow: hidden;
}

.cp-container {
    max-width: 1176px;
}

.cp-hero {
    min-height: 641px;
    position: relative;
    font-family: "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.cp-breadcrumb,
.cp-breadcrumb *,
.cp-hero-heading,
.cp-hero-heading *,
.cp-hero-subtitle,
.cp-hero-subtitle *,
.cp-btn,
.cp-hero-trust,
.cp-hero-trust span {
    font-family: "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif;
}

.cp-hero .cp-container {
    min-height: 641px;
    display: flex;
    flex-direction: column;
}

.cp-breadcrumb {
    padding-top: 36px;
    font-size: 14px;
    line-height: 1.5;
}

.cp-breadcrumb .breadcrumb-item,
.cp-breadcrumb .breadcrumb-item.active,
.cp-breadcrumb .breadcrumb-item a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
}

.cp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.48);
}

.cp-hero-content {
    width: min(960px, 100%);
    margin: auto;
    padding: 52px 0 40px;
    text-align: center;
}

.cp-hero-heading {
    color: #fff;
    font-size: clamp(44px, 4.2vw, 52px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 0 0 25px;
    paint-order: stroke fill;
    -webkit-text-stroke: 2px rgba(0, 31, 72, .96);
    text-shadow: 0 2px 3px rgba(0, 22, 53, .88), 0 5px 14px rgba(0, 20, 49, .34);
}

.cp-hero-heading-line { display: block; }
.cp-hero-heading,
.cp-hero-heading * { font-weight: 700; }
.cp-hero-heading-accent { color: #7cb3ff; }

.cp-hero-subtitle {
    max-width: 780px;
    margin: 0 auto 28px;
    display: flex;
    flex-direction: column;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 22, 53, .72);
}

.cp-hero-subtitle-primary {
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
}

.cp-hero-subtitle-secondary {
    font-size: 15.5px;
    line-height: 25px;
    font-weight: 400;
}

.cp-hero-actions,
.cp-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.cp-btn {
    min-width: 0;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s ease,
                background-color .35s ease;
}

.cp-btn i {
    font-size: 15px;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.cp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.cp-btn:hover i { transform: translateX(3px); }

.cp-btn-primary {
    color: #fff;
    background: var(--cp-bright-blue);
    padding-inline: 24px;
}

.cp-btn-primary:hover { color: #fff; }

.cp-btn-secondary {
    color: var(--cp-navy);
    background: #fff;
    border-color: rgba(255,255,255,.8);
    padding-inline: 22px;
}

.cp-btn-secondary:hover { color: var(--cp-navy); }

.cp-page--application .cp-hero-heading { margin-bottom: 38px; }
.cp-page--application .cp-hero-subtitle { margin-bottom: 41px; }
.cp-page--application .cp-btn {
    min-height: 54px;
}
.cp-page--application .cp-btn-primary { padding-inline: 33px; }
.cp-page--application .cp-btn-secondary { padding-inline: 32px; }
.cp-page--application .cp-hero-trust { min-height: 105px; }

.cp-hero-trust {
    min-height: 90px;
    padding: 22px 0 26px;
    border-top: 1px solid rgba(255,255,255,.19);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,.86);
}

.cp-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.cp-hero-trust img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    opacity: .85;
}

.cp-stats {
    background: #002f6c;
    color: #fff;
}

.cp-stats-grid {
    min-height: 196px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
}

.cp-stat-card {
    min-height: 104px;
    padding: 6px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.16);
}

.cp-stat-card:last-child { border-right: 0; }

.cp-stat-num {
    color: #fff;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.03em;
}

.cp-stat-num small {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-left: 3px;
}

.cp-stat-label {
    max-width: 190px;
    margin-top: 8px;
    color: rgba(255,255,255,.76);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
}

.cp-section {
    padding: 104px 0;
}

.cp-section-heading {
    margin-bottom: 48px;
}

.cp-section-heading--center {
    text-align: center;
}

.cp-kicker,
.cp-trusted {
    margin: 0 0 6px;
    color: var(--cp-blue);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.cp-section-heading h2 {
    margin: 0;
    color: var(--cp-text);
    font-size: var(--cp-heading-size);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.cp-section-intro {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--cp-muted);
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
}

.cp-products {
    background: #fff;
}

.cp-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cp-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(17,35,68,.04);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .45s ease,
                border-color .3s ease;
}

.cp-product-card:hover {
    color: inherit;
    transform: translateY(-7px);
    box-shadow: 0 20px 42px rgba(17,35,68,.13);
}

.cp-product-card.is-recommended {
    border: 3px solid #0871e8;
    box-shadow: 0 11px 30px rgba(1,74,173,.22);
}

.cp-product-badge {
    position: absolute;
    z-index: 2;
    left: 20px;
    top: -15px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    color: #fff;
    background: #0871e8;
    font-size: 14px;
    font-weight: 800;
}

.cp-product-badge i { font-size: 12px; }

.cp-product-img {
    height: 372px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px 11px 0 0;
    background: linear-gradient(135deg, #fbfbfb, #f3f3f3);
}

.cp-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.cp-product-card:hover .cp-product-img img { transform: scale(1.035); }

.cp-product-body {
    min-height: 264px;
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
}

.cp-product-type {
    margin: 0 0 4px;
    color: #5d6b82;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
}

.cp-product-title {
    margin: 0 0 10px;
    color: var(--cp-text);
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
}

.cp-product-desc {
    margin: 0 0 18px;
    color: var(--cp-muted);
    font-size: var(--cp-body-size);
    line-height: 1.7;
    font-weight: 400;
    flex: 1;
}

.cp-product-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cp-blue);
    font-size: 15px;
    font-weight: 800;
}

.cp-product-link i { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.cp-product-card:hover .cp-product-link i { transform: translateX(4px); }

.cp-page--application .cp-product-img {
    height: 305px;
    padding: 0;
}

.cp-page--application .cp-product-img img {
    object-fit: cover;
}

.cp-page--application .cp-product-body {
    min-height: 264px;
}

.cp-tips,
.cp-faq {
    background: #f8fafc;
}

.cp-tips-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.cp-tip-card {
    min-height: 224px;
    padding: 26px;
    border: 1px solid #e4e9f1;
    border-radius: 10px;
    background: #fff;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                box-shadow .4s ease,
                border-color .3s ease;
}

.cp-tip-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 10px;
    background: #eef5ff;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), background-color .35s ease;
}

.cp-tip-card:hover {
    transform: translateY(-5px);
    border-color: #d5e2f3;
    box-shadow: 0 16px 34px rgba(17,35,68,.09);
}

.cp-tip-card:hover .cp-tip-icon {
    transform: translateY(-2px) rotate(-2deg);
    background: #e4efff;
}

.cp-tip-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cp-tip-card h3 {
    margin: 0 0 7px;
    color: var(--cp-text);
    font-size: 19px;
    line-height: 1.4;
    font-weight: 800;
}

.cp-tip-card p {
    margin: 0;
    color: var(--cp-muted);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;
}

.cp-comparison {
    background: #fff;
}

.cp-comparison .cp-section-heading {
    max-width: 660px;
    margin-bottom: 20px;
}

.cp-comparison .cp-kicker {
    margin-bottom: 11px;
    line-height: 21px;
}

.cp-comparison .cp-section-heading h2 {
    font-size: 38px;
    line-height: 1.15;
}

.cp-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: #8ca9cf #edf2f8;
    overscroll-behavior-inline: contain;
}

.cp-table-wrap:focus-visible {
    outline: 3px solid rgba(8,104,220,.3);
    outline-offset: 4px;
}

.cp-table-wrap::-webkit-scrollbar { height: 10px; }
.cp-table-wrap::-webkit-scrollbar-track { background: #edf2f8; }
.cp-table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid #edf2f8;
    border-radius: 999px;
    background: #8ca9cf;
}

.cp-table-scroll-hint {
    display: none;
}

.cp-table {
    width: 100%;
    min-width: 680px;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.cp-table th,
.cp-table td {
    border: 0;
    border-bottom: 1px solid var(--cp-line);
    padding: 16px 22px;
    text-align: center;
    vertical-align: middle;
    color: #475467;
    background: #fff;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
}

.cp-table-label-col { width: 31.76%; }

.cp-table tbody td {
    border-left: 1px solid var(--cp-line);
}

.cp-table tr:last-child th,
.cp-table tr:last-child td { border-bottom: 0; }

.cp-table tbody tr:last-child th:first-child { border-bottom-left-radius: 15px; }
.cp-table tbody tr:last-child td:last-child { border-bottom-right-radius: 15px; }

.cp-table thead th {
    position: relative;
    height: 97px;
    padding: 20px 22px 21px;
    color: #fff;
    background: #0754aa;
}

.cp-table thead th:first-child {
    color: var(--cp-blue);
    background: #f9fafb;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    border-top-left-radius: 15px;
}

.cp-table thead th:last-child { border-top-right-radius: 15px; }

.cp-table thead th:not(:first-child) {
    border-left: 1px solid rgba(255,255,255,.14);
}

.cp-table thead th:nth-child(2) {
    background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(102,102,102,.2)), #1567d6;
}
.cp-table thead th:nth-child(3) {
    background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(102,102,102,.2)), #003884;
}
.cp-table thead th:nth-child(4) {
    background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(102,102,102,.2)), #00275b;
}

.cp-table thead th.is-recommended { border-bottom: 2px solid #7cb3ff; }

.cp-table thead th small,
.cp-table thead th strong {
    display: block;
    color: inherit;
}

.cp-table thead th small {
    margin-bottom: 2px;
    color: #c5deff;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: 1;
}

.cp-table thead th strong {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 800;
}

.cp-table-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    min-height: 23px;
    padding: 1px 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 999px;
    color: var(--cp-blue);
    white-space: nowrap;
    font-size: 11px;
    line-height: 21px;
    font-weight: 800;
}

.cp-table-badge i { color: inherit; font-size: 8px; }

.cp-table tbody th {
    color: #475467;
    text-align: left;
    font-weight: 600;
    font-size: 15px;
}

.cp-table tbody .is-recommended {
    background: #f3f8ff;
    color: var(--cp-blue);
    font-weight: 600;
}

.cp-comparison-note {
    min-height: 58px;
    margin: 20px 0 0;
    padding: 16px 19px;
    display: flex;
    gap: 12px;
    border: 1px solid var(--cp-line);
    border-radius: 12px;
    color: #475467;
    background: #f9fafb;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
}

.cp-comparison-note i { color: var(--cp-blue); margin-top: 1px; font-size: 20px; }

.cp-cta-dark {
    min-height: 406px;
    padding: 70px 0;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(115deg, #00275b 0%, #064ca3 100%);
    position: relative;
    overflow: hidden;
}

.cp-cta-dark::before,
.cp-cta-dark::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(4px);
    opacity: .2;
    background: radial-gradient(circle, rgba(124,179,255,.8), rgba(124,179,255,0) 68%);
    animation: cpCtaGlow 9s ease-in-out infinite alternate;
}

.cp-cta-dark::before { top: -250px; left: -120px; }
.cp-cta-dark::after {
    right: -140px;
    bottom: -280px;
    animation-delay: -4.5s;
}

.cp-cta-dark .cp-container { position: relative; z-index: 1; }

.cp-cta-dark h2 {
    margin: 0 0 17px;
    color: #fff;
    font-size: 40px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cp-cta-dark p {
    width: min(710px, 100%);
    margin: 0 auto 29px;
    color: rgba(255,255,255,.78);
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
}

.cp-cta-pill {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                background-color .35s ease,
                border-color .35s ease;
}

.cp-cta-pill i { font-size: 18px; }

.cp-cta-pill:hover {
    color: #fff;
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.7);
    transform: translateY(-2px);
}

.cp-faq {
    min-height: 720px;
}

.cp-faq-list {
    width: min(812px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--cp-line);
    border-radius: 11px;
    background: #fff;
}

.cp-faq-item {
    border: 0;
    border-bottom: 1px solid var(--cp-line);
    background: #fff;
    transition: background-color .3s ease;
}

.cp-faq-item:last-child { border-bottom: 0; }

.cp-faq-item summary {
    min-height: 78px;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    cursor: pointer;
    color: #23324b;
    background: #fff;
    font-size: 17px;
    font-weight: 800;
    transition: color .3s ease, background-color .3s ease;
}

.cp-faq-item summary:hover { color: var(--cp-blue); background: #fbfdff; }
.cp-faq-item[open] summary { color: var(--cp-blue); }

.cp-faq-item summary::-webkit-details-marker { display: none; }

.cp-faq-toggle {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    position: relative;
    border-radius: 4px;
    background-color: #f0f5fb;
}

.cp-faq-toggle::before,
.cp-faq-toggle::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 14px;
    width: 14px;
    height: 2px;
    background: var(--cp-blue);
}

.cp-faq-toggle::after { transform: rotate(90deg); transition: transform .2s; }
.cp-faq-item[open] .cp-faq-toggle::after { transform: rotate(0); }

.cp-faq-answer {
    padding: 0 26px 24px;
    color: #667085;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}

.cp-brands {
    min-height: 328px;
    background: #fff;
}

.cp-brands .cp-section-heading { margin-bottom: 55px; }
.cp-trusted { color: #748198; font-size: 13px; }

.cp-brand-grid {
    width: min(1248px, calc(100vw - 32px));
    margin-left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 38px;
}

.cp-brand-item {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-brand-item img {
    max-width: 100%;
    max-height: 66px;
    object-fit: contain;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}

.cp-brand-item:hover img { transform: translateY(-3px) scale(1.035); }

/* Motion is enabled after the small observer script is ready, so content stays
   visible when JavaScript is unavailable. Only opacity and transforms animate. */
.cp-motion-ready .cp-motion-item {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity .72s ease,
                transform .72s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--cp-motion-delay, 0ms);
    will-change: opacity, transform;
}

.cp-motion-ready .cp-motion-item[data-cp-motion="scale"] {
    transform: translate3d(0, 14px, 0) scale(.96);
}

.cp-motion-ready .cp-motion-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

.cp-motion-ready .cp-breadcrumb {
    animation: cpHeroFadeDown .62s cubic-bezier(.22, 1, .36, 1) .04s both;
}

.cp-motion-ready .cp-hero-heading-line {
    animation: cpHeroRise .82s cubic-bezier(.16, 1, .3, 1) both;
}

.cp-motion-ready .cp-hero-heading-line:nth-child(1) { animation-delay: .12s; }
.cp-motion-ready .cp-hero-heading-line:nth-child(2) { animation-delay: .23s; }
.cp-motion-ready .cp-hero-subtitle-primary {
    animation: cpHeroRise .74s cubic-bezier(.22, 1, .36, 1) .32s both;
}
.cp-motion-ready .cp-hero-subtitle-secondary {
    animation: cpHeroRise .74s cubic-bezier(.22, 1, .36, 1) .39s both;
}
.cp-motion-ready .cp-hero-actions {
    animation: cpHeroRise .72s cubic-bezier(.22, 1, .36, 1) .47s both;
}
.cp-motion-ready .cp-hero-trust {
    animation: cpHeroFade .8s ease .6s both;
}
.cp-motion-ready .cp-hero-trust span {
    animation: cpHeroRise .6s cubic-bezier(.22, 1, .36, 1) both;
}
.cp-motion-ready .cp-hero-trust span:nth-child(1) { animation-delay: .64s; }
.cp-motion-ready .cp-hero-trust span:nth-child(2) { animation-delay: .71s; }
.cp-motion-ready .cp-hero-trust span:nth-child(3) { animation-delay: .78s; }

@keyframes cpHeroRise {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cpHeroFadeDown {
    from { opacity: 0; transform: translate3d(0, -10px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cpHeroFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cpCtaGlow {
    from { transform: translate3d(-18px, -8px, 0) scale(.95); opacity: .14; }
    to { transform: translate3d(22px, 14px, 0) scale(1.08); opacity: .25; }
}

/* Variant dimensions mirror the desktop Figma frame section heights. */
.cp-page--ribbon .cp-hero,
.cp-page--ribbon .cp-hero .cp-container {
    min-height: clamp(570px, calc(58.43vw - 74px), 674px);
}
.cp-page--ribbon .cp-products { padding-top: 75px; padding-bottom: 75px; }
.cp-page--application .cp-products { padding-top: 67px; padding-bottom: 67px; }
.cp-page--ribbon .cp-tips { padding-top: 69px; padding-bottom: 69px; }
.cp-page--application .cp-tips { padding-top: 58px; padding-bottom: 58px; }
.cp-page--ribbon .cp-comparison { padding-top: 70px; padding-bottom: 70px; }
.cp-page--ribbon .cp-table { height: 537px; }
.cp-page--ribbon .cp-table tbody tr { height: 88px; }
.cp-page--application .cp-comparison { padding-top: 79px; padding-bottom: 79px; }
.cp-page--application .cp-comparison .cp-table th,
.cp-page--application .cp-comparison .cp-table td { padding-top: 20px; padding-bottom: 20px; }
.cp-page--ribbon .cp-faq { min-height: 700px; padding-top: 89px; padding-bottom: 89px; }
.cp-page--application .cp-faq { min-height: 675px; padding-top: 76px; padding-bottom: 76px; }
.cp-brands { padding-top: 70px; padding-bottom: 70px; }

body:has(.cp-page) footer.section { padding-top: 6rem; padding-bottom: 6rem; }

.header-quote-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 999px;
    color: #fff;
    background: #014aad;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.header-quote-btn:hover { color: #fff; background: #003c90; }
.header-quote-wrap { display: none; }

@media (min-width: 992px) {
    .header-quote-wrap { display: block; }
    .cp-hero-content {
        transform: translateY(clamp(-49px, calc(116.4px - 12.92vw), -26px));
    }
    .cp-page--application .cp-hero-content { transform: translateY(-16px); }
}

@media (min-width: 768px) {
    .cp-table-wrap { overflow: visible; }
}

@media (max-width: 991.98px) {
    .cp-container { max-width: 760px; }
    .cp-hero, .cp-hero .cp-container,
    .cp-page--ribbon .cp-hero, .cp-page--ribbon .cp-hero .cp-container { min-height: 560px; }
    .cp-hero-heading { font-size: 42px; }
    .cp-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cp-brand-item { height: 58px; }
}

@media (max-width: 767.98px) {
    .cp-container { padding-left: 20px; padding-right: 20px; }
    .cp-hero, .cp-hero .cp-container,
    .cp-page--ribbon .cp-hero, .cp-page--ribbon .cp-hero .cp-container { min-height: 590px; }
    .cp-breadcrumb { padding-top: 22px; font-size: 13px; }
    .cp-hero-content { padding: 42px 0 34px; }
    .cp-hero-heading { font-size: 34px; line-height: 1.28; }
    .cp-hero-subtitle { font-size: 17px; line-height: 1.65; }
    .cp-hero-actions { gap: 10px; }
    .cp-btn { width: min(300px, 100%); min-height: 50px; }
    .cp-hero-trust { gap: 12px 22px; padding: 18px 0 22px; font-size: 13px; }
    .cp-hero-trust img { width: 18px; height: 18px; }

    .cp-stats-grid { min-height: 280px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-stat-card { min-height: 118px; padding: 14px 12px; }
    .cp-stat-card:nth-child(2) { border-right: 0; }
    .cp-stat-card:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.15); }
    .cp-stat-num { font-size: 34px; }
    .cp-stat-num small { font-size: 15px; }
    .cp-stat-label { font-size: 14px; }

    .cp-section { padding: 68px 0; }
    .cp-page--ribbon .cp-products,
    .cp-page--application .cp-products,
    .cp-page--ribbon .cp-tips,
    .cp-page--application .cp-tips,
    .cp-page--ribbon .cp-comparison,
    .cp-page--application .cp-comparison,
    .cp-page--ribbon .cp-faq,
    .cp-page--application .cp-faq,
    .cp-brands { padding-top: 68px; padding-bottom: 68px; }
    .cp-section-heading { margin-bottom: 32px; }
    .cp-section-heading h2 { font-size: 32px; }
    .cp-comparison .cp-section-heading h2 { font-size: 32px; }
    .cp-section-intro { font-size: 16px; }

    .cp-products-grid { grid-template-columns: 1fr; gap: 20px; }
    .cp-product-img, .cp-page--application .cp-product-img { height: 290px; }
    .cp-product-body, .cp-page--application .cp-product-body { min-height: 250px; padding: 24px; }
    .cp-product-title { font-size: 21px; }

    .cp-tips-grid { grid-template-columns: 1fr; gap: 14px; }
    .cp-tip-card { min-height: 0; padding: 24px; }
    .cp-tip-icon { margin-bottom: 15px; }

    .cp-table-scroll-hint {
        margin: -12px 0 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5d6b82;
        font-size: 14px;
        font-weight: 600;
    }
    .cp-table-scroll-hint i { color: var(--cp-blue); font-size: 16px; }
    .cp-table-wrap {
        margin-right: -20px;
        border-radius: 10px 0 0 10px;
        scroll-snap-type: x proximity;
    }
    .cp-table { min-width: 900px; }
    .cp-table th, .cp-table td { padding: 17px 14px; font-size: 15px; }
    .cp-table thead th { height: 104px; padding-top: 40px; padding-bottom: 20px; }
    .cp-table thead th small { font-size: 13px; }
    .cp-table thead th strong { font-size: 18px; }
    .cp-table-badge { top: 9px; font-size: 13px; }
    .cp-table-label-col,
    .cp-table tbody th {
        width: 168px;
        min-width: 168px;
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 8px 0 14px rgba(17,35,68,.07);
    }
    .cp-table thead .cp-table-label-col { z-index: 4; }
    .cp-table thead th:not(:first-child),
    .cp-table tbody td {
        width: 244px;
        scroll-snap-align: start;
    }

    .cp-cta-dark { min-height: 390px; padding: 72px 0; }
    .cp-cta-dark h2 { font-size: 32px; }
    .cp-cta-dark p { font-size: 16px; }
    .cp-cta-pill { width: min(260px, 100%); justify-content: center; }

    .cp-faq { min-height: 0; }
    .cp-faq-item summary { min-height: 72px; padding: 18px; font-size: 16px; }
    .cp-faq-answer { padding: 0 18px 22px; font-size: 15px; }
    .cp-faq-toggle { width: 28px; height: 28px; flex-basis: 28px; }
    .cp-faq-toggle::before,
    .cp-faq-toggle::after { left: 8px; top: 13px; width: 12px; }
    .cp-brands { min-height: 0; }
    .cp-brand-grid { width: 100%; margin-left: 0; transform: none; }
    .cp-brand-grid { gap: 22px 18px; }
    .cp-brand-item { height: 50px; }
    body:has(.cp-page) footer.section { padding-top: 2rem; padding-bottom: 70px; }
}

@media (max-width: 379.98px) {
    .cp-hero-heading { font-size: 27px; }
    .cp-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .cp-motion-ready .cp-motion-item,
    .cp-motion-ready .cp-motion-item[data-cp-motion="scale"] {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    .cp-motion-ready .cp-breadcrumb,
    .cp-motion-ready .cp-hero-heading-line,
    .cp-motion-ready .cp-hero-subtitle-primary,
    .cp-motion-ready .cp-hero-subtitle-secondary,
    .cp-motion-ready .cp-hero-actions,
    .cp-motion-ready .cp-hero-trust,
    .cp-motion-ready .cp-hero-trust span,
    .cp-cta-dark::before,
    .cp-cta-dark::after {
        animation: none;
    }

    .cp-btn,
    .cp-btn i,
    .cp-product-card,
    .cp-product-img img,
    .cp-product-link i,
    .cp-tip-card,
    .cp-tip-icon,
    .cp-cta-pill,
    .cp-faq-item,
    .cp-faq-item summary,
    .cp-faq-toggle::after,
    .cp-brand-item img {
        transition: none;
    }
}