@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   Nattoflux Rapid Relief — WordPress DEPLOYMENT OVERRIDES
   The mockup (rapid-relief.css) is a desktop+mobile design board.
   These rules un-frame the two previews into ONE responsive page.
   The original mockup CSS is left UNTOUCHED (loaded before this).
   ============================================================ */

/* Fix: the mockup CSS uses var(--brown) 5× but never defines it — restore the
   token so the MOBILE hero's dark gradient (and other --brown uses) render.
   Without this the mobile hero is cream-on-cream (invisible text). */
:root { --brown: #5C3A1E; }

/* Full-bleed page — remove the 1480px "board" container */
.page-shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.nf-rr-body { background: var(--paper) !important; }

/* Stack the workbench; strip the fake browser + phone frames */
.workbench { display: block !important; gap: 0 !important; grid-template-columns: none !important; }
.desktop-preview { border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.browser-bar { display: none !important; }
.mobile-panel { position: static !important; top: auto !important; }
.phone { border: none !important; border-radius: 0 !important; box-shadow: none !important; max-height: none !important; overflow: visible !important; }

/* Responsive toggle: desktop design on wide screens, phone design on phones */
.desktop-preview { display: block; }
.mobile-panel { display: none; }
@media (max-width: 820px) {
  .desktop-preview { display: none !important; }
  .mobile-panel   { display: block !important; }
}

/* CTAs are now real <a> links — keep them looking like the designed buttons */
.nf-rr-lp a { text-decoration: none; }
a.main-cta, a.package-cta, a.m-cta, a.m-sticky-btn { cursor: pointer; color: var(--paper); }
a.m-nav-wa { color: inherit; cursor: pointer; }

/* Sticky mobile buy bar -> fixed to the bottom of the screen */
@media (max-width: 820px) {
  .m-sticky { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 9999;
              border-radius: 0 !important; box-shadow: 0 -6px 20px rgba(42,24,16,.18); }
  .phone { padding-bottom: 88px !important; } /* clearance so content isn't hidden behind the bar */
}

/* Floating WhatsApp button (markup added in landing.php) */
.nf-rr-wa-float { position: fixed; right: 16px; bottom: 100px; z-index: 10000;
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff !important; font-weight: 700;
  font-family: Poppins, system-ui, sans-serif; font-size: 14px;
  padding: 12px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.nf-rr-wa-float svg { width: 20px; height: 20px; }
@media (min-width: 821px) { .nf-rr-wa-float { bottom: 24px; } }

/* ============================================================
   FUNNEL RESTRUCTURE (2026-05-23) — "Proof higher, less pain".
   Reorder sections with flex `order` (no markup change) + hide
   the repeated-pain urgency block. New order:
   Hero -> Problem-confirm -> Product -> Proof+reviews ->
   Ingredients -> Promo -> FAQ.
   ============================================================ */

/* DESKTOP */
.desktop-preview { display: flex; flex-direction: column; }
.desktop-preview > *:nth-child(1) { order: 1; }   /* Hero */
.desktop-preview > *:nth-child(2) { order: 2; }   /* Problem (confirm) */
.desktop-preview > *:nth-child(3) { display: none; } /* Urgency — removed */
.desktop-preview > *:nth-child(4) { display: none; } /* Product — removed 2026-05-25 */
.desktop-preview > *:nth-child(5) { order: 7; }   /* Ingredients */
.desktop-preview > *:nth-child(6) { order: 4; }   /* Proof + reviews (up) */
.desktop-preview > *:nth-child(7) { order: 10; }   /* Promo */
.desktop-preview > *:nth-child(8) { order: 13; }   /* FAQ */
.desktop-preview > *:nth-child(9) { order: 14; }   /* Final CTA */

/* MOBILE */
.phone { display: flex; flex-direction: column; }
.phone > *:nth-child(1)  { order: 1; }   /* promo strip */
.phone > *:nth-child(2)  { order: 2; }   /* Hero */
.phone > *:nth-child(3)  { order: 3; }   /* trust badges */
.phone > *:nth-child(4)  { order: 4; }   /* Problem (confirm) */
.phone > *:nth-child(5)  { display: none; } /* Urgency — removed */
.phone > *:nth-child(6)  { display: none; } /* Product — removed 2026-05-25 */
.phone > *:nth-child(7)  { order: 9; }   /* Ingredients */
.phone > *:nth-child(8)  { order: 6; }   /* Proof videos (up) */
.phone > *:nth-child(9)  { order: 7; }   /* Reviews (up) */
.phone > *:nth-child(10) { order: 12; }   /* Promo */
.phone > *:nth-child(11) { order: 15; }  /* FAQ */
/* child 12 = sticky bar (position:fixed, unaffected) */

/* ============================================================
   REAL VIDEOS dropped into the proof slots (2026-05-23)
   ============================================================ */
.rr-video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 460px;
            border-radius: 12px; background: #000; object-fit: cover; margin: 0 auto; }
.m-cert .rr-video { max-height: 360px; border-radius: 10px; }

/* ============================================================
   HERO VIDEO + 4 PHOTO PACKAGE CARDS (2026-05-23)
   ============================================================ */
/* Hero video — fits any aspect ratio, centered */
.video-frame, .m-video { height: auto !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; display: flex !important; align-items: center; justify-content: center; }
.rr-hero-video { display: block; width: 100%; max-width: 360px; height: auto; max-height: 62vh; border-radius: 14px; margin: 0 auto; background: #000; }

/* Product photos in package cards */
.package-img, .m-package-img { width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.package-img img, .m-package-img img { width: 100%; height: auto; display: block; }
.m-package-img { margin-bottom: 10px; }

/* 4-column promo grid (wraps down on smaller screens) */
.package-grid { grid-template-columns: repeat(4, 1fr) !important; align-items: stretch; }
@media (max-width: 1100px) { .package-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .package-grid { grid-template-columns: 1fr !important; } }

/* "Paling Popular" corner tag + keep ribbons above the photo */
.package, .m-package { position: relative; }
.pkg-tag { position: absolute; top: 12px; right: 12px; z-index: 3; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.best-ribbon, .m-ribbon { z-index: 3; }

/* Mobile inline crossed-out price */
.m-old { text-decoration: line-through; opacity: .5; font-size: .72em; font-weight: 400; margin-left: 6px; }

/* ============================================================
   Card images are COMPLETE promo designs (price/benefits baked in).
   Hide the text I added; let each image be the card + Order button.
   ============================================================ */
.package h4, .package .small, .package .package-price, .package .old-price, .package ul,
.package .pkg-tag, .package .best-ribbon,
.m-package h4, .m-package .m-price, .m-package ul, .m-package .pkg-tag, .m-package .m-ribbon { display: none !important; }
.package, .m-package { padding: 12px !important; }
.package-img, .m-package-img { margin-bottom: 12px !important; }
.package .package-cta { width: 100%; justify-content: center; margin: 0; }

/* REMOVE-TOP-GAP: kill the empty top padding the block theme injects on body */
body.nf-rr-body { padding: 0 !important; margin: 0 !important; }

/* HERO POLISH (2026-05-23): red top bar + full-width hero video on phone */
.m-top-alert { background: var(--red) !important; }
.m-logo { height: 30px; width: auto; display: block; background: var(--paper); padding: 6px 12px; border-radius: 10px; }
.urgency-strip { background: var(--red) !important; color: #fff !important; }
.m-top-alert, .urgency-strip { font-family: 'Poppins', sans-serif !important; text-transform: uppercase; letter-spacing: 0.5px; }
.m-proof, .trust-badges { display: none !important; }

/* Symptom diagram photos */
.symptom-img, .m-pain-img { width: 100%; height: auto; border-radius: 10px; display: block; margin-bottom: 10px; }
.symptom { text-align: left; }
.m-pain { display: flex; flex-direction: column; }
.m-pain strong { display: block; margin-bottom: 3px; }
.m-pain span { display: block; }

/* Fierce + bigger symptom typography (titles = Anton, all-caps) */
.m-pain strong { font-family: 'Poppins', sans-serif !important; font-size: 24px !important; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.12; color: var(--ink) !important; }
.m-pain span { font-size: 16px !important; font-weight: 500 !important; line-height: 1.5; color: var(--ink) !important; }
.symptom:has(.symptom-img) strong { font-family: 'Poppins', sans-serif !important; font-size: 24px !important; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.12; color: var(--ink) !important; }
.symptom:has(.symptom-img) span { font-size: 16px !important; font-weight: 500 !important; line-height: 1.5; color: var(--ink) !important; }
@media (max-width: 820px) {
  .m-video { padding: 0 !important; }
  .m-video .rr-hero-video { max-width: none !important; width: 100% !important; max-height: none !important; }
}

/* ============================================================
   NEWSPAPER / PRESS-WALL urgency section (2026-05-25)
   New section sits right BELOW the symptoms. It is appended at the
   end of each layout in the markup, then floated into place with
   flex order: desktop = order 3 (after symptoms[2], before proof[4]);
   mobile = order 5 (after symptoms[4], before proof[6]).
   COMPLIANCE: the news clippings carry the "gastrik/GERD boleh jadi
   serius / kanser" angle. Nattoflux itself makes NO disease claim.
   Placeholder boxes for now — later swap each
   <div class="press-clip">…</div> for <img class="press-clip" src="…">.
   ============================================================ */
.desktop-preview > *:nth-child(10) { order: 3; } /* Newspaper section */
.desktop-preview > *:nth-child(11) { order: 5; } /* Reviews section (after Proof) */
.phone > *:nth-child(12)          { order: 5; } /* Newspaper section (sticky bar shifts to child 13, still position:fixed) */

.nf-press-sub { font-size: 18px; line-height: 1.6; color: var(--ink); opacity: .9; font-weight: 500; margin: 8px 0 0; }
.press-grid { columns: 3; column-gap: 14px; margin: 18px 0 4px; }
.press-clip { display: block; width: 100%; height: auto; margin: 0 0 14px; break-inside: avoid;
  background: #fff; border: 1px solid #E7DCC9; border-radius: 8px; box-shadow: 0 6px 16px rgba(42,24,16,.12); }
.press-foot { margin: 14px 0 0; font-weight: 700; color: var(--ink); line-height: 1.5; }
@media (max-width: 820px) {
  .press-grid { columns: 2; column-gap: 10px; }
  .nf-press-sub { font-size: 16px; }
}

/* ============================================================
   PROOF VIDEOS (2026-05-25): sijil/cert removed from this section
   (it becomes a separate certificate section later). The 3 proof
   videos now sit as one clean row of 3 on every screen.
   ============================================================ */
.testimonial-grid { grid-template-columns: repeat(3, 1fr) !important; }
.m-cert-grid { grid-template-columns: repeat(3, 1fr) !important; }

/* ============================================================
   CUSTOMER REVIEWS (2026-05-25): animated stat counters (count up
   on scroll via rapid-relief.js) + review screenshot gallery.
   Placeholder boxes now -- later swap each <div class="nf-review">
   ...</div> for <img class="nf-review" src="..." loading="lazy">.
   ============================================================ */
.nf-stats { display: flex; gap: 12px; margin: 16px 0 18px; flex-wrap: wrap; }
.nf-stat { flex: 1; min-width: 92px; text-align: center; background: var(--paper-2, #F3EAD7); border: 1px solid #EAD9C0; border-radius: 12px; padding: 16px 8px; }
.nf-stat-num { display: block; font-family: 'Poppins', sans-serif; font-size: 36px; line-height: 1; color: var(--red); letter-spacing: .5px; }
.nf-stat-label { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.nf-review-grid { columns: 2; column-gap: 14px; margin: 4px 0; }
.nf-review { display: block; width: 100%; height: auto; margin: 0 0 14px; break-inside: avoid; background: transparent; border: 0; box-shadow: none; }
.nf-review:not(img) { min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; font: 600 13px/1.4 Poppins, system-ui, sans-serif; color: #B9AE99; }
@media (max-width: 820px) {
  .nf-stat-num { font-size: 30px; }
  .nf-review-grid { columns: 1; column-gap: 10px; }
}

/* ============================================================
   PRODUCT-INTRO section (2026-05-25): Nattoflux benefit heading +
   transparent influencer/product photo + "6 Manfaat" lead-in.
   Placed after Reviews, before Ingredients
   (desktop child 12 = order 6; mobile child 13 = order 8).
   ============================================================ */
.desktop-preview > *:nth-child(12) { order: 6; } /* Product-intro */
.phone > *:nth-child(13) { order: 8; }           /* Product-intro */
.nf-prodintro { text-align: center; }
.nf-pi-head, .nf-pi-head2 { font-weight: 800; font-size: 28px; line-height: 1.25; color: var(--ink); max-width: 640px; margin: 0 auto; }
.nf-pi-head2 { margin-top: 20px; }
.nf-pi-brand { color: var(--red); }
.nf-pi-sub { font-size: 16px; line-height: 1.6; color: var(--ink); opacity: .85; max-width: 560px; margin: 12px auto 0; }
.nf-pi-photo { display: block; width: 100%; max-width: 420px; aspect-ratio: 819 / 770; object-fit: cover; object-position: center bottom; margin: 14px auto 0; background: transparent; }
@media (max-width: 820px) {
  .nf-pi-head, .nf-pi-head2 { font-size: 21px; }
  .nf-pi-sub { font-size: 15px; }
  .nf-pi-photo { max-width: 320px; }
}

/* ============================================================
   6 MANFAAT benefit cards (2026-05-25) — sit under the "6 Manfaat"
   heading inside the product-intro section. 2 columns desktop, 1 mobile.
   ============================================================ */
.nf-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px auto 0; max-width: 760px; text-align: left; }
.nf-benefit { display: flex; gap: 12px; align-items: flex-start; background: var(--paper-2, #F3EAD7); border: 1px solid #EAD9C0; border-radius: 12px; padding: 16px; }
.nf-benefit-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.nf-benefit-txt strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.nf-benefit-txt span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink); opacity: .85; }
@media (max-width: 820px) { .nf-benefits { grid-template-columns: 1fr; gap: 10px; } }

/* 4 diagrams in a single row, above the 6 benefit cards (2026-05-25) */
.nf-diag-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 760px; margin: 18px auto 4px; }
.nf-diag { width: 100%; height: auto; display: block; border-radius: 10px; }
@media (max-width: 820px) { .nf-diag-row { gap: 6px; } }

/* ============================================================
   INGREDIENT cards with photos (2026-05-25): photo + name + benefit.
   Desktop = centered column in the 4-col grid; mobile = photo-left row.
   ============================================================ */
.bahan-img { display: block; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.symptom.bahan-card { text-align: center; }
.symptom.bahan-card .bahan-img { width: 110px; max-width: 100%; margin: 0 auto 10px; }
.symptom.bahan-card .bahan-txt strong { display: block; margin-bottom: 4px; }
.symptom.bahan-card .bahan-txt span { display: block; font-size: 13px; line-height: 1.5; }
.m-card.bahan-card { display: flex; gap: 12px; align-items: center; text-align: left; }
.m-card.bahan-card .bahan-img { width: 72px; flex: 0 0 auto; }
.m-card.bahan-card .bahan-txt strong { display: block; margin-bottom: 2px; }
.m-card.bahan-card .bahan-txt span { display: block; font-size: 13px; line-height: 1.45; opacity: .85; }

/* Ingredient section redesign (2026-05-25): dark theme, circular photos, 2x2. */
.nf-bahan { background: linear-gradient(180deg, #3d2218 0%, #25130e 100%) !important; }
.nf-bahan .section-label, .nf-bahan .m-label { color: #D9B87A !important; }
.nf-bahan h3 { color: #fff !important; }
.nf-bahan .section-note { color: rgba(255,255,255,.6) !important; }
.nf-bahan .symptom-grid { grid-template-columns: repeat(2, 1fr) !important; }
.nf-bahan .m-card-list { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
.bahan-card { display: block !important; text-align: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px !important; }
.bahan-img { display: block !important; width: 120px !important; max-width: 72% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 50% !important; margin: 0 auto 14px !important; }
.bahan-name { display: block; font-family: 'Poppins', sans-serif; font-size: 21px; line-height: 1.2; color: #fff; margin-bottom: 6px; }
.nf-bahan .bahan-card .bahan-name { color: #fff !important; }
.bahan-tag { display: block; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-weight: 700; color: #D9B87A; margin-bottom: 8px; }
.bahan-benefit { display: block; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.85); }
@media (max-width: 820px) { .bahan-name { font-size: 18px; } .bahan-img { width: 96px !important; } .nf-bahan .m-card-list { gap: 12px; } }

.desktop-preview > .nf-timeline { order: 8; } .phone > .nf-timeline { order: 10; } .nf-timeline .nf-tl-head { display: flex; align-items: center; gap: 20px; max-width: 620px; margin: 0 auto 24px; } .nf-timeline .nf-tl-photo { width: 40%; max-width: 230px; height: auto; display: block; flex: 0 0 auto; } .nf-timeline .nf-tl-headtext { flex: 1; } .nf-timeline .nf-tl-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.12; color: var(--ink, #5C3A1E); margin: 6px 0 0; } .nf-timeline .nf-tl-brand { color: var(--red, #C9285D); } .nf-timeline .nf-tl-cards { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto; } .nf-timeline .nf-tl-card { background: var(--red, #C9285D); border-radius: 20px; padding: 20px 24px; color: #fff; box-shadow: 0 12px 28px rgba(201,40,93,.22); } .nf-timeline .nf-tl-time { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 27px; line-height: 1; margin-bottom: 12px; } .nf-timeline .nf-tl-num { color: #FFCF8E; } .nf-timeline .nf-tl-list { list-style: none; margin: 0; padding: 0; } .nf-timeline .nf-tl-list li { position: relative; padding-left: 30px; font-size: 16px; font-weight: 600; line-height: 1.45; margin-bottom: 9px; } .nf-timeline .nf-tl-list li:last-child { margin-bottom: 0; } .nf-timeline .nf-tl-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: #fff; border-radius: 50%; } .nf-timeline .nf-tl-list li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--red, #C9285D); border-width: 0 2px 2px 0; transform: rotate(45deg); } .nf-timeline .nf-tl-note { text-align: center; font-size: 12px; color: rgba(92,58,30,.6); margin: 16px auto 0; } @media (max-width: 820px) { .nf-timeline .nf-tl-head { flex-direction: column; text-align: center; gap: 12px; margin-bottom: 20px; } .nf-timeline .nf-tl-photo { width: 62%; max-width: 200px; } .nf-timeline .nf-tl-title { font-size: 23px; } .nf-timeline .nf-tl-time { font-size: 23px; } .nf-timeline .nf-tl-list li { font-size: 15px; } }
.desktop-preview > .nf-promo { order: 9; } .phone > .nf-promo { order: 11; } .nf-promo { background: linear-gradient(135deg, #3a1f14 0%, #1a0d08 100%) !important; } .nf-promo .nf-promo-inner { max-width: 640px; margin: 0 auto; text-align: center; } .nf-promo .nf-promo-eyebrow { display: inline-block; background: var(--red, #C9285D); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; } .nf-promo .nf-promo-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: #fff; margin: 0 0 18px; } .nf-promo .nf-countdown { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; } .nf-promo .nf-cd-box { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 12px 8px; min-width: 76px; } .nf-promo .nf-cd-num { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: #FFCF8E; font-variant-numeric: tabular-nums; } .nf-promo .nf-cd-lbl { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 6px; } .nf-promo .nf-cd-sep { color: rgba(255,255,255,.4); font-size: 28px; font-weight: 800; } .nf-promo .nf-promo-sub { color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.5; margin: 0 0 18px; } .nf-promo .nf-promo-cta { display: inline-block; background: var(--red, #C9285D); color: #fff !important; font-weight: 800; font-size: 16px; padding: 14px 30px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 26px rgba(201,40,93,.4); } .nf-promo .nf-cd-box.tick { animation: nf-cdpulse .45s ease; } @keyframes nf-cdpulse { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } } @media (max-width: 820px) { .nf-promo .nf-promo-title { font-size: 21px; } .nf-promo .nf-cd-box { min-width: 60px; padding: 10px 5px; } .nf-promo .nf-cd-num { font-size: 27px; } .nf-promo .nf-cd-sep { font-size: 22px; } .nf-promo .nf-promo-cta { font-size: 15px; padding: 13px 26px; } }
.desktop-preview > .nf-bonus { order: 11; } .phone > .nf-bonus { order: 13; } .nf-bonus .nf-bonus-head { text-align: center; max-width: 640px; margin: 0 auto 22px; } .nf-bonus .nf-bonus-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: var(--ink, #5C3A1E); margin: 8px 0 0; } .nf-bonus .nf-bonus-grid { display: flex; gap: 16px; max-width: 920px; margin: 0 auto; } .nf-bonus .nf-bonus-card { flex: 1; background: var(--paper-2, #F3EAD7); border: 1px solid #EAD9C0; border-radius: 16px; padding: 24px 20px; text-align: center; } .nf-bonus .nf-bonus-ic { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; margin-bottom: 14px; } .nf-bonus .nf-bonus-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; display: block; } .nf-bonus .nf-bonus-name { display: block; font-family: 'Poppins', sans-serif; font-size: 19px; color: var(--ink, #5C3A1E); margin-bottom: 8px; } .nf-bonus .nf-bonus-desc { display: block; font-size: 14px; line-height: 1.5; color: rgba(92,58,30,.8); } @media (max-width: 820px) { .nf-bonus .nf-bonus-grid { flex-direction: column; gap: 12px; } .nf-bonus .nf-bonus-title { font-size: 21px; } .nf-bonus .nf-bonus-card { display: flex; align-items: flex-start; text-align: left; gap: 14px; padding: 18px; } .nf-bonus .nf-bonus-ic { flex: 0 0 auto; width: 72px; height: 72px; margin-bottom: 0; } .nf-bonus .nf-bonus-txt { flex: 1; } .nf-bonus .nf-bonus-name { margin-bottom: 4px; } }
.desktop-preview > .nf-pay { order: 12; } .phone > .nf-pay { order: 14; } .nf-pay .nf-pay-head { text-align: center; margin: 0 auto 18px; } .nf-pay .nf-pay-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 24px; color: var(--ink, #5C3A1E); margin: 8px 0 0; } .nf-pay .nf-pay-ship { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ink, #5C3A1E); margin: 0 0 18px; } .nf-pay .nf-pay-ship svg { color: var(--red, #C9285D); flex: 0 0 auto; } .nf-pay .nf-pay-ship strong { color: var(--red, #C9285D); } .nf-pay .nf-pay-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 720px; margin: 0 auto; } .nf-pay .nf-pay-pill { display: inline-block; background: #fff; border: 1px solid #EAD9C0; border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--ink, #5C3A1E); } .nf-pay .nf-pay-note { text-align: center; font-size: 13px; color: rgba(92,58,30,.7); margin: 16px 0 0; } @media (max-width: 820px) { .nf-pay .nf-pay-title { font-size: 20px; } .nf-pay .nf-pay-ship { font-size: 15px; } .nf-pay .nf-pay-pill { font-size: 13px; padding: 8px 13px; } }
.nf-pay .nf-pay-certs { margin: 16px auto 0; max-width: 720px; } .nf-pay .nf-pay-certlabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(92,58,30,.55); margin-bottom: 10px; } .nf-pay .nf-pay-certrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; } .nf-pay .nf-cert-logo { height: 60px; width: auto; display: block; } .nf-pay .nf-cert { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #EAD9C0; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--ink, #5C3A1E); } .nf-pay .nf-cert svg { color: var(--red, #C9285D); flex: 0 0 auto; }
.nf-pay .nf-pay-logopill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; background: transparent; border: 0; } .nf-pay .nf-pay-logopill img { width: 44px; height: 44px; object-fit: contain; display: block; }
.desktop-hero h2, .m-hero h2 { font-weight: 900 !important; line-height: 0.95 !important; letter-spacing: -0.5px; color: #fff !important; } .hero-urgency { margin: 0 0 16px; color: #FFCF8E; font-weight: 700; font-size: 15px; line-height: 1.4; } @media (max-width: 820px) { .m-hero h2 { font-size: 30px; margin-bottom: 8px; } .m-hero p { margin-bottom: 8px; } .hero-urgency { font-size: 13px; margin: 0 0 10px; } .m-cta { margin-top: 6px; margin-bottom: 12px; } .m-video { height: 208px; } }
/* TYPOGRAPHY SYSTEM Barlow Condensed + Inter 2026-05-26 */ .desktop-preview, .phone { font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif; } .desktop-hero h2, .m-hero h2, .section h3, .m-section h3, .nf-promo-title, .nf-bonus-title, .nf-pay-title, .nf-pi-head, .nf-pi-head2, .nf-tl-title, .bahan-name, .nf-bonus-name, .nf-benefit-txt strong, .symptom strong, .symptom:has(.symptom-img) strong, .m-pain strong, .nf-tl-time, .nf-tl-num, .nf-cd-num, .nf-stat-num, .package-price, .m-top-alert, .urgency-strip { font-family: 'Poppins', 'Poppins', sans-serif !important; letter-spacing: 0 !important; } .desktop-hero h2 { font-weight: 900 !important; font-size: 78px !important; line-height: 0.9 !important; text-transform: none !important; color: #FAF4EC !important; } .m-hero h2 { font-weight: 900 !important; font-size: 48px !important; line-height: 0.9 !important; text-transform: none !important; color: #FAF4EC !important; } .desktop-hero p { font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 21px !important; line-height: 1.35 !important; color: rgba(250,244,236,0.9) !important; } .m-hero p { font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 17px !important; line-height: 1.35 !important; color: rgba(250,244,236,0.9) !important; } .hero-urgency { font-family: 'Poppins', sans-serif !important; font-weight: 800 !important; line-height: 1.25 !important; color: #FAF4EC !important; } .desktop-hero .hero-urgency { font-size: 18px !important; } .m-hero .hero-urgency { font-size: 16px !important; } .main-cta, .m-cta, .nf-promo-cta, .package-cta, .m-sticky-btn { font-family: 'Poppins', sans-serif !important; font-weight: 900 !important; line-height: 1.1 !important; text-transform: none !important; background: #C9285D !important; color: #fff !important; } .main-cta, .package-cta { font-size: 18px !important; } .m-cta, .nf-promo-cta, .m-sticky-btn { font-size: 16px !important; } .main-cta:hover, .m-cta:hover, .nf-promo-cta:hover, .package-cta:hover, .m-sticky-btn:hover { background: #A01F4A !important; } .section h3 { font-weight: 900 !important; font-size: 34px !important; line-height: 1.0 !important; } .m-section h3 { font-weight: 900 !important; font-size: 26px !important; line-height: 1.05 !important; } .nf-promo-title, .nf-bonus-title, .nf-pay-title, .nf-pi-head, .nf-pi-head2, .nf-tl-title { font-weight: 900 !important; font-size: 42px !important; line-height: 0.95 !important; } .bahan-name, .nf-bonus-name, .nf-benefit-txt strong, .symptom strong, .symptom:has(.symptom-img) strong, .m-pain strong { font-weight: 800 !important; font-size: 32px !important; line-height: 1.0 !important; text-transform: none !important; } .m-pain strong { font-size: 25px !important; } .nf-tl-time, .nf-tl-num, .nf-cd-num, .nf-stat-num { font-weight: 900 !important; } .package-price { font-weight: 900 !important; font-size: 58px !important; line-height: 0.9 !important; color: #C9285D !important; } .faq strong, .m-faq strong { font-family: 'Poppins', sans-serif !important; font-weight: 800 !important; font-size: 18px !important; line-height: 1.25 !important; } .section p, .section-note, .nf-pi-sub, .nf-promo-sub, .nf-pay-note, .nf-bonus-desc, .bahan-benefit, .nf-benefit-txt span, .nf-press-sub, .faq span, .m-faq, .m-pain span { font-family: 'Poppins', sans-serif !important; } .section p { font-weight: 500 !important; font-size: 18px !important; line-height: 1.45 !important; } .hero-point, .nf-tl-list li, .bahan-tag, .trust-badge, .m-proof div, .nf-pay-pill { font-family: 'Poppins', sans-serif !important; font-weight: 800 !important; } .hero-point, .nf-tl-list li { font-size: 16px !important; } .section-label, .m-label, .m-eyebrow, .nf-promo-eyebrow, .nf-pay-certlabel, .secondary-proof, .pkg-tag, .old-price { font-family: 'Poppins', sans-serif !important; } @media (max-width: 820px) { .nf-promo-title, .nf-bonus-title, .nf-pay-title, .nf-pi-head, .nf-pi-head2, .nf-tl-title { font-size: 28px !important; } .bahan-name, .nf-bonus-name, .nf-benefit-txt strong { font-size: 25px !important; } .package-price { font-size: 44px !important; } .faq strong, .m-faq strong { font-size: 16px !important; } .section p { font-size: 16px !important; } .hero-point, .nf-tl-list li { font-size: 14px !important; } }
/* RELIEF JOURNEY TIMELINE 2026-05-26 */ .nf-timeline { background: #FAF4EC !important; } .nf-timeline .nf-tl-head { display: block !important; text-align: center !important; max-width: 640px; margin: 0 auto 26px !important; } .nf-timeline .nf-tl-title { color: #2A1810 !important; margin: 8px 0 0 !important; } .nf-timeline .nf-tl-sub { font-family: 'Poppins', sans-serif !important; font-weight: 500 !important; font-size: 16px; line-height: 1.5; color: #5C3A1E; margin: 12px auto 0; max-width: 560px; } .nf-timeline .nf-tl-journey { position: relative; max-width: 560px; margin: 0 auto; } .nf-timeline .nf-tl-journey::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #C9285D, #BE8A1E); border-radius: 2px; } .nf-timeline .nf-tl-step { position: relative; padding-left: 42px; margin-bottom: 16px; } .nf-timeline .nf-tl-step:last-child { margin-bottom: 0; } .nf-timeline .nf-tl-dot { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #C9285D; display: inline-flex; align-items: center; justify-content: center; color: #fff; z-index: 1; box-shadow: 0 0 0 4px #FAF4EC; } .nf-timeline .nf-tl-dot svg { width: 13px; height: 13px; } .nf-timeline .nf-tl-stepcard { background: #FFFDF8; border: 1px solid #F0E4CE; border-radius: 14px; padding: 15px 18px; box-shadow: 0 6px 16px rgba(42,24,16,0.06); } .nf-timeline .nf-tl-time { display: block !important; font-family: 'Poppins', sans-serif !important; font-weight: 900 !important; font-size: 27px !important; line-height: 1 !important; letter-spacing: 0.5px !important; color: #C9285D !important; margin: 0 0 3px !important; } .nf-timeline .nf-tl-headline { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 17px; line-height: 1.25; color: #2A1810; margin: 0 0 9px; } .nf-timeline .nf-tl-list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .nf-timeline .nf-tl-list li { position: relative !important; padding-left: 20px !important; font-family: 'Poppins', sans-serif !important; font-weight: 500 !important; font-size: 14px !important; line-height: 1.4 !important; color: #5C3A1E !important; margin-bottom: 6px !important; } .nf-timeline .nf-tl-list li:last-child { margin-bottom: 0 !important; } .nf-timeline .nf-tl-list li::before { content: '' !important; position: absolute !important; left: 3px !important; top: 7px !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #BE8A1E !important; } .nf-timeline .nf-tl-list li::after { display: none !important; } .nf-timeline .nf-tl-note { text-align: center; font-family: 'Poppins', sans-serif; font-size: 12px; line-height: 1.5; color: rgba(92,58,30,0.7); max-width: 560px; margin: 22px auto 0; } @media (min-width: 821px) { .nf-timeline .nf-tl-time { font-size: 33px !important; } .nf-timeline .nf-tl-headline { font-size: 20px; } .nf-timeline .nf-tl-list li { font-size: 16px !important; } .nf-timeline .nf-tl-sub { font-size: 18px; } .nf-timeline .nf-tl-stepcard { padding: 18px 22px; } }
/* POPPINS TYPOGRAPHY full-page 2026-05-26 */ .desktop-preview, .desktop-preview *, .phone, .phone * { font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif !important; } .desktop-preview, .phone { font-weight: 500; } .desktop-hero h2 { font-weight: 900 !important; font-size: 72px !important; line-height: 0.95 !important; letter-spacing: -0.5px !important; } .m-hero h2 { font-weight: 900 !important; font-size: 46px !important; line-height: 0.95 !important; letter-spacing: -0.5px !important; } .nf-promo-title, .nf-bonus-title, .nf-pay-title, .nf-pi-head, .nf-pi-head2 { font-weight: 900 !important; font-size: 48px !important; line-height: 1 !important; } .section h3 { font-weight: 900 !important; font-size: 30px !important; line-height: 1.08 !important; } .m-section h3 { font-weight: 900 !important; font-size: 23px !important; line-height: 1.1 !important; } .nf-timeline .nf-tl-title { font-weight: 900 !important; font-size: 32px !important; line-height: 1.05 !important; } .bahan-name, .nf-bonus-name, .nf-benefit-txt strong, .symptom strong, .symptom:has(.symptom-img) strong, .m-pain strong { font-weight: 800 !important; font-size: 28px !important; line-height: 1.1 !important; } .desktop-hero p, .m-hero p, .section p, .nf-pi-sub, .nf-promo-sub, .nf-pay-note, .nf-bonus-desc, .bahan-benefit, .nf-benefit-txt span, .nf-press-sub, .faq span, .m-faq { font-weight: 500 !important; font-size: 18px !important; line-height: 1.4 !important; } .main-cta, .package-cta { font-weight: 900 !important; font-size: 18px !important; } .m-cta, .nf-promo-cta, .m-sticky-btn { font-weight: 900 !important; font-size: 16px !important; } .package-price { font-weight: 900 !important; font-size: 62px !important; line-height: 0.9 !important; } .faq strong, .m-faq strong { font-weight: 800 !important; font-size: 18px !important; line-height: 1.3 !important; } @media (max-width: 820px) { .nf-promo-title, .nf-bonus-title, .nf-pay-title, .nf-pi-head, .nf-pi-head2 { font-size: 32px !important; } .bahan-name, .nf-bonus-name, .nf-benefit-txt strong, .symptom strong, .m-pain strong { font-size: 22px !important; } .desktop-hero p, .m-hero p, .section p, .nf-pi-sub, .nf-promo-sub, .nf-pay-note, .nf-bonus-desc, .bahan-benefit, .nf-benefit-txt span, .nf-press-sub, .faq span, .m-faq { font-size: 16px !important; } .package-price { font-size: 46px !important; } .faq strong, .m-faq strong { font-size: 16px !important; } }
/* Bigger section eyebrow labels (requested 2026-05-26) */ .section-label { font-size: 18px !important; } .m-label { font-size: 15px !important; }
/* Certification documents line above FAQ (2026-05-26) */ .nf-certdoc { text-align: center; max-width: 940px; margin: 0 auto 28px; } .nf-certdoc-row { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 14px; } .nf-certdoc-item { width: 100%; max-width: 900px; margin: 0 auto; display: block; text-decoration: none; } .nf-certdoc-item img { width: 100%; height: auto; border: 0; box-shadow: none; border-radius: 6px; display: block; } .nf-certdoc-cap { display: none; } @media (max-width: 820px) { .nf-certdoc-item { max-width: 330px; } }
/* FREE COD/postage red callout + FAQ dropdown (accordion) - 2026-05-26 */ .nf-pay .nf-pay-free { text-align: center; color: var(--red, #C9285D) !important; font-weight: 900 !important; font-size: 19px !important; line-height: 1.25 !important; margin: 2px 0 14px; letter-spacing: .3px; } @media (max-width: 820px) { .nf-pay .nf-pay-free { font-size: 17px !important; margin: 2px 0 12px; } } .faq, .m-faq { cursor: pointer; } .faq strong, .m-faq strong { position: relative; margin-bottom: 0 !important; padding-right: 26px; } .faq strong::after, .m-faq strong::after { content: ""; position: absolute; right: 2px; top: 7px; width: 8px; height: 8px; border-right: 2px solid var(--red, #C9285D); border-bottom: 2px solid var(--red, #C9285D); transform: rotate(45deg); transition: transform .25s ease; pointer-events: none; } .faq.nf-open strong::after, .m-faq.nf-open strong::after { transform: rotate(-135deg); } .faq .nf-faq-a, .m-faq .nf-faq-a { display: block; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease; } .faq.nf-open .nf-faq-a, .m-faq.nf-open .nf-faq-a { max-height: 500px; opacity: 1; margin-top: 8px; }
.offer-section .package-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:24px!important;max-width:960px;margin:0 auto}.offer-section .package{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;cursor:pointer;display:flex!important;flex-direction:column}.offer-section .package>*:not(.package-img):not(.nf-stock):not(.nf-buybtn){display:none!important}.offer-section .package .package-img{margin:0!important;padding:0!important;border:0!important;border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(42,24,16,.12);transition:transform .2s ease,box-shadow .2s ease}.offer-section .package:hover .package-img{transform:translateY(-4px);box-shadow:0 16px 40px rgba(42,24,16,.18)}.offer-section .package .package-img img{width:100%!important;height:auto!important;display:block!important;border-radius:0!important}@media(max-width:820px){.offer-section .package-grid{grid-template-columns:1fr!important}}.m-offer .m-package{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;cursor:pointer;display:flex!important;flex-direction:column;margin-bottom:22px}.m-offer .m-package>*:not(.m-package-img):not(.nf-stock):not(.nf-buybtn){display:none!important}.m-offer .m-package .m-package-img{margin:0!important;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(42,24,16,.12)}.m-offer .m-package .m-package-img img{width:100%!important;height:auto!important;display:block!important}.nf-stock{display:flex!important;align-items:center;justify-content:center;gap:7px;margin:12px 0 0!important;font-family:Poppins,sans-serif;font-weight:700;font-size:14px;color:#C9285D}.nf-stock-dot{width:9px;height:9px;border-radius:50%;background:#C9285D;animation:nfpulse 1.1s infinite}.nf-stock b{font-weight:800}@keyframes nfpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}.nf-buybtn{display:block!important;text-align:center;margin:10px 0 0!important;background:#C9285D!important;color:#fff!important;font-family:Poppins,sans-serif;font-weight:800;font-size:17px;padding:15px 18px;border-radius:999px;text-decoration:none;box-shadow:0 8px 20px rgba(201,40,93,.25);transition:background .15s ease}.nf-buybtn:hover{background:#A01F4A!important}#nf-fomo{position:fixed;left:16px;bottom:16px;z-index:99999;transform:translateY(160%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .35s ease;max-width:310px}#nf-fomo.show{transform:translateY(0);opacity:1}.nf-fomo-card{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #EAD9C0;border-radius:14px;padding:11px 15px;box-shadow:0 12px 34px rgba(42,24,16,.2);font-family:Poppins,sans-serif}.nf-fomo-tick{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#1FA463;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}.nf-fomo-txt{display:flex;flex-direction:column;line-height:1.3}.nf-fomo-txt b{font-size:13px;color:#2A1810}.nf-fomo-txt span{font-size:12px;color:#5C3A1E}@media(max-width:820px){#nf-fomo{left:10px;right:10px;bottom:78px;max-width:none}}