/*
 * AGGRESSIVE BUNDLE-VARIABLE OVERRIDE (appended 2026-04-20)
 * ---------------------------------------------------------
 * The bundled Next.js CSS declares a 40-variable :root palette full of
 * the OLD brand's colors (--amaranth pink-red, --emerald green, --magic-mint,
 * --blue-lagoon teal, --prim4 blue, --fair-pink peach, and critically
 * --gradient-pink-orange which is the hot-pink→coral sweep users still
 * see on buttons and banners). Our override is loaded AFTER the bundle,
 * so our :root wins — but only for the variables WE redefine. Every
 * variable we don't redefine leaks through. So here we redefine the
 * full set, collapsing every saturated color to crimson-or-neutral.
 *
 * Effect: kills the visible gradient, kills the mint/teal/blue accents,
 * kills the peach section backgrounds. Two colors left on the page:
 * crimson (#B32338) as the sole accent, neutral grays for everything else.
 */
:root {
  /* THE gradient — kill the coral sweep by making both stops crimson */
  --gradient-pink-orange: linear-gradient(90deg, #B32338, #961F30) !important;

  /* Every saturated color → crimson family */
  --amaranth: #B32338 !important;
  --burgundy: #961F30 !important;
  --puce-red: #6E2430 !important;
  --red-dirt: #B32338 !important;
  --medium-vermilion: #B32338 !important;
  --prim4: #B32338 !important;

  /* Every other accent → neutral gray */
  --emerald: #6B7280 !important;
  --cadmium-green: #6B7280 !important;
  --magic-mint: #FAFAFA !important;     /* was gray #F3F4F6; made it match the
                                           site-wide neutral so the template
                                           carousel stops looking like a gray
                                           stripe between the hero and body. */
  --blue-lagoon: #6B7280 !important;
  --poseidon: #374151 !important;

  /* Colored section tints → near-white */
  --butter-milk: #FFFFFF !important;
  --fair-pink: #FDF3F3 !important;
  --pipin: #FDF3F3 !important;
  --misty-rose: #FDF3F3 !important;
  --chablis: #FDF3F3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GRADIENT + DECORATION KILL — Kalphq-style minimalism
   ═══════════════════════════════════════════════════════════════════════
   Kalphq has zero decorative gradients. No blobs, no aurora, no pink/blue
   washes. Rules below remove every gradient source we've audited:
     - Bundle CSS:                linear-gradient(90deg,#ec008c,#fc6767)
     - Styled-components runtime: 135deg aurora wash, carousel fades
     - Inline [style=] gradients
*/

/* 1. Hide Aurora decoration entirely. The four .one/.two/.three/.four
      blobs inside sc-554ff107-* inject the 135° pink→blue wash the
      user sees on the landing page. We don't want it — hide the outer
      wrapper so nothing renders. */
[class*="Aurora" i],
[class*="sc-554ff107" i] {
  display: none !important;
}

/* 2. Kill ALL gradients on any class matching known decoration patterns.
      Also catches inline [style="background:linear-gradient(...)"]. */
[class*="GradientBg" i],
[class*="gradient-bg" i],
[class*="gradient" i],
[class*="Blob" i],
[class*="Ribbon" i],
[class*="Shine" i],
[class*="Sparkle" i],
[class*="Halo" i],
[class*="Glow" i],
[class*="Wash" i],
[style*="linear-gradient"],
[style*="radial-gradient"],
[style*="conic-gradient"] {
  background-image: none !important;
  background: #FFFFFF !important;
}

/* 3. Template-carousel edge fades (bundle uses `to bottom, white,
      transparent` + `to top, white, transparent`). These are decorative
      only; remove them so the carousel sits on a flat white. */
[class*="TemplateCarousel" i] [class*="Fade" i],
[class*="Carousel" i] [class*="Fade" i],
[class*="fade-mask" i] {
  background: transparent !important;
  background-image: none !important;
}

/* 4. Navbar: REMOVE the bottom line + any shadow. Kalphq navs have no
      divider unless there's scroll; we keep it fully flat. */
header[class*="Navbar" i],
[class*="Navbar__Wrapper" i],
[class*="Navbar__InnerWrapper" i] {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: #FFFFFF !important;
}

/* 5. Targeted background-image kill — ONLY on elements that the bundle
      decorates with known-offensive gradients. Narrowed from the earlier
      blanket rule (which was killing the tasteful hero wash we actually
      want). Specific class-matched elements that need flattening: */
[class*="styles__HeroCounter" i],
[class*="Features__Card-sc-92540688"],
[class*="Tutorial__TutorialImage"],
[class*="Review__ReviewContainer"] {
  /* These use the old multi-color washes — flatten but don't white them
     out, keep their surface tone. */
  background-image: none !important;
}

/* 6. Section backgrounds that were peach/pink (--fair-pink, --misty-rose,
      --chablis) should read as neutral white — the :root remap already
      maps the tokens to #FDF3F3, and we only want that WhatsApp-card soft
      tint on one surface (section 9 rules in this file). Everywhere else
      the bundle applied a tint, flatten to white. */
section[style*="background-color: rgb(255"],
section[style*="background-color:#ff"],
section[style*="background:#ff"],
div[style*="background-color:#ff"] {
  background: #FFFFFF !important;
}

/* Specific class patterns that typically host the gradient button/banner.
   Force solid crimson. */
[class*="main-hero-btn" i],
[class*="MainButton" i],
[class*="primary-btn" i],
button[class*="primary" i],
a[class*="cta" i],
[class*="CtaButton" i] {
  background-image: none !important;
  background: #B32338 !important;
  color: #FFFFFF !important;
  border-color: #B32338 !important;
}

/* Accordion "open" / tag bits that were mint or blue → neutral */
[class*="NewTag" i],
[class*="Tag" i][class*="mint" i],
[class*="Status" i][class*="ok" i],
[class*="openedItem" i] {
  background-color: #F3F4F6 !important;
  color: #111827 !important;
}

/*
 * Biodatamakers brand theme — Kalphq-aligned visual refresh.
 *
 * The inherited Next.js bundle is frozen (HTTrack mirror of biodatamaker.app),
 * so every rule here is an override layered on top of the minified bundle in
 * /_next/static/css/. Strategy:
 *   - Use a single saturated accent (crimson #B32338); everything else gray.
 *   - Match Kalphq's rounded corners, subtle shadows, and generous padding.
 *   - Retain bundle layout (flex/grid/width/height) untouched; only colors,
 *     borders, radii, shadows, weights, letter-spacing, and minor padding.
 *   - Reference: D:\Development\Web\React\Kalphq\apps\web\src\index.css
 */

/* ───────────────────────── DESIGN TOKENS ───────────────────────── */
:root {
  /* Kalphq-style semantic tokens */
  --primary: #B32338; --primary-hover: #961F30; --primary-foreground: #FFFFFF;
  --background: #FAFAFA; --foreground: #111827;
  --card: #FFFFFF; --card-foreground: #111827;
  --popover: #FFFFFF; --popover-foreground: #111827;
  --muted: #F3F4F6; --muted-foreground: #6B7280;
  --accent: #FEF2F3; --accent-foreground: #B32338;
  --border: #E5E7EB; --input: #E5E7EB; --ring: #B32338;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow:    0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.10), 0 4px 12px rgb(0 0 0 / 0.06);

  /* Back-compat aliases from the older theme (preserve to avoid breakage) */
  --brand-red: var(--primary); --brand-hover: var(--primary-hover);
  --brand-pink: var(--accent); --brand-pink-soft: #FDF6F6;
  --brand-border: var(--border); --brand-text: var(--foreground);
  --brand-text-muted: var(--muted-foreground);

  /* Retint the bundle's internal vars so unstyled elements inherit our palette */
  --amaranth: #B32338; --burgundy: #961F30; --puce-red: #B32338;
  --raisin-black: #111827; --raisin-black-2: #374151;
  --independence: #4B5563; --lynch: #6B7280; --manatee: #9CA3AF;
  --loblolly: #D1D5DB; --mischka: #E5E7EB; --athens-gray: #F3F4F6;
  --wash-me: #FAFAFA; --border1: #E5E7EB;
  --fair-pink: #FEF2F3; --pipin: #FEF2F3; --misty-rose: #FEF2F3; --chablis: #FDF6F6;
  --prim4: #B32338;
}

/* ─────────────────────────── BASE ─────────────────────────── */
html, body {
  background: var(--background) !important;
  color: var(--foreground) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { line-height: 1.5 !important; }

/* Use the bundle's own DM Sans stack — no remote fonts. */
body, button, input, select, textarea, a, p, h1, h2, h3, h4, h5, h6, span, div, li {
  font-family: "DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

::selection { background: var(--accent); color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* ─────────────────────────── TYPOGRAPHY ─────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--foreground) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
  text-wrap: balance;
}
h1, [class*="HeaderText-sc-9fed4ac9"] { font-weight: 700 !important; letter-spacing: -0.02em !important; }
h2, [class*="SubHeaderText-sc-9fed4ac9"] { font-weight: 600 !important; }
p, [class*="ContentText-sc-9fed4ac9"] {
  color: var(--muted-foreground) !important;
  line-height: 1.6 !important;
  text-wrap: pretty;
}
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary-hover); }

/* ─────────────────────────── BUTTONS ───────────────────────────
 * Bundle defines .primary-btn, .ghost-btn, .blue-btn, .main-hero-btn with
 * 28px pill radius — Kalphq uses 10-12px. Match Kalphq and keep height ~42px.
 */
.primary-btn,
.main-hero-btn,
[class*="MainButton-sc"],
[class*="Navbar__MainButton"] {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.primary-btn:hover, .primary-btn:focus,
.main-hero-btn:hover, .main-hero-btn:focus,
[class*="MainButton-sc"]:hover,
[class*="Navbar__MainButton"]:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
  box-shadow: var(--shadow-md) !important;
}

.ghost-btn,
.blue-btn {
  background: #fff !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
.ghost-btn:hover, .ghost-btn:focus,
.blue-btn:hover, .blue-btn:focus {
  background: var(--muted) !important;
  border-color: var(--loblolly) !important;
  color: var(--foreground) !important;
}

/* Outline/secondary pattern — transparent with crimson outline */
button[class*="outline" i],
button[class*="secondary" i],
a[class*="button" i][class*="outline" i] {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
}
button[class*="outline" i]:hover,
button[class*="secondary" i]:hover {
  background: var(--accent) !important;
  color: var(--primary-hover) !important;
}

/* Disabled */
.disabled-btn, button:disabled {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ─────────────────────────── INPUTS & FORMS ─────────────────────────── */
input, select, textarea,
.customDateInput,
[class*="StyledTextArea"],
[class*="StyledDropdown"] {
  background: #fff !important;
  color: var(--foreground) !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
input::placeholder, textarea::placeholder { color: var(--muted-foreground) !important; }
input:focus, select:focus, textarea:focus,
.customDateInput:focus,
[class*="StyledTextArea"]:focus,
[class*="StyledDropdown"]:focus-within {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgb(179 35 56 / 0.12) !important;
}
.error, input.error { border-color: #DC2626 !important; }

[class*="DropdownInput__LabelText"],
label { color: var(--foreground) !important; font-weight: 500 !important; }

/* Form layout wrappers — polish surface but don't touch display/flex */
[class*="FieldFormWrapper-sc-d043dc1"],
[class*="InputsWrapper-sc-d043dc1"],
[class*="EachSectionContainer-sc-d043dc1"],
[class*="ContentWrapper-sc-d043dc1"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
[class*="HeaderWrapper-sc-d043dc1"],
[class*="HeaderTextWrapper-sc-d043dc1"] {
  background: transparent !important;
  color: var(--foreground) !important;
}
[class*="SubmitFooter-sc-d043dc1"],
[class*="FormFooter-sc-d043dc1"],
[class*="NavFooter-sc-d043dc1"] {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
}
[class*="DeleteButton-sc-d043dc1"] {
  color: var(--muted-foreground) !important;
  background: transparent !important;
}
[class*="DeleteButton-sc-d043dc1"]:hover { color: var(--primary) !important; background: var(--accent) !important; }

/* ─────────────────────────── NAVBAR ─────────────────────────── */
[class*="Navbar__Wrapper-sc-20244f43"] {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
[class*="Navbar__StyledLink-sc-20244f43"] {
  color: var(--foreground) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: color .15s ease;
}
[class*="Navbar__StyledLink-sc-20244f43"]:hover { color: var(--primary) !important; }

/* ─────────────────────────── HERO ─────────────────────────── */
[class*="styles__Wrapper-sc-bac045fa"] {
  background: linear-gradient(180deg, #fff 0%, var(--background) 100%) !important;
}
[class*="styles__Content-sc-bac045fa"] h1,
[class*="styles__Content-sc-bac045fa"] [class*="HeaderText"] {
  color: var(--foreground) !important;
}
[class*="styles__HeroCounter-sc-bac045fa"] {
  color: var(--muted-foreground) !important;
  background: transparent !important;
}
[class*="styles__ResumeContainer-sc-bac045fa"] img,
[class*="styles__StyledImage-sc-bac045fa"] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
}
[class*="styles__FloatingCtaWrapper-sc-bac045fa"] {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -4px 20px rgb(0 0 0 / 0.08) !important;
}

/* Hide Aurora decorative gradient blobs — they clash with the minimal look */
[class*="Aurora__OuterWrapper-sc-554ff107"],
[class*="Aurora__Wrapper-sc-554ff107"] { opacity: 0.25 !important; filter: saturate(0.4) hue-rotate(-15deg) !important; }

/* ─────────────────────────── TEMPLATE CAROUSEL ─────────────────────────── */
[class*="TemplateCarouselSlider__Wrapper-sc-e4f5d2f9"] {
  background: var(--muted) !important;
}
[class*="TemplateCarouselSlider__Container-sc-e4f5d2f9"] { background: transparent !important; }
[class*="SlickCarousel__TemplateItemContainer-sc-1feac03f"] {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
[class*="SlickCarousel__CarouselImage-sc-1feac03f"] { border-radius: var(--radius-lg) !important; }
[class*="SlickCarousel__NewTagContainer-sc-1feac03f"] {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  padding: 4px 10px !important;
  box-shadow: var(--shadow-sm) !important;
}
[class*="SlickCarousel__ArrowWrapper-sc-1feac03f"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow) !important;
  color: var(--foreground) !important;
}
[class*="SlickCarousel__ArrowWrapper-sc-1feac03f"]:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* ─────────────────────────── FEATURES CARDS ─────────────────────────── */
[class*="Features__Wrapper-sc-92540688"] { background: var(--background) !important; }
[class*="Features__Card-sc-92540688"],
[class*="styles__Card-sc-149b49ab"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
[class*="Features__Card-sc-92540688"]:hover,
[class*="styles__Card-sc-149b49ab"]:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--loblolly) !important;
}
.card-header { color: var(--foreground) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
.subheader { color: var(--muted-foreground) !important; font-weight: 500 !important; }

/* ─────────────────────────── TUTORIAL / ACCORDION PANELS ─────────────────────────── */
[class*="styles__Wrapper-sc-e1922eb2"] { background: var(--background) !important; }
[class*="styles__ContentWrapper-sc-e1922eb2"],
[class*="styles__TutorialAccordionWrapper-sc-e1922eb2"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
[class*="styles__PanelHeadingWrapper-sc-e1922eb2"] { color: var(--foreground) !important; font-weight: 600 !important; }
[class*="styles__ContentImg-sc-e1922eb2"],
[class*="Tutorial__TutorialImage-sc-5a7a5bbf"] {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
}
[class*="styles__PointWrapper-sc-e1922eb2"] { color: var(--foreground) !important; }

/* ─────────────────────────── FAQ ─────────────────────────── */
[class*="Faq2__Wrapper-sc-30d5ea25"] { background: var(--background) !important; }
[class*="Faq2__FaqListContainer-sc-30d5ea25"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}
[class*="styles__FaqItemWrapper-sc-5cd83408"] { border-bottom: 1px solid var(--border) !important; }
[class*="styles__FaqItemWrapper-sc-5cd83408"]:last-child { border-bottom: none !important; }
[class*="styles__FaqQuestionText-sc-5cd83408"] { color: var(--foreground) !important; font-weight: 500 !important; }
[class*="styles__ExpandButton-sc-5cd83408"],
[class*="styles__ExpandButtonContainer-sc-5cd83408"] {
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: none !important;
}

/* Bundle-level Accordion (CSS-module) — keep its layout but retint dividers. */
.Accordion_item__dKKwi { border-bottom-color: var(--border) !important; }
.Accordion_header__3VCyN { color: var(--foreground) !important; font-weight: 500 !important; }

/* ─────────────────────────── REVIEWS / TESTIMONIALS ─────────────────────────── */
[class*="ReviewListContainer__Wrapper-sc-aad0bc19"] { background: var(--background) !important; }
[class*="Review__ReviewContainer-sc-45d7a49e"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
[class*="Review__ReviewName-sc-45d7a49e"] { color: var(--foreground) !important; font-weight: 600 !important; }
[class*="Review__ReviewDate-sc-45d7a49e"] { color: var(--muted-foreground) !important; }
[class*="Review__ReviewContent-sc-45d7a49e"] { color: var(--foreground) !important; line-height: 1.6 !important; }
[class*="Review__StarsContainer-sc-45d7a49e"],
[class*="styles__StarContainer-sc-f30f8e9d"] { color: #F59E0B !important; /* amber stars */ }
[class*="Review__Avatar-sc-45d7a49e"] {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border) !important;
}

/* Rating block */
[class*="styles__Wrapper-sc-f30f8e9d"],
[class*="styles__RatingWrapper-sc-f30f8e9d"] { color: var(--foreground) !important; }

/* ─────────────────────────── WHATSAPP / CTA SECTION ───────────────────────────
 * This is the sole section that keeps a tinted pink surface — per Kalphq's pattern
 * of a single accent-tinted promotional card.
 */
[class*="styles__BackWrapper-sc-7e7a1bae"] { background: var(--background) !important; }
[class*="styles__Wrapper-sc-7e7a1bae"],
[class*="styles__CtaContainer-sc-7e7a1bae"] {
  background: var(--brand-pink-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow) !important;
}
[class*="styles__Header-sc-7e7a1bae"] { color: var(--foreground) !important; font-weight: 700 !important; }
[class*="styles__Description-sc-7e7a1bae"] { color: var(--muted-foreground) !important; }
[class*="styles__MainButton-sc-7e7a1bae"] {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow) !important;
}
[class*="styles__MainButton-sc-7e7a1bae"]:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

/* ─────────────────────────── BADGES / PRIVACY PILL ─────────────────────────── */
[class*="styles__BadgeContainer-sc-aac9afa7"],
[class*="PrivacyBadge" i] {
  background: var(--card) !important;
  color: var(--muted-foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 4px 10px !important;
}

/* ─────────────────────────── FOOTER ─────────────────────────── */
[class*="styles__Wrapper-sc-42cfd410"] {
  background: #0F172A !important;          /* slate-900 */
  color: #CBD5E1 !important;
  border-top: 1px solid var(--border) !important;
}
[class*="styles__Wrapper-sc-42cfd410"] * { color: #CBD5E1 !important; }
[class*="styles__FooterHeader-sc-42cfd410"] { color: #F8FAFC !important; font-weight: 600 !important; letter-spacing: 0 !important; }
[class*="styles__FooterText-sc-42cfd410"] { color: #94A3B8 !important; }
[class*="styles__FooterLink-sc-42cfd410"] { color: #CBD5E1 !important; transition: color .15s ease; }
[class*="styles__FooterLink-sc-42cfd410"]:hover { color: #fff !important; }
[class*="styles__CopyRight-sc-42cfd410"] { color: #64748B !important; border-top: 1px solid rgb(255 255 255 / 0.06) !important; }
[class*="styles__IconLink-sc-42cfd410"] {
  background: rgb(255 255 255 / 0.05) !important;
  border: 1px solid rgb(255 255 255 / 0.08) !important;
  border-radius: var(--radius-pill) !important;
  color: #CBD5E1 !important;
  transition: background-color .15s ease, border-color .15s ease;
}
[class*="styles__IconLink-sc-42cfd410"]:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* ─────────────────────────── MISC / GENERIC ─────────────────────────── */
hr { border: none; border-top: 1px solid var(--border); }

/* Modals / dialogs — generic catch-all */
[class*="Modal" i],
[class*="Dialog" i],
[role="dialog"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--foreground) !important;
}

/* Tone down legacy gradient bg utility */
.gradient-bg {
  background: linear-gradient(180deg, var(--accent) 0%, var(--background) 100%) !important;
}

/* MasonryGrid / generic containers */
[class*="MasonryGrid__Container-sc-31ddf388"],
[class*="styles__CardsContainer-sc-149b49ab"] { background: transparent !important; }

/* ───────────── DARK MODE DISABLED — light mode always ─────────────
   The original Agent A added a `@media (prefers-color-scheme: dark)`
   block that auto-flipped the site dark if the user's OS was in dark
   mode. User reported that as unwanted ("needs to set to light mode
   too"). Removed. Site now renders light-mode regardless of OS
   preference. If we ever want a user-toggled theme, we'll add a
   `[data-theme="dark"]` attribute-based selector instead of media-query
   auto-detection. */

/* ─────────────────── TASTEFUL LIGHT-MODE GRADIENTS ──────────────────
   The earlier commit killed every gradient including ones that made the
   page feel less flat. These rules add back the TWO Kalphq-style
   gradients that should stay:
     - Hero wash:    very soft vertical pink→white, no hard edge
     - Primary CTA:  subtle vertical crimson depth (elevated feel)
   Everything else (aurora, multi-color sweeps, carousel fades) stays
   killed — not these two. */

/* Hero: soft pink-surface at top fading to white by 70% down. This
   replaces the pure-white hero background with a warm wash that echoes
   the crimson accent without being loud. */
[class*="styles__Wrapper-sc-bac045fa-0"] {
  background-image: linear-gradient(180deg, #FDF3F3 0%, #FBE4E4 12%, #FFFFFF 70%) !important;
  background-color: #FFFFFF !important;
}

/* Primary CTA buttons: add a hint of vertical depth — crimson at top,
   slightly darker crimson at bottom. Matches shadcn/Kalphq's button
   look which is almost-flat-but-not-quite. */
[class*="main-hero-btn" i],
[class*="MainButton" i],
[class*="primary-btn" i],
button[class*="primary" i],
a[class*="cta" i][class*="primary" i],
[class*="CtaButton" i][class*="primary" i] {
  background-image: linear-gradient(180deg, #B32338 0%, #961F30 100%) !important;
  background-color: #B32338 !important;
  color: #FFFFFF !important;
  border-color: #B32338 !important;
  box-shadow: 0 1px 2px rgba(150, 31, 48, 0.18);
  transition: background-image 0.15s ease, box-shadow 0.15s ease;
}

[class*="main-hero-btn" i]:hover,
[class*="MainButton" i]:hover,
[class*="primary-btn" i]:hover,
button[class*="primary" i]:hover,
a[class*="cta" i][class*="primary" i]:hover,
[class*="CtaButton" i][class*="primary" i]:hover {
  background-image: linear-gradient(180deg, #961F30 0%, #7A1828 100%) !important;
  box-shadow: 0 2px 6px rgba(150, 31, 48, 0.25);
}

/* ────────────── UNIFIED CONTENT-SECTION CANVAS ──────────────
   Live audit found FOUR different neutral backgrounds tiling the page:
   #F3F4F6, #F9F9F9, #FAFAFA, and pure white. User read this as
   "inconsistent" / "weird stripes". Collapse them to ONE neutral
   (#FAFAFA) for every content section between the hero and footer, so
   the page reads as one continuous canvas with the hero wash + WhatsApp
   card being the only tonal variations. */

[class*="TemplateCarouselSlider__Wrapper-sc-e4f5d2f9-0"],
[class*="styles__Wrapper-sc-149b49ab-0"],
[class*="Features__Wrapper-sc-92540688-0"],
[class*="ReviewListContainer__Wrapper-sc-aad0bc19-0"],
[class*="styles__Wrapper-sc-e1922eb2-0"],
[class*="Faq2__Wrapper-sc-30d5ea25-0"] {
  background-color: #FAFAFA !important;
  background-image: none !important;
}

/* ────────────── HERO PADDING BALANCE ──────────────
   Bundle has 96px top / 32px bottom on the hero — feels top-heavy,
   content crammed at the bottom edge. Pad the bottom to 56px so the
   hero breathes into the next section. */
[class*="styles__Wrapper-sc-bac045fa-0"] {
  padding-top: 96px !important;
  padding-bottom: 56px !important;
}

/* ────────────── FOOTER: light mode ──────────────
   Agent A defaulted to a Kalphq-style dark slate footer (#0F172A). In
   context with the rest of the light site it reads as unexpected
   "dark mode". Lighten to match the site canvas; keep the crimson
   accent on links and social icons. */
[class*="styles__Wrapper-sc-42cfd410-0"] {
  background-color: #FAFAFA !important;
  background-image: none !important;
  border-top: 1px solid #E8C9CC;
  color: #374151 !important;
}

[class*="styles__Wrapper-sc-42cfd410-0"] * {
  color: #374151 !important;
}

[class*="styles__Wrapper-sc-42cfd410-0"] a,
[class*="styles__Wrapper-sc-42cfd410-0"] a:visited {
  color: #B32338 !important;
}

[class*="styles__Wrapper-sc-42cfd410-0"] a:hover {
  color: #7A1828 !important;
  text-decoration: underline;
}

[class*="styles__Wrapper-sc-42cfd410-0"] svg {
  fill: #B32338 !important;
  color: #B32338 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DEVTOOLS-VERIFIED FIXES — class hashes captured from live inspection
   of https://www.biodatamakers.in/ via Claude-in-Chrome MCP on 2026-04-20.
   These are surgical overrides on exact wrappers the bundle renders,
   not wildcard patterns. Replaces the prior guesswork pass.
   ═══════════════════════════════════════════════════════════════════════ */

/* Form — "glass" header wrapper (sc-d043dc1-2).
   User: "remove border for this full div" — strip the form container
   chrome entirely (border, radius, shadow, glass-tint bg). The form
   fields + trash + arrows + text-areas carry their OWN borders which
   stay intact. Let the form sit flat on the page canvas. */
[class*="styles__HeaderInnerWrapper-sc-d043dc1-2"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Form — inputs wrapper (sc-d043dc1-4). Same intent — strip outer
   chrome, keep the padding so fields still have breathing room. */
[class*="styles__InputsWrapper-sc-d043dc1-4"] {
  padding: 24px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Form — photo placeholder root (sc-d043dc1-17).
   User asked: "for this element remove the border and other styles".
   Strip the entire outer chrome so the root is a bare box-model
   container. Inner sc-d043dc1-18 ImageWrapper (icon + "Click here to
   add your photo" text) keeps its own styling untouched. */
[class*="styles__ContentWrapper-sc-d043dc1-17"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Wall of Love — review cards (sc-45d7a49e-*). Bundle rendered
   Review__ReviewContainer with padding:0. Content was flush to the
   rounded border — the "weird testimonial cards". Fix: proper internal
   padding + rhythmic spacing between header / stars / body + a hover
   lift to make cards feel interactive without being loud. */
[class*="Review__ReviewContainer-sc-45d7a49e-0"] {
  padding: 24px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

[class*="Review__ReviewContainer-sc-45d7a49e-0"]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px);
}

[class*="Review__ReviewHeader-sc-45d7a49e-1"] {
  margin-bottom: 14px !important;
  gap: 10px;
}

[class*="Review__ReviewerInfo-sc-45d7a49e-2"] {
  gap: 10px;
}

[class*="Review__ReviewName-sc-45d7a49e-6"] {
  font-weight: 600 !important;
  color: #111827 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

[class*="Review__ReviewDate-sc-45d7a49e-7"] {
  color: #6B7280 !important;
  font-size: 13px !important;
}

[class*="Review__StarsContainer-sc-45d7a49e-9"] {
  margin: 0 0 12px 0 !important;
  gap: 2px;
}

[class*="Review__ReviewText"] {
  color: #374151 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

[class*="Review__PlatformIcon-sc-45d7a49e-8"] {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

[class*="Review__PlatformIcon-sc-45d7a49e-8"]:hover {
  opacity: 1;
}

/* Review masonry grid — ensure proper column gutters + card spacing. */
[class*="MasonryGrid-sc-31ddf388-1"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 20px !important;
}

[class*="MasonryGrid-sc-31ddf388-1"] .column {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* Feature cards — bundle had padding:0 just like review cards. Same
   shape (24px padding + 16px radius + 1px border + 0.04 shadow) so the
   page has consistent card geometry end-to-end. */
[class*="Features__Card-sc-92540688-3"] {
  padding: 24px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   USER FEEDBACK BATCH #2 (2026-04-20) — 5 specific fixes, DevTools-verified
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Footer "Connect with us" social icons — paths inside sc-42cfd410-1.
      Bundle hardcoded path fills to white/near-white (designed for dark
      footer). On our light footer they vanish. Force crimson on the
      path fills, scoped to the social-link anchors only so the
      multi-color Google G elsewhere in the footer is untouched. */
[class*="styles__IconLink-sc-42cfd410-1"] svg,
[class*="styles__IconLink-sc-42cfd410-1"] svg path {
  fill: #B32338 !important;
  color: #B32338 !important;
  stroke: none !important;
  opacity: 1 !important;
}

[class*="styles__IconLink-sc-42cfd410-1"]:hover svg,
[class*="styles__IconLink-sc-42cfd410-1"]:hover svg path {
  fill: #7A1828 !important;
  color: #7A1828 !important;
}

/* 2. "Start your journey" CTA — ghost pill around the button.
      sc-7e7a1bae-2 wraps the button with a pink-surface bg + 1px gray
      border + 20px radius, making it look like a floating decorative
      outline NOT in relation to the button. Remove the wrapper
      decoration; let the button be its own shape. */
[class*="styles__CtaContainer-sc-7e7a1bae-2"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 3. FAQ — Faq2__FaqListContainer-sc-30d5ea25-3 (.jUBVpw).
      Bundle had this as display:flex + justify-content:flex-end +
      width:100%. User verified in DevTools that REMOVING those makes
      layout sit correctly. Switch to display:block so FAQ items just
      flow top-to-bottom at their natural width. */
[class*="Faq2__FaqListContainer-sc-30d5ea25-3"] {
  display: block !important;
  justify-content: initial !important;
  -webkit-box-pack: initial !important;
  width: auto !important;
  padding: 24px 32px !important;
}

[class*="Faq2__FaqListContainer-sc-30d5ea25-3"] > * {
  width: 100%;
}

/* 4. "What a Well-Structured Marriage Biodata" — sc-e1922eb2-9.
      TutorialAccordionWrapper has 0 padding. Text hugs the border.
      Add 32px horizontal + 28px vertical. */
[class*="styles__TutorialAccordionWrapper-sc-e1922eb2-9"] {
  padding: 28px 32px !important;
}

/* Outer wrapper of that same section (sc-e1922eb2-4) had its own white
   card chrome (bg, border, radius, shadow) that the user called out:
   "remove box shadow for entire element [not] for internal elements".
   Strip the outer shell; inner TutorialAccordionWrapper / accordion /
   ContentImg stay untouched. */
[class*="styles__ContentWrapper-sc-e1922eb2-4"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 5. Wall of Love — make platform icon top-right of the card.
      Review__ReviewHeader was display:block in bundle — name+avatar
      stacked above the platform icon. Force flex row with space-between
      so the platform icon sits at top-right. */
[class*="Review__ReviewHeader-sc-45d7a49e-1"] {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 14px !important;
  gap: 10px;
}

[class*="Review__ReviewerInfo-sc-45d7a49e-2"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

[class*="Review__PlatformIcon-sc-45d7a49e-8"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0 !important;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FDF3F3;
  padding: 4px;
  opacity: 0.9;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

[class*="Review__PlatformIcon-sc-45d7a49e-8"]:hover {
  opacity: 1;
  transform: scale(1.05);
}

[class*="Review__PlatformIcon-sc-45d7a49e-8"] svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   USER FEEDBACK BATCH #3 (2026-04-20) — form nested borders, photo
   centering, template carousel slide spacing + image centering.
   DevTools-verified class hashes.
   ═══════════════════════════════════════════════════════════════════════ */

/* 6. Form — section + field-form + footer containers.
      Full-strip treatment consolidated. User asked for this one on
      sc-d043dc1-7 ("do the same to this"), then sc-d043dc1-5 ("remove
      the other white border style"), then sc-d043dc1-10/11/12
      ("remove box shadow for this too" — FormFooter / NavFooter /
      SubmitFooter). Every form-level wrapper now bare; inner inputs,
      buttons, dropdowns, and main-hero-btn / ghost-btn keep their
      own styling. */
[class*="styles__EachSectionContainer-sc-d043dc1-7"],
[class*="styles__FieldFormWrapper-sc-d043dc1-5"],
[class*="styles__FormFooter-sc-d043dc1-10"],
[class*="styles__NavFooter-sc-d043dc1-11"],
[class*="styles__SubmitFooter-sc-d043dc1-12"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 7. Photo placeholder — REVERTED. Bundle default rendering restored.
      (The earlier attempt to force-center + retint was making it worse.) */

/* 8. Template carousel — REVERTED layout overrides.
      The prior attempt (margin: 10px 12px, display: flex on the item
      container, .slick-slide { padding: 0 4px }, .slick-list
      { padding: 0 }) broke slick-carousel's internal transform math.
      Slick measures slide widths at mount and sets a track transform
      accordingly; CSS changing slide geometry AFTER that point made
      the transform point at empty space, rendering the carousel
      apparently "empty" — templates weren't visible, only arrows.

      Only color/hover rules remain — those don't affect slick's math. */

[class*="SlickCarousel__TemplateItemContainer-sc-1feac03f-1"] {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

[class*="SlickCarousel__TemplateItemContainer-sc-1feac03f-1"]:hover {
  box-shadow: none !important;
}

[class*="SlickCarousel__CarouselImage-sc-1feac03f-2"] {
  box-shadow: none !important;
}

/* "New" tag on template cards keeps its crimson fill */
[class*="SlickCarousel__NewTagContainer-sc-1feac03f"] {
  background: #B32338 !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   USER FEEDBACK BATCH #4 (2026-04-20) — Key Sections accordion shading
   ═══════════════════════════════════════════════════════════════════════ */

/* 9. "Key Sections for Your Marriage Biodata" accordion — remove the
      gray shading on expanded items. DevTools showed:
        Accordion_headerContainer__XXofx  → #F3F4F6
        Accordion_contentContainer__qM7XN → #F3F4F6
        Accordion_openedItem__CbZad       → #F3F4F6
      These are CSS-module classes (not styled-components), so previous
      sc-* hash rules didn't catch them. Force all Accordion_* backgrounds
      transparent so the accordion sits on the parent white surface. */
[class*="Accordion_headerContainer"],
[class*="Accordion_contentContainer"],
[class*="Accordion_openedItem"],
[class*="Accordion_item"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Also flatten the tiny emoji/icon square next to the accordion heading —
   it had its own #F7F8FA wrapper that adds a second mini-shade. */
.emoji-wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

/* Keep the accordion divider line subtle so items still feel separate */
[class*="Accordion_item"] {
  border-bottom: 1px solid #E5E7EB !important;
}

[class*="Accordion_item"]:last-child {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   USER FEEDBACK BATCH #5 (2026-04-20) — post-strip spacing restoration
   + additional box-shadow removals on landing-hero sample stack.
   ═══════════════════════════════════════════════════════════════════════ */

/* 10. After stripping chrome + margin from EachSectionContainer / FormFooter
       / NavFooter / SubmitFooter (batch #3), the sections merged visually
       with zero gap: "+ Add More Fields" row touched the WhatsApp capture
       card which touched the Reset-Form / Choose-a-Template footer.

       Fix: put the gap on the PARENT (FieldFormWrapper-sc-d043dc1-5) as a
       flex-column gap, so sections space evenly WITHOUT re-introducing
       margin on the containers the user asked us to strip.

       FieldFormWrapper has 5 direct children (DevTools-verified):
         1..3 EachSectionContainer (Personal / Family / Contact)
           4  Container-sc-e47d6172-0   (WhatsApp capture card)
           5  FormFooter-sc-d043dc1-10  (Reset / Choose-a-Template) */
[class*="styles__FieldFormWrapper-sc-d043dc1-5"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

/* 11. Landing-page rotated resume stack — user pasted the 3 .resume-{1,2,3}
       divs and asked: "remove the box shadow for theses too".

       DevTools showed EachItem-sc-bac045fa-6 carries a two-layer drop
       shadow ("rgba(50,50,93,0.25) 0 50px 100px -20px, rgba(0,0,0,0.3)
       0 30px 60px -30px") that clashes with the flat crimson brand.
       StyledImage-sc-bac045fa-7 may inherit one too — strip both. */
[class*="styles__EachItem-sc-bac045fa-6"],
[class*="styles__StyledImage-sc-bac045fa-7"] {
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   USER FEEDBACK BATCH #7 (2026-04-20) — wire the brand logo into the
   top nav and the site footer. The scraped Next.js bundle never rendered
   an <img> for the brand (it used a text-only "biodatamakers.in" link),
   so we inject the logo purely via CSS ::before pseudo-elements pointing
   at /brand/logo-red.svg (our committed crimson rounded-square logomark).
   ═══════════════════════════════════════════════════════════════════════ */

/* 13. Top nav logo — prepend a 28px crimson logomark inside the brand link.
       DOM: <div class="Navbar__LogoWrapper-sc-20244f43-2">
              <a class="nav-text" href="/">biodatamakers.in</a>
            </div>                                                        */
[class*="Navbar__LogoWrapper-sc-20244f43"] a.nav-text {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

[class*="Navbar__LogoWrapper-sc-20244f43"] a.nav-text::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("/brand/logo-red.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  border-radius: 6px;
}

/* 14. Footer logo — 56px logomark at the top of the OtherDetails column,
       above any copy/links in that slot. The footer sits on a dark
       surface (styled earlier in theme.css), so the crimson-with-pale-B
       logo reads well against it.
       DOM path: sc-42cfd410-0 > sc-42cfd410-11 > sc-42cfd410-12 >
                 sc-42cfd410-5 (OtherDetails)  ← target                 */
[class*="styles__OtherDetails-sc-42cfd410-5"]::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  background-image: url("/brand/logo-red.svg");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  margin-bottom: 16px;
  border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────────
 * BATCH #8 (2026-04-24): Preview print-block + watermark
 *
 * Goal: prevent revenue loss via preview screenshot / print.
 * The download/{id} page (post-payment) does not render theme.css's
 * preview selectors, so the clean PDF remains printable after purchase.
 * Form UX is untouched — print-block applies only to the PDF preview.
 *
 * Layered defense:
 *   1. @media print: hide page + show "complete payment to unlock"
 *   2. Diagonal watermark overlay on the PDF document wrapper
 *   3. user-select: none on the preview modal to discourage copy/paste
 * ─────────────────────────────────────────────────────────────────*/

@media print {
  html, body {
    background: white !important;
    color: black !important;
  }
  body > * { display: none !important; }
  body::before {
    content: "Your biodata preview is watermarked.";
    display: block;
    font: 700 28px/1.3 system-ui, -apple-system, sans-serif;
    margin: 60px 40px 16px;
    color: #c1272d;
  }
  body::after {
    content: "Complete your payment on https://biodatamakers.in to download the full PDF without watermarks. Preview pages are not printable.";
    display: block;
    font: 400 16px/1.5 system-ui, -apple-system, sans-serif;
    margin: 0 40px;
    color: #333;
  }
}

/* Diagonal watermark overlay — does not affect clicks/drags below it
   (pointer-events: none). Semi-transparent crimson, -28deg, repeated text
   so screenshots stay branded even if cropped. */
[class*="PDFViewer__DocumentWrapper"] {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
[class*="PDFViewer__DocumentWrapper"]::after {
  content: "PREVIEW · PAY TO UNLOCK · PREVIEW · PAY TO UNLOCK · PREVIEW · PAY TO UNLOCK · PREVIEW · PAY TO UNLOCK";
  position: absolute;
  inset: -20% -20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 52px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 6px;
  color: rgba(193, 39, 45, 0.18);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  transform: rotate(-28deg);
  pointer-events: none;
  white-space: pre-wrap;
  word-spacing: 100vw;
  overflow: hidden;
  z-index: 10;
  -webkit-user-select: none;
  user-select: none;
}

/* Disable text selection across the preview modal. Does not block
   screenshots — screenshots remain watermarked via the overlay above. */
[class*="PDFViewer__"],
[class*="styles__BackdropWrapper-sc-e8e44cfb-0"] {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * BATCH #9 (2026-04-25): Landing page redesign — form-first, Kalphq-clean
 *
 * SAFE ZONE: the Marriage Biodata Form section and every field inside it
 * is untouched. Only hero, nav, and sections OUTSIDE the form are changed.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Sticky nav ── */
header[class*="Navbar__Wrapper"] {
  position: sticky !important;
  top: 0;
  z-index: 900;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* ── Hero compaction ── */
[class*="styles__Wrapper-sc-bac045fa-0"] {
  min-height: auto !important;
  padding: 40px 24px 64px !important;  /* bottom padding reserves space for the ::after trust strip */
  position: relative !important;
}
[class*="styles__Container-sc-bac045fa-1"] {
  max-width: 1200px !important;
  margin: 0 auto !important;
  gap: 40px !important;
  align-items: center !important;
  padding: 0 !important;
}
/* Illustration — shrink more and contain its layout impact */
[class*="styles__ResumeContainer-sc-bac045fa-5"] {
  flex-shrink: 0 !important;
  transform: scale(0.5) !important;
  transform-origin: center right !important;
  margin: -120px -40px !important;
  max-height: 320px !important;
}
/* Hero text column — give it breathing room so the heading fits on 2 lines */
[class*="styles__Content-sc-bac045fa-2"] {
  flex: 1 1 auto !important;
  max-width: 620px !important;
  padding: 0 !important;
}
[class*="styles__MainHeading-sc-bac045fa"],
[class*="styles__Content-sc-bac045fa-2"] h1,
[class*="styles__Content-sc-bac045fa-2"] h2 {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 14px !important;
  max-width: 560px !important;
}
[class*="styles__Content-sc-bac045fa-2"] p:not([class*="HeroCounter"]) {
  font-size: 16px !important;
  color: #52525B !important;
  max-width: 520px !important;
  margin-bottom: 20px !important;
  line-height: 1.55 !important;
}
[class*="styles__HeroCounter-sc-bac045fa-4"],
[class*="HeroCounter"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: #FEF2F3 !important;
  color: #B32338 !important;
  border: 1px solid #FADFE4 !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 0 0 16px 0 !important;
}
[class*="HeroCounter"] p {
  color: inherit !important;
  font-size: inherit !important;
  margin: 0 !important;
}
[class*="styles__MainButton-sc-bac045fa-3"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 1px 2px rgba(179, 35, 56, 0.12), 0 4px 12px rgba(179, 35, 56, 0.10) !important;
}

/* ── Compact the Template Carousel section ("Beautifully Handcrafted...") ──
 * Keep the template images visible but shrink the heading + hide the long
 * marketing paragraph so the form is closer to the fold. */
[class*="TemplateCarouselSlider__Wrapper"] {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
[class*="TemplateCarouselSlider__Container"] {
  gap: 8px !important;
}
/* Shrink the big "Beautifully Handcrafted" heading */
[class*="TemplateCarouselSlider__Container"] [class*="SubHeaderText"],
[class*="TemplateCarouselSlider__Container"] h2 {
  font-size: clamp(18px, 2.4vw, 22px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}
/* Hide the long marketing paragraph under the heading */
[class*="TemplateCarouselSlider__Container"] p,
[class*="TemplateCarouselSlider__Container"] [class*="commonStyles__BodyText"] {
  display: none !important;
}

/* ── Trust strip under hero — absolutely positioned so it doesn't get
 *    pulled into the hero's flex row ── */
[class*="styles__Wrapper-sc-bac045fa-0"]::after {
  content: "47,000+ families trust us  ·  ★★★★★ 4.8  ·  Free to start  ·  No signup needed";
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ── Section spacing ── */
section[class*="Features__"],
section[class*="Steps__"],
section[class*="Faq__"],
[class*="styles__Reviews"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
section[class*="__"] h2 {
  font-size: clamp(22px, 3vw, 30px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
}

/* ── WhatsApp card polish ── */
[class*="styles__Container-sc-e47d6172-0"] {
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  border: 1px solid #E5E7EB !important;
}

/* ── FAQ accordion polish ── */
[class*="Accordion__"],
[class*="Faq__Item"] {
  border-bottom: 1px solid #F3F4F6 !important;
  padding: 14px 0 !important;
}

/* ── Footer polish ── */
footer, [class*="Footer__"] {
  padding: 40px 16px !important;
  background: #FAFAFA !important;
  border-top: 1px solid #F3F4F6 !important;
  color: #6B7280 !important;
}

/* ── Mobile stack ── */
@media (max-width: 768px) {
  [class*="styles__Container-sc-bac045fa-1"] {
    flex-direction: column !important;
  }
  [class*="styles__ResumeContainer-sc-bac045fa-5"] {
    transform: scale(0.45) !important;
    margin: -100px 0 -80px !important;
  }
  [class*="styles__Content-sc-bac045fa-2"] {
    text-align: center;
  }
  [class*="styles__Content-sc-bac045fa-2"] p:not([class*="HeroCounter"]) {
    margin-left: auto;
    margin-right: auto;
  }
}