:root {
    --navy: #1B2A49;
    --navy-deep: #131F37;
    --green: #2ECC71;
    --green-2: #28B463;
    --orange: #F39C12;
    --text: #111827;
    --text-2: #4B5563;
    --text-3: #6B7280;
    --line: #E5E7EB;
    --line-2: #D1D5DB;
    --bg: #FFFFFF;
    --bg-soft: #F3F6FD;
    --bg-mute: #F8FAFC;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow-md: 0 8px 24px rgba(15,23,42,.08);
    --shadow-lg: 0 24px 56px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.06);
    --radius: 10px;
    --radius-lg: 14px;
    --max-w: 1200px;
    --max-text: 640px;
    --space-section: clamp(2.75rem, 5vw, 4.75rem);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .625rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .875rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 150ms ease;
    white-space: nowrap;
}

.button-primary {
    background: var(--green)!important;
    color: #fff;
    box-shadow: 0 1px 2px rgba(46,204,113,.25), 0 6px 16px rgba(46,204,113,.18);
}

    .button-primary:hover {
        background: var(--green-2);
        transform: translateY(-1px);
    }

.button-ghost-dark {
    background: transparent;
    color: var(--text);
    border-color: var(--line-2);
}

    .button-ghost-dark:hover {
        background: var(--bg-mute);
    }

.button-lg {
    padding: .875rem 1.5rem;
    font-size: .9375rem;
}


/* REFRAME — white bg with stat callouts */
.reframe-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: end;
}

@media (min-width: 900px) {
    .reframe-top {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.reframe-top h2 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 0;
    color: var(--navy);
    max-width: 28rem;
}

.reframe-top p,
.reframe-body p,
.reframe-body + p {
    font-size: clamp(.95rem, 2.5vw, 1rem) !important;
    line-height: 1.65;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2rem 0 2.5rem;
}

@media (min-width: 640px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat {
    border: 1.5px solid var(--navy);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    background: #fff;
    text-align: left;
    min-width: 0;
}

.stat-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 1;
    color: var(--navy);
    letter-spacing: -.02em;
    margin-bottom: .375rem;
}


.stat-label {
    font-size: clamp(.78rem, 2vw, .8125rem);
    color: var(--text-2);
    line-height: 1.4;
}

.stat-source {
    display: block;
    margin-top: .625rem;
    font-size: .6875rem;
    line-height: 1.3;
    color: var(--text-3);
    word-break: break-word;
}

    .stat-source a {
        color: var(--text-3);
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--line-2);
    }

        .stat-source a:hover {
            color: var(--green);
            text-decoration-color: var(--green);
        }

.reframe-body {
    max-width: 42rem;
}

    .reframe-body a.src-link {
        color: var(--text-3);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .reframe-body a.src-link:hover {
            color: var(--green);
        }

    .reframe-body p {
        color: var(--text-2);
        margin: 0 0 1rem;
    }

/* Scoped helpers moved from component view */
.reframe-lede {
    color: var(--text-2);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

.reframe-bottom {
    color: var(--text-2);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 42rem;
}

.reframe-pull {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--bg-mute);
    border-left: 4px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.15rem, 4vw, 1.625rem);
    line-height: 1.3;
    color: var(--navy);
}

.footnote {
    font-size: .75rem;
    color: var(--text-3);
    margin-top: 1rem;
    font-style: italic;
}

.section--soft {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

@media (max-width: 768px) {
    .custom-spacing {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .section--soft {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .reframe-pull {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .custom-spacing {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .stat {
        padding: 1rem;
    }
}

.custom-spacing {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.hero-video-embed {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
}

.hero-video-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Tablet */
@media (max-width: 992px) {
    .hero-video-embed {
        height: 320px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-video-embed {
        height: 220px;
        border-radius: 16px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-video-embed {
        height: 180px;
        border-radius: 14px;
    }
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 1rem;
}

    .eyebrow::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 2px;
        background: var(--green);
        flex-shrink: 0;
    }

.eyebrow--muted {
    color: var(--green);
}

.eyebrow--on-dark {
    color: var(--green);
}




/* Deadline urgency badge */
.deadline-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(243,156,18,.12);
    border: 1px solid rgba(243,156,18,.4);
    border-radius: 999px;
    padding: .375rem .875rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #92400E;
    margin-bottom: .875rem;
}

    .deadline-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--orange);
        animation: pulse 2s infinite;
    }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 1rem;
}

    .eyebrow::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 2px;
        background: var(--green);
        flex-shrink: 0;
    }

.eyebrow--muted {
    color: var(--green);
}

.eyebrow--on-dark {
    color: var(--green);
}
/* WHAT YOU GET / FEATURES */
.section h2.section-h {
    font-size: clamp(1.75rem, 2.75vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .875rem;
    max-width: 36rem;
    color: var(--navy);
}

.section-lede {
    font-size: 1rem;
    color: var(--text-2);
    max-width: var(--max-text);
    margin: 0 0 2.5rem;
    line-height: 1.6;
}

/* Enterprise trust callout — understated AI-safety strip */
.trust-callout {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    border-radius: var(--radius);
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

    .trust-callout:hover {
        box-shadow: var(--shadow-sm);
        border-left-color: var(--green-2);
    }

    .trust-callout svg {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        stroke: var(--green);
        fill: none;
    }

.trust-callout-text {
    font-size: .875rem;
    color: var(--text-2);
    line-height: 1.5;
}

    .trust-callout-text strong {
        color: var(--navy);
        font-weight: 600;
    }

.trust-callout-arrow {
    margin-left: auto;
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
}

.trust-callout,
.trust-callout * {
    text-decoration: none !important;
}

.price-guarantee {
    margin-top: 8px;
}

.check-icon {
    width: 20px;
    height: 20px;
    color: var(--green);
    margin-bottom: 8px;
}

.custom-spacing {
    margin-top: 4rem;
}

.plan-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.currency-text-2 {
    margin-top: auto;
}
.trust-band {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-soft);
    border-radius: var(--radius);
    font-size: .875rem;
    color: var(--text-2);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

    .trust-band em {
        font-style: normal;
        color: var(--navy);
        font-weight: 500;
    }

    .trust-band .subtext {
        flex-basis: 100%; /* i-break sa bagong linya */
        margin-top: 0.5rem;
        color: var(--text-3);
        font-size: 0.875rem;
    }