/* Blog, legal and key-claim pages: the same family as the redesigned home
   and product pages. A deep ink background with quieter aurora light, and
   the EzzoHub mark in place of the old grid logo. Content styles are left
   exactly as they were. */
html[data-theme] body, body { background: #0a0714; }
html[data-theme] .backdrop { background: #0a0714; }
html[data-theme] .backdrop::before { display: none; }
html[data-theme] .blob { opacity: .32; filter: blur(110px); }
html[data-theme] .blob-a { background: radial-gradient(circle at 30% 30%, #6d28d9, transparent 70%); }
html[data-theme] .blob-b { background: radial-gradient(circle at 60% 40%, #be185d, transparent 70%); }
html[data-theme] .blob-c { background: radial-gradient(circle at 50% 50%, #4338ca, transparent 70%); }
.wordmark-icon.site-mark {
  background: linear-gradient(160deg, #b9a3fc, #8b5cf6) !important;
  box-shadow: 0 8px 20px -8px rgba(139, 92, 246, .8), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.site-mark img { width: 74%; height: 74%; object-fit: contain; display: block; }

/* The same 1920px desktop width as the rest of the site. Long reading
   (articles, legal text) keeps a comfortable line length inside it. */
.bl-wrap, .bl-nav { max-width: 1920px; padding-left: clamp(20px, 5vw, 104px); padding-right: clamp(20px, 5vw, 104px); }
.bl-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(22px, 2vw, 34px); }
.legal-page-wrap { max-width: 1920px !important; padding-left: clamp(20px, 5vw, 104px) !important; padding-right: clamp(20px, 5vw, 104px) !important; }
.legal-page-wrap > .wordmark { display: inline-flex; }
.legal-page-title, .legal-page-sub, .legal-page-body { max-width: 860px; }
.legal-page-title, .legal-page-sub, .legal-page-body { margin-left: auto !important; margin-right: auto !important; }

/* ── Email signup: the Payday Plan box (email-signup.js) ────────────────
   Solid card, readable on the dark site background, fields with visible
   labels, and a clear success state. */
.es-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px 32px; align-items: center;
  margin: 34px 0; padding: clamp(22px, 3vw, 32px); border-radius: 22px;
  background: linear-gradient(160deg, #241a49 0%, #1a1238 100%); border: 1px solid rgba(196, 181, 253, .28);
  box-shadow: 0 30px 70px -40px rgba(109, 40, 217, .8);
}
.es-card--compact { grid-template-columns: 1fr; }
.es-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; }
.es-title { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: #f5f2ff; letter-spacing: -.01em; }
.es-text { margin: 0; font-size: 15px; line-height: 1.6; color: #d6cff0; }
.es-form { display: grid; gap: 12px; min-width: 0; }
.es-fields { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; }
.es-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #e9e4fb; min-width: 0; }
.es-field em { font-style: normal; font-weight: 500; color: #bdb4dc; margin-left: 4px; }
.es-field input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid rgba(196, 181, 253, .35); background: #120c27; color: #f5f2ff; font: 500 15.5px var(--font-sans, Inter, sans-serif);
}
.es-field input::placeholder { color: #9d95c2; opacity: 1; }
.es-field input:focus { outline: none; border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(196, 181, 253, .25); }
.es-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.es-btn { justify-self: start; min-height: 48px; padding-left: 26px; padding-right: 26px; }
.es-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: #bdb4dc; }
.es-fine a { color: #e9e4fb; }
.es-msg { margin: 0; font-size: 13.5px; min-height: 1px; color: #e9e4fb; }
.es-msg.is-error { color: #fda4af; }
.es-done { margin: 0; font-size: 15px; line-height: 1.6; color: #e9e4fb; padding: 14px 16px; border-radius: 14px; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .35); }
.es-done strong { color: #a7f3d0; display: block; font-size: 16px; margin-bottom: 2px; }
@media (max-width: 760px) {
  .es-card { grid-template-columns: 1fr; }
  .es-fields { grid-template-columns: 1fr; }
  .es-btn { justify-self: stretch; justify-content: center; }
}

/* ── /subscribe: confirm and unsubscribe ────────────────────────────── */
.sub-wrap { max-width: 560px; margin: 0 auto; padding: 40px 16px 80px; }
.sub-wrap .wordmark { margin-bottom: 30px; text-decoration: none; display: inline-flex; }
.sub-card { background: #1d1440; border: 1px solid rgba(196, 181, 253, .25); border-radius: 22px; padding: 30px 26px; box-shadow: 0 30px 70px rgba(20, 8, 50, .45); }
.sub-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin: 0 0 10px; color: #f5f2ff; }
.sub-text { font-size: 15.5px; line-height: 1.65; color: #d6cff0; margin: 0 0 18px; }
.sub-text a, .sub-text strong { color: #f5f2ff; }
.sub-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-msg { margin: 12px 0 0; font-size: 14px; color: #fda4af; }
.sub-tip { font-size: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(196, 181, 253, .1); border: 1px solid rgba(196, 181, 253, .28); }