.dg-dating * { box-sizing: border-box; }
      .dg-dating {
        font-family: 'Inter', sans-serif;
        color: #F2E9F6;
        margin: 0 calc(50% - 50vw);
      }
      .dg-dating .display { font-family: 'Fraunces', serif; }

      /* ── Hero: clean white theme, matching the reference layout ── */
      .dg-hero {
        position: relative;
        background: #ffffff;
        padding: 20px clamp(24px, 6vw, 90px) 90px;
        /* keep this section's paint/layout work from rippling out to the rest of the page */
        contain: layout style paint;
      }
      .dg-hero-inner {
        position: relative;
        max-width: 1280px; margin: 0 auto;
        display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 40px;
      }

      /* Floating hearts/stars scattered across the hero — same hover/
         tap burst effect and dgDecoFloat animation already used by
         .dg-connect-deco / .dg-sm-deco further down the page. Anchored
         to .dg-hero itself (not .dg-hero-inner) so they can scatter
         across the section's full width, not just the narrower
         centred content column. */
      .dg-hero-deco {
        position: absolute;
        z-index: 1;
        pointer-events: auto;
        cursor: pointer;
        animation: dgDecoFloat 4.5s ease-in-out infinite;
        will-change: transform;
      }
      .dg-hero-deco-1 {top: 4%;left: 9%;font-size: 26px;color: #ffb8d6;opacity: .6;--r: -12deg;animation-duration: 4.3s;}
      .dg-hero-deco-2 { top: 55%;  left: 5%;  font-size: 18px; color: #ffd66b; opacity: .65; --r: 10deg;  animation-duration: 3.8s; animation-delay: .3s; }
      .dg-hero-deco-3 {top: 16%;right: 12%;font-size: 22px;color: #c8b6ff;opacity: .55;--r: 14deg;animation-duration: 4.7s;animation-delay: .5s;}
      .dg-hero-deco-4 { top: 78%;  right: 4%; font-size: 30px; color: #ffb8d6; opacity: .5;  --r: -8deg;  animation-duration: 5.1s; animation-delay: .2s; }
      .dg-hero-deco-5 {top: 97%;left: 24%;font-size: 16px;color: #ffd66b;opacity: .6;--r: -18deg;animation-duration: 3.6s;animation-delay: .7s;}
      .dg-hero-copy .dg-pretitle {
        font-family: 'Fraunces', serif;
        font-size: clamp(22px, 2.3vw, 28px);
        font-weight: 500;
        color: #2B1B28;
        margin: 65px 0 2px;
      }
      .dg-hero-copy h1.dg-headline {
        font-family: 'Fraunces', serif;
        font-size: clamp(36px, 4.4vw, 54px);
        line-height: 1.14;
        font-weight: 700;
        color: #1C1420;
        letter-spacing: -.01em;
        margin: 0 0 22px;
      }
      .dg-headline .bold { display: block; font-weight: 400; }

      /* ── Staggered step-down indent on the hero heading (desktop only) ──
           "Find your" (pretitle) stays flush left, "DivaGirl" steps in
           20px, "Dating Differently" steps in a further 20px (40px
           total). Scoped to min-width:881px so it never applies once
           the mobile breakpoint below (max-width:880px) centers this
           text — staggered margins would look off-center there. */
      @media (min-width: 881px) {
        .dg-hero-copy .dg-pretitle { margin-left: 0; }
        .dg-headline .bold:nth-of-type(1) { margin-left: 20px; }
        .dg-headline .bold:nth-of-type(2) { margin-left: 40px; }
      }
      .dg-hero-copy p.lede {
        font-size: 15.5px; line-height: 1.75; color: rgba(43,27,40,.65);
        max-width: 400px; margin: 0 0 30px;
      }
      .dg-btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 17px 38px;
        border-radius: 999px;
        background: linear-gradient(120deg, #5b4fe863 0%, #c13fd64a 55%, #ffb5d291 100%);
        color: #fff;
        font-weight: 800;
        font-size: 13.5px;
        text-transform: uppercase;
        letter-spacing: .07em;
        text-decoration: none;
        box-shadow: 0 6px 14px -12px rgba(151,52,193,.55);
        transition: color .2s ease, box-shadow .2s ease, transform .2s ease;
      }
      .dg-btn-primary:hover,
      .dg-btn-primary:focus,
      .dg-btn-primary:active,
      .dg-btn-primary:visited {
        color: #881eb7 !important;
        text-decoration: none !important;
        transform: translateY(-1px);
      }
      .dg-btn-ghost {
        font-size: 13px; font-weight: 600; color: rgba(43,27,40,.55); text-decoration: underline;
        text-underline-offset: 3px;
        display: inline-flex; align-items: center; gap: 6px; padding: 0;
        transition: color .2s ease;
      }
      .dg-btn-ghost:hover,
      .dg-btn-ghost:focus,
      .dg-btn-ghost:active,
      .dg-btn-ghost:visited {
        color: #B5185A !important;
        text-decoration: underline !important;
      }
      .dg-hero-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 46px; position: relative; z-index: 2; }
      .dg-hero-stats { display: flex; gap: 34px; flex-wrap: wrap; }
      .dg-hero-stats .dg-stat { display: flex; align-items: flex-start; gap: 11px; max-width: 150px; }
      .dg-hero-stats .dg-stat i {
        font-size: 21px;
        margin-top: 2px;
        flex: 0 0 auto;
        background: linear-gradient(120deg, #5b4fe8a6 0%, #c13fd64a 55%, #b5cbffab 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .dg-hero-stats .dg-stat strong { display: block; font-size: 14.5px; color: #1C1420; font-weight: 700; margin-bottom: 3px; }
      .dg-hero-stats .dg-stat span { font-size: 12.5px; line-height: 1.5; color: rgba(43,27,40,.55); }

      /* ── Signature: 3 live profile cards, stacked polaroid-style ── */

      /* ── Floating badges — zip out / zip in, dual-lane carousel,
           same mechanic as the category pill on the main homepage
           hero (main.php ds-catpill), with a trailing sparkle burst. ── */
      .dg-badge-stage {
        position: absolute;
        width: 230px;
        height: 46px;
        overflow: visible;
        pointer-events: none;
        z-index: 99;
      }
      .dg-badge-stage-1 { top: 20px; left: 6px; }
      .dg-badge-stage-2 { bottom: -44px; right: 2px; }

      .dg-badge-pill {
        position: absolute; left: 50%; top: 50%;
        display: inline-flex; align-items: center; gap: 8px;
        padding: 12px 18px;
        background: rgb(255 255 255 / 59%);
        color: #4A1942;
        border-radius: 16px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 7px 34px -14px rgba(0,0,0,.5);
        transform: translate(calc(-50% - var(--dg-stage-half, 115px) - 55px), -50%) scale(.9);
        opacity: 0;
        transition: transform .7s cubic-bezier(.22,.95,.27,1.05), opacity .5s ease;
        will-change: transform, opacity;
        z-index: 1;
      }
      .dg-badge-pill i { color: #E23B7D; flex: 0 0 auto; }
      .dg-badge-pill.pos-left   { transform: translate(calc(-50% - var(--dg-stage-half, 115px) - 55px), -50%) scale(.9); opacity: 0; z-index: 1; }
      .dg-badge-pill.pos-center { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 2; }
      .dg-badge-pill.pos-right  { transform: translate(calc(-50% + var(--dg-stage-half, 115px) + 55px), -50%) scale(.9); opacity: 0; z-index: 1; }
      .dg-badge-pill.no-anim { transition: none !important; }

      /* ── Sparkle trail particles (spawned by JS) ── */
      .dg-badge-spark {
        position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3;
        width: 6px; height: 6px; margin: -3px 0 0 -3px;
        background: var(--dg-spark-color, #FF8FB3);
        clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
        filter: drop-shadow(0 0 4px var(--dg-spark-color, rgba(255,143,179,.8)));
        animation: dgSparkPop var(--dg-spark-dur, .5s) ease-out forwards;
        opacity: 0;
        --dg-spark-dx: 0px; --dg-spark-dy: -16px;
      }
      .dg-badge-spark.is-dust {
        clip-path: none; border-radius: 50%;
        filter: blur(.5px) drop-shadow(0 0 4px var(--dg-spark-color, rgba(255,143,179,.7)));
      }
      @keyframes dgSparkPop {
        0%   { opacity: 0;   transform: translate(0,0) scale(.2) rotate(0deg); }
        16%  { opacity: 1;   transform: translate(calc(var(--dg-spark-dx) * .2), calc(var(--dg-spark-dy) * .2)) scale(1) rotate(35deg); }
        55%  { opacity: .85; transform: translate(calc(var(--dg-spark-dx) * .6), calc(var(--dg-spark-dy) * .6)) scale(.8) rotate(110deg); }
        100% { opacity: 0;   transform: translate(var(--dg-spark-dx), var(--dg-spark-dy)) scale(.12) rotate(170deg); }
      }

      /* ── Signature: 3 live profile cards, stacked like polaroid
           photos fanning down-right, same as the reference image ── */
      .dg-fan-wrap { position: relative; height: 560px; }

      /* Soft flat colour shapes behind the card stack — purely
         decorative, sit at z-index 0 so every .dg-p-slot (z-index 1-3)
         and the arrow/badges (z-index 5+) stay in front of them.
         Flat solid fills, no blur — matches the reference screenshot,
         which shows clean soft-edged shapes peeking from behind the
         cards rather than a glow/blur effect. */
      .dg-hero-blob {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      /* Rounded-rectangle shape peeking out near the top-left — sits
         above/left of c2 (the topmost card, top:42/left:168) and over
         c1's top edge (top:120/left:0). Runs tall enough to drop down
         past the cards' bottom edge (~630px), not just sit as a small
         blob near the top. */
      .dg-hero-blob-a {
        width: 190px;
        height: 359px;
        top: 76px;
        left: 50px;
        border-radius: 40px;
        background: #b9d8f5;
        opacity: .65;
      }
      /* Second rounded-rectangle, pink, peeking out near the top-right —
         above/behind c3 (top:236/left:232, right edge at 490). Both
         rectangles run tall enough to drop down past the cards' bottom
         edge (~630px), not just sit as a small blob near the top. */
      .dg-hero-blob-c {
        width: 216px;
        height: 433px;
        top: 107px;
        left: 260px;
        border-radius: 36px;
        background: #f7c6de;
        opacity: .65;
      }
      /* Large blue circle, centered under the stack — c1/c2/c3 bottoms
         land around y:435-630 (card height is ~394px: 300px photo +
         14px top padding + 80px caption padding), and the stack spans
         x:0-490, so this is centred horizontally under that and starts
         around the middle of the stack to peek out past the bottom. */
      .dg-hero-blob-b {
        width: 449px;
        height: 409px;
        top: 231px;
        left: 83px;
        border-radius: 50%;
        background: #b9d8f5;
        opacity: .55;
      }

      /* Dot strip under the card stack — static, decorative only
         (there's no real carousel behind these 3 cards).
         Positioned absolute + a top value below the stack's actual
         bottom edge: it's the only non-absolutely-positioned child in
         .dg-fan-wrap, so left in normal flow it would sit at the very
         top of the container (every card/blob/badge around it is
         position:absolute and contributes no flow height) — nowhere
         near where it visually needs to be. */
      .dg-hero-dots {
        position: absolute;
        z-index: 4;
        top: -26px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
      .dg-hero-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(74,25,66,.18);
      }
      /* Active indicator is a small rotated-square diamond, not a
         wider pill — matches the reference exactly. */
      .dg-hero-dot-active {
        width: 9px;
        height: 9px;
        border-radius: 2px;
        background: #ffffff00;
        transform: rotate(44deg);
        MARGIN-TOP: -18PX;
        MARGIN-LEFT: -2PX;
      }

      /* Hand-drawn curling arrow from the CTA button toward the stack.
         Positioned in the gap between the two columns, roughly level
         with the button (button sits ~â…” down the copy column, which
         lines up near the front card's caption thanks to align-items:
         center on the grid), curling up toward the front card's edge. */
      
      
      .dg-hero-arrow {
        position: absolute;
        left: -150px;
        top: 239px;
        width: 168px;
        height: 108px;
        pointer-events: none;
        z-index: 5;
      }

      /* ── .dg-p-slot: purely a positioning + floating wrapper. It
           holds the card's place in the fan (top/left) and does the
           gentle bob (transform: translateY). It has no border, no
           background, no rotate — nothing visual of its own — so
           there's nothing here to visually clash with the card inside
           it. ── */
      .dg-p-slot { position: absolute; width: 258px; }

      /* ── .dg-p-card: the actual visible card — border, shadow,
           background, base rotate, photo, caption. This is exactly
           the original, simple structure (photo and caption as direct
           children, normal padding) with nothing moved out of it.
           Because .dg-p-slot (not .dg-p-card) does the floating, this
           card's own `transform` is free to be used for the hover
           fan-out below without any conflict — and because nothing
           in here changed, the caption's positioning "just works"
           exactly like it always did, with no special-casing needed. ── */
      .dg-p-card {
        display: block;
        position: relative;
        width: 100%;
        padding: 14px 14px 80px;
        border-radius: 26px;
        text-decoration: none;
        box-shadow: 0 30px 60px -20px rgb(0 0 0 / 35%);
        transition: transform .3s cubic-bezier(.22,.61,.36,1);
      }
      .dg-p-card .dg-p-photo {
        position: relative;
        width: 100%;
        height: 300px;
        border-radius: 16px;
        overflow: hidden;
        background: #EDE3F0;
      }
      .dg-p-card .dg-p-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      .dg-p-card .dg-p-caption {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 10px;
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.25;
        height: 64px;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #000000;
      }
      .dg-p-card .dg-p-loc { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11.5px; margin-top: 3px; opacity: .8; }

      .dg-p-slot.c1 { top: 120px; left: 0;   z-index: 3; }
      .dg-p-slot.c2 { top: 42px;  left: 168px; z-index: 2; }
      .dg-p-slot.c3 { top: 236px; left: 232px; z-index: 1; }

       .dg-p-card.c1 {
        background: linear-gradient(135deg, #cfcbffab 0%, #db97e68a 55%, #9bd2f3 100%);
        transform: rotate(6deg);
        border: 3px solid white;
      }
      .dg-p-card.c1 .dg-p-caption {color: #000000;}

      .dg-p-card.c2 {
        background: #ffffff;
        transform: rotate(-9deg);
        border: 3px solid #c0c7ff;
      }
      .dg-p-card.c2 .dg-p-caption { color: #1C1420; }

      .dg-p-card.c3 {
        background: #e5e1ff;
        transform: rotate(13deg);
        border: 3px solid #c2acff;
      }
      .dg-p-card.c3 .dg-p-caption {color: #818181;}

      /* ── Gentle float — lives on .dg-p-slot, which wraps the WHOLE
           card (border, shadow, background, rotate, photo, caption —
           all of it), so the entire thing bobs together as one rigid
           piece. Because the float's transform is on .dg-p-slot and
           the hover fan-out's transform (below) is on .dg-p-card —
           two different elements — neither ever overrides the other.
           A running/paused CSS animation always wins the `transform`
           property over a plain rule on the SAME element, which is
           why the hover fan-out silently did nothing back when both
           lived on .dg-p-card together.
           Uses transform: translateY(), not margin-top — margin-top
           forces a layout recalculation on every single frame and was
           a real source of jank on slower phones; transform runs on
           the compositor thread essentially for free. ── */
      .dg-p-slot {
        animation: dgFloatY 5s ease-in-out infinite;
        will-change: transform;
      }
      .dg-p-slot.c2 { animation-duration: 6s; animation-delay: .3s; }
      .dg-p-slot.c3 { animation-duration: 7s; animation-delay: .6s; }
      @keyframes dgFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

      /* Hover fan-out lives on .dg-p-card — the visible card itself —
         so the tilt change and the outward nudge apply to the same
         thing the person is actually looking at and hovering over.
         Desktop-only (min-width:881px, same breakpoint the rest of the
         site uses): on mobile, "hover" is really a tap, and the
         outward translate pushed cards past the edge of the screen,
         creating horizontal scroll that shouldn't exist there. */
      @media (min-width: 881px) {
        .dg-fan-wrap:hover .dg-p-card.c1 { transform: rotate(4deg)   translate(-16px, -6px); }
        .dg-fan-wrap:hover .dg-p-card.c2 { transform: rotate(-11deg) translate(6px, -10px);  }
        .dg-fan-wrap:hover .dg-p-card.c3 { transform: rotate(15deg)  translate(14px, -4px);  }
        .dg-fan-wrap:hover .dg-p-slot { animation-play-state: paused; }
      }

      /* ── Below-hero sections (light, matches rest of site) ───── */
      /* ── Smart Matching — heading/copy flanked by two member photo
           cards, with a denser heart/sparkle scatter than .dg-connect
           since the promo video shows this as the busiest section. ── */
      .dg-smart-match {
        position: relative;
        overflow: hidden;
        background: #fdf7fb;
        padding: 95px clamp(24px, 6vw, 64px);
        contain: layout style paint;
      }
      .dg-sm-inner {
        position: relative;
        z-index: 1;
        max-width: 1180px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 260px 1fr 260px;
        align-items: center;
        gap: 40px;
      }
      .dg-sm-copy { text-align: center; }
      .dg-sm-copy h2 {
        font-family: 'quicksand', serif;
        font-weight: 600;
        font-size: clamp(28px, 3.2vw, 36px);
        color: #4A1942;
        margin: 0 0 36px;
      }
      .dg-sm-copy h3 {
        font-family: 'quicksand', serif;
        font-weight: 700;
        font-size: 18px;
        color: #4A1942;
        margin: 22px 0 10px;
      }
      .dg-sm-copy p {
        font-size: 15px;
        line-height: 1.65;
        color: rgba(43,27,40,.68);
        margin: 0 auto;
        max-width: 420px;
      }
      .dg-sm-copy .dg-btn-primary {display: inline-block;margin-top: 36px;}

      .dg-sm-card { position: relative; }
      /* Colour clone peeking out from behind the card — rotated more
         than the card's own 4deg tilt (10deg here), so all four
         corners poke out around the card instead of hiding behind it.
         Same blue-to-pink gradient on both sides. */
      .dg-sm-card::before {
        content: '';
        position: absolute;
        inset: 0;
        HEIGHT: 102%;
        WIDTH: 102%;
        TOP: -12PX;
        LEFT: -7PX;
        border-radius: 20px;
        z-index: -1;
        background: linear-gradient(135deg, #b9d8f5, #f7c6de);
      }
      .dg-sm-card-left::before  {transform: translate(6px, 8px) rotate(-358deg);}
      .dg-sm-card-right::before { transform: translate(-6px, 8px) rotate(10deg); }
      .dg-sm-photo-link { display: block; text-decoration: none; }
      .dg-sm-photo {
        position: relative;
        width: 100%;
        height: 300px;
        border-radius: 20px;
        overflow: hidden;
        background: #EDE3F0;
        border: 3px solid #fff;
        box-shadow: 0 20px 40px -16px rgba(74,25,66,.35);
      }
      .dg-sm-card-left .dg-sm-photo { transform: rotate(-4deg); }
      .dg-sm-card-right .dg-sm-photo {transform: rotate(13deg);}
      .dg-sm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
      /* Soft dark scrim behind the caption so white text stays legible
         over any photo, same treatment as the hero cards' captions. */
      .dg-sm-photo::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 45%;
        background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
        pointer-events: none;
      }
      /* Caption now lives inside the photo (was a separate element
         below it) — sits over the scrim like the hero cards' captions.
         Quicksand, same as the rest of the site's profile/detail text. */
      .dg-sm-caption {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 14px;
        z-index: 1;
        text-align: left;
        font-family: 'quicksand', serif;
        font-weight: 700;
        font-size: 15px;
        color: #fff;
      }
      .dg-sm-loc {
        font-family: 'quicksand', serif;
        font-weight: 500;
        font-size: 11.5px;
        color: rgba(255,255,255,.85);
        margin-top: 2px;
      }

      /* Floating hearts/sparkles — gentle bob + wobble, each item's
         own tilt preserved via --r (the float keyframes rotate
         relative to that, rather than a plain static transform, since
         a running animation always overrides a plain `transform`
         declared on the same element). Also now interactive: hover on
         desktop / tap on mobile fires a burst (see the script block
         near the end of the page) — pointer-events was 'none' before
         since these were purely decorative, now needs to be 'auto'. */
      .dg-sm-deco {
        position: absolute;
        z-index: 10;
        pointer-events: auto;
        cursor: pointer;
        animation: dgDecoFloat 4.5s ease-in-out infinite;
        will-change: transform;
      }
      .dg-sm-deco-1 {top: 7%;left: 68%;font-size: 40px;color: #ff8fc0;opacity: .65;--r: -10deg;animation-duration: 4.2s;}
      .dg-sm-deco-2 {top: 61%;left: 31%;font-size: 26px;color: #b79bff;opacity: .55;--r: 12deg;animation-duration: 5.1s;animation-delay: .3s;}
      .dg-sm-deco-3 { bottom: 4%; left: 19%; font-size: 30px; color: #ff8fc0; opacity: .5;  --r: 6deg;   animation-duration: 4.8s; animation-delay: .6s; }
      .dg-sm-deco-4 {top: 10%;right: 84%;font-size: 36px;color: #b79bff;opacity: .6;--r: 8deg;animation-duration: 4.4s;animation-delay: .9s;}
      .dg-sm-deco-5 {top: 45%;right: 35%;font-size: 24px;color: #ff8fc0;opacity: .55;--r: -14deg;animation-duration: 5.4s;animation-delay: .2s;}
      .dg-sm-deco-6 {bottom: 8%;right: 15%;font-size: 32px;color: #b79bff;opacity: .5;--r: -6deg;animation-duration: 4.6s;animation-delay: .5s;}
      .dg-sm-deco-7 { top: 18%;  left: 34%;  font-size: 16px; color: #ffd66b; opacity: .7;  animation-duration: 3.8s; animation-delay: .15s; }
      .dg-sm-deco-8 { top: 68%;  left: 40%;  font-size: 14px; color: #ffd66b; opacity: .6;  animation-duration: 4.1s; animation-delay: .45s; }
      .dg-sm-deco-9 {top: 14%;right: 12%;font-size: 18px;color: #ffd66b;opacity: .65;animation-duration: 3.6s;animation-delay: .75s;}
      @keyframes dgDecoFloat {
        0%, 100% { transform: translateY(0)    rotate(var(--r, 0deg)); }
        50%      { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 6deg)); }
      }

      /* Respect the OS-level "reduce motion" setting — free perf win, and a
         chunk of budget Android phones ship with it on by default. */
      @media (prefers-reduced-motion: reduce) {
        .dg-hero-deco, .dg-connect-deco, .dg-sm-deco, .dg-p-slot {
          animation: none !important;
        }
      }
      /* Hard kill-switch added by JS on genuinely low-spec devices —
         same idea as main.php's .ds-lite, mirrored here under its own
         class so the two pages don't have to share a stylesheet. */
      html.dg-lite .dg-hero-deco,
      html.dg-lite .dg-connect-deco,
      html.dg-lite .dg-sm-deco,
      html.dg-lite .dg-p-slot {
        animation: none !important;
      }
      /* Firefox-only: same class of judder as main.php's floating cards
         can show up here too on weaker Firefox installs — rather than
         chase it section by section, these just stop bobbing there.
         Everything still reads fine sitting still. */
      html.is-firefox .dg-hero-deco,
      html.is-firefox .dg-connect-deco,
      html.is-firefox .dg-sm-deco,
      html.is-firefox .dg-p-slot {
        animation: none !important;
      }

      .dg-connect {background: linear-gradient(180deg, #ffffff 0%, #e5e0ff8a 55%, #fdf7fb 100%);padding: 50px clamp(24px, 6vw, 64px);position: relative;overflow: hidden;contain: layout style paint;}
      .dg-connect-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
      /* Floating hearts/sparkles behind the heading and cards — kept
         soft (low opacity, pastel colours) and out of the way of the
         actual card content, so they read as ambience, not clutter. */
      .dg-connect-deco {
        position: absolute;
        z-index: 10;
        pointer-events: auto;
        cursor: pointer;
        animation: dgDecoFloat 4.5s ease-in-out infinite;
        will-change: transform;
      }
      .dg-connect-deco-1 { top: 8%;  left: 6%;  font-size: 30px; color: #ffb8d6; opacity: .55; --r: -12deg; animation-duration: 4.3s; }
      .dg-connect-deco-2 { top: 62%; left: 3%;  font-size: 22px; color: #c8b6ff; opacity: .5;  --r: 8deg;   animation-duration: 5.2s; animation-delay: .35s; }
      .dg-connect-deco-3 { top: 12%; right: 7%; font-size: 20px; color: #ffd66b; opacity: .6;  --r: 15deg;  animation-duration: 3.9s; animation-delay: .6s; }
      .dg-connect-deco-4 {top: 28%;right: 17%;font-size: 26px;color: #ffb8d6;opacity: .5;--r: -8deg;animation-duration: 4.7s;animation-delay: .2s;}
      .dg-connect-deco-5 { top: 40%; left: 46%; font-size: 16px; color: #ffd66b; opacity: .5;  --r: -20deg; animation-duration: 4.0s; animation-delay: .5s; }
      .dg-section-head { text-align: center; max-width: 560px; margin: 0 auto 60px; }
      .dg-section-head .eyebrow-line { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B5185A; margin-bottom: 14px; }
      .dg-section-head h2 { font-family: 'quicksand', serif; font-weight: 600; font-size: clamp(28px, 3.4vw, 38px); color: #4A1942; line-height: 1.2; }
      .dg-connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
      .dg-connect-card { background: #fff; border: 1px solid rgba(74,25,66,.1); border-radius: 20px; padding: 36px 30px; }
      .dg-connect-card .dg-icn {width: 140px;height: 140px;margin: auto;margin-bottom: 33px;}
      .dg-connect-card .dg-icn img { width: 100%; height: 100%; object-fit: contain; display: block; }
      .dg-connect-card h3 {font-size: 18px;font-weight: 700;color: #4A1942;margin: 0 0 18px 0;text-align: center;}
      .dg-connect-card p { font-size: 14.5px; line-height: 1.6; color: rgba(43,27,40,.65); margin: 0; }

      .dg-final-cta {
        margin: 0 clamp(20px, 5vw, 64px) 80px;
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
        background: linear-gradient(120deg, #5b4fe863 0%, #c13fd64a 55%, #ffb5d291 100%);
        border-radius: 28px;
        padding: 60px clamp(28px, 6vw, 80px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        flex-wrap: wrap;
      }
      .dg-final-cta h2 { font-family: 'Fraunces', serif; font-weight: 600; color: #fff; font-size: clamp(24px, 3vw, 32px); line-height: 1.3; max-width: 480px; margin: 0; }
      .dg-final-cta .dg-btn-primary { background: #fff; color: #B5185A; box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); }
      .dg-final-cta .dg-btn-primary:hover,
      .dg-final-cta .dg-btn-primary:focus,
      .dg-final-cta .dg-btn-primary:active,
      .dg-final-cta .dg-btn-primary:visited {
        color: #B5185A !important;
      }

       /* ── Mobile-only logo above the card fan ─────────────────── */
      .dg-mobile-logo { display: none; }
      .dg-mobile-subheader { display: none; }

      @media (max-width: 880px) {
        .dg-hero { padding-bottom: 64px; }
        .dg-hero-inner { grid-template-columns: 1fr; gap: 8px; }
        .dg-mobile-logo {
          display: flex;
          justify-content: center;
          align-items: center;
          order: -2;
          margin: 0px;
        }
        .dg-mobile-logo a {
          display: inline-flex; align-items: center; justify-content: center;
        }
        .dg-mobile-logo img { max-height: 56px; width: auto; display: block; }

        /* ── "Mature Dating" underheader — sits right below the logo ─
             Same order (-2) as .dg-mobile-logo; since it comes after
             it in the markup, equal order values fall back to source
             order, so it renders logo → this → card fan → headline. */
        .dg-mobile-subheader {
          display: flex;
          justify-content: center;
          order: -2;
          margin: 0 0 66px;
          min-height: 24px;
          position: relative; /* anchors the burst hearts to the word's centre */
        }
        .dg-sub-fx {
          display: inline-flex;
          align-items: center;
          font-family: 'Fraunces', serif;
          font-weight: 600;
          font-size: 15px;
          letter-spacing: 4px;
          text-transform: uppercase;
          color: #B5185A;
        }
        .dg-sub-letter {
          display: inline-block;
          position: relative;
          transform-origin: 50% 70%;
          will-change: transform, opacity;
        }
        /* Gap between "MATURE" and "DATING" — no extra DOM node, so
           every letter across both words stays simply numbered 0-11
           via --i, and every effect's stagger below still just works. */
        .dg-sub-letter.dg-sub-space { margin-right: 7px; }
        .dg-sub-cursor {
          display: inline-block;
          width: 2px;
          height: 13px;
          margin-left: 4px;
          background: currentColor;
          opacity: 0;
        }

        /* Typewriter — letters are hidden until JS flips them to
           .is-revealed one at a time; cursor only blinks meanwhile. */
        .dg-sub-fx.fx-typewriter .dg-sub-letter { opacity: 0; }
        .dg-sub-fx.fx-typewriter .dg-sub-letter.is-revealed {
          opacity: 1;
          animation: dgTypeIn .15s steps(1) both;
        }
        .dg-sub-fx.fx-typewriter .dg-sub-cursor {
          opacity: 1;
          animation: dgCursorBlink .8s steps(1) infinite;
        }
        @keyframes dgTypeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes dgCursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

        /* Every remaining per-letter effect staggers off the same
           --i custom property set inline on each letter in dating.php
           (0-11 for "MATUREDATING") — one rule handles any word
           length instead of a fixed nth-child list per effect. */

        /* Wave — continuous up/down ripple across the letters. */
        .dg-sub-fx.fx-wave .dg-sub-letter {
          animation: dgLetterWave 1.1s ease-in-out infinite;
          animation-delay: calc(var(--i, 0) * 0.055s);
        }
        @keyframes dgLetterWave {
          0%, 100% { transform: translateY(0); }
          50%      { transform: translateY(-7px); }
        }

        /* Bounce — each letter hops in turn. */
        .dg-sub-fx.fx-bounce .dg-sub-letter {
          animation: dgLetterBounce .6s ease-out;
          animation-delay: calc(var(--i, 0) * 0.045s);
        }
        @keyframes dgLetterBounce {
          0%, 100% { transform: translateY(0); }
          40%      { transform: translateY(-11px); }
          65%      { transform: translateY(0); }
          80%      { transform: translateY(-4px); }
        }

        /* Pop — each letter punches in with a quick overshoot scale. */
        .dg-sub-fx.fx-pop .dg-sub-letter {
          animation: dgLetterPop .5s cubic-bezier(.34,1.56,.64,1);
          animation-delay: calc(var(--i, 0) * 0.035s);
        }
        @keyframes dgLetterPop {
          0%   { transform: scale(.3); }
          60%  { transform: scale(1.3); }
          100% { transform: scale(1); }
        }

        /* Flip — each letter does a quick card-flip on its own beat. */
        .dg-sub-fx.fx-flip .dg-sub-letter {
          animation: dgLetterFlip .6s ease-in-out;
          animation-delay: calc(var(--i, 0) * 0.045s);
        }
        @keyframes dgLetterFlip {
          0%   { transform: perspective(300px) rotateX(0deg); }
          50%  { transform: perspective(300px) rotateX(100deg); }
          100% { transform: perspective(300px) rotateX(0deg); }
        }

        /* Shake — the whole word rattles once. */
        .dg-sub-fx.fx-shake { animation: dgWordShake .6s ease-in-out; }
        @keyframes dgWordShake {
          0%, 100% { transform: translateX(0); }
          15%      { transform: translateX(-5px); }
          30%      { transform: translateX(5px); }
          45%      { transform: translateX(-5px); }
          60%      { transform: translateX(5px); }
          75%      { transform: translateX(-2px); }
          90%      { transform: translateX(2px); }
        }

        /* Elastic — the whole word squashes/stretches back to shape. */
        .dg-sub-fx.fx-elastic { animation: dgWordElastic .6s ease-out; }
        @keyframes dgWordElastic {
          0%   { transform: scale(1.3, .7); }
          35%  { transform: scale(.8, 1.2); }
          60%  { transform: scale(1.08, .94); }
          80%  { transform: scale(.96, 1.03); }
          100% { transform: scale(1, 1); }
        }

        /* Glow — letters pulse from pink to white and back with a
           soft white glow (no hue-rotate here — rotating pink's hue
           lands on green at the midpoint, which isn't the look).
           Uses text-shadow rather than filter: drop-shadow() — filter
           is one of the more expensive properties for mobile GPUs to
           animate (often falls back to software rendering), while
           text-shadow on a dozen small letters is cheap. */
        .dg-sub-fx.fx-glow .dg-sub-letter {
          animation: dgLetterGlow 1.1s ease-in-out infinite;
          animation-delay: calc(var(--i, 0) * 0.035s);
        }
        @keyframes dgLetterGlow {
          0%, 100% { color: #B5185A; text-shadow: 0 0 2px rgba(181,24,90,.3); }
          50%      { color: #ffffff; text-shadow: 0 0 9px rgba(255,255,255,.95); }
        }

        /* Burst — a small, sparse handful of hearts pop out from the
           centre of the word and fly outward, fading as they go. The
           word itself gets one quick pulse as the "bang"; the hearts
           are appended/removed by JS, each carrying its own flight
           distance/angle via --dg-burst-dx/dy/rot so no two bursts
           look identical. */
        .dg-sub-fx.fx-burst { animation: dgBurstPulse .35s ease-out; }
        @keyframes dgBurstPulse {
          0%   { transform: scale(1); }
          45%  { transform: scale(1.16); }
          100% { transform: scale(1); }
        }
        .dg-burst-particle {
          position: absolute;
          left: 50%;
          top: 50%;
          color: #E23B7D;
          pointer-events: none;
          transform: translate(-50%, -50%) scale(.5);
          opacity: 1;
          animation: dgBurstFly .8s ease-out forwards;
        }
        @keyframes dgBurstFly {
          0%   { transform: translate(-50%, -50%) scale(.4) rotate(0deg); opacity: 1; }
          35%  { opacity: 1; }
          100% {
            transform: translate(calc(-50% + var(--dg-burst-dx, 0px)), calc(-50% + var(--dg-burst-dy, 0px)))
                       scale(.9) rotate(var(--dg-burst-rot, 0deg));
            opacity: 0;
          }
        }

        .dg-hero-copy { text-align: center; }
        .dg-hero-copy .dg-pretitle { margin-top: 6px; }
        .dg-hero-copy p.lede { margin-left: auto; margin-right: auto; }
        .dg-hero-ctas { justify-content: center; }
        .dg-hero-stats { justify-content: center; }
        .dg-hero-stats .dg-stat { text-align: left; }

        /* Arrow doesn't translate to a centred/stacked mobile layout —
           it's a desktop-only flourish pointing across two columns
           that no longer exist side-by-side. */
        .dg-hero-arrow { display: none; }

        /* Extra clearance below the card stack — the bottom badge
           pokes out past the fan-wrap's own box (see dg-badge-stage-2
           below), so the gap before the headline needs to account for
           that overhang, not just the fan-wrap's own height. */
        .dg-fan-wrap { height: 300px; width: 254px; margin: 0 auto 52px; order: -1; }
        .dg-hero-blob-a {width: 206px;height: 290px;top: -8px;left: 18px;border-radius: 24px;}
        .dg-hero-blob-c {width: 146px;height: 277px;top: 98px;left: 186px;border-radius: 20px;}
        .dg-hero-blob-b {width: 271px;height: 277px;top: 143px;left: 30px;}
        .dg-hero-dots {top: -27px;}
        .dg-p-slot { width: 148px; }
        .dg-p-card { padding: 8px 8px 34px; border-radius: 18px; }
        .dg-p-card .dg-p-photo { height: 172px; border-radius: 12px; }
        .dg-p-card .dg-p-caption {font-size: 12.5px;left: 14px;right: 14px;bottom: 10px;color: #000000;}
        .dg-p-card .dg-p-loc { font-size: 10px; }
        .dg-p-slot.c1 { top: 0;   left: 0px; }
        .dg-p-slot.c2 { top: 42px; left: 72px; }
        .dg-p-slot.c3 { top: 84px; left: 106px; }
        .dg-p-card.c1 { transform: rotate(6deg); }
        .dg-p-card.c2 { transform: rotate(-9deg); }
        .dg-p-card.c3 { transform: rotate(13deg); }
        .dg-p-card.c1,
        .dg-p-card.c2,
        .dg-p-card.c3 { padding: 8px 8px 60px; }
        /* Smaller float amplitude on mobile — same technique as before:
           redefining the keyframes by name inside this media query
           overrides the base definition only while it matches. */
        @keyframes dgFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

        .dg-sm-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
        .dg-sm-card { width: 100%; max-width: 280px; }
        .dg-sm-card-right { order: 3; }
        .dg-sm-copy {order: 2;MARGIN-TOP: 40PX;MARGIN-BOTTOM: 60PX;}
        .dg-sm-deco-2, .dg-sm-deco-5, .dg-sm-deco-8, .dg-sm-deco-9 {/* display: none; */margin-left: -19%;margin-top: 10%;}
        .dg-sm-deco-1, .dg-sm-deco-3, .dg-sm-deco-4, .dg-sm-deco-6, .dg-sm-deco-7 {font-size: 22px;opacity: .4;margin-top: -20%;z-index: 1;}

        .dg-connect-grid { grid-template-columns: 1fr; }
        /* Fewer, smaller decorations on narrow screens — the section
           is a single column here, so there's less open space for
           them to float in without crowding the cards. */
        .dg-connect-deco-2, .dg-connect-deco-5 { display: none; }
        .dg-connect-deco-1, .dg-connect-deco-3, .dg-connect-deco-4 {font-size: 18px;opacity: .4;z-index: 1;}

        /* Same idea for the hero -- mobile already has the card fan,
           blobs and arrow all sharing this space, so fewer/smaller
           decorations here too rather than adding to the clutter. */
        .dg-hero-deco-2, .dg-hero-deco-4 {/* display: none; */}
        .dg-hero-deco-1, .dg-hero-deco-3, .dg-hero-deco-5 {font-size: 23px;opacity: .4;}

        /* All remaining hearts/stars across the three sections stay put
           on mobile rather than bobbing -- this page runs the card fan's
           float plus up to 11 of these concurrently, which is a lot to
           composite every frame on a weak phone GPU. Still reads fine
           sitting still. */
        .dg-hero-deco, .dg-connect-deco, .dg-sm-deco { animation: none; }

        /* Badges keep the same zip / particle-trail carousel on mobile —
           just scaled down to fit the smaller card fan. */
        .dg-badge-stage { width: 168px; height: 38px; }
        .dg-badge-stage-1 { top: -4px; left: 30px; }
        .dg-badge-stage-2 { bottom: -22px; right: 24px; }
        .dg-badge-pill { padding: 9px 14px; font-size: 11px; gap: 6px; }
      }

      /* ── Small phones: the fixed 254px card fan above starts looking
           tiny/cramped once the viewport itself is this narrow — scale
           the whole stack up to ~90% of the screen instead. Every card/
           badge position below is expressed as a % of .dg-fan-wrap
           (all are position:absolute children of it), and the photo
           uses aspect-ratio instead of a fixed height, so the entire
           cluster scales together as one unit rather than needing a
           re-tuned set of fixed px values at every width. ── */
      @media (max-width: 470px) {
        .dg-fan-wrap {
          width: 90vw;
          max-width: 380px;
          height: auto;
          aspect-ratio: 254 / 300;
          margin: 0 auto 15vw;
        }
        
        .dg-final-cta{
        border-radius:0;    
        }
        
        
        .dg-p-slot { width: 58.3%; }
        .dg-p-card {
          border-radius: clamp(12px, 4vw, 20px);
        }
        /* Same padding the desktop/tablet version uses, just
           re-expressed as a percentage: .dg-p-card's containing block
           here is .dg-p-slot (58.3% of .dg-fan-wrap's width, since
           .dg-p-card is a normal-flow child of it), not .dg-fan-wrap
           directly — so a plain 5.4%/23% would land at 58.3% of the
           intended size. Scaling by 1/0.583 lands on the exact same
           rendered pixels at every viewport width. */
        .dg-p-card { padding: 9.26% 9.26% 39.45%; }
        .dg-p-card .dg-p-photo { height: auto; aspect-ratio: .767; border-radius: clamp(8px, 3vw, 14px); }
        .dg-p-card .dg-p-caption {font-size: clamp(8px, 3vw, 10px);left: 9%;right: 9%;bottom: -3%;color: #000000;}
        .dg-p-card .dg-p-loc { font-size: clamp(9px, 2.4vw, 11px); }
        .dg-p-slot.c1 { top: 0%;  left: 0%; }
        .dg-p-slot.c2 { top: 14%; }
        .dg-p-slot.c3 { top: 28%; left: 34.7%; }

        .dg-badge-stage { width: 44vw; max-width: 168px; height: clamp(30px, 9vw, 38px); }
        .dg-badge-stage-1 {top: -11.3%;left: 1.8%;}
        .dg-badge-stage-2 { bottom: -7.3%; right: 9.4%; }
        .dg-badge-pill { padding: 2.4vw 3.6vw; font-size: clamp(10px, 2.9vw, 12px); }
      }