/* National Day 2026 campaign (Majulah Cashback!)
   Design source: Figma #730_National Day LP (1920px canvas)

   Sizing rule (same convention as cardapps v2new.css): the page tops out at
   a 1440px viewport, rendering the 1920px Figma design at 75% scale. Every
   clamp() max = Figma value * 0.75 (reached at 1440px and fixed above); the
   vw coefficient (max/14.4) keeps scaling proportional below that, like the
   Figma canvas zoomed to fit. Fixed px values (containers, radii, small
   gaps, borders) are the Figma values * 0.75 as well. The <=991px and
   <=575px blocks keep their hand-tuned pixel values. */
#national-day-body {
    background: #fff;
}
.nd-page {
    color: #011C48;
    overflow-x: hidden;
}
.nd-page img { max-width: 100%; }

.nd-container {
    max-width: 1232px; /* 1184 content + padding */
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ---------- hero ---------- */
.nd-hero {
    position: relative;
    background: url('/dcscc/v2/images/campaigns/national-day/hero-bg.png') bottom center / cover no-repeat #ECF6FE;
}
.nd-hero-inner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 12px clamp(24px, 6.11vw, 88px) 24px clamp(24px, 5.49vw, 79px);
    /* 48.82vw keeps the hero box at the artwork's 1920:937 ratio for every
       width the desktop artwork is used at (>575px), so `cover` never crops
       the "61" visual or the card lockup; capped at the image's native 937px
       height beyond 1920px */
    min-height: min(48.82vw, 937px);
    display: flex;
    align-items: center;
}
.nd-hero-copy { max-width: 52%; }
.nd-hero-title {
    margin: 0;
    font-size: clamp(30px, 4.72vw, 68px);
    font-weight: 700;
    line-height: 1.2;
    color: #055FE6;
    white-space: nowrap;
}
.nd-hero-sub {
    margin: 6px 0 0;
    font-size: clamp(16px, 1.53vw, 22px);
    line-height: 1.25;
    color: #001489;
}
.nd-hero-line2 {
    margin: clamp(22px, 2.29vw, 33px) 0 0;
    font-size: clamp(16px, 1.53vw, 22px);
    line-height: 1.25;
    color: #001489;
}
.nd-hero-line2 strong { display: block; }
.nd-text-blue { color: #055FE6; }
.nd-btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(29px, 2.99vw, 43px);
    min-width: clamp(138px, 14.1vw, 203px);
    height: clamp(35px, 3.54vw, 51px);
    padding: 0 clamp(23px, 2.36vw, 34px);
    border-radius: 999px;
    background: #055FE6;
    color: #fff;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 700;
    text-decoration: none;
}
.nd-btn-register:hover, .nd-btn-register:focus { background: #0450c2; color: #fff; }
.nd-hero-note {
    margin: 8px 0 0 clamp(35px, 3.61vw, 52px);
    font-size: clamp(12px, 1.04vw, 15px);
    color: #001489;
}
.nd-hero-cards {
    position: absolute;
    right: 8.28%;
    bottom: 3.4%;
    width: 44.2%;
}

/* ---------- shared section title with line/dot/sparkle deco ---------- */
.nd-sec-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.nd-sec-title h2 {
    margin: 0;
    min-width: 0;
    font-size: clamp(30px, 3.13vw, 45px);
    font-weight: 700;
    color: #001489;
    text-align: center;
}
.nd-sec-title.nd-on-blue h2 { color: #fff; }
.nd-deco { display: flex; align-items: center; gap: 4px; color: #4099FC; }
.nd-on-blue .nd-deco { color: #3FC5F4; }
.nd-deco .nd-deco-line { width: 33px; height: 1px; background: currentColor; }
.nd-deco .nd-deco-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.nd-deco .nd-deco-star {
    width: 21px;
    height: 21px;
    background: currentColor;
    -webkit-mask: url('/dcscc/v2/images/campaigns/national-day/sparkle.svg') no-repeat center / contain;
    mask: url('/dcscc/v2/images/campaigns/national-day/sparkle.svg') no-repeat center / contain;
}
.nd-deco-r { flex-direction: row-reverse; }

/* body background below hero (Figma: #ECF6FE fading to white) */
.nd-body { background: linear-gradient(180deg, #ECF6FE 0px, #FFFFFF 2100px); }

/* ---------- local spend counts ---------- */
.nd-spend { padding-top: clamp(27px, 2.71vw, 39px); }
.nd-spend-grid {
    max-width: 1175px;
    margin: clamp(44px, 4.51vw, 65px) auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: clamp(43px, 4.38vw, 63px);
    row-gap: clamp(32px, 3.26vw, 47px);
}
.nd-spend-card {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(34px, 3.47vw, 50px);
    background: #fff;
    border-radius: 17px;
    box-shadow: 0 8px 19px rgba(1, 28, 72, 0.10);
}
.nd-spend-card .nd-spend-icon {
    height: clamp(72px, 7.36vw, 106px);
    display: flex;
    align-items: flex-end;
}
.nd-spend-card .nd-spend-icon img { height: clamp(72px, 7.36vw, 106px); width: auto; }
.nd-spend-card p {
    margin: 14px 0 0;
    font-size: clamp(18px, 1.81vw, 26px);
    font-weight: 700;
    line-height: 1.21;
    text-align: center;
    color: #011C48;
}

/* ---------- how to participate ---------- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
.nd-howto {
    scroll-margin-top: 80px; /* keep the section top clear of the sticky header after anchor jumps */
    max-width: 1920px;
    margin: clamp(54px, 5.56vw, 80px) auto 0;
    padding: clamp(36px, 3.68vw, 53px) 24px clamp(22px, 2.29vw, 33px);
    border-radius: 44px;
    background: linear-gradient(330deg, #0159CB, #003BA7);
}
.nd-steps {
    position: relative;
    max-width: 1181px;
    margin: clamp(75px, 7.64vw, 110px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(62px, 6.32vw, 91px);
}
.nd-step-card {
    position: relative;
    min-height: clamp(240px, 24.31vw, 350px);
    background: #fff;
    border-radius: 38px;
    box-shadow: 0 8px 19px rgba(0, 20, 70, 0.25);
    padding: 0 24px clamp(27px, 2.78vw, 40px);
    text-align: center;
}
.nd-step-num {
    position: absolute;
    top: clamp(-52px, -3.61vw, -36px);
    left: clamp(-45px, -3.13vw, -31px);
    width: clamp(72px, 7.22vw, 104px);
    height: clamp(72px, 7.22vw, 104px);
    border-radius: 50%;
    background: radial-gradient(108% 108% at 2% 46%, #06A8E9 0%, #0555F0 100%);
    color: #fff;
    font-size: clamp(30px, 3.13vw, 45px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nd-step-img {
    height: clamp(103px, 10.42vw, 150px);
    margin-top: clamp(-40px, -2.78vw, -28px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* source PNGs carry transparent padding around the artwork; the heights below
   are scaled up so the visible artwork renders at 159/186/173px at 1440, and
   the negative bottom margins cancel the transparent bottom edge so the
   artwork keeps the same baseline (margins share the images' scale factor) */
.nd-step-img img { width: auto; }
.nd-step-img .nd-img-phone { height: clamp(158px, 15.9vw, 229px); margin-bottom: clamp(-50px, -3.47vw, -34px); }
.nd-step-img .nd-img-cart { height: clamp(176px, 17.78vw, 256px); margin-bottom: clamp(-50px, -3.47vw, -34px); }
.nd-step-img .nd-img-wallet { height: clamp(175px, 17.64vw, 254px); margin-bottom: clamp(-44px, -3.06vw, -30px); }
.nd-step-title {
    height: clamp(40px, 3.75vw, 54px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.nd-step-title h3 {
    margin: 0;
    font-size: clamp(16px, 1.53vw, 22px);
    font-weight: 700;
    line-height: 1.21;
    color: #011C48;
}
.nd-step-card > p {
    margin: 17px 0 0;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.46;
    color: #011C48;
}
.nd-step-arrow {
    position: absolute;
    top: clamp(148px, 14.93vw, 215px);
    transform: translateX(-50%);
    width: clamp(51px, 5.14vw, 74px);
}
.nd-step-arrow-1 { left: 32%; }
.nd-step-arrow-2 { left: 68%; }
.nd-validity {
    margin: clamp(48px, 4.93vw, 71px) auto 0;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 22px;
    height: clamp(43px, 4.31vw, 62px);
    padding: 0 clamp(22px, 2.22vw, 32px);
    border: 2px solid #fff;
    border-radius: 999px;
}
.nd-validity img { width: clamp(21px, 2.08vw, 30px); height: auto; }
.nd-validity p { margin: 0; font-size: clamp(16px, 1.25vw, 18px); color: #fff; }

/* ---------- terms & conditions ---------- */
.nd-tnc { padding-top: clamp(33px, 3.33vw, 48px); }
.nd-tnc h2 {
    margin: 0;
    font-size: clamp(30px, 3.13vw, 45px);
    font-weight: 700;
    color: #001489;
    text-align: center;
}
.nd-tnc-box {
    margin-top: 24px;
    padding: clamp(30px, 3.06vw, 44px) clamp(38px, 3.89vw, 56px);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 19px rgba(1, 28, 72, 0.10);
    font-size: clamp(16px, 1.39vw, 20px);
    line-height: 1.46;
    color: #011C48;
}
.nd-tnc-box p { margin: 0; }
.nd-tnc-box p + p { margin-top: 24px; }
.nd-tnc-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: clamp(27px, 2.78vw, 40px) auto 0;
    height: clamp(35px, 3.54vw, 51px);
    padding: 0 clamp(23px, 2.36vw, 34px);
    border-radius: 999px;
    background: #055FE6;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 700;
    text-align: center;
    color: #fff;
    text-decoration: none;
}
.nd-tnc-link:hover, .nd-tnc-link:focus {
    background: #0450c2;
    color: #fff;
}

/* ---------- bottom banner ---------- */
.nd-banner {
    position: relative;
    margin-top: clamp(31px, 3.19vw, 46px);
    min-height: clamp(113px, 11.46vw, 165px);
    border-radius: 19px;
    background: linear-gradient(180deg, #0159CB, #003BA7);
    display: flex;
    align-items: center;
    padding: 20px 40% 20px clamp(35px, 3.61vw, 52px);
    overflow: hidden;
}
.nd-banner-icon {
    flex: none;
    width: clamp(55px, 5.56vw, 80px);
    height: clamp(55px, 5.56vw, 80px);
    border-radius: 50%;
    background: radial-gradient(108% 108% at 2% 46%, #06A8E9 0%, #0555F0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nd-banner-icon img { width: clamp(29px, 2.92vw, 42px); height: auto; }
.nd-banner p {
    margin: 0 0 0 clamp(22px, 2.29vw, 33px);
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.46;
    color: #fff;
}
.nd-banner-fireworks {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
}

.nd-body { padding-bottom: clamp(40px, 4.17vw, 60px); }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    /* the hero keeps the desktop composition (ratio-locked height, copy on
       the left, absolute card lockup on the right) all the way down to 576px */
    .nd-sec-title h2, .nd-tnc h2 { font-size: 34px; }
    .nd-spend-grid { grid-template-columns: repeat(2, 1fr); }
    .nd-howto { border-radius: 0; }
    .nd-steps {
        margin-top: 110px;
        grid-template-columns: min(420px, 100%);
        justify-content: center;
        row-gap: 80px;
    }
    .nd-step-arrow { display: none; }
    /* single-column cards: fixed artwork geometry (the clamp() mins above are
       for the 992-1439 desktop range), artwork sits lower on the card with a
       gap before the step title */
    .nd-step-img { height: 150px; margin-top: -20px; }
    .nd-step-img .nd-img-phone { height: 229px; margin-bottom: -50px; }
    .nd-step-img .nd-img-cart { height: 256px; margin-bottom: -50px; }
    .nd-step-img .nd-img-wallet { height: 254px; margin-bottom: -44px; }
    .nd-step-card { min-height: 350px; padding-bottom: 40px; }
    .nd-step-num { top: -52px; left: -45px; width: 104px; height: 104px; font-size: 45px; }
    .nd-step-title { margin-top: 0px; height: 54px; }
    .nd-step-title h3 { font-size: 22px; }
    .nd-step-card > p { font-size: 18px; }
    .nd-banner { padding-right: 52px; }
    .nd-banner-fireworks { display: none; }
}
@media (max-width: 991.98px) and (min-width: 576px) {
    /* two wide columns: square cards would be mostly empty space here, so
       let the content set the height (phones keep the 1:1 ratio) */
    .nd-spend-card { aspect-ratio: auto; padding: 32px 16px 36px; }
}
/* phone styles from Figma node 54:285 (970w mobile artboard, sizes x0.402 to a 390 baseline) */
@media (max-width: 575.98px) {
    /* hero: dedicated mobile artwork ("61" visual + card lockup baked into the image) */
    .nd-hero {
        background:
            url('/dcscc/v2/images/campaigns/national-day/hero-bg-mobile.png') top center / 100% auto no-repeat,
            linear-gradient(180deg, #DCEEFE, #F5FAFF);
        aspect-ratio: 970 / 1545;
    }
    .nd-hero-inner { padding: 35px 22px 0; }
    .nd-hero-copy { padding-top: 0; }
    .nd-hero-cards { display: none; }
    .nd-hero-title { font-size: 40px; white-space: normal; }
    .nd-hero-sub { margin-top: 10px; font-size: 16px; }
    .nd-hero-line2 { margin-top: 17px; font-size: 16px; }
    .nd-btn-register { margin-top: 25px; min-width: 212px; height: 53px; font-size: 20px; }
    .nd-hero-note { margin: 8px 0 0 18px; font-size: 11px; }

    .nd-sec-title h2, .nd-tnc h2 { font-size: 24px; }
    .nd-deco .nd-deco-line { width: 28px; }
    .nd-deco .nd-deco-star { width: 18px; height: 18px; }

    .nd-spend { padding-top: 49px; }
    .nd-spend-grid { margin: 37px 14px 0; column-gap: 18px; row-gap: 23px; }
    .nd-spend-card { padding-top: 31px; border-radius: 12px; }
    .nd-spend-card .nd-spend-icon, .nd-spend-card .nd-spend-icon img { height: 64px; }
    .nd-spend-card p { font-size: 16px; margin-top: 8px; }

    .nd-howto { margin-top: 52px; padding: 50px 24px 45px; border-radius: 24px; }
    .nd-steps { margin-top: 110px; }
    .nd-step-card { border-radius: 24px; padding: 0 28px 44px; }
    .nd-step-num { width: 72px; height: 72px; font-size: 34px; top: -18px; left: -18px; }
    .nd-step-img { height: 150px; margin-top: -20px; }
    .nd-step-img .nd-img-phone { height: 229px; margin-bottom: -50px; }
    .nd-step-img .nd-img-cart { height: 256px; margin-bottom: -50px; }
    .nd-step-img .nd-img-wallet { height: 254px; margin-bottom: -44px; }
    .nd-step-title { height: 60px; }
    .nd-step-title h3 { font-size: 24px; }
    .nd-step-card > p { font-size: 20px; margin-top: 24px; }
    .nd-validity { margin-top: 42px; height: auto; padding: 14px 24px; gap: 16px; }
    .nd-validity img { width: 31px; }
    .nd-validity p { font-size: 18px; text-align: center; }

    .nd-tnc { padding-top: 38px; }
    .nd-tnc-box { margin-top: 30px; padding: 28px 24px; border-radius: 12px; font-size: 16px; }
    .nd-tnc-box p + p { margin-top: 18px; }
    .nd-tnc-link { margin-top: 30px; height: auto; min-height: 48px; padding: 12px 28px; font-size: 16px; }

    /* banner goes vertical: icon on top, centered text, fireworks strip at the bottom */
    .nd-banner { flex-direction: column; padding: 17px 29px 0; }
    .nd-banner-icon { width: 63px; height: 63px; }
    .nd-banner-icon img { width: 33px; }
    .nd-banner p { margin: 17px 0 0; font-size: 18px; text-align: center; }
    .nd-banner-fireworks {
        display: block;
        position: static;
        width: 100%;
        height: auto;
        margin-top: 16px;
        mix-blend-mode: lighten;
    }
}