/* Compact spacing: tightens the vertical gaps across the page. Loaded last so it overrides the older spacing. */

/* ---------- Desktop / shared ---------- */
.reference-replica .r-section{padding:44px 0}
.reference-replica h2{margin-bottom:28px}
.reference-replica main p{margin-bottom:16px}
.reference-replica .r-hero{padding:32px 0 40px}
.reference-replica .r-hero-sub{margin-bottom:18px}
.reference-replica .r-cta{margin-top:26px}
.reference-replica .r-hero .r-cta{margin-top:22px}
.reference-replica .r-cta p{margin:10px 0 4px}
.reference-replica .r-review-caption{margin-bottom:16px}
.reference-replica .r-bonus-badge{margin-bottom:18px}
.reference-replica .r-section .r-container>img{margin-top:16px!important;margin-bottom:16px!important}
.reference-replica .r-checkout{margin-top:30px}

/* Community story + photo gallery */
.reference-replica .df-community-story{padding-bottom:40px}
.reference-replica .df-story-inner{margin-top:32px}
.reference-replica .df-story-heading h2{margin-bottom:28px}
.reference-replica .df-story-heading>p{margin-bottom:12px}
.reference-replica .df-story-byline{margin-bottom:20px}
.reference-replica .df-story-highlights{margin-top:36px}
.reference-replica .df-story-highlights h3{margin-bottom:22px}
.reference-replica .df-story-cta{margin-top:28px}

/* Client reviews */
.reference-replica .df-google-reviews{padding:44px 0 24px}
.reference-replica .df-google-heading{padding-bottom:24px}
.reference-replica .df-google-heading h2{margin:6px 0 16px}
.reference-replica .df-google-heading>p{margin-top:12px}

/* Closing call-to-action */
.df-final{padding:40px 16px 36px}
.df-final h2{margin:14px 0 8px}
.df-final-ticks{margin:16px 0 14px}
.df-final-cta{margin-top:16px}
.df-final-fine{margin-top:14px}

/* ---------- Phones ---------- */
@media(max-width:767px){
  .reference-replica .r-section{padding:32px 0}
  .reference-replica h2{margin-bottom:18px}
  .reference-replica main p{margin-bottom:12px}
  .reference-replica .r-hero{padding:16px 0 28px}
  .reference-replica .r-hero .r-cta{margin-top:16px}
  .reference-replica .r-cta{margin-top:18px}
  .reference-replica .r-review-caption{margin-bottom:12px}
  .reference-replica .r-bonus-badge{margin-bottom:12px}
  .reference-replica .r-section .r-container>img{margin-top:10px!important;margin-bottom:10px!important}
  .reference-replica .r-checkout{margin-top:20px}

  .reference-replica .df-community-story{padding-bottom:28px}
  .reference-replica .df-story-inner{margin-top:20px}
  .reference-replica .df-story-heading h2{margin-bottom:18px}
  .reference-replica .df-story-highlights{margin-top:24px}
  .reference-replica .df-story-cta{margin-top:20px}

  .reference-replica .df-google-reviews{padding-top:30px}
  .reference-replica .df-google-heading{padding-bottom:16px}
  .reference-replica .df-google-heading h2{margin:4px 0 12px}

  .df-final{padding:30px 16px 28px}
}

/* ---------- Space above and below individual items ---------- */
/* Hero: headline to subline, and between the subline's two lines */
.reference-replica #hero h1{margin-bottom:12px}
.reference-replica #hero .r-hero-sub{line-height:1.4}
.reference-replica #hero .r-media-stage{margin-bottom:14px}

/* Body copy: shorter gaps between paragraphs and slightly tighter lines */
.reference-replica main p{line-height:1.5}
.reference-replica .df-story-letter{line-height:1.5}
.reference-replica .df-story-letter p{line-height:1.5;margin-bottom:12px}
.reference-replica .df-story-letter .df-story-emphasis{margin-top:4px}
.reference-replica .df-story-doctor{margin-bottom:10px}

/* "Five questions" list */
.reference-replica .df-story-highlights ul{row-gap:12px}
.reference-replica .df-story-highlights li{line-height:1.3}
.reference-replica .df-story-highlights strong{line-height:1.25}
.reference-replica .df-story-highlights span{margin-top:2px;line-height:1.4}

@media(max-width:767px){
  .reference-replica #hero h1{margin-bottom:8px}
  .reference-replica .df-story-letter p{margin-bottom:8px}
  .reference-replica .df-story-byline{margin-bottom:12px}
  .reference-replica .df-story-highlights ul{row-gap:12px}
  .reference-replica .df-story-highlights h3{margin-bottom:14px}
  .reference-replica .r-copy p,.reference-replica .r-section p{margin-bottom:10px}
}

/* ---------- Heading rhythm: the same gaps around every section heading ----------
   eyebrow ─(--gap-eyebrow)─ HEADING ─(--gap-intro)─ intro line ─(--gap-content)─ content
   HEADING ─(--gap-content)─ content, when there is no intro line                        */
.reference-replica{--gap-eyebrow:14px;--gap-intro:14px;--gap-content:32px}
@media(max-width:767px){.reference-replica{--gap-eyebrow:10px;--gap-intro:10px;--gap-content:20px}}

.reference-replica main section h2{margin-top:0;margin-bottom:var(--gap-content)}

/* Eyebrows sitting above a heading */
.reference-replica .r-review-caption,
.reference-replica .df-story-heading>p,
.reference-replica .r-bonus-badge{margin-bottom:var(--gap-eyebrow)}
.reference-replica .r-bonus-badge{margin-bottom:calc(var(--gap-eyebrow) + 6px)} /* tilted badge needs a little extra */

/* Intro lines directly under a heading: pulled up to the intro gap, then the content gap below */
.reference-replica main section h2 + p.r-center,
.reference-replica main section h2 + p.r-placeholder-label,
.reference-replica #credentials .df-press-kicker{margin-top:calc(var(--gap-intro) - var(--gap-content));margin-bottom:var(--gap-content)}
.reference-replica #credentials h2 + .df-press{margin-top:0}

/* Content that had its own extra space above it */
.reference-replica main section h2 + .r-media,
.reference-replica main section h2 + .r-endorsement-grid,
.reference-replica main section h2 + .r-copy,
.reference-replica main section h2 + .df-published-stories,
.reference-replica main section h2 + .df-gallery-stories{margin-top:0}

/* Client reviews: rating line is the intro */
.reference-replica .df-google-heading h2{margin:6px 0 var(--gap-intro)}

/* Closing section keeps its own tighter heading spacing */
.reference-replica .df-final h2{margin:14px 0 10px}
#more-stories .df-gallery-intro{margin:calc(var(--gap-intro) - var(--gap-content)) auto var(--gap-content)}
.reference-replica #community-testimonials .r-placeholder-label{margin-top:calc(var(--gap-intro) - var(--gap-content));margin-bottom:var(--gap-content)}
.reference-replica #community-testimonials h2{margin-bottom:var(--gap-content)}
.reference-replica #review-space .df-published-stories{margin-top:0}

/* Logo badges: show the whole wings mark instead of a cropped close-up */
.df-logo img,
.reference-replica #quiz .df-logo img,
.r-top .df-logo img{width:100%;height:100%;max-width:100%;object-fit:contain;padding:3px;box-sizing:border-box}

/* Buttons: always one line */
.reference-replica .r-button,.reference-replica .df-final-cta,.reference-replica #quiz .primary{white-space:nowrap}
@media(max-width:420px){.reference-replica #inline-contact .r-button{font-size:clamp(24px,8.4vw,36px);padding-left:10px;padding-right:10px}}
/* Result screen button: one line on phones */
@media(max-width:480px){.reference-replica #quiz .result-simple #quiz-next{font-size:clamp(20px,6.6vw,30px);padding-left:12px;padding-right:12px}}
.reference-replica #quiz[data-language="ta"] .result-simple #quiz-next{font-size:clamp(15px,4.6vw,22px)}
/* Hero rating pill: slimmer on phones */
@media(max-width:767px){
  .reference-replica #hero .df-rating-pill{min-height:0;padding:3px 10px 3px 3px}
  .reference-replica #hero .df-rating-pill b{padding:4px 8px}
  .reference-replica #hero .df-rating-pill .df-laurel{height:15px;width:auto}
}

/* "Takes less than a minute · Available in தமிழ்" stays on one line on phones */
@media(max-width:600px){.reference-replica #hero .r-cta>p{white-space:nowrap;font-size:clamp(10px,3.2vw,13px);letter-spacing:.2px}.reference-replica .r-sticky>div{white-space:nowrap;font-size:clamp(9px,2.8vw,11px)!important}}