@charset "UTF-8";

/* Prevent the page-builder section shadow from overlapping the footer bar. */
.sp-page-builder .page-content #section-id-sms-page-section {
    box-shadow: none !important;
}

.sms-page {
    --sms-navy: #082d68;
    --sms-blue: #075ca8;
    --sms-gold: #e0a11b;
    --sms-text: #31445f;
    --sms-muted: #66758b;
    width: min(1180px, calc(100% - 32px));
    margin: 34px auto 72px;
    font-family: "Noto Sans Khmer", "Battambang", Arial, sans-serif;
}

.sms-page__hero {
    position: relative;
    width: min(100%, 1040px);
    min-height: 0;
    aspect-ratio: 3 / 2;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(8, 45, 104, .14);
    border-radius: 28px;
    background: #fff url("../../../../../images/appsms/posterRTCSTG.png") center / cover no-repeat;
    box-shadow: 0 24px 60px rgba(8, 45, 104, .2);
}

.sms-page__intro {
    max-width: 880px;
    margin: 58px auto 38px;
    text-align: center;
}

.sms-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #a86f00;
    font-size: 14px;
    font-weight: 700;
}

.sms-page__eyebrow::before,
.sms-page__eyebrow::after {
    width: 24px;
    height: 2px;
    border-radius: 99px;
    background: var(--sms-gold);
    content: "";
}

.sms-page__intro h2 {
    margin: 0 0 14px;
    color: var(--sms-navy);
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.55;
}

.sms-page__intro p {
    margin: 0;
    color: var(--sms-muted);
    font-size: 16px;
    line-height: 2;
}

.sms-page__intro--library {
    margin-top: 68px;
    margin-bottom: 28px;
}

.sms-page__intro--library .sms-page__eyebrow {
    color: #9b6700;
}

.sms-page__intro--library .sms-page__eyebrow::before,
.sms-page__intro--library .sms-page__eyebrow::after {
    background: #c98b13;
}

.sms-page__features {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.sms-page__features--library {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.sms-page__features--library .sms-feature {
    --accent: #a86f00;
    background: linear-gradient(180deg,#fff,#fffaf1);
}

.sms-page__features--library .sms-feature:nth-child(2) { --accent:#0b7a69; }
.sms-page__features--library .sms-feature:nth-child(3) { --accent:#6552b5; }
.sms-page__features--library .sms-feature:nth-child(4) { --accent:#b44c65; }

.sms-feature {
    min-width: 0;
    padding: 24px 18px;
    border: 1px solid #dce7f3;
    border-top: 3px solid var(--accent, var(--sms-blue));
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 12px 30px rgba(8,45,104,.08);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.sms-feature:nth-child(2) { --accent: #128951; }
.sms-feature:nth-child(3) { --accent: #c47e00; }
.sms-feature:nth-child(4) { --accent: #6852bd; }
.sms-feature:nth-child(5) { --accent: #b84b63; }

.sms-feature:hover {
    box-shadow: 0 18px 38px rgba(8,45,104,.14);
    transform: translateY(-5px);
}

.sms-feature__icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    place-items: center;
    border-radius: 16px;
    color: var(--accent, var(--sms-blue));
    background: color-mix(in srgb, var(--accent, var(--sms-blue)) 11%, white);
    font-size: 25px;
}

.sms-feature h3 {
    margin: 0 0 6px;
    color: var(--sms-navy);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.75;
}

.sms-feature p {
    margin: 0;
    color: var(--sms-muted);
    font-size: 13px;
    line-height: 1.8;
}

.sms-access {
    margin-top: 68px;
    padding: 42px;
    border: 1px solid #d8e5f2;
    border-radius: 26px;
    background: radial-gradient(circle at 92% 8%, rgba(224,161,27,.1), transparent 25%), linear-gradient(145deg,#f2f7fd,#fff);
    box-shadow: 0 18px 46px rgba(8,45,104,.1);
}

.sms-access__heading {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.sms-access__heading > span {
    color: #a86f00;
    font-size: 14px;
    font-weight: 700;
}

.sms-access__heading h2 {
    margin: 5px 0 7px;
    color: var(--sms-navy);
    font-size: clamp(25px,2.5vw,34px);
    font-weight: 700;
    line-height: 1.65;
}

.sms-access__heading p {
    margin: 0;
    color: var(--sms-muted);
    font-size: 14px;
}

.sms-access__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
}

.sms-system-card {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid #d9e5f1;
    border-top: 4px solid var(--card-accent,#0b66b2);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(8,45,104,.08);
}

.sms-system-card--upcoming {
    --card-accent: #b77a08;
    background: linear-gradient(145deg,#fff,#fffaf0);
}

.sms-system-card__status {
    position: absolute;
    top: 15px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #117742;
    background: #e8f7ef;
    font-size: 11px;
    font-weight: 700;
}

.sms-system-card--upcoming .sms-system-card__status { color:#966000; background:#fff0cf; }

.sms-system-card__icon {
    display: grid;
    width: 66px;
    height: 66px;
    margin-top: 8px;
    place-items: center;
    border-radius: 18px;
    color: var(--card-accent,#0b66b2);
    background: color-mix(in srgb,var(--card-accent,#0b66b2) 11%,white);
    font-size: 29px;
}

.sms-system-card__body { min-width:0; padding-top:22px; }
.sms-system-card__label { margin:0 0 2px !important; color:var(--card-accent,#0b66b2) !important; font:700 11px/1.5 Arial,sans-serif !important; letter-spacing:.04em; text-transform:uppercase; }
.sms-system-card h3 { margin:0 0 8px; color:var(--sms-navy); font-size:20px; font-weight:700; line-height:1.7; }
.sms-system-card__body > p:not(.sms-system-card__label) { min-height:52px; margin:0 0 18px; color:var(--sms-muted); font-size:13px; line-height:1.85; }

.sms-system-card__button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    color: #fff !important;
    background: var(--card-accent,#0b66b2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

a.sms-system-card__button:hover { color:#fff !important; box-shadow:0 9px 20px rgba(8,45,104,.2); transform:translateY(-2px); }
button.sms-system-card__button:disabled { color:#8b7654 !important; background:#eee7dc; cursor:not-allowed; opacity:1; }

.sms-page__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 38px;
    padding: 28px 32px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(120deg, #061f4e, #0b4385);
    box-shadow: 0 16px 38px rgba(8,45,104,.17);
}

.sms-page__cta h2 { margin: 0 0 5px; color: #fff; font-size: 21px; line-height: 1.65; }
.sms-page__cta p { margin: 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.8; }
.sms-page__cta a { flex: 0 0 auto; padding: 13px 22px; border-radius: 999px; color: #082d68 !important; background: #fff; font-weight: 700; text-decoration: none !important; }
.sms-page__cta a:hover { color: #fff !important; background: var(--sms-gold); }

@media (max-width: 991.98px) {
    .sms-page__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sms-feature:last-child { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; }
    .sms-page__features--library .sms-feature:last-child { grid-column:auto; width:auto; justify-self:stretch; }
}

@media (max-width: 767.98px) {
    .sms-page { width: min(100% - 20px, 1180px); margin: 20px auto 46px; }
    .sms-page__hero { width: 100%; min-height: 0; aspect-ratio: 3 / 2; border-radius: 17px; background-size: cover; }
    .sms-page__hero { margin-bottom: 0; }
    .sms-page__intro { margin: 40px auto 25px; }
    .sms-page__intro h2 { font-size: 25px; line-height: 1.7; }
    .sms-page__intro p { font-size: 14px; line-height: 1.9; }
    .sms-page__features { grid-template-columns: 1fr; gap: 13px; }
    .sms-feature,
    .sms-feature:last-child {
        display: flex;
        width: 100%;
        min-height: 180px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 18px;
        grid-column: auto;
    }
    .sms-feature__icon { flex:0 0 58px; }
    .sms-page__features--library { grid-template-columns:1fr; }
    .sms-page__cta { flex-direction: column; align-items: stretch; padding: 24px 20px; text-align: center; }
    .sms-page__cta a { text-align: center; }
    .sms-access { margin-top:42px; padding:28px 16px; border-radius:20px; }
    .sms-access__heading { margin-bottom:22px; }
    .sms-access__heading h2 { font-size:23px; }
    .sms-access__grid { grid-template-columns:1fr; gap:16px; }
    .sms-system-card { grid-template-columns:1fr; gap:10px; padding:22px 18px; }
    .sms-system-card__icon { width:58px; height:58px; margin-top:0; font-size:25px; }
    .sms-system-card__body { padding-top:0; }
    .sms-system-card__body > p:not(.sms-system-card__label) { min-height:0; }
    .sms-system-card__button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sms-feature { transition: none; }
}