/* ─────────────────────────────────────────────────────────────────────
   offerddn-tw — components.css
   Tailwind v4 + DaisyUI 5 brand layer, ported from books.dedollarizenews
   v8 funnel. Loaded AFTER Tailwind + DaisyUI. Drives every visible LP
   surface on offer.dedollarizenews.com.
   ───────────────────────────────────────────────────────────────────── */


/* ─── Brand tokens ─────────────────────────────────────────────── */
:root {
  --ink:        #1f2433;
  --ink-soft:   #5b6171;
  --ink-mute:   #8a8f9c;
  --ink-faint:  #c0c3cc;
  --paper:      #faf8f3;
  --surface:    #ffffff;
  --surface-2:  #f6f6f3;
  --line:       #e5e2da;
  --line-soft:  #f1efea;
  --form-blue:  #08466a;
  --form-blue-h:#0a567f;
  --gold:       #e8b932;
  --gold-h:     #f0c54a;
  --gold-cat:   #c89b3a;
  --crimson:    #b6403c;
  --green:      #2f7a55;
  --cream:      #f5d784;
}
[data-theme="offerddn-dark"] {
  --ink:        #e8e6e0;
  --ink-soft:   #a0a3ac;
  --ink-mute:   #707380;
  --ink-faint:  #4a4f5c;
  --paper:      #1a1d28;
  --surface:    #232734;
  --surface-2:  #1f2230;
  --line:       #2d3344;
  --line-soft:  #232734;
  --form-blue:  #4ea0d4;
  --form-blue-h:#6cb4e0;
}

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background-color: var(--paper);
  color: var(--ink);
  background-image:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(200,155,58,0.10), transparent 55%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(8,70,106,0.06), transparent 60%);
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-size: cover, cover;
  min-height: 100vh;
  transition: background-color .25s ease, color .25s ease;
}
[data-theme="offerddn-dark"] body {
  background-image:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(200,155,58,0.14), transparent 55%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(78,160,212,0.10), transparent 60%);
}

.font-montserrat { font-family: 'Montserrat', system-ui, sans-serif; }


/* ─── Theme toggle pill ────────────────────────────────────────── */
.theme-toggle {
  position: fixed; top: 14px; right: 18px; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  color: var(--ink);
  background: rgba(250, 248, 243, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background-color .25s, border-color .25s, transform .12s, color .25s;
}
.theme-toggle:hover { transform: translateY(-1px); }
[data-theme="offerddn-dark"] .theme-toggle { background: rgba(35, 39, 52, 0.92); }

.theme-toggle.swap > input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0; padding: 0; border: 0;
}
.theme-toggle .swap-on,
.theme-toggle .swap-off {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor;
}
.theme-toggle.swap > .swap-on  { display: none; }
.theme-toggle.swap > .swap-off { display: block; }
.theme-toggle.swap > input[type="checkbox"]:checked ~ .swap-on  { display: block; }
.theme-toggle.swap > input[type="checkbox"]:checked ~ .swap-off { display: none; }


/* ─── Yellow brand CTA ─────────────────────────────────────────── */
.dde-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #ffffff; background: var(--gold); border: 0; border-radius: 0.25rem;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.dde-cta:hover {
  background: var(--gold-h); color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}


/* ─── Brand background sections ────────────────────────────────── */
.navy-bg {
  background:
    linear-gradient(180deg, rgba(8,16,32,0.30) 0%, rgba(8,16,32,0.45) 100%),
    url('https://secure.dedollarizenews.com/wp-content/uploads/sites/10967/2025/10/Dedollarize_Scumbucks_Draft-1_Assets-02.png') center top / cover no-repeat;
}
.navy-bg-strong {
  background:
    linear-gradient(180deg, rgba(8,16,32,0.55) 0%, rgba(8,16,32,0.55) 100%),
    url('https://secure.dedollarizenews.com/wp-content/uploads/sites/10967/2025/10/Dedollarize_Scumbucks_Draft-1_Assets-02.png') center / cover no-repeat;
}
.threats-bg {
  background:
    linear-gradient(180deg, rgba(8,16,32,0.78) 0%, rgba(8,16,32,0.78) 100%),
    url('https://secure.dedollarizenews.com/wp-content/uploads/sites/10967/2025/10/Dedollarize_Scumbucks_Draft-1_Assets-04-3-scaled.jpg') center / cover no-repeat;
}
.assess-bg {
  background:
    linear-gradient(180deg, rgba(8,16,32,0.55) 0%, rgba(8,16,32,0.55) 100%),
    url('https://secure.dedollarizenews.com/wp-content/uploads/sites/10967/2025/10/hW5_MuQ1sj9jFMfEwxNQ3_2683a1325a0444ae894cfa9d281bb069.jpg') center / cover no-repeat;
}
.reader-bg { background: var(--surface-2); }


/* ─── 3-over-2 centered threats grid ───────────────────────────── */
.threats-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 56px 24px; max-width: 1200px; margin: 0 auto; justify-items: center;
}
.threats-grid > .threat-card { max-width: 340px; text-align: center; }
.threats-grid > .threat-card:nth-child(1) { grid-column: 1 / span 2; }
.threats-grid > .threat-card:nth-child(2) { grid-column: 3 / span 2; }
.threats-grid > .threat-card:nth-child(3) { grid-column: 5 / span 2; }
.threats-grid > .threat-card:nth-child(4) { grid-column: 2 / span 2; }
.threats-grid > .threat-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 900px) {
  .threats-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .threats-grid > .threat-card { grid-column: auto !important; }
  .threats-grid > .threat-card:nth-child(5) { grid-column: 1 / span 2 !important; }
}
@media (max-width: 600px) {
  .threats-grid { grid-template-columns: 1fr; }
  .threats-grid > .threat-card,
  .threats-grid > .threat-card:nth-child(5) { grid-column: auto !important; }
}
.threat-card .threat-icon { width: 200px; height: 184px; object-fit: contain; margin: 0 auto 1rem; }


/* ─── Oswald display headings ──────────────────────────────────── */
.h-oswald {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}


/* ─── Shield bullet list ───────────────────────────────────────── */
.shield-bullets { list-style: none; padding: 0; }
.shield-bullets li {
  display: flex; align-items: flex-start; gap: 18px;
  color: #ffffff; font: 400 21px/1.5 'Montserrat', sans-serif;
  padding: 14px 0;
}
.shield-bullets .fas {
  color: #d4a24a; font-size: 28px; flex: 0 0 auto;
  margin-top: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}


/* ─── Pinned testimonial cards on a string ─────────────────────── */
.proof-row { position: relative; padding-top: 28px; }
.proof-row::before {
  content: ''; position: absolute; top: 6px; left: 6%; right: 6%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #b3a187 14%, #6e6553 50%, #b3a187 86%, transparent 100%);
  transform: rotate(-0.5deg);
}
.proof-card {
  position: relative;
  background:
    repeating-linear-gradient(transparent 0 27px, rgba(0,80,140,0.05) 27px 28px),
    linear-gradient(180deg, #ffffff 0%, #fbfaf3 100%);
  padding: 30px 24px 22px; border-radius: 2px; text-align: left;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 12px 22px rgba(0,0,0,0.14),
    0 18px 38px rgba(0,0,0,0.10);
  font-family: 'Montserrat', sans-serif; z-index: 1; color: #1f2433;
}
[data-theme="offerddn-dark"] .proof-card {
  background:
    repeating-linear-gradient(transparent 0 27px, rgba(78,160,212,0.10) 27px 28px),
    linear-gradient(180deg, #2a2e3c 0%, #232734 100%);
  color: #e8e6e0;
}
.proof-row:nth-child(odd) .proof-card:nth-child(1)  { transform: rotate(-2.2deg) translateY(4px); }
.proof-row:nth-child(odd) .proof-card:nth-child(2)  { transform: rotate(1.4deg)  translateY(-2px); }
.proof-row:nth-child(odd) .proof-card:nth-child(3)  { transform: rotate(-1deg)   translateY(6px); }
.proof-row:nth-child(even) .proof-card:nth-child(1) { transform: rotate(1.8deg)  translateY(-3px); }
.proof-row:nth-child(even) .proof-card:nth-child(2) { transform: rotate(-1.2deg) translateY(5px); }
.proof-row:nth-child(even) .proof-card:nth-child(3) { transform: rotate(2deg)    translateY(-1px); }
.proof-card::before {
  content: ''; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 50% 50%, var(--pin, #c0392b) 0%, color-mix(in srgb, var(--pin, #c0392b) 70%, #000 30%) 75%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.45), inset 0 -2px 3px rgba(0,0,0,0.3);
  z-index: 2;
}
.proof-card[data-pin="red"]    { --pin: #d24a3d; }
.proof-card[data-pin="blue"]   { --pin: #2c7fb8; }
.proof-card[data-pin="orange"] { --pin: #e08a30; }
.proof-card[data-pin="green"]  { --pin: #2f9c5d; }
.proof-card[data-pin="yellow"] { --pin: #d4a24a; }
.proof-card[data-pin="purple"] { --pin: #7e57c2; }


/* ─── Form card ────────────────────────────────────────────────── */
.form-card {
  background: var(--surface); color: var(--ink);
  transition: background-color .25s, color .25s;
}
.input,
.input-bordered,
.join-item.input,
.join .input,
.select,
.select-bordered,
.join-item.select,
.join .select {
  border-radius: 0.5rem !important;
}
.checkbox {
  border-radius: 0.25rem !important;
  border-width: 2px;
  border-color: var(--ink-soft);
  background: var(--surface);
}
.checkbox:hover { border-color: var(--ink); }
.checkbox:checked {
  background-color: hsl(var(--p)) !important;
  border-color: hsl(var(--p)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 80% 80% !important;
  background-position: center !important;
}
.join > .join-item:first-child,
.join > :first-child:not(.join-item) > .join-item {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.join > .join-item:last-child,
.join > :last-child:not(.join-item) > .join-item {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}


/* ─── Other briefings strip (offerddn-specific) ───────────────── */
.ob-strip { background: var(--surface); border-top: 1px solid var(--line); }
.ob-card {
  display: flex; gap: 18px; align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ob-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
}
.ob-thumb {
  flex: 0 0 120px; width: 120px; aspect-ratio: 16/10;
  border-radius: 8px; overflow: hidden;
  background: var(--ink-faint) center / cover no-repeat;
}
.ob-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--form-blue);
}
.ob-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  margin: 2px 0 4px;
}
.ob-tag {
  font-size: 13px; color: var(--ink-soft);
}


/* =================================================================
   Cream-light home page (front-page.php)

   Re-added after the v8-briefing port temporarily replaced it. Lives
   alongside the v8 brand layer above so both designs can coexist:
   - Home page: cream-light card-grid (.hp-* + .eyebrow/.h-display/.lede)
   - LP pages:  high-energy DR navy/dark (.navy-bg + .threats-grid + …)
   ================================================================= */

/* Display heading: Oswald, all-caps, tight leading */
.h-display {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--ink);
}

/* Lede paragraph: larger body text under headlines */
.lede {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--ink);
}

/* Gold pill eyebrow used above big headlines */
.eyebrow {
  display: inline-block;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(232, 185, 50, 0.08);
}

/* Gold accent color helper */
.text-accent { color: var(--gold); }

/* Ghost-link secondary CTA */
.btn-ghost-link {
  display: inline-block;
  padding: 14px 18px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.btn-ghost-link:hover { opacity: 1; }

/* ----- Hero ----- */
.hp-hero {
  background:
    radial-gradient(ellipse at top, rgba(232, 185, 50, 0.14) 0%, transparent 60%),
    var(--paper);
  color: var(--ink);
}

/* ----- Why strip ----- */
.hp-why { background: var(--surface); }
.hp-why-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hp-why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.hp-why-num {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 12px;
}

/* ----- Briefings grid ----- */
.hp-briefings { background: var(--paper); }
.hp-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.hp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
  border-color: var(--gold);
}
.hp-card-thumb {
  /* Cards show live screenshots of /lp/<slug>/ — these capture the navy
     hero (headline + payoff + Wistia 3-pane video composite) and come out
     roughly square. 16/9 cropped both ends; 5/6 keeps the headline at top
     and the video composite at bottom visible. object-position:top biases
     toward the headline when the screenshot's aspect drifts. */
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1320, #1a2a44);
  position: relative;
}
.hp-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 600ms ease;
}
.hp-card:hover .hp-card-thumb img { transform: scale(1.04); }
.hp-card-thumb-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0b1320, #1a2a44);
}
.hp-card-body { padding: 24px 26px 26px; }
.hp-card-eyebrow {
  display: inline-block;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.hp-card-title {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--ink);
}
.hp-card-tagline {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-cat);
  margin-bottom: 10px;
  font-weight: 600;
}
.hp-card-summary {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 16px;
}
.hp-card-cta {
  display: inline-block;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  letter-spac