/* =============================================================
   DIGITAL GOLD landing page
   Source: Figma "Wesbite-Revamp" — frame 3667:7975 (1440×7240)
   All custom property values are best-effort defaults — replace
   with true Figma tokens when the styling export is available.
   ============================================================= */

:root {
    /* ---- Brand palette ---- */
    --dg-gold:          #F2C14E;
    --dg-gold-dark:     #C99026;
    --dg-gold-deep:     #A6802A;
    --dg-cream:         #FFF7E7;
    --dg-cream-dark:    #FBEFD3;
    --dg-cream-edge:    #F5E7C4;

    /* ---- Surfaces & text ---- */
    --dg-bg:            #FFFFFF;
    --dg-surface:       #FFFFFF;
    --dg-ink:           #1A1A1A;
    --dg-ink-2:         #3A3A3A;
    --dg-ink-3:         #6B6B6B;
    --dg-divider:       #E8E1CD;
    --dg-tick:          #1FB573;

    /* ---- Typography ---- */
    --dg-font-display:  'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --dg-font-body:     'Inter', system-ui, sans-serif;

    /* ---- Radius / shadow ---- */
    --dg-r-xs: 8px;
    --dg-r-sm: 12px;
    --dg-r-md: 16px;
    --dg-r-lg: 24px;
    --dg-r-pill: 999px;
    --dg-shadow-sm:  0 4px 16px rgba(166, 128, 42, 0.08);
    --dg-shadow-md:  0 10px 32px rgba(166, 128, 42, 0.16);
    --dg-shadow-cta: 0 5px 0 0 var(--dg-gold-deep);

    /* ---- Layout ---- */
    --dg-container: 1172px;
    --dg-gutter:    134px;
}

/* =============================================================
   PAGE / LAYOUT PRIMITIVES
   ============================================================= */
.dg-page {
    font-family: var(--dg-font-body);
    color: var(--dg-ink);
    background: var(--dg-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.dg-page * {
    box-sizing: border-box;
}

/* No blue focus rings / tap highlights anywhere in this page */
.dg-page a,
.dg-page button,
.dg-page summary,
.dg-page [tabindex] {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.dg-page a:focus,
.dg-page a:focus-visible,
.dg-page button:focus,
.dg-page button:focus-visible,
.dg-page summary:focus,
.dg-page summary:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Lock button/link text colours across all states (no UA blue on hover/visited) */
.dg-hero__cta, .dg-hero__cta:link, .dg-hero__cta:visited,
.dg-hero__cta:hover, .dg-hero__cta:active, .dg-hero__cta:focus { color: #1A1A1A; }

.dg-save__cta, .dg-save__cta:link, .dg-save__cta:visited,
.dg-save__cta:hover, .dg-save__cta:active, .dg-save__cta:focus { color: #FFFFFF; }

.dg-faq__viewall, .dg-faq__viewall:link, .dg-faq__viewall:visited,
.dg-faq__viewall:hover, .dg-faq__viewall:active, .dg-faq__viewall:focus { color: #B47615; }

.dg-container {
    width: 100%;
    max-width: var(--dg-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* shared pill / chip */
.dg-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--dg-cream-dark);
    border: 1px solid var(--dg-cream-edge);
    border-radius: var(--dg-r-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--dg-gold-deep);
    letter-spacing: 0.02em;
}
.dg-pill__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.dg-pill--dark {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
}

/* shared button */
.dg-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border: none;
    border-radius: var(--dg-r-pill);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dg-btn--primary {
    background: var(--dg-gold);
    color: var(--dg-ink);
    box-shadow: var(--dg-shadow-cta);
}
.dg-btn--primary:hover {
    transform: translateY(-1px);
}
.dg-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--dg-ink);
    color: var(--dg-ink);
    padding: 12px 24px;
    font-size: 15px;
}
.dg-btn__arrow {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

/* =============================================================
   1. HERO  (Figma 3667:7976 — 1440×1040)
   ============================================================= */
.dg-hero {
    position: relative;
    min-height: 1040px;
    padding: 110px 0 0;
    background-color: #0A0A0F;
    background-image: url('/assets/DigitalGold_HeroBg.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    color: #FFFFFF;
    overflow: hidden;
}

.dg-hero::after {
    /* soft gradient fade-out at the bottom so the hero blends into the next section */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 200px;
    background: linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(10,10,15,0.85) 100%);
    pointer-events: none;
    z-index: 3;
}

.dg-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Hero pill — dark on dark hero */
.dg-hero .dg-pill {
    background: #1B1102;
    border: 1px solid #6C4B08;
    color: #FFBF35;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dg-hero__title {
    margin: 28px 0 20px;
    font-family: var(--dg-font-display);
    font-weight: 700;
    line-height: 1.05;
    color: #FFFFFF;
}
.dg-hero__title-line { display: block; }
.dg-hero__title-line--shine {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-style: normal;
    font-weight: 300;                                /* Light */
    font-size: 50px;
    font-stretch: 87.5%;                              /* SemiCondensed */
    font-variation-settings: 'opsz' 24, 'wdth' 87.5;
    color: #E9D5A7;
    -webkit-text-fill-color: #E9D5A7;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.dg-hero__title-line--big {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 84px;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    font-stretch: 87.5%;                              /* SemiCondensed */
    font-variation-settings: 'opsz' 24, 'wdth' 87.5;  /* 24pt SemiCondensed */
}
.dg-hero__title-gold {
    color: #FFBF35;
    -webkit-text-fill-color: #FFBF35;
}

.dg-hero__sub {
    margin: 0 auto 36px;
    max-width: 980px;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    opacity: 0.92;
}
.dg-hero__sub-accent {
    color: #FFBF35;
    font-weight: 700;
    font-size: 1.09em;       /* ~2 px larger than the surrounding 22 px line */
}
.dg-hero__sub-tint {
    color: #FFBF35;
    font-weight: 700;
}
.dg-hero__sub-br-m { display: none; }            /* mobile-only line break (shown ≤640px) */

.dg-hero__cta {
    font-size: 22px;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 18px;
    background: linear-gradient(180deg, #DFA51F 0%, #FCE174 100%);
    color: #1A1A1A;
    box-shadow:
        3px 4px 0 0 #6C4B08,                                      /* small hard offset — right + bottom */
        4px 6px 12px rgba(0, 0, 0, 0.25);                         /* very subtle soft shadow */
    transition: none;
}
.dg-hero__cta:hover,
.dg-hero__cta:focus,
.dg-hero__cta:active {
    transform: none;
    background: linear-gradient(180deg, #DFA51F 0%, #FCE174 100%);
    box-shadow:
        3px 4px 0 0 #6C4B08,
        4px 6px 12px rgba(0, 0, 0, 0.25);
}
.dg-hero__cta .dg-btn__arrow {
    font-size: 24px;
    font-weight: 700;
}

/* Phones + coin stacks stage
   Phone PNGs are ~square (2629×2619) with the iPhone shape centered and
   transparent padding around it. We crop the lower half by pushing each
   image down with a negative `bottom` value so only the upper portion shows. */
.dg-hero__stage {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    max-width: 1600px;
    height: 620px;
    pointer-events: none;
}
.dg-hero__coins {
    position: absolute;
    bottom: -20px;
    width: 620px;
    height: 520px;             /* natural would be ~484 — +36 px taller */
    z-index: 1;
    user-select: none;
    -webkit-user-drag: none;
}
.dg-hero__coins--left  { left: 80px; }
.dg-hero__coins--right { right: 80px; transform: scaleX(-1); }

.dg-hero__phone {
    position: absolute;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
    user-select: none;
    -webkit-user-drag: none;
}
.dg-hero__phone--left {        /* tallest */
    width: 1020px;
    left: calc(50% - 750px);
    bottom: -390px;
    z-index: 2;
}
.dg-hero__phone--right {       /* medium */
    width: 920px;
    right: calc(50% - 690px);
    bottom: -380px;
    z-index: 2;
}
.dg-hero__phone--center {      /* sits in front */
    width: 920px;
    left: 50%;
    margin-left: -460px;
    bottom: -440px;
    z-index: 3;
}

/* ----- Hero on-load entrance animation -------------------------
   1. Coin stacks rise from below (both, simultaneously).
   2. Then phones come in: left → right → center.
   Uses the `translate` property (independent of `transform`) so the
   right coin stack can keep its `transform: scaleX(-1)` mirror. */
@keyframes dg-rise {
    /* Big upward travel (380 px) so the rise is unmistakably physical, not a fade.
       Opacity snaps to 1 within the first 4% (≈45 ms) — while the element is still
       below the section edge — so what the eye actually sees is a fully-opaque
       element sliding up from off-screen and settling with a spring overshoot. */
    0%   { translate: 0 380px; opacity: 0; }
    4%   {                     opacity: 1; }
    100% { translate: 0 0;     opacity: 1; }
}

.dg-hero__coins,
.dg-hero__phone {
    animation-name: dg-rise;
    animation-fill-mode: both;
    animation-duration: 1100ms;
    /* easeOutBack — overshoots slightly past the resting position then settles,
       producing the gentle spring feel at the end of the motion */
    animation-timing-function: cubic-bezier(0.34, 1.45, 0.5, 1);
    will-change: transform, opacity;
}

/* All four elements kick off near-simultaneously with a very small stagger,
   and because they share the same duration they all land at almost the same moment. */
.dg-hero__coins--left,
.dg-hero__coins--right { animation-delay: 100ms; }
.dg-hero__phone--left   { animation-delay: 170ms; }
.dg-hero__phone--right  { animation-delay: 240ms; }
.dg-hero__phone--center { animation-delay: 310ms; }

@media (prefers-reduced-motion: reduce) {
    .dg-hero__coins,
    .dg-hero__phone {
        animation: none;
    }
}

/* =============================================================
   2. SAVE NOW & GROW EVERYDAY  (Figma 3667:8213)
   ============================================================= */
.dg-save-now {
    position: relative;
    padding: 64px 0 0;                             /* no bottom padding — locker touches the section bottom */
    background-color: #FBF1D5;
    background-image: url('/assets/Save%26GrowBg.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    overflow: hidden;
}

/* ----- Trust strip — 4 separate rounded-rectangle cards, spread edge-to-edge ----- */
.dg-trust-strip {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    margin: 0 -130px 80px;                        /* break out more for wider boxes with bigger text */
    padding: 0;
    gap: 60px;
    flex-wrap: nowrap;
}
.dg-trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: 300px;
    padding: 18px 24px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(253, 243, 215, 0) 0%, rgba(253, 243, 215, 1) 100%);
    border: 1px solid #DFD0B0;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(149, 112, 47, 0.18);
}
.dg-trust-strip__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
}
.dg-trust-strip__label {
    font-size: 19px;
    font-weight: 600;
    color: #95702F;
    white-space: nowrap;
}

/* ----- Two-column content: copy + locker ----- */
.dg-save-now__content {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;                           /* copy block sits at the top of the row instead of centered */
}
.dg-save-now__copy {
    text-align: left;
    margin-left: -130px;                          /* align with the leftmost trust-strip box (which has margin: 0 -130px) */
    margin-top: 32px;                             /* small top offset — copy sits high in the section */
}
.dg-save-now__title {
    margin: 0 0 36px;
    font-family: var(--dg-font-display);
    font-weight: 700;
    font-size: 56px;
    line-height: 1.05;
    white-space: nowrap;
    background: linear-gradient(180deg, #5C3D08 0%, #B07B14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #5C3D08;                               /* fallback */
}
.dg-save-now__br-m { display: none; }            /* mobile-only title line break */
.dg-save-now__sub {
    margin: 0 0 56px;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.55;
    color: #7A6950;
    max-width: 600px;
    text-align: left;
}
.dg-save-now__divider {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0;                                    /* spacing handled by surrounding elements */
    user-select: none;
    -webkit-user-drag: none;
}

.dg-secured-by {
    display: flex;
    flex-direction: column;
    gap: 24px;                                    /* more space between "Secured By:" and the logos */
    margin-top: 56px;
    text-align: left;
}
.dg-secured-by__label {
    font-size: 18px;
    font-weight: 600;
    color: #95702F;
}
.dg-secured-by__logos {
    display: flex;
    align-items: center;
    gap: 32px;
}
.dg-secured-by__logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    display: inline-block;
}

/* ----- Right column: gold locker illustration ----- */
.dg-save-now__art {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: flex-end;                        /* image hugs the bottom of the grid row */
    justify-content: flex-end;                    /* image hugs the right side of the column */
    margin-right: -80px;                          /* extends past container right edge */
}
/* soft yellow fade at the foot of the locker — appears only AFTER the image settles */
/* no foot overlay — the locker image already includes its pedestal */
.dg-save-now__locker {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    /* softly dissolve the foot of the image into the page background */
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    margin: 0 0 -40px;
    user-select: none;
    -webkit-user-drag: none;
    transform: translateY(140px);
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.dg-save-now.is-in-view .dg-save-now__locker {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .dg-save-now__locker {
        transform: none;
        transition: none;
    }
}

/* =============================================================
   3. INTRODUCING (Figma 3667:8117)
   ============================================================= */
.dg-intro {
    position: relative;
    padding: 100px 0 40px;
    background: #FFFFFF;
    text-align: center;
    overflow: hidden;
}
.dg-intro__coin {
    position: absolute;
    top: -65px;                                   /* coin half above the intro section */
    right: 10%;
    width: 130px;
    height: auto;
    filter: blur(1.5px);
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.dg-intro__inner {
    position: relative;
    z-index: 2;
}
.dg-intro__title {
    margin: 0 0 28px;
    font-family: var(--dg-font-display);
    font-weight: 800;
    font-size: 50px;
    line-height: 1.15;
    color: #1A1A1A;
}
.dg-intro__accent {
    color: #EBA818;                               /* gold accent for "Pocketly Digital Gold!" */
}
.dg-intro__sub {
    margin: 0 auto;
    max-width: none;                              /* no width constraint — <br> controls line break */
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 30px;                              /* much larger as in the reference */
    line-height: 1.45;
    color: #7A6950;
}
.dg-intro__sub strong {
    color: #534633;                               /* darker emphasis for "24K pure gold" + "just ₹10." */
    font-weight: 700;
}

/* =============================================================
   4. SHOWCASE + FEATURE CARDS — phone + 4-card grid
   ============================================================= */
.dg-showcase {
    position: relative;
    padding: 60px 0 0;
    background: #FFFFFF;
    overflow: hidden;
}
/* Decorative coins — positioned at section level so they get clipped by the
   section's overflow:hidden when half-off the top / left edge. */
.dg-showcase__coin {
    position: absolute;
    width: 130px;
    height: auto;
    filter: blur(1.5px);
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.dg-showcase__coin--top {
    top: -65px;                                   /* coin half above section → only lower half visible */
    right: 10%;
}
.dg-showcase__coin--left {
    top: 45%;
    left: -65px;                                  /* coin half off-screen left → only right half visible */
}

.dg-showcase__inner {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 80px 0 0;                          /* less right padding → cards column gets more width */
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 40px;
    align-items: start;
    z-index: 2;
}

/* Left column — phone + ring + adjacent mock card */
.dg-showcase__visual {
    position: relative;
    min-height: 640px;                            /* shorter so the section doesn't have empty space below */
}
/* White fade overlay at the bottom of the phone — bottom ~10% of the phone is
   fully covered, with a soft gradient blending the rest into white. */
/* Fade is now applied directly to the phone image (via mask-image) so only the
   phone's foot fades — the ring behind it is left untouched. */
.dg-showcase__ring {
    position: absolute;
    top: -40px;
    left: 60px;
    width: 660px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    transform: scale(0.85);                       /* initial — ring slightly smaller */
    transform-origin: center center;
    transition: transform 1500ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.dg-showcase__phone {
    position: absolute;
    top: -130px;
    left: -100px;
    width: 920px;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.18));
    pointer-events: none;
    user-select: none;
    transform: translateY(320px);                 /* initial — phone starts below, slides up on reveal */
    transition: transform 1700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* White overlay placed on the foot of the phone only — gradual fade like the reference.
   Pseudo-element on .dg-showcase__visual (always present), so no EJS re-render needed. */
.dg-showcase__visual::after {
    content: '';
    position: absolute;
    top: 450px;
    left: -100px;
    width: 920px;
    height: 350px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        #FFFFFF                40%,
        #FFFFFF                100%);
    z-index: 4;
    pointer-events: none;
}
/* legacy div kept harmless if present */
.dg-showcase__phone-fade { display: none; }
.dg-showcase__mock {
    position: absolute;
    top: 140px;
    left: 440px;
    width: 400px;
    height: 348px;
    z-index: 5;
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.15));
    pointer-events: none;
    user-select: none;
    transform: scale(0.82);                       /* initial — card slightly smaller */
    transform-origin: center center;
    transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
    will-change: transform;
}

/* When the section enters the viewport: phone slides up, ring + mock expand to natural size */
.dg-showcase.is-in-view .dg-showcase__phone { transform: translateY(0); }
.dg-showcase.is-in-view .dg-showcase__ring  { transform: scale(1); }
.dg-showcase.is-in-view .dg-showcase__mock  { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .dg-showcase__phone,
    .dg-showcase__ring,
    .dg-showcase__mock {
        transform: none !important;
        transition: none !important;
    }
}

.dg-mock-card {
    position: absolute;
    top: 240px;
    left: 400px;
    width: 260px;
    background: #FFFFFF;
    border-radius: var(--dg-r-md);
    padding: 14px;
    box-shadow: var(--dg-shadow-md);
    font-size: 12px;
}
.dg-mock-card__toggle {
    display: flex;
    background: var(--dg-cream-dark);
    border-radius: var(--dg-r-pill);
    padding: 4px;
    margin-bottom: 14px;
}
.dg-mock-card__toggle-opt {
    flex: 1;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: var(--dg-r-pill);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--dg-ink-3);
    cursor: pointer;
}
.dg-mock-card__toggle-opt.is-active {
    background: #FFFFFF;
    color: var(--dg-ink);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.dg-mock-card__freq {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
.dg-mock-card__radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--dg-ink-2);
    cursor: pointer;
}
.dg-mock-card__radio-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--dg-ink-3);
    position: relative;
}
.dg-mock-card__radio.is-active .dg-mock-card__radio-dot {
    border-color: var(--dg-gold-dark);
}
.dg-mock-card__radio.is-active .dg-mock-card__radio-dot::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--dg-gold);
    border-radius: 50%;
}

.dg-mock-card__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.dg-mock-card__input {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--dg-divider);
    border-radius: var(--dg-r-sm);
}
.dg-mock-card__input-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--dg-ink-3);
    letter-spacing: 0.08em;
}
.dg-mock-card__input-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--dg-ink);
}

.dg-mock-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.dg-mock-card__chip {
    position: relative;
    padding: 5px 10px;
    background: var(--dg-cream-dark);
    border-radius: var(--dg-r-pill);
    font-size: 11px;
    font-weight: 600;
    color: var(--dg-ink);
}
.dg-mock-card__chip-badge {
    position: absolute;
    top: -8px;
    right: -4px;
    padding: 2px 6px;
    background: var(--dg-gold);
    color: var(--dg-ink);
    border-radius: var(--dg-r-pill);
    font-size: 8px;
    font-weight: 700;
}

.dg-mock-card__stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--dg-divider);
    font-size: 10px;
    color: var(--dg-ink-3);
}
.dg-mock-card__stat strong {
    color: var(--dg-ink);
    font-size: 12px;
}

.dg-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;                                    /* more gap between cards */
    margin-top: 80px;
}
.dg-feature-card {
    padding: 28px 28px;
    min-height: 220px;                            /* slightly shorter */
    background-color: #FFF6DE;
    background-image: url('/assets/4CardBg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.dg-feature-card__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    margin-bottom: 44px;                          /* pushes title + desc further down */
}
.dg-feature-card__title {
    margin: 0 0 10px;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 600;                             /* lighter title */
    color: #95702F;
}
.dg-feature-card__body {
    margin: 0;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 500;                             /* slightly heavier desc */
    line-height: 1.5;
    color: #9B8F7C;
}

/* =============================================================
   5. HOW IT WORKS — dark rounded panel with 3 step cards
   ============================================================= */
.dg-how {
    position: relative;
    padding: 60px 0 100px;
    background: #FFFFFF;
    overflow: hidden;
}

/* Wider wrap — break out of the standard 1172 container */
.dg-how__wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Dark rounded "hero" panel — bg image already includes the radial ring pattern */
.dg-how__panel {
    position: relative;
    background-color: #161109;
    background-image: url('/assets/GoldHowItWorksBG.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    border-radius: 48px;
    padding: 80px 48px 260px;                     /* extra bottom padding so cards can sit over the lower half */
    text-align: center;
    overflow: hidden;
}

/* Pill inside the dark panel — same dark+gold treatment as the hero pill */
.dg-how__pill {
    position: relative;
    z-index: 2;
    background: #1B1102;
    border: 1px solid #6C4B08;
    color: #FFBF35;
}

.dg-how__title {
    position: relative;
    z-index: 2;
    margin: 26px 0 0;
    font-family: var(--dg-font-display);
    font-weight: 700;
    font-size: 64px;
    line-height: 1.1;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

/* ----- 3 step cards — overlap panel bottom ----- */
/* Desktop (default): original 3-column grid, carousel wrapper is just a passthrough */
.dg-steps-carousel {
    position: relative;
    margin: -210px 0 0;
    z-index: 3;
}
.dg-steps {
    list-style: none;
    margin: 0 56px;                               /* inset from panel edges */
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.dg-steps__item {
    position: relative;
    padding-top: 60px;                            /* room for the star badge that peeks above the card */
}

/* Prev / Next buttons — hidden on desktop, shown only on mobile carousel */
.dg-steps__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: rgba(50, 36, 14, 0.85);
    color: #FFE9A8;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
    display: none;                                /* desktop: hidden */
}
.dg-steps__nav:hover  { background: rgba(50, 36, 14, 1); transform: translateY(-50%) scale(1.05); }
.dg-steps__nav:active { transform: translateY(-50%) scale(0.96); }
.dg-steps__nav:disabled,
.dg-steps__nav[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
}
.dg-steps__nav--prev { left: 8px; }
.dg-steps__nav--next { right: 8px; }

/* Star badge — uses StarBgGold.png (yellow-rim, dark-fill scalloped star).
   The number sits on top, vertically centered over the dark fill. */
.dg-steps__star {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.30));
}
.dg-steps__star-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dg-steps__star-num {
    position: relative;
    z-index: 5;
    font-family: var(--dg-font-display);
    font-size: 40px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
}
.dg-steps__card {
    background-color: #FFE9A8;                    /* fallback under the bg image */
    background-image: url('/assets/GoldPhoneBG.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    border-radius: 28px;
    padding: 68px 28px 0;
    text-align: center;
    min-height: 620px;
    overflow: hidden;
    position: relative;
}
.dg-steps__title {
    margin: 0 0 14px;
    font-family: var(--dg-font-display);
    font-size: 28px;
    font-weight: 700;
    color: #1A1A1A;
}
.dg-steps__sub {
    margin: 0 auto;
    max-width: 340px;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: #4A4A4A;
}
/* Phone-mockup container — shows only the top portion of each phone image.
   The bottom half of the phone hangs off the bottom of the slot and is
   clipped by overflow:hidden. */
.dg-steps__phone-slot {
    position: relative;
    margin: 32px -28px 0;
    height: 400px;                                /* taller slot → more of each phone visible */
    overflow: hidden;
}
/* White fade overlay at the bottom — smoothly blends the phone into the card bg */
.dg-steps__phone-slot::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 60%, #FFFFFF 100%);
    pointer-events: none;
    z-index: 2;
}
.dg-steps__phone {
    position: absolute;
    top: 0;                                       /* anchor to the slot top, not centered */
    left: 50%;
    transform: translateX(-50%) translateY(340px); /* hidden below the slot by default */
    will-change: transform;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
@keyframes dg-steps-rise {
    from { transform: translateX(-50%) translateY(340px); }
    to   { transform: translateX(-50%) translateY(0); }
}
/* Slide step phones up one-by-one (small stagger) when the section is in view */
.dg-how.is-in-view .dg-steps__phone {
    animation: dg-steps-rise 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dg-how.is-in-view .dg-steps__item:nth-child(2) .dg-steps__phone { animation-delay: 150ms; }
.dg-how.is-in-view .dg-steps__item:nth-child(3) .dg-steps__phone { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
    .dg-steps__phone { transform: translateX(-50%) !important; animation: none !important; }
}
/* Phones 1 and 3 are square (2010×2010) with the phone centered in transparent
   padding — the phone shape is ~50% of the image width.  Phone 2 is already
   cropped (795×1620) with the phone filling the image — display at half the
   width so all three phones appear at roughly the same visual size. */
/* Each phone is rendered so that its full natural HEIGHT is roughly TWICE the
   slot height — overflow:hidden on the slot then clips off the bottom half. */
.dg-steps__phone--square {
    width: 195%;
    top: -14%;                                    /* slight upward shift */
}
.dg-steps__phone--tall {
    width: 72%;
    top: 0;                                       /* shifted up a bit — no cropping at the top */
}

/* ─── Mobile (≤768px) — placed AFTER all desktop how-it-works rules so the
   cascade lets these overrides win ───────────────────────────────────── */
@media (max-width: 768px) {
    .dg-how                 { padding: 0; }
    .dg-how__wrap {
        padding: 0;
        background: linear-gradient(180deg, #000000 0%, #0E0905 55%, #2A1E08 100%);
        border-radius: 0;
        overflow: hidden;
        max-width: none;
    }
    .dg-how__panel {
        background-image: none;
        background-color: transparent;
        background: transparent;
        border-radius: 0;
        padding: 48px 16px 0;
    }
    .dg-how__title          { font-size: 36px; margin-top: 18px; padding: 0 16px; }

    .dg-steps-carousel      { margin: 32px 0 0; overflow: hidden; padding: 0 0 48px; }
    .dg-steps {
        margin: 0;
        display: flex;
        gap: 0;
        transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
        transform: translateX(0);
    }
    .dg-steps__item {
        flex: 0 0 100%;
        min-width: 0;
        padding: 22px 36px 0;
        box-sizing: border-box;
    }
    .dg-steps__card         { min-height: 460px; padding: 44px 20px 0; }
    .dg-steps__title        { font-size: 22px; }
    .dg-steps__sub          { font-size: 15px; max-width: 260px; }
    .dg-steps__star         { width: 64px; height: 64px; }
    .dg-steps__star-num     { font-size: 22px; }
    .dg-steps__phone-slot   { height: 320px; margin: 20px -20px 0; }
    .dg-steps__phone-slot::after { height: 80px; }   /* shorter white foot-fade on mobile */

    .dg-steps__nav          { display: inline-flex; width: 40px; height: 40px; }
    .dg-steps__nav--prev    { left: 4px; }
    .dg-steps__nav--next    { right: 4px; }
}

/* =============================================================
   6. SAVE IN GOLD — Daily / Weekly / Monthly / One-time (tabbed)
   ============================================================= */
.dg-save {
    padding: 80px 0 100px;
    background: #FFFFFF;
    text-align: center;
}
/* widen this section's container beyond the default 1172px */
.dg-save__inner {
    max-width: 1560px;
}
.dg-save__coin {
    width: 124px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}
.dg-save__title {
    margin: 0 0 64px;
    font-family: var(--dg-font-display);
    font-weight: 800;
    font-size: 50px;
    line-height: 1.2;
    color: #1A1A1A;
}
.dg-save__title-accent {
    color: #EBA818;
}

/* Tab nav */
.dg-save__tabs {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.dg-save__tab {
    padding: 14px 32px;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-family: var(--dg-font-display);
    font-size: 20px;
    font-weight: 700;
    color: #6B6B6B;
    cursor: pointer;
    outline: none;                                /* no blue focus ring */
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, color .2s ease;
}
.dg-save__tab:focus,
.dg-save__tab:focus-visible { outline: none; box-shadow: none; }
.dg-save__tab:not(.is-active):hover { background: #F5F5F5; }
.dg-save__tab.is-active {
    /* bright (top) → dark (bottom) vertical gradient */
    background: linear-gradient(180deg, #09855D 0%, #0A0B0D 100%);   /* daily — green */
    color: #FFFFFF;
}
.dg-save__tab[data-tab="weekly"].is-active  { background: linear-gradient(180deg, #0A5B8A 0%, #0A0B0D 100%); }   /* blue */
.dg-save__tab[data-tab="monthly"].is-active { background: linear-gradient(180deg, #4B2E9E 0%, #0A0B0D 100%); }   /* purple */
.dg-save__tab[data-tab="onetime"].is-active { background: linear-gradient(180deg, #8A6E14 0%, #0A0B0D 100%); }   /* gold */

/* Panels */
.dg-save__panels {
    position: relative;
}
.dg-save__panel {
    display: none;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 640px;
}
.dg-save__panel.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.dg-save__panel.is-active .dg-save__copy { grid-column: 2; }   /* keep copy on the right */
.dg-save__panel-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
/* absolutely positioned so it never stretches the panel height — it overflows
   the bottom and gets clipped by the panel's overflow:hidden. */
.dg-save__phone {
    position: absolute;
    z-index: 2;
    left: -40px;
    bottom: -175px;                                /* pushed further down — more bottom clipped */
    width: 56%;
    max-width: 780px;
    height: auto;
    display: block;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.22));
    pointer-events: none;
    user-select: none;
    /* hidden below by default; slides up (no fade) when the section is in view */
    transform: translateY(260px);
    will-change: transform;
}
@keyframes dg-save-rise-up {
    from { transform: translateY(260px); }
    to   { transform: translateY(0); }
}
/* replays on scroll-in AND on every tab switch (display:none → grid re-triggers it) */
.dg-save.is-in-view .dg-save__panel.is-active .dg-save__phone {
    animation: dg-save-rise-up 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
    .dg-save__phone { transform: translateY(0); }
    .dg-save.is-in-view .dg-save__panel.is-active .dg-save__phone { animation: none; }
}

/* faded overlay at the foot of the phone — colour matches each card's bg theme,
   so the phone bottom blends into the dark base of the panel */
.dg-save__panel::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60%;
    height: 140px;
    z-index: 3;
    pointer-events: none;
}
.dg-save__panel--daily::after   { background: linear-gradient(to bottom, transparent 0%, #053626 100%); }
.dg-save__panel--weekly::after  { background: linear-gradient(to bottom, transparent 0%, #052336 100%); }
.dg-save__panel--monthly::after { background: linear-gradient(to bottom, transparent 0%, #0B0536 100%); }
.dg-save__panel--onetime::after { background: linear-gradient(to bottom, transparent 0%, #362C05 100%); }

.dg-save__copy {
    position: relative;
    z-index: 2;
    text-align: left;
    padding: 48px 64px 48px 8px;
}
.dg-save__pill {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 24px;
    background: var(--save-pill-bg, #E4EFE9);
    border: 1px solid color-mix(in srgb, var(--save-theme) 30%, transparent);
    border-radius: 999px;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--save-theme, #1B5E47);
}
.dg-save__heading {
    margin: 0 0 14px;                              /* tighter — points sit closer to the title */
    font-family: var(--dg-font-display);
    font-weight: 800;
    font-size: 64px;
    line-height: 1.05;
    color: var(--save-theme, #1B5E47);
}
/* per-variant heading colours */
.dg-save__panel--daily   .dg-save__heading { color: #053626; }
.dg-save__panel--weekly  .dg-save__heading { color: #052336; }
.dg-save__panel--monthly .dg-save__heading { color: #0B0536; }
.dg-save__panel--onetime .dg-save__heading { color: #362C05; }
.dg-save__list {
    list-style: none;
    margin: 0 0 64px;                              /* bigger gap before the CTA */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.dg-save__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 21px;
    font-weight: 500;
    color: #3A3A3A;
}
.dg-save__bullet {
    flex-shrink: 0;
    color: var(--save-theme, #1B5E47);
    font-size: 26px;
    line-height: 1.2;
}
.dg-save__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;                            /* shorter button */
    background: #111111;                           /* black */
    color: #FFFFFF;
    border-radius: 12px;
    font-family: var(--dg-font-display);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s ease;
}
.dg-save__cta:hover { opacity: 0.92; }
.dg-save__cta-arrow { flex-shrink: 0; font-size: 20px; font-weight: 700; line-height: 1; }

/* =============================================================
   8. COMPARISON TABLE — "Why invest in Pocketly Gold"
   ============================================================= */
.dg-compare {
    position: relative;
    padding: 56px 0 56px;                          /* tight — content fits inside the bg image area */
    background-color: #FFF7E0;                     /* cream fallback */
    background-image: url('/assets/WhyInvestBg.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;                   /* full width, natural height — no crop. Cream fallback fills below. */
    overflow: hidden;
}
.dg-compare__inner { position: relative; z-index: 2; }
.dg-compare__m { display: none; }              /* mobile-only layout, shown under @media */
.dg-compare__title {
    margin: 0 0 120px;                            /* must clear the 90 px the Pocketly Gold card extends above the table */
    text-align: center;
    font-family: var(--dg-font-display);
    font-weight: 700;
    font-size: 48px;
    color: #1A1101;
}

.dg-compare__table {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 32px;                          /* all four corners — more rounded */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);  /* mild drop shadow */
    overflow: visible;
}

/* Each row in the underlying table — middle column reserved for the floating card.
   Heights are exact (not min-height) so the table dividers fall at known Y positions
   and the card's internal dividers can match them precisely. */
.dg-compare__row {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    height: 84px;                                 /* restored — comfortable vertical padding */
    padding: 0 56px;
    background: #FFFFFF;
}
.dg-compare__row--head {
    background: #F6F6F6;
    border-top-left-radius: 32px;                 /* match table top corners */
    border-top-right-radius: 32px;
    height: 76px;
}
.dg-compare__row--last {
    border-bottom-left-radius: 32px;              /* match table bottom corners */
    border-bottom-right-radius: 32px;
}

/* Full-width divider lines — drawn above both the table rows and the card */
.dg-compare__divider {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #ECECEC;
    z-index: 4;
    pointer-events: none;
}
/* First divider (header → row 1): hidden by the yellow card in the middle,
   so it shows only on the left + right grey cells. The first visible divider
   inside the yellow card is between "Starting as low as ₹10" and "0% Hidden charges". */
.dg-compare__divider--under {
    z-index: 2;                                   /* below card (z-index 3) */
}

.dg-compare__cell--feature  { color: #6B6B6B; font-size: 18px; font-weight: 500; }
.dg-compare__cell--pocketly { /* intentionally empty — floating card sits on top */ }
.dg-compare__cell--other    { color: #6B6B6B; font-size: 18px; text-align: right; }

.dg-compare__row--head .dg-compare__cell--feature,
.dg-compare__row--head .dg-compare__cell--other {
    font-size: 22px;
    font-weight: 700;
    color: #1A1A1A;
}

/* ----- Floating "Pocketly Gold" middle card -----
   Extends above the table only; bottom edge aligns flush with the table bottom.
   Internal dividers between tick rows match the table-row dividers so the lines
   visually continue across the middle column. */
.dg-compare__hero-card {
    position: absolute;
    top: -60px;                                   /* less extension above the table — more space below the heading */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    padding: 32px 28px 0;                         /* tighter top padding to compensate for the shorter above-table area */
    background: #FEF7E8;                          /* lighter cream interior */
    border: 3px solid #F6E2A3;                    /* wider warm-gold border */
    border-radius: 28px 28px 0 0;                 /* rounded upper corners only */
    box-shadow: 0 0 12px rgba(246, 226, 163, 0.30), 0 4px 12px rgba(140, 100, 30, 0.08);
    color: #1A1A1A;
    z-index: 3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dg-compare__hero-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;                                     /* wings tight against the title */
    margin-bottom: 6px;
}
.dg-compare__wing {
    width: 44px;
    height: auto;
    flex-shrink: 0;
}
.dg-compare__hero-title {
    margin: 0;
    font-family: var(--dg-font-display);
    font-size: 28px;
    font-weight: 700;                             /* Bold */
    font-variation-settings: 'opsz' 96, 'wght' 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    background: linear-gradient(180deg, #845B19 0%, #C78314 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #845B19;                               /* fallback for non-clip browsers */
}

.dg-compare__partner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;                              /* partner sits right under the title */
    margin-bottom: auto;                          /* list still anchored at the bottom */
    padding-bottom: 14px;
}
.dg-compare__partner-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #6B6B6B;
}
.dg-compare__partner-logo {
    height: 18px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.dg-compare__hero-list {
    list-style: none;
    margin: 0 -28px;
    padding: 0;
    text-align: left;
    flex: 0 0 336px;                              /* exact 4 × 84 — anchors at the bottom of the card */
    display: flex;
    flex-direction: column;
}
.dg-compare__hero-list li {
    flex: 1;                                      /* divides 336 / 4 = 84 each — matches the data rows exactly */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 56px;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #1A1A1A;
}
.dg-compare__tick {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: inline-block;
}

/* =============================================================
   9. FAQ
   ============================================================= */
.dg-faq {
    padding: 100px 0;
    background: #FFFFFF;
}
.dg-faq__inner {
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.dg-faq__title {
    margin: 0 0 56px;
    text-align: center;
    font-family: var(--dg-font-display);
    font-weight: 700;
    font-size: 48px;
    color: #1A1A1A;
    letter-spacing: -0.01em;
}
.dg-faq__title-accent {
    color: #C78314;                               /* gold accent on "Questions" */
}

.dg-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Closed card: white bg with a soft lavender/blue border */
.dg-faq__item {
    background: #FFFFFF;
    border: 1px solid #DCD9F0;
    border-radius: 16px;
    padding: 28px 36px;
    cursor: pointer;                              /* entire card is clickable */
    transition: background-color .25s ease, border-color .25s ease, padding .25s ease;
    overflow: hidden;
}

/* The question summary is now a real <button> */
.dg-faq__q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;                                /* remove default focus ring */
    -webkit-tap-highlight-color: transparent;     /* remove mobile tap-highlight */
}
.dg-faq__q::-moz-focus-inner { border: 0; }       /* Firefox dotted-border fix */
.dg-faq__q:focus,
.dg-faq__q:focus-visible,
.dg-faq__q:active {
    outline: none;
    box-shadow: none;
}
.dg-faq__q-text {
    font-family: var(--dg-font-display);
    font-size: 19px;
    font-weight: 700;
    color: #0F0E47;
    transition: color .25s ease;
}
.dg-faq__chevron {
    flex-shrink: 0;
    color: #1E1B4B;
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), color .25s ease;
}

/* Smoothly animated answer wrapper — uses the grid-template-rows 0fr ↔ 1fr trick */
.dg-faq__a-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.dg-faq__a-wrap > .dg-faq__a {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity .25s ease .05s;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #6B6B6B;
    white-space: pre-line;                         /* preserve line breaks in API answers */
}

/* Open state — light cream bg, gold accents, answer expands */
.dg-faq__item.is-open {
    background: #FEFCF0;
    border-color: #F0E9C6;
}
.dg-faq__item.is-open .dg-faq__q-text { color: #B47615; }
.dg-faq__item.is-open .dg-faq__chevron {
    color: #B47615;
    transform: rotate(180deg);
}
.dg-faq__item.is-open .dg-faq__a-wrap {
    grid-template-rows: 1fr;
}
.dg-faq__item.is-open .dg-faq__a-wrap > .dg-faq__a {
    opacity: 1;
    margin-top: 20px;
    padding-top: 20px;
    border-top-color: #F0E9C6;                    /* divider fades in along with the answer */
    transition: opacity .35s ease .12s;
}

/* View all FAQ's — gold outlined button */
.dg-faq__viewall {
    align-self: center;
    margin: 56px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: transparent;
    color: #B47615;
    border: 1.5px solid #E7C57A;
    border-radius: 10px;
    font-family: var(--dg-font-display);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}
.dg-faq__viewall:hover {
    background: #FFF7DE;
}
.dg-faq__viewall-arrow {
    font-size: 16px;
    line-height: 1;
}

/* =============================================================
   10. #MyGoldLocker — slant phone + #MyGoldLocker text + Jar partner logo
   ============================================================= */
.dg-locker {
    position: relative;
    padding: 56px 0 0;                            /* no bottom padding — phone is flush to section bottom */
    background: #FFFFFF;
    overflow: hidden;                             /* crops the bottom 10 % of the phone */
}
.dg-locker__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    min-height: 720px;
}

/* Left visual — ring + phone + decorative coins */
.dg-locker__visual {
    position: relative;
    height: 100%;
    min-height: 720px;
    transform: translateX(-140px);                /* shift the whole visual (phone + ring + coins) left */
}
.dg-locker__ring {
    position: absolute;
    top: 80px;
    left: 140px;
    width: 920px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    transform: scale(0.86);                       /* initial: slightly smaller */
    transform-origin: center center;
    transition: transform 1500ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.dg-locker__phone {
    position: absolute;
    bottom: -320px;
    left: -20px;
    width: 1150px;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.22));
    pointer-events: none;
    user-select: none;
    transform: translateY(450px);                 /* initial: pushed way down (fully out of view) */
    transition: transform 1800ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Reveal — when JS adds .is-in-view, phone slides up + ring scales up */
.dg-locker.is-in-view .dg-locker__phone { transform: translateY(0); }
.dg-locker.is-in-view .dg-locker__ring  { transform: scale(1); }

/* Continuous coin float (subtle bobbing) — runs once the section is in view */
@keyframes dg-locker-coin-float-1 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(2px, -12px); }
}
@keyframes dg-locker-coin-float-2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-6px, 10px); }
}
.dg-locker.is-in-view .dg-locker__coin--1 {
    animation: dg-locker-coin-float-1 4.5s ease-in-out infinite;
}
.dg-locker.is-in-view .dg-locker__coin--2 {
    animation: dg-locker-coin-float-2 5.5s ease-in-out infinite 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .dg-locker__phone,
    .dg-locker__ring,
    .dg-locker__coin {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}
.dg-locker__coin {
    position: absolute;
    height: auto;
    filter: blur(1.5px);
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}
.dg-locker__coin--1 { top: 260px;   right: -60px; width: 110px; }
.dg-locker__coin--2 { bottom: -30px; left: 250px;  width: 130px; }

/* Right copy — #MyGoldLocker title + partner row + Jar logo */
.dg-locker__copy {
    text-align: center;
    padding: 0 24px;
}
.dg-locker__title {
    margin: 0 0 28px;
    font-family: var(--dg-font-display);
    font-size: 64px;
    font-weight: 800;
    color: #C9BFA1;                               /* muted warm grey-gold */
    letter-spacing: -0.02em;
    line-height: 1;
}
.dg-locker__partner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}
.dg-locker__line {
    flex: 1;
    max-width: 220px;                             /* bigger lines */
    height: auto;
    width: 100%;
    object-fit: contain;
}
.dg-locker__line--right {
    transform: scaleX(-1);                        /* mirror the arrow/line so it points the other way */
}
.dg-locker__partner-label {
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
}
.dg-locker__partner-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* =============================================================
   RESPONSIVE — basic stacking under 1024px
   ============================================================= */
@media (max-width: 1024px) {
    .dg-hero { min-height: auto; padding: 140px 0 0; }
    .dg-hero__title-line--shine { font-size: 42px; }
    .dg-hero__title-line--big   { font-size: 70px; }
    .dg-hero__sub { font-size: 20px; max-width: 820px; }

    .dg-hero__stage  { height: 520px; }
    .dg-hero__phone--left  { width: 820px; left:  calc(50% - 610px); bottom: -300px; }
    .dg-hero__phone--right { width: 740px; right: calc(50% - 560px); bottom: -285px; }
    .dg-hero__phone--center { width: 740px; margin-left: -370px;     bottom: -340px; }
    .dg-hero__coins  { width: 500px; height: 425px; bottom: -20px; }
    .dg-hero__coins--left  { left:  40px; }
    .dg-hero__coins--right { right: 40px; }

    .dg-save-now__content,
    .dg-showcase__inner,
    .dg-locker__inner {
        grid-template-columns: 1fr;
    }
    .dg-trust-strip { flex-wrap: wrap; gap: 16px; }
    .dg-trust-strip__item { flex-basis: calc(50% - 16px); }

    .dg-steps { grid-template-columns: 1fr; }
    .dg-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* hero fills the full screen so the next section doesn't peek in the first fold */
    .dg-hero {
        padding-top: 84px;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
    }
    .dg-hero__inner { flex: 0 0 auto; }

    /* ----- WHY INVEST — keep the desktop table, just scale it down ----- */
    .dg-compare {
        margin-top: 40px;          /* gap between the Save-in-gold section and the table */
        padding: 48px 0 90px;
        background-image: url('/assets/WhyInvestMobileBg.png');
        background-size: cover;    /* span the taller mobile section */
    }
    .dg-compare__title { font-size: 30px; margin-bottom: 40px; }
    .dg-compare__inner {
        padding: 0;
        text-align: center;        /* centre the inline-block table (works with zoom) */
    }
    /* hide the desktop overlay table; use the dedicated mobile grid instead */
    .dg-compare__table { display: none; }

    .dg-compare__m {
        display: flex;
        align-items: flex-start;
        position: relative;
        max-width: 352px;           /* fits all three columns without the card overlapping */
        margin: 60px auto 0;        /* pushed down a bit + top room for the lifted middle card */
        text-align: left;
        background: #FFFFFF;        /* white table body — side columns are grey/white */
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    }
    .dg-cm__col { flex: 1 1 0; display: flex; flex-direction: column; }
    .dg-cm__col--feature { flex: 1.4 1 0; }    /* wider so the feature labels stay on one line */
    .dg-cm__col--pk      { flex: 1.05 1 0; }
    .dg-cm__col--other   { flex: 0.95 1 0; }
    /* grey header strip on the side columns (centre keeps its gold card) */
    .dg-cm__col--feature .dg-cm__head { background: #F6F6F6; border-top-left-radius: 18px; }
    .dg-cm__col--other   .dg-cm__head { background: #F6F6F6; border-top-right-radius: 18px; }

    /* the highlighted middle column is a lifted cream card with a gold border */
    .dg-cm__col--pk {
        flex: 1.05 1 0;
        margin-top: -34px;
        background: #FEF7E8;
        border: 2px solid #F6E2A3;
        border-radius: 20px 20px 0 0;   /* rounded top only — straight lower corners */
        box-shadow: 0 10px 26px rgba(184, 142, 58, 0.16);
        z-index: 1;
    }

    /* header row — fixed height so all three columns line up */
    .dg-cm__head {
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #1A1A1A;
        text-align: center;
    }
    .dg-cm__head--feature { justify-content: flex-start; padding-left: 12px; }
    .dg-cm__head--other   { color: #6B6B6B; }
    .dg-cm__head--pk {
        height: 88px;               /* 54 + 34 lift */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0 4px;
    }
    .dg-cm__pk-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-family: var(--dg-font-display), 'Bricolage Grotesque', sans-serif;
        font-weight: 800;
        font-size: 13px;
        line-height: 1.05;
        text-align: center;
        background: linear-gradient(180deg, #845B19 0%, #C78314 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #845B19;
    }
    .dg-cm__wing { width: 18px; height: auto; }
    .dg-cm__partner { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
    .dg-cm__partner-label { font-size: 8px; font-weight: 700; letter-spacing: .04em; color: #8C8C8C; }
    .dg-cm__partner-logo  { height: 13px; width: auto; }

    /* body cells — fixed height keeps the three columns aligned */
    .dg-cm__cell {
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .dg-cm__feature {
        justify-content: flex-start;
        padding-left: 12px;
        font-size: 12px;
        font-weight: 500;
        color: #6B6B6B;
        white-space: nowrap;        /* keep each label on a single line */
    }
    .dg-cm__pk,
    .dg-cm__other {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }
    .dg-cm__pk span    { font-size: 10.5px; font-weight: 700; color: #1A1A1A; }
    .dg-cm__other span:last-child { font-size: 11px; font-weight: 500; color: #9A9A9A; }
    /* faint row separators in the side columns only */
    .dg-cm__col--feature .dg-cm__cell,
    .dg-cm__col--other   .dg-cm__cell { border-top: 1px solid #ECECEC; }
    .dg-cm__tick { width: 18px; height: 18px; }
    .dg-cm__x {
        width: 18px; height: 18px;
        border-radius: 50%;
        background: #D9D4C9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 10px;
        line-height: 1;
    }
    .dg-cm__x::before { content: '\2715'; }

    /* FAQ section heading (main page) — smaller on mobile */
    .dg-faq__title { font-size: 28px; margin-bottom: 32px; }
    .dg-faq__q-text { font-size: 16px; }
    .dg-faq__item { padding: 20px 22px; }

    /* Title — small top line, large bottom line */
    .dg-hero__title { margin: 18px 0 16px; }
    .dg-hero__title-line--shine { font-size: 24px; }
    .dg-hero__title-line--big {
        display: block;
        font-size: 48px;
    }
    .dg-hero__sub { font-size: 14px; padding: 0 12px; max-width: 100%; margin-bottom: 30px; white-space: nowrap; }
    .dg-hero__sub-accent { font-size: 1em; }      /* drop the size boost so line 1 fits */
    .dg-hero__sub-br-m { display: inline; }       /* force the 2-line break after "24K" */
    .dg-hero__cta { font-size: 17px; padding: 14px 26px; }

    /* Phone cluster — large phones + coins, sized in vw so it scales.
       PNGs have heavy transparent padding (real phone ≈60% of image) so widths
       run well over 100vw to make the visible device large. */
    /* remove the dark bottom-gradient overlay that dulls the phones on mobile */
    .dg-hero::after { display: none; }

    /* stage pinned to the bottom of the full-height hero */
    .dg-hero__stage { height: 88vw; max-height: 480px; margin-top: auto; }
    /* side phones bigger than the centre one */
    .dg-hero__phone--left {
        width: 104vw;
        left: calc(50% - 80vw);
        bottom: -20vw;
    }
    .dg-hero__phone--right {
        width: 100vw;
        right: calc(50% - 76vw);
        bottom: -18vw;
    }
    .dg-hero__phone--center {
        width: 88vw;
        margin-left: -44vw;
        bottom: -22vw;
    }
    /* coins sit at the corners — only their inner edge overlaps the side phones */
    .dg-hero__coins { width: 62vw; height: auto; bottom: -2vw; z-index: 4; }
    .dg-hero__coins--left  { left:  -24vw; }
    .dg-hero__coins--right { right: -24vw; }

    .dg-how__title { font-size: 36px; }

    /* ----- INTRODUCING + SHOWCASE — mobile: stacked, phone visual + 2×2 cards ----- */
    .dg-intro { padding: 48px 16px 0; }
    .dg-how   { padding: 48px 0 60px; }
    .dg-faq   { padding: 48px 0; }
    .dg-intro__title { font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
    .dg-intro__accent { display: block; }          /* "Pocketly Digital Gold!" drops to line 2 */
    .dg-intro__sub  { font-size: 12px; line-height: 1.55; max-width: 100%; }  /* fits the <br> into 2 lines */

    .dg-showcase { padding: 0 0 56px; }
    .dg-showcase__coin { display: none; }          /* hide decorative side coins on mobile */
    .dg-intro__coin    { display: none; }          /* hide the coin above the heading on mobile */
    .dg-showcase__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
    .dg-feature-grid { padding: 0 16px; }          /* keep cards off the edge; visual goes full-width */

    /* phone + ring + mock — centered, clipped stage */
    .dg-showcase__visual {
        position: relative;
        width: 100%;
        height: 400px;                              /* enough so the phone is never cropped */
        min-height: 0;
        margin: -10px auto 0;
        overflow: hidden;
    }
    .dg-showcase__ring  { width: 320px; top: 28px;  left: 50%; margin-left: -185px; }  /* unchanged position */
    .dg-showcase__phone { width: 400px; top: -20px; left: 50%; margin-left: -230px; filter: none; }  /* phone moved up; no shadow band */
    .dg-showcase__visual::after {                  /* fade on the phone foot — intense */
        top: 250px; left: 0; margin-left: 0; width: 100%; height: 150px;
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 0%,
            #FFFFFF 22%,
            #FFFFFF 100%);
    }
    .dg-showcase__mock  { width: 168px; height: auto; top: 108px; left: 50%; margin-left: -18px; }

    /* 4 feature cards → 2×2 grid */
    .dg-feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        width: 100%;
        position: relative;
        z-index: 6;                                 /* above the visual's fade/phone — pull up without being clipped */
        margin-top: -70px;
    }
    .dg-feature-card { padding: 20px 10px; min-height: 0; border-radius: 12px; }
    .dg-feature-card__icon { width: 26px; height: 26px; margin-bottom: 14px; }
    .dg-feature-card__title { font-size: 12.5px; margin-bottom: 3px; }
    .dg-feature-card__body  { font-size: 10px; line-height: 1.4; }

    /* ----- SAVE NOW & GROW EVERYDAY — mobile stacked layout ----- */
    /* no extra horizontal padding — .dg-container already gives 24px each side */
    .dg-save-now { padding: 48px 0; background-image: url('/assets/SaveNowMobileBg.png'); }

    /* trust strip → 2×2 grid of pills */
    .dg-trust-strip {
        margin: 0 0 36px;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .dg-trust-strip__item {
        width: calc(50% - 6px);
        flex: 0 0 calc(50% - 6px);
        gap: 8px;
        padding: 12px 8px;
        min-width: 0;
    }
    .dg-trust-strip__icon  { width: 22px; height: 22px; }
    .dg-trust-strip__label { font-size: 11px; white-space: nowrap; }

    /* stack + reorder: title → sub → locker → divider → secured-by */
    .dg-save-now__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;                                 /* uniform spacing between stacked items */
    }
    .dg-save-now__copy { display: contents; }     /* flatten so children can be reordered */

    .dg-save-now__title {
        order: 1;
        text-align: center;
        white-space: normal;
        font-size: 38px;
        line-height: 1.1;
        margin: 0;
        padding: 0;
    }
    .dg-save-now__br-m   { display: inline; }      /* break so "Grow Everyday" drops to line 2 */
    .dg-save-now__title-nw { white-space: nowrap; }  /* keep "Grow Everyday" together */

    .dg-save-now__sub {
        order: 2;
        text-align: center;
        font-size: 13px;
        line-height: 1.4;
        max-width: 320px;
        margin: 0 auto;
        padding: 0;
    }
    .dg-save-now__art {
        order: 3;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        min-height: auto;
    }
    .dg-save-now__locker { margin: 0 auto 24px; max-width: 280px; transform: translateY(90px); }
    .dg-save-now__divider {
        order: 4;
        width: 78%;
        max-width: 320px;
        margin: 0 auto;
    }
    .dg-secured-by {
        order: 5;
        align-items: center;
        text-align: center;
        margin-top: 0;
    }
    .dg-secured-by__logos {
        flex-direction: row;                       /* logos side-by-side, not stacked */
        flex-wrap: nowrap;
        justify-content: center;
        gap: 20px;
    }
    .dg-secured-by__logo { height: 26px; }

    /* ----- SAVE IN GOLD — mobile: scrollable tabs, full-bleed panel, stacked content ----- */
    .dg-save { padding: 16px 0 0; }
    .dg-save__inner { padding: 0; max-width: 100%; }
    .dg-save__coin { width: 76px; margin-bottom: 14px; }
    .dg-save__title { font-size: 24px; padding: 0 16px; margin-bottom: 24px; }

    /* tabs — horizontal scrollable row */
    .dg-save__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 18px;
        padding: 0 16px 4px;
        margin-bottom: 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dg-save__tabs::-webkit-scrollbar { display: none; }
    .dg-save__tab { flex-shrink: 0; font-size: 16px; padding: 10px 22px; }

    /* panel — full-bleed, single column, content above the phone */
    .dg-save__panels { width: 100%; }
    .dg-save__panel.is-active {
        display: flex;
        flex-direction: column;
        align-items: stretch;                        /* reset desktop's align-items:center so copy is full-width, not shrink-centered */
        border-radius: 0 0 24px 24px;               /* rounded bottom corners */
        min-height: 0;
        overflow: hidden;
    }
    /* green/theme fade at the foot of the phone (full width, bottom of panel) */
    .dg-save__panel::after {
        display: block;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120px;
        z-index: 3;
    }
    .dg-save__copy {
        order: 1;
        grid-column: auto;
        text-align: left;
        padding: 24px 20px 0;
    }
    .dg-save__pill { font-size: 11px; padding: 6px 13px; margin-bottom: 16px; }
    .dg-save__heading { font-size: 34px; margin-bottom: 14px; }
    .dg-save__list { margin-bottom: 24px; gap: 12px; }
    .dg-save__list li { font-size: 13.5px; gap: 10px; align-items: flex-start; }
    .dg-save__bullet { font-size: 18px; }
    .dg-save__cta { font-size: 15px; padding: 12px 22px; }
    .dg-save__phone {
        order: 2;
        position: relative;
        left: auto;
        bottom: auto;
        width: 98%;                                  /* smaller */
        max-width: none;
        margin: 20px 0 -70px -40px;                  /* higher + shifted left */
        align-self: flex-start;
    }

    /* Savings panels — portrait mobile background images */
    .dg-save__panel--daily,
    .dg-save__panel--weekly,
    .dg-save__panel--monthly,
    .dg-save__panel--onetime {
        background-size: 100% 100%;                  /* fill the panel exactly — avoids the cover-crop seam */
        background-position: center top;
        background-repeat: no-repeat;
    }
    .dg-save__panel--daily   { background-image: url('/assets/MobileDailyBg.png'); }
    .dg-save__panel--weekly  { background-image: url('/assets/PhoneWeeklyBg.png'); }
    .dg-save__panel--monthly { background-image: url('/assets/MonthlyMobileBg.png'); }
    .dg-save__panel--onetime { background-image: url('/assets/OneTimePhoneBg.png'); }
    .dg-save__panel .dg-save__panel-bg { display: none; }

    /* ----- #MyGoldLocker — mobile: tagline + Jar on top, phone below touching footer ----- */
    .dg-locker { padding: 48px 0 0; }              /* no bottom padding → phone touches the footer */
    .dg-locker__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        min-height: 0;
    }
    .dg-locker__visual {
        order: 2;                                  /* phone below the text */
        transform: none;                           /* drop the desktop -140px shift */
        width: 100%;
        height: 300px;
        min-height: 0;
        overflow: hidden;                          /* clip the phone foot */
        margin-bottom: 0;                          /* flush to the section bottom */
    }
    .dg-locker__ring  { width: 300px; top: 10px;  left: 50%; margin-left: -150px; }
    .dg-locker__phone { width: 430px; bottom: auto; top: 6px; left: 50%; margin-left: -215px; }
    .dg-locker__coin--1 { top: 90px;   right: 72px; left: auto; width: 36px; }
    .dg-locker__coin--2 { bottom: 50px; left: 90px;  width: 44px; }
    /* no float animation on mobile */
    .dg-locker.is-in-view .dg-locker__coin--1,
    .dg-locker.is-in-view .dg-locker__coin--2 { animation: none; }

    .dg-locker__copy { order: 1; padding: 0 16px; margin-bottom: 16px; }   /* text above the phone */
    .dg-locker__title { font-size: 38px; margin-bottom: 18px; }
    .dg-locker__line { max-width: 90px; }
    .dg-locker__partner { gap: 10px; margin-bottom: 18px; }
    .dg-locker__partner-label { font-size: 15px; }
    .dg-locker__partner-logo { height: 40px; }
}