/* colors_and_type.css */
/* =============================================================
   WealthArc — Design Tokens
   Calibrated from the live Position Profit sales page screenshots.
   WealthArc is the primary customer-facing brand (Deep Pockets is
   the community concept; it does not have its own logo).
   Import once:  <link rel="stylesheet" href="/colors_and_type.css" />
   Then set class="dp-surface" on a root element.
   ============================================================= */

/* ---------- Fonts ----------
   Entire system uses Poppins (400/600/800) from Google Fonts.
   Drop real TTFs in /fonts/ and override via @font-face to swap later.
----------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,800&display=swap');

:root {
  /* ---------- Brand Gold Scale ---------- */
  /* Calibrated from the live site — gold is used as TEXT highlight color
     inside headlines and for accent labels, NOT as a button fill. */
  --gold-50:  #FBF4D8;
  --gold-100: #F3E4A8;
  --gold-200: #E8CC6A;   /* accent pill fill */
  --gold-300: #D6B64A;   /* headline highlight (main brand gold) */
  --gold-400: #C7A435;
  --gold-500: #B5932E;
  --gold-600: #8E7220;
  --gold-700: #6A5517;
  --gold-800: #3F320D;
  --gold-900: #1E1806;

  /* ---------- CTA Yellow (solid, NOT gradient) ---------- */
  /* The real "Yes! Get Instant Access" button is a flat saturated yellow. */
  --cta-yellow:        #FFD90E;
  --cta-yellow-hover:  #FFE045;
  --cta-yellow-shadow: #B89400;

  /* ---------- Neutrals (Warm-brown forward) ---------- */
  /* Page background is NOT black — it's a very dark brown that warms toward
     olive where the hex-globe glow hits. */
  --black:     #000000;
  --bg-nav:    #0A0806;   /* pure top nav bar */
  --ink-950:   #120C06;   /* page background (dark brown-black) */
  --ink-900:   #1C140A;   /* elevated */
  --ink-800:   #2A1F10;
  --ink-700:   #3A2E17;
  --ink-600:   #5B4820;
  --ink-500:   #7A6330;
  --ink-400:   #A68A4E;
  --ink-300:   #C7AD72;
  --ink-200:   #E2D3A4;
  --ink-100:   #F3ECD3;
  --white:     #FFFFFF;
  --off-white: #F6F3EA;   /* pricing card bg (creamy, not pure white) */

  /* Hero brown gradient — matches the main page body around the video */
  --bg-hero-grad:
    radial-gradient(ellipse 80% 60% at 80% 40%, #5B4820 0%, #2A1F10 35%, #120C06 75%);
  --gold-bar-grad: linear-gradient(100deg, #EBD58A 0%, #D6B864 50%, #B48E38 100%); /* @kind color */
  --navy-900:   #0B1730;   /* New Way / Strategy boxes */
  --red-700:    #B3261E;   /* Old Way header */
  --red-50:     #FDE3E5;   /* Old Way box fill */
  --trust-blue: #2F6FE4;   /* "Everything included" border */
  --cream-strip:#FFF4D6;   /* money-back strip */
  --trustpilot: #00B67A;
  --bg-page-grad:
    linear-gradient(180deg, #120C06 0%, #1C140A 100%);

  /* ---------- Semantic colors ---------- */
  --success:      #2FB46A;  /* green checkmark circle on feature bullets */
  --success-text: #0E8E4A;  /* "Now Available For Instant Access" dark green */
  --danger:       #C8241B;  /* red banners ("Early Bird...", "90 Day...") */
  --danger-dark:  #8E160F;
  --price-red:    #D63A2F;  /* "ONLY $27.00 TODAY" */
  --link-teal:    #0B6E97;  /* underlined teal links on white card */

  /* ---------- Foreground / Background aliases ---------- */
  --bg:           var(--ink-950);
  --bg-elevated:  var(--ink-900);
  --bg-raised:    var(--ink-800);
  --bg-card:      var(--off-white);   /* pricing-card surface */

  --fg:           #FFFFFF;            /* white on dark */
  --fg-muted:     rgba(255,255,255,0.82);
  --fg-subtle:    rgba(255,255,255,0.55);
  --fg-faint:     rgba(255,255,255,0.30);
  --fg-gold:      var(--gold-300);    /* headline highlight color */
  --fg-on-card:   #1A1406;            /* near-black on white card */
  --fg-on-yellow: #0A0806;            /* black on yellow CTA */

  --border:       rgba(255,255,255,0.08);
  --border-gold:  rgba(216,182,74,0.55);
  --border-eyebrow: rgba(216,182,74,0.85);

  /* ---------- Typography ---------- */
  --font-logo-sans:  'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo-serif: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-display:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-serif:      'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:       'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-heavy:    800; /* @kind font */

  /* Type scale — tuned to the live site's compact hero */
  --fs-display: clamp(34px, 3.6vw, 52px); /* @kind font */
  --fs-h1:      clamp(28px, 3vw, 42px); /* @kind font */
  --fs-h2:      clamp(24px, 2.4vw, 34px); /* @kind font */
  --fs-h3:      22px; /* @kind font */
  --fs-h4:      18px; /* @kind font */
  --fs-lg:      18px; /* @kind font */
  --fs-body:    16px; /* @kind font */
  --fs-sm:      14px; /* @kind font */
  --fs-xs:      12px; /* @kind font */

  --lh-display: 1.22; /* @kind font */
  --lh-heading: 1.25; /* @kind font */
  --lh-body:    1.55; /* @kind font */

  --tracking-eyebrow: 0.015em; /* @kind font */
  --tracking-tight:  -0.005em; /* @kind font */

  /* ---------- Radii ---------- */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;
  --r-card: 10px;      /* pricing card has a small radius — not pillowy */

  /* ---------- Spacing scale ---------- */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px; --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---------- Shadows & glows ---------- */
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 14px 40px rgba(0,0,0,0.5);
  --shadow-price-card:
    0 0 0 2px rgba(216,182,74,0.6),   /* thin gold border */
    0 18px 50px rgba(0,0,0,0.45);
  --shadow-cta:
    0 3px 0 var(--cta-yellow-shadow),  /* solid bottom edge, no soft drop */
    0 6px 14px rgba(0,0,0,0.35);
  --shadow-cta-hover:
    0 2px 0 var(--cta-yellow-shadow),
    0 8px 18px rgba(0,0,0,0.45);
  --glow-hex:
    0 0 80px rgba(216,182,74,0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---------- Layout ---------- */
  --container: 1100px; /* @kind spacing */
  --gutter:    24px; /* @kind spacing */
  --z-nav:     40; /* @kind other */
  --z-overlay: 60; /* @kind other */
  --z-modal:   80; /* @kind other */
}

/* =============================================================
   SEMANTIC ELEMENTS
   ============================================================= */

.dp-surface,
.dp-surface * {
  font-family: var(--font-body);
  box-sizing: border-box;
}

.dp-surface {
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headlines: sans, heavy, with inline gold highlights --- */
.dp-display, h1.dp-display {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-align: center;
  margin: 0 0 var(--s-5);
}
.dp-display .gold,
.dp-h1 .gold, .dp-h2 .gold,
h1 .gold, h2 .gold {
  color: var(--fg-gold);     /* solid gold, not gradient */
}

.dp-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--fg);
  margin: 0 0 var(--s-4);
}
.dp-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg-gold);     /* section headers are GOLD by default */
  margin: 0 0 var(--s-4);
  text-align: center;
}
.dp-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg);
  margin: 0 0 var(--s-3);
}
.dp-h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
  margin: 0 0 var(--s-2);
}

.dp-subhead {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-align: center;
  margin: 0 0 var(--s-6);
}

.dp-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  margin: 0 0 var(--s-4);
}

.dp-small { font-size: var(--fs-sm); color: var(--fg-muted); }
.dp-caption {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.dp-mono { font-family: var(--font-mono); font-size: 0.95em; }

/* "Limited Time Pricing"-style serif headline (used inside white card) */
.dp-serif-heading {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-style: normal;
  font-size: 26px;
  color: #1A1406;
  text-align: center;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.dp-serif-heading::after {
  /* hand-drawn red underline swoosh */
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  bottom: 0;
  height: 6px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%,
    var(--danger) 0%, var(--danger) 40%, transparent 70%);
  transform: rotate(-1deg) translateY(2px);
}

/* --- Gold eyebrow pill --- */
.dp-eyebrow-pill {
  display: inline-block;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #F3E4A8 0%, #D6B64A 60%, #A68A4E 100%);
  color: #2A1F10;
  border: 1.5px solid rgba(74, 54, 12, 0.5);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: var(--tracking-eyebrow);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(255,255,255,0.4);
}

/* --- Primary CTA: solid yellow, sharp-ish corners, black text --- */
.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: 18px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.dp-btn-primary {
  background: var(--cta-yellow);
  color: var(--fg-on-yellow);
  box-shadow: var(--shadow-cta);
  border: 1px solid var(--cta-yellow-shadow);
}
.dp-btn-primary:hover {
  background: var(--cta-yellow-hover);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
.dp-btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cta-yellow-shadow);
}
.dp-btn-primary .arrow {
  width: 24px; height: 24px; border-radius: 999px;
  background: #0A0806; color: #FFD90E;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.dp-btn-primary .sub {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  margin-top: 2px;
}

.dp-btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1.5px solid rgba(255,255,255,0.25);
  box-shadow: none;
}
.dp-btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.4); }

/* --- Cards --- */
.dp-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.dp-price-card {
  background: var(--off-white);
  color: var(--fg-on-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-price-card);
  padding: 20px;
}

/* Red banners (Early Bird / Money Back) */
.dp-danger-banner {
  background: var(--danger);
  color: #fff;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: 16px;
  text-align: center;
  border-radius: 2px;
}

/* Green checkmark bullet row */
.dp-check-list { list-style: none; padding: 0; margin: 0; }
.dp-check-list li {
  display: flex; gap: 12px;
  padding: 10px 0;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.5;
}
.dp-check-list li::before {
  content: "";
  flex: 0 0 22px; height: 22px; margin-top: 2px;
  border-radius: 999px;
  background: var(--success);
  /* checkmark drawn as inline svg via mask — simple approach: use ✓ unicode, styled */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
.dp-check-list li b { color: #fff; font-weight: var(--fw-bold); }

/* Testimonial quote chip (white block, heavy type) — kept from earlier */
.dp-quote-chip {
  display: inline-block;
  padding: 6px 12px;
  background: #FFFFFF;
  color: var(--fg-on-card);
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: 15px;
  line-height: 1.35;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.dp-name-chip {
  display: inline-block;
  padding: 7px 14px;
  background: var(--gold-200);
  color: var(--fg-on-card);
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: 15px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.dp-chip-danger {
  display: inline-block;
  padding: 7px 14px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: 15px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Logo lockup */
.dp-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-logo-sans);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
.dp-logo .arc {
  font-family: var(--font-logo-serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-left: 1px;
  font-size: 0.82em;
  position: relative;
  top: -0.02em;
}

/* Focus ring */
.dp-surface :focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
  border-radius: inherit;
}
.dp-surface ::selection {
  background: var(--gold-300);
  color: #1A1406;
}

/* sales_page.css */
/* Page-level styles for the sales page — calibrated to the live Position Profit page */
.page {
  background: #120C06;
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== Nav — black bar, logo left, contact right ===== */
.nav {
  background: #0A0806;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
}
.nav-inner .logo { display: inline-flex; align-items: center; max-height: 28px; }
.nav-inner .logo img { height: 24px; max-height: 24px; width: auto; max-width: 180px; display: block; object-fit: contain; }
.nav-inner .contact {
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
}

/* ===== Hero — dark brown with subtle hex glow ===== */
.hero {
  position: relative;
  padding: 30px 24px 40px;
  background:
    radial-gradient(ellipse 60% 80% at 100% 30%, rgba(216,182,74,0.22) 0%, rgba(216,182,74,0) 55%),
    radial-gradient(ellipse 80% 60% at 100% 90%, rgba(216,182,74,0.10) 0%, rgba(216,182,74,0) 60%),
    linear-gradient(180deg, #0A0806 0%, #120C06 40%, #1C140A 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('/hex-globe-bg.png');
  background-size: 55% auto;
  background-position: 105% 60%;
  background-repeat: no-repeat;
  opacity: 0.28;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-inner { max-width: 1100px; margin: 0 auto; position: relative; }

.hero-eyebrow-wrap { text-align: center; margin-bottom: 14px; }

.hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.9vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.003em;
  color: #fff;
  text-align: center;
  margin: 0 auto 12px;
  max-width: 920px;
}
.hero-headline .gold { color: var(--gold-300); }
.hero-sub {
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin: 0 auto 26px;
  max-width: 720px;
}

/* Two-column: video left, pricing card right */
.hero-cols {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Vidalytics VSL + lazy testimonial players */
.vsl-box{background:#000;box-shadow:0 0 0 2px rgba(187,156,51,.6),0 18px 50px rgba(0,0,0,.5)}
.vid-poster{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;background:#000 center/cover no-repeat}
.vid-poster .vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:999px;background:rgba(187,156,51,.92);box-shadow:0 6px 18px rgba(0,0,0,.5);transition:transform 160ms ease}
.vid-poster:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid-poster .vid-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.wistia-hit{position:absolute;inset:0;z-index:3;border:0;padding:0;margin:0;background:transparent;cursor:pointer}
.wistia-hit .vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:999px;background:rgba(187,156,51,.92);box-shadow:0 6px 18px rgba(0,0,0,.5);transition:transform 160ms ease}
.wistia-hit:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.wistia-hit .vid-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.wistia-frame{position:absolute;inset:0;z-index:4;width:100%;height:100%;background:#000;border:0}
/* Video placeholder */
.video-box {
  background: #000;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.video-box .play {
  width: 74px; height: 52px; border-radius: 10px;
  background: #D63A2F;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.video-box .play::after {
  content: ""; width: 0; height: 0;
  border-left: 18px solid #fff;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  margin-left: 5px;
}

/* Body content under video */
.hero-body {
  margin-top: 36px;
  padding-right: 12px;
}
.hero-body h2 {
  font-family: var(--font-display); font-weight: 800;
  color: var(--gold-300);
  font-size: clamp(22px, 2.2vw, 30px);
  text-align: center;
  margin: 0 0 24px;
}
.hero-body p {
  color: rgba(255,255,255,0.88);
  font-size: 16px; line-height: 1.6;
  margin: 0 0 16px;
}

/* ===== Pricing card (cream) ===== */
.price-card {
  background: #FAF5E6;
  border-radius: 4px;
  padding: 22px;
  color: #1A1406;
  box-shadow: 0 0 0 2px rgba(216,182,74,0.7), 0 18px 50px rgba(0,0,0,0.45);
}
.price-title-wrap { text-align: center; margin-bottom: 14px; }
.price-title {
  font-family: var(--font-serif); font-weight: 700;
  color: #1A1406; font-size: 26px;
  position: relative; display: inline-block; padding-bottom: 8px;
}
.price-title::after {
  content: ""; position: absolute;
  left: 4%; right: 4%; bottom: -4px; height: 10px;
  background: url('/red-underline.png') center / 100% 100% no-repeat;
}
.price-banner {
  background: #C8241B; color: #fff; text-align: center;
  padding: 12px 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  line-height: 1.25; border-radius: 2px; margin-bottom: 14px;
}
.price-stack {
  background: #1F1608;
  border-radius: 4px;
  padding: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  height: 170px;
}
.price-stack img { max-height: 100%; max-width: 100%; object-fit: contain; }
.price-line-red {
  color: #D63A2F;
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; margin-bottom: 4px;
}
.price-meta { color: #1A1406; font-size: 14.5px; line-height: 1.55; margin-bottom: 2px; }
.price-meta.small { font-size: 13px; margin-top: 8px; color: #333; }
.price-meta .strike { color: #333; text-decoration: line-through; font-weight: 600; }
.price-meta u, .price-meta a { color: #0B6E97; }
.price-available {
  color: #0E8E4A; font-weight: 700; font-size: 15px;
  margin: 12px 0 4px;
}
.price-arrow { text-align: center; color: #C8241B; font-size: 30px; line-height: 1; margin-bottom: 10px; font-weight: 900; }
.price-email {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid #c9c4b5; border-radius: 6px;
  font-family: var(--font-body); font-size: 15px;
  color: #333; margin-bottom: 12px;
  background: #fff;
}
.price-cta {
  width: 100%; box-sizing: border-box;
  padding: 18px; border: 1px solid var(--cta-yellow-shadow);
  background: var(--cta-yellow); color: #0A0806;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  border-radius: 10px; cursor: pointer;
  box-shadow: var(--shadow-cta);
  display: flex; flex-direction: column; align-items: center;
  transition: transform 120ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.price-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-cta-hover); }
.price-cta .row { display: inline-flex; align-items: center; gap: 10px; }
.price-cta .arrow-chip {
  width: 22px; height: 22px; border-radius: 999px;
  background: #0A0806; color: #FFD90E;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.price-cta .sub {
  font-family: var(--font-body); font-style: italic; font-weight: 600;
  font-size: 13px; color: rgba(0,0,0,0.55);
  margin-top: 3px;
}
.price-secure {
  text-align: center; font-size: 12.5px; color: #555; font-weight: 600;
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%; justify-content: center;
}
.mbg-strip {
  background: #FFF4D6; border-radius: 6px; padding: 12px;
  margin-top: 14px;
  display: flex; gap: 12px; align-items: center;
}
.mbg-seal { flex: 0 0 60px; width: 60px; height: 60px; background: url('/guarantee-seal.png') center / contain no-repeat; font-size: 0; }
.mbg-text { font-size: 13px; color: #1A1406; line-height: 1.4; }
.mbg-text b { font-weight: 700; }

.trustpilot-strip { text-align: center; margin-top: 14px; font-size: 13px; color: #1A1406; }
.trustpilot-strip .stars { color: #00B67A; letter-spacing: 2px; font-size: 14px; }

/* ===== Benefits section (green checks) ===== */
.benefits {
  padding: 40px 24px 60px;
  background: linear-gradient(180deg, #1C140A 0%, #120C06 100%);
}
.benefits-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 32px; align-items: start;
}
.benefits-col h2 {
  font-family: var(--font-display); font-weight: 800;
  color: var(--gold-300); font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25; margin: 0 0 22px;
}
.benefits-col p {
  color: rgba(255,255,255,0.88); font-size: 16px; line-height: 1.6;
  margin: 0 0 14px;
}

/* Included sidebar */
.included {
  background: transparent;
  border: 2px solid #1A73E8;
  border-radius: 4px;
  padding: 18px;
}
.included h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; color: #fff; letter-spacing: 0.02em;
  text-align: center; margin: 0 0 14px;
}
.included-stack {
  background: #1F1608; border-radius: 4px; padding: 12px; margin-bottom: 12px;
  height: 150px; display: flex; align-items: center; justify-content: center;
}
.included-stack img { max-height: 100%; max-width: 100%; object-fit: contain; }
.included-count {
  text-align: center; font-family: var(--font-display); font-weight: 800;
  color: #fff; font-size: 16px; margin: 10px 0 14px; letter-spacing: 0.02em;
}
.included-item {
  background: #FAF5E6; color: #1A1406;
  border-radius: 4px; padding: 14px; margin-bottom: 12px;
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start;
}
.included-item .thumb {
  width: 64px; height: 56px; border-radius: 4px;
  background: #1F1608;
}
.included-item h4 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; margin: 0 0 4px; color: #1A1406;
}
.included-item p {
  font-size: 12px; line-height: 1.4; color: #333; margin: 0;
}
.included-item .foot {
  grid-column: 1 / -1;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.15);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #555;
}
.included-item .foot .price { color: var(--price-red); font-weight: 800; }
.included-item .foot .price s { color: #999; font-weight: 500; margin-right: 4px; }

/* ===== Sticky bottom bar ===== */
.sticky-bar {
  position: sticky; bottom: 0; z-index: 30;
  background: #E8E4D8; border-top: 1px solid rgba(0,0,0,0.1);
  padding: 10px 20px;
}
.sticky-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 16px;
  align-items: center;
}
.sticky-stack { height: 60px; width: 120px; background: transparent; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sticky-stack img { max-height: 100%; max-width: 100%; object-fit: contain; }
.sticky-cta {
  background: var(--cta-yellow); color: #0A0806;
  border: 1px solid var(--cta-yellow-shadow);
  padding: 10px 18px; border-radius: 4px; text-decoration: none;
  text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  box-shadow: var(--shadow-cta);
  display: flex; flex-direction: column; align-items: center;
}
.sticky-cta .sub { font-family: var(--font-body); font-weight: 600; font-style: italic; font-size: 11px; color: rgba(0,0,0,0.65); margin-top: 2px; }
.sticky-mbg {
  display: grid; grid-template-rows: auto auto; gap: 6px;
}
.sticky-mbg .banner {
  background: #E26A60; color: #fff;
  padding: 6px 10px; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  border-radius: 2px;
}
.sticky-mbg .line {
  font-size: 11px; color: #1A1406; line-height: 1.35; text-align: center;
}
.sticky-mbg .line u { color: #0B6E97; }
.sticky-mbg .line s { color: #999; }

@media (max-width: 860px) {
  .hero-cols, .benefits-inner { grid-template-columns: 1fr; }
  .sticky-inner { grid-template-columns: 1fr; }
  .sticky-stack { display: none; }
  .sticky-bar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .sticky-mbg { display: none; }
  .sticky-cta { padding: 10px 12px; font-size: 15px; }
  .hero { padding: 22px 16px 32px; }
  .hero-cols { gap: 24px; }
}
.cd{display:flex;flex-direction:column;gap:8px}.cd-h{font-size:15px}.cd-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.cd-cell{display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.18);border-radius:4px;padding:6px 2px}.cd-cell b{font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}.cd-cell span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.9}

/* sections.css */
/* Sections below the hero. Component styling lives in /components; this file only lays out the page. */
.benefits{background:#000}
.benefits-col h2{text-align:center}
.benefits-col p{color:#fff}
.ways-wrap{margin:28px 0 32px}
.results h2{margin:56px 0 28px}
.t-list{display:flex;flex-direction:column;gap:28px;margin-bottom:28px}

.included{background:#fff;border:3px solid var(--trust-blue);border-radius:6px;padding:20px 18px;color:#1A1406}
.included h3{color:#1A1406;font-size:22px;line-height:1.15;margin:0 0 10px}
.included-stack{background:transparent;height:auto;padding:0;margin:0 0 10px}
.included-stack img{width:100%;height:auto;max-height:none}
.included-count{color:#1A1406;font-size:18px;margin:4px 0 0;padding-bottom:14px;border-bottom:1px solid #E3DED0}
.inc-close{text-align:center;padding-top:22px;display:flex;flex-direction:column;gap:8px}
.inc-close .few{font-weight:600;font-size:14px;letter-spacing:.02em}
.inc-close .only{color:#E0201B;font-weight:700;font-size:22px}
.inc-close .save{font-weight:700;font-size:18px}
.inc-close .desc{font-size:13.5px;line-height:1.5;color:#333}
.inc-close .avail{color:#2B9A3E;font-weight:700;font-size:14px}
.inc-close .price-email{margin-bottom:4px}
.stars-row{display:flex;gap:4px;justify-content:center}
.stars-row img{height:22px;width:auto;display:block}

.final-sec{background:#000;padding:56px 24px 80px;text-align:center}
.final-inner{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.final-kicker{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;text-transform:uppercase;color:#fff}
.final-kicker .rec{width:16px;height:16px;border-radius:999px;background:radial-gradient(circle,#fff 0 3px,#E0201B 4px);flex:none}
.final-sec h2{color:#fff;font-size:clamp(24px,2.6vw,32px);line-height:1.2;margin:0;max-width:760px}
.final-sec p{color:#fff;font-size:17px;line-height:1.55;max-width:960px;margin:0}
.final-stack{width:100%;max-width:960px;margin:12px 0}
.final-cta-wrap{width:100%;max-width:780px}
.final-link{color:#3B82F6;text-decoration:underline;font-size:15px}
.final-link:hover{color:#60A5FA}
.final-guar{display:inline-flex;gap:10px;align-items:center;font-variant:small-caps;font-size:17px;letter-spacing:.04em;color:#fff}

@media (max-width:860px){.final-link{display:inline-block;padding:12px 4px}.final-sec{padding:44px 16px 64px}}

/* letter.css */
/* Long-form letter section (white page + gray sidebar) */
.letter-sec{background:#fff;color:#1A1406;padding:48px 24px 72px}
.lt-head{max-width:1000px;margin:0 auto 28px;text-align:center;display:flex;flex-direction:column;gap:14px}
.lt-head h2{color:#D0121B;font-size:clamp(24px,2.8vw,34px);line-height:1.3;margin:0;font-weight:800;text-wrap:balance}
.lt-head .lt-sub{font-weight:700;font-size:15px;color:#1A1406;line-height:1.45;margin:0}
.lt-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.lt-tab{display:inline-block;background:#0A0806;color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em;padding:8px 24px;border-radius:4px 4px 0 0;margin-left:16px}
.lt-main{background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.12);border-radius:4px;padding:28px 32px 36px;display:flex;flex-direction:column;gap:14px}
.lt-main p{margin:0;font-size:15.5px;line-height:1.6;color:#222}
.lt-main h3{font-size:clamp(20px,2vw,26px);font-weight:800;text-align:center;color:#1A1406;line-height:1.3;margin:22px 0 4px;text-wrap:balance}
.lt-greet{display:flex;flex-direction:column;gap:2px}
.lt-greet p{font-size:14.5px}
.lt-shot{position:relative;width:100%;height:auto;min-height:0;margin:0 auto;overflow:hidden}
.lt-divider{height:2px;background:var(--trust-blue);margin:18px 0}
.lt-offer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.lt-offer h3{margin:0}
.lt-kick{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;text-transform:uppercase;color:#1A1406}
.lt-price{font-weight:800;font-size:20px;color:#1A1406}
.lt-price .red{color:#E0201B}
.lt-small{font-size:13.5px;line-height:1.5;color:#333}
.lt-link{color:#2563EB;text-decoration:underline;font-size:13.5px}
.lt-link:hover{color:#1D4ED8}
.lt-guar{font-variant:small-caps;letter-spacing:.04em;font-size:15px;color:#1A1406}
.lt-secure{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;align-items:center;font-size:12.5px;color:#555;font-weight:600;max-width:100%}.lt-secure img{max-width:100%;height:auto}

.lt-side{background:#F4F4F4;padding:20px 16px;display:flex;flex-direction:column}
.lt-side h4{font-weight:800;font-size:16px;text-align:center;line-height:1.3;margin:0 0 10px;color:#1A1406;text-transform:uppercase}
.lt-side-stack{width:100%;display:block}
.lt-bullet{padding:16px 0;border-bottom:1px solid #DDD;font-size:13.5px;line-height:1.5;color:#222}
.lt-bullet b{font-weight:700}
.lt-bullet .mod{display:block;color:#E0201B;font-size:12px;margin-top:8px}
.lt-vid{padding:16px 0;border-bottom:1px solid #DDD;display:flex;flex-direction:column;gap:8px;align-items:center}
.lt-vid .cap{font-variant:small-caps;font-size:13px;letter-spacing:.03em;color:#1A1406}
.lt-sideoffer{padding:18px 0;border-bottom:2px solid var(--trust-blue);text-align:center;display:flex;flex-direction:column;gap:8px}
.lt-sideoffer .t{font-weight:800;font-size:15px;line-height:1.3;text-transform:uppercase}
.lt-sideoffer .s{font-weight:700;font-size:11.5px;text-transform:uppercase}
.lt-sideoffer .only{color:#E0201B;font-weight:700;font-size:19px}
.lt-sideoffer .save{font-weight:700;font-size:16px}
.lt-sideoffer .avail{color:#2B9A3E;font-weight:700;font-size:13px}
.lt-why{padding:18px 0;border-bottom:2px solid #C9A64E;display:flex;flex-direction:column;gap:10px;text-align:center}
.lt-why .lead{font-size:13.5px;line-height:1.5;color:#222}
.lt-why .body{font-size:13.5px;line-height:1.5;color:#222;text-align:left}
.lt-why .bold{font-weight:700;font-size:13.5px;line-height:1.5;text-align:left}
.lt-more{padding-top:18px}
.lt-getting{padding-top:18px}
.lt-total{text-align:center;padding:18px 0;display:flex;flex-direction:column;gap:8px;border-top:1px dotted #999;border-bottom:1px dotted #999}
.lt-total .tv{color:#2B9A3E;font-weight:700;font-size:18px}
.lt-total .yt{font-weight:800;font-size:14px}
.lt-total .sv{font-size:12px;color:#333}
.lt-step{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;padding:16px 0;border-bottom:1px dotted #999}
.lt-faq{padding:18px 0;display:flex;flex-direction:column;gap:14px}
.lt-faq h4{margin:0}
.lt-qa{display:flex;flex-direction:column;gap:4px}
.lt-q{color:#E0201B;font-weight:700;font-size:14px;line-height:1.35;display:flex;gap:6px;align-items:flex-start}
.lt-q .qi{flex:none;width:15px;height:15px;border-radius:999px;background:#E0201B;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.lt-a{font-size:12.5px;line-height:1.5;color:#222}

@media (max-width:860px){.lt-grid{grid-template-columns:1fr}.lt-main{padding:22px 18px}.letter-sec{padding:36px 12px 56px}.lt-link{display:inline-block;padding:12px 4px}.lt-a{font-size:14px}.lt-small{font-size:13px}}
.lt-main p.lt-disc,.lt-disc{margin:-4px auto 4px;max-width:560px;text-align:center;font-size:12px;font-style:italic;line-height:1.45;color:#666}

/* page-close.css */
/* Guarantee box (shared by letter + closing sections) */
.gb-box{padding:22px 24px;display:flex;flex-direction:column;gap:6px;color:#1A1406;text-align:left;width:100%;box-sizing:border-box}
.gb-box p{margin:0;font-size:14px;line-height:1.55;color:#1A1406}
.gb-top{display:flex;gap:18px;align-items:flex-start}
.gb-lines{display:flex;flex-direction:column;gap:6px}

/* Closing sections */
.pc-sec{background:#fff;padding:56px 24px;color:#1A1406}
.pc-gray{background:#F4F4F4}
.pc-inner{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.pc-h{font-size:clamp(26px,3vw,38px);font-weight:800;color:#2B3036;line-height:1.2;margin:0}
.pc-h2{font-size:clamp(20px,2.2vw,28px);font-weight:800;color:#2B3036;line-height:1.3;margin:16px 0 0;max-width:860px}
.pc-note{font-size:12px;color:#444}
.pc-stack{width:100%;max-width:560px}
.pc-rule{width:120px;height:2px;background:#1A1406}
.pc-red{color:#E0201B;font-weight:700;font-size:15px;margin-top:20px}
.inc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;text-align:left}
.inc-card{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12);padding:10px;display:flex;flex-direction:column;gap:10px}
.inc-card .bar,.bn-card .bar{background:#B8952E;color:#fff;font-size:11px;font-weight:600;text-align:center;padding:5px;letter-spacing:.02em}
.inc-card .row,.bn-card .row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start}
.inc-card img,.bn-card img{width:64px;height:auto}
.inc-card h4,.bn-card h4{margin:0 0 4px;font-size:15px;font-weight:800;line-height:1.2;color:#1A1406}
.inc-card p,.bn-card p{margin:0;font-size:12.5px;line-height:1.45;color:#333}
.bn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;width:100%;text-align:left;margin-bottom:12px}
.bn-card{display:flex;flex-direction:column;gap:12px}
.bn-card .bar{background:#2B2B2B;font-size:17px;font-weight:700;padding:7px}
.bn-card .row{grid-template-columns:76px minmax(0,1fr);gap:18px;padding-left:4px}
.bn-card img{width:76px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.vid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:100%;max-width:860px}
.vid-grid .lt-shot{max-width:none !important;aspect-ratio:16 / 9 !important}
.exp-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;width:100%;max-width:860px;text-align:left}
.exp-grid img{width:100%}
.exp-list{display:flex;flex-direction:column;gap:16px}
.exp-list p{margin:0;font-size:13px;color:#1A1406}
.exp-item{display:flex;gap:6px;font-size:12.5px;line-height:1.5;color:#1A1406}
.exp-item .arr{color:#2B9A3E;font-weight:800;flex:none}
.yl-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.yl-cta{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:700px;box-sizing:border-box;background:#FFC700;border:1px solid #E0A800;padding:12px 16px;text-decoration:none;transition:filter 160ms ease}
.yl-cta:hover{filter:brightness(1.05)}
.yl-cta .m{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#1E2A4A;font-weight:700;font-size:clamp(15px,1.8vw,19px);line-height:1.2;text-align:center}
.yl-cta .s{font-size:11px;color:#4A4A4A}
.yl-link{font-size:11px;color:#1D4ED8;text-decoration:underline;font-weight:700}
.fq-list{display:flex;flex-direction:column;gap:14px;width:100%;text-align:left}
.fq-item{background:#fff;border:1px solid #C9A64E;border-radius:10px;padding:16px 18px}
.fq-q{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:#B8952E;font-weight:700;font-size:14px;line-height:1.35;font-family:var(--font-display)}
.fq-x{flex:none;width:20px;height:20px;border-radius:999px;background:#B8952E;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;transition:transform 160ms ease}
.fq-a{margin-top:10px;font-size:12.5px;line-height:1.6;color:#333}
.pc-legal{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.pc-legal p{margin:0;font-size:10.5px;line-height:1.5;color:#333}
.pc-footer{background:#000;padding:22px 24px 120px}
.fq-q{min-height:44px;align-items:center}
@media (max-width:860px){.inc-grid,.bn-grid,.vid-grid,.exp-grid{grid-template-columns:1fr}.fq-item{padding:6px 16px}.fq-a{margin:4px 0 10px;font-size:14px}.pc-legal p{font-size:12px}.yl-link{display:inline-block;padding:12px 4px;font-size:13px}.pc-sec{padding:44px 16px}}
.pc-copy{color:#bbb;font-size:12px;margin-top:6px}.pc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}.pc-links a{color:#bbb;font-size:12px;text-decoration:none;padding:8px 0}.pc-links a:hover{color:#fff}