/* ============================================================
   Hydrogen Peroxide Protocol — Members Area styles
   ============================================================ */

:root {
  --bg-0:        #0a1422;
  --bg-1:        #0d1b2e;
  --bg-2:        #102338;
  --panel:       #0e1c30;
  --panel-2:     #122745;
  --gold:        #d8af55;
  --gold-soft:   #c9a558;
  --gold-bright: #f4d27a;
  --text:        #e8eef6;
  --text-dim:    #8ea2bd;
  --line:        rgba(216,175,85,.18);
  --radius:      14px;
  --sidebar-w:   86px;
  --sidebar-w-open: 220px;
  --shadow:      0 18px 40px rgba(0,0,0,.55);
  --gold-grad:   linear-gradient(180deg,#f4d27a 0%,#b8862f 100%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 75% -10%, #15294a 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 60%, #070d18 100%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; }

/* hidden helper */
[hidden] { display: none !important; }

/* ============================================================
   LOGIN GATE
   ============================================================ */
#login {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 600px at 50% -10%, #15294a 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1) 0%, #070d18 100%);
}
.login-card {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 34px 30px 30px;
  text-align: center;
}
.login-card img { width: 78px; height: 78px; margin: 0 auto 14px; }
.login-card h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px; letter-spacing: 1px; margin: 0 0 4px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-card p { color: var(--text-dim); font-size: 13px; margin: 0 0 24px; }
.field { text-align: left; margin-bottom: 14px; }
.field label { display:block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px;
  background: #0a1424; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; outline: none;
}
.field input:focus { border-color: var(--gold-soft); }
.btn-gold {
  width: 100%; padding: 13px 16px; margin-top: 6px;
  border: none; border-radius: 10px;
  background: var(--gold-grad); color: #2a1c05;
  font-weight: 700; font-size: 14px; letter-spacing: .3px;
  transition: filter .15s, transform .05s;
}
.btn-gold:hover { filter: brightness(1.07); }
.btn-gold:active { transform: translateY(1px); }
.login-note { margin-top: 16px; font-size: 11px; color: #5f7290; }
.login-error { color: #ff8a8a; font-size: 12px; min-height: 16px; margin: 2px 0 8px; }

/* ============================================================
   APP SHELL
   ============================================================ */
#app { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, rgba(10,18,32,.92), rgba(7,12,22,.96));
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0; gap: 6px;
  position: sticky; top: 0; height: 100vh;
  transition: width .2s ease, flex-basis .2s ease;
  overflow: hidden;
}
.sidebar.open { width: var(--sidebar-w-open); flex-basis: var(--sidebar-w-open); align-items: stretch; padding-left: 14px; padding-right: 14px; }
.side-logo {
  width: 56px; height: 56px; border-radius: 12px;
  border: 1px solid var(--line); padding: 4px; margin-bottom: 10px;
  align-self: center;
}
.side-toggle {
  background: transparent; border: 1px solid var(--line); color: var(--gold);
  width: 38px; height: 30px; border-radius: 8px; font-size: 16px; line-height: 1;
  margin: 4px 0 14px; align-self: center;
  display: flex; align-items: center; justify-content: center;
}
.side-toggle:hover { background: rgba(216,175,85,.08); }
.sidebar.open .side-toggle { transform: scaleX(-1); }

.nav { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  background: transparent; border: none; color: var(--text-dim);
  padding: 12px; border-radius: 10px; width: 100%;
  justify-content: center;
}
.sidebar.open .nav-item { justify-content: flex-start; }
.nav-item svg { width: 22px; height: 22px; flex: 0 0 22px; }
.nav-item .label { font-size: 14px; white-space: nowrap; opacity: 0; width: 0; overflow: hidden; transition: opacity .15s; }
.sidebar.open .nav-item .label { opacity: 1; width: auto; }
.nav-item:hover { color: var(--gold-bright); background: rgba(216,175,85,.07); }
.nav-item.active { color: var(--gold-bright); background: rgba(216,175,85,.12); }

/* ---- Main ---- */
.main { flex: 1; min-width: 0; padding: 40px 48px 80px; }
@media (max-width: 720px){ .main { padding: 26px 18px 90px; } }

.view-title {
  font-size: 15px; font-weight: 600; letter-spacing: .4px;
  color: var(--text); margin: 0 0 26px;
}

/* ---- Cards grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px;
}
.card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(216,175,85,.35);
  background: var(--panel);
  box-shadow: var(--shadow);
  cursor: pointer;
  aspect-ratio: 3 / 4;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 26px 50px rgba(0,0,0,.6), 0 0 0 1px var(--gold-soft); }
.card img { width: 100%; height: 100%; object-fit: contain; }
.card .card-glow { position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); pointer-events:none; }

/* ---- Module carousel (horizontal) ---- */
.carousel-wrap { position: relative; margin: 4px -8px 0; }
.carousel {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 8px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-soft) transparent;
  cursor: grab;
}
.carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 8px; }
.carousel::-webkit-scrollbar-track { background: transparent; }

.c-item {
  flex: 0 0 270px;
  margin: 0;
  scroll-snap-align: center;
  text-align: center;
  cursor: pointer;
}
@media (max-width: 560px){ .c-item { flex-basis: 76vw; } }
.c-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(216,175,85,.4);
  background: var(--panel);
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 4;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.c-item:hover .c-card { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 26px 50px rgba(0,0,0,.6), 0 0 0 1px var(--gold-soft); }
.c-card img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cover-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 26px 18px;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(216,175,85,.18), transparent 60%),
    linear-gradient(160deg,#13233f 0%,#0a1422 60%,#070d18 100%);
}
.cover-ph span { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1.3; }
.cover-ph .ph-emoji { font-size: 40px; -webkit-text-fill-color: initial; color: initial; }
.cover-ph .ph-tag { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); }
.c-item figcaption {
  margin-top: 16px; font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: .2px; line-height: 1.3; padding: 0 6px;
}
.c-item figcaption .emoji { font-weight: 400; }

.carousel-arrow {
  position: absolute; top: calc(50% - 28px); transform: translateY(-50%);
  z-index: 5; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#16243c,#0c1626);
  border: 1px solid var(--gold-soft); color: var(--gold-bright);
  box-shadow: var(--shadow);
  transition: opacity .2s, filter .15s, visibility .2s;
}
.carousel-arrow:hover { filter: brightness(1.15); }
.carousel-arrow.prev { left: -6px; }
.carousel-arrow.next { right: -6px; }
.carousel-arrow.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- Module detail ---- */
.back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim); background: transparent; border: none;
  font-size: 14px; margin-bottom: 18px; padding: 4px 0;
}
.back:hover { color: var(--gold-bright); }

.module-head {
  display: flex; gap: 22px; align-items: flex-start; margin-bottom: 30px; flex-wrap: wrap;
}
.module-head .cover {
  width: 150px; border-radius: 12px; border: 1px solid var(--line);
  box-shadow: var(--shadow); flex: 0 0 150px;
}
.module-head h2 {
  font-family: Georgia, serif; font-size: 26px; margin: 4px 0 8px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip:text; color: transparent;
}
.module-head p { color: var(--text-dim); margin: 0; max-width: 520px; }

.player {
  width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  background: #060c16; border: 1px solid var(--line); margin-bottom: 28px;
  display: flex; align-items: center; justify-content: center;
}
.player iframe, .player video { width: 100%; height: 100%; border: 0; }
.player .placeholder { text-align: center; color: var(--text-dim); padding: 24px; }
.player .placeholder .play { font-size: 46px; color: var(--gold); margin-bottom: 8px; }

.section-label {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold-soft); margin: 0 0 12px; font-weight: 700;
}

.lesson-list { list-style: none; padding: 0; margin: 0 0 32px; }
.lesson {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 10px; background: rgba(18,39,69,.4);
  transition: border-color .15s, background .15s;
}
.lesson:hover { border-color: var(--gold-soft); background: rgba(18,39,69,.7); }
.lesson .idx {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(216,175,85,.14); color: var(--gold-bright); font-size: 13px; font-weight: 700;
}
.lesson .lt { flex: 1; font-size: 14px; }
.lesson .dur { color: var(--text-dim); font-size: 12px; }
.lesson.is-active { border-color: var(--gold); background: rgba(216,175,85,.1); }

/* ---- Downloads ---- */
.dl-list { list-style: none; padding: 0; margin: 0; }
.dl {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; background: rgba(18,39,69,.4);
}
.dl:hover { border-color: var(--gold-soft); }
.dl .ico { color: var(--gold); }
.dl .dt { flex: 1; }
.dl .dt b { display:block; font-size: 14px; font-weight: 600; }
.dl .dt span { font-size: 12px; color: var(--text-dim); }
.dl .get {
  border: 1px solid var(--gold-soft); color: var(--gold-bright);
  background: transparent; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.dl .get:hover { background: rgba(216,175,85,.12); }
.dl.disabled { opacity: .55; }
.dl.disabled .get { border-color: var(--line); color: var(--text-dim); cursor: not-allowed; }

/* ---- Search ---- */
.search-box {
  display: flex; align-items: center; gap: 12px;
  background: #0a1424; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 26px; max-width: 560px;
}
.search-box svg { width: 20px; height: 20px; color: var(--gold-soft); }
.search-box input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; }

/* ---- FAQ / Help ---- */
.faq { max-width: 720px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: rgba(18,39,69,.35); }
.faq-q {
  width: 100%; text-align: left; background: transparent; border: none; color: var(--text);
  padding: 16px 18px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-q .chev { color: var(--gold); transition: transform .2s; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.faq-item.open .faq-a { max-height: 300px; padding: 0 18px 18px; }
.help-cta {
  margin-top: 24px; padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); max-width: 720px;
}
.help-cta h3 { margin: 0 0 6px; font-size: 16px; }
.help-cta p { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; }

/* ============================================================
   RICH CONTENT PAGE — ember theme
   ============================================================ */
.content-page {
  --ember:        #e0414f;
  --ember-deep:   #7a1320;
  --ember-soft:   #c0303d;
  margin: -40px -48px -80px;
  padding: 40px 48px 90px;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(224,65,79,.10), transparent 60%),
    radial-gradient(700px 500px at 0% 60%, rgba(224,65,79,.07), transparent 60%),
    linear-gradient(180deg, #0c0608 0%, #070405 100%);
}
@media (max-width: 720px){ .content-page { margin: -26px -18px -90px; padding: 26px 18px 90px; } }

.cp-back { color: var(--gold-soft); }
.cp-back:hover { color: var(--gold-bright); }
.cp-inner { display: flex; flex-direction: column; gap: 26px; max-width: 1180px; }

.cp-block {
  background: linear-gradient(180deg, rgba(20,12,14,.92), rgba(10,6,7,.92));
  border: 1px solid rgba(224,65,79,.16);
  border-radius: 18px;
  padding: 38px 40px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
@media (max-width: 720px){ .cp-block { padding: 24px 20px; } }
.cp-block h2 {
  font-family: "Arial Narrow", "Inter", sans-serif;
  font-size: 30px; letter-spacing: .5px; text-transform: uppercase;
  margin: 0 0 18px; color: #fff; font-weight: 800;
}
.cp-block p { color: #d7d2d4; font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.cp-block b { color: #fff; }

/* split: text + media */
.cp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.cp-split.side-left  { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px){ .cp-split { grid-template-columns: 1fr; } }
.cp-media {
  border-radius: 14px;
  background-size: cover; background-position: center;
  border: 1px solid rgba(224,65,79,.2);
}
.cp-media.has-img { border: 0; background: none; }
.cp-fullimg { text-align: center; }
.cp-fullimg img { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; border-radius: 14px; }
.cp-resultlist.has-side .cp-rl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.cp-resultlist.has-side .cp-rl-main { min-width: 0; }
@media (max-width: 820px){ .cp-resultlist.has-side .cp-rl-grid { grid-template-columns: 1fr; } }
.cp-media.has-img img {
  display: block; width: 100%; height: auto;
  object-fit: contain; border-radius: 14px;
}
.cp-media.is-ph {
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 70% 30%, rgba(224,65,79,.18), transparent 60%), linear-gradient(160deg,#1a0e10,#0a0506);
}
.cp-media.is-ph span { color: #9a7b80; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.cp-callout {
  background: linear-gradient(180deg, var(--ember), var(--ember-soft));
  color: #fff; font-weight: 700; font-size: 17px; line-height: 1.5;
  padding: 22px 26px; border-radius: 14px; box-shadow: 0 14px 30px rgba(224,65,79,.25);
}

/* mix / ingredients */
.cp-warn {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #4a0d14, #350a0f);
  border: 1px solid rgba(224,65,79,.3); color: #fff; font-weight: 700;
  padding: 16px 20px; border-radius: 10px; margin-bottom: 22px;
}
.cp-warn svg { color: var(--ember); flex: 0 0 auto; }
.cp-red-label, .cp-rule-label { color: var(--ember); font-weight: 700; font-size: 18px; margin: 6px 0 16px; }
.cp-grid { display: grid; gap: 16px; }
.cp-grid--filled { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cp-grid--icon { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cp-grid--outline { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cp-grid--rules { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cp-card { border-radius: 10px; padding: 18px; }
.cp-card.filled { background: linear-gradient(180deg, #5a121b, #3f0c12); border: 1px solid rgba(224,65,79,.25); }
.cp-card.filled b { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.cp-card.filled span { color: #e7c9cc; font-size: 13px; }
.cp-card.outline { border: 1px solid rgba(224,65,79,.4); color: #f0e9ea; font-weight: 600; display: flex; align-items: center; min-height: 90px; }
.cp-card.icon { display: flex; flex-direction: column; gap: 12px; }
.cp-card.icon .ic {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85); font-size: 22px;
}
.cp-card.check { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; }
.cp-card.check .ck { color: var(--gold-bright); font-size: 18px; }
.cp-note { color: #d7d2d4; font-size: 15px; line-height: 1.6; margin: 16px 0 0; }

/* steps */
.cp-steps { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; }
@media (max-width: 820px){ .cp-steps { grid-template-columns: 1fr; } }
.cp-steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-bottom: 8px; }
.cp-step .n { color: #9a9498; font-size: 15px; display: block; border-bottom: 2px solid var(--ember); padding-bottom: 8px; margin-bottom: 10px; }
.cp-step p { color: #fff; font-weight: 600; margin: 0; }

/* why it works — chevrons */
.cp-chevs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 8px; }
@media (max-width: 720px){ .cp-chevs { grid-template-columns: 1fr; } }
.cp-chev { text-align: left; }
.cp-chev .chev-badge {
  height: 64px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 14px; color: #fff;
  background: linear-gradient(90deg, var(--ember), var(--ember-soft));
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
}
.cp-chev:first-child .chev-badge { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.cp-chev p { color: #e7dfe0; font-size: 15px; margin: 0; }
.cp-quote { border-left: 3px solid var(--ember); margin: 18px 0 0; padding: 4px 0 4px 18px; color: #fff; font-size: 18px; }
.cp-quote b { color: var(--ember); }

/* rules */
.cp-bullets { margin: 4px 0 18px; padding-left: 20px; }
.cp-bullets li { color: #fff; margin-bottom: 8px; }
.cp-rule { display: flex; align-items: flex-start; gap: 12px; }
.cp-rule .sq { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; background: linear-gradient(180deg,#5a121b,#3f0c12); border: 1px solid rgba(224,65,79,.4); margin-top: 2px; }
.cp-rule p { color: #e7dfe0; margin: 0; }

/* expect */
.cp-expect .cp-grid--outline { margin: 6px 0 16px; }
.cp-punch { color: var(--ember); font-size: 26px; font-weight: 800; margin: 6px 0 0; }

/* summary */
.cp-tagline { font-size: 30px; font-weight: 800; color: #fff; margin: 22px 0 0; }
.cp-tagline .accent { color: var(--ember); }

/* ---- shared new block styles ---- */
.cp-hero h2 { font-size: 40px; }
.cp-hero .cp-subtitle { display: block; font-size: 24px; margin-top: 10px; font-weight: 700; }
.cp-split:not(.cp-hero) .cp-subtitle,
.cp-resultlist .cp-subtitle { display: block; margin-top: 8px; font-size: 20px; font-weight: 700; text-transform: none; letter-spacing: 0; }
@media (max-width: 720px){ .cp-hero h2 { font-size: 28px; } .cp-hero .cp-subtitle { font-size: 18px; } }
.cp-twocol { columns: 2; column-gap: 36px; }
@media (max-width: 720px){ .cp-twocol { columns: 1; } }
.cp-sub { font-weight: 700; color: #fff; margin: -6px 0 16px; }
.cp-ing-label { color: inherit; font-weight: 800; font-size: 18px; margin: 0 0 10px; }
.cp-strong { font-weight: 800; color: #fff; }
.cp-bullets.dark li { color: #e7dfe0; }

/* info cards (mechanism / expectations / sapphic / evolution) */
.cp-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 6px 0 16px; }
.cp-info { border-radius: 10px; padding: 18px 20px; }
.cp-info b { display: block; font-size: 18px; margin-bottom: 6px; }
.cp-info span { display: block; font-size: 14px; line-height: 1.5; }
.cp-info--color .cp-info b { color: inherit; }
.cp-info--light .cp-info { background: #e4e4e1; color: #1a1a1a; }
.cp-info--light .cp-info b { color: #111; }
.cp-info--filled .cp-info { background: linear-gradient(180deg,#6e1a22,#4a1016); border: 1px solid rgba(224,65,79,.3); color: #f3e8e9; text-align: center; }
.cp-info--filled .cp-info b { color: #fff; }
.cp-info--outline .cp-info { background: rgba(0,0,0,.35); border-left: 4px solid var(--ember, #e0414f); color: #efe7e8; }
.cp-info--outline .cp-info b { color: #fff; }

/* icon cards (simple summary) */
.cp-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cp-iconcard { background: #26262a; border-radius: 12px; padding: 20px; }
.cp-iconcard .circ { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.cp-iconcard b { color: #fff; font-size: 16px; }
.cp-bigend { font-size: 34px; font-weight: 800; color: #fff; margin: 22px 0 0; }

/* numbered list (what this changes) */
.cp-num-list { display: flex; flex-direction: column; gap: 18px; margin: 8px 0; }
.cp-num { display: flex; align-items: center; gap: 14px; }
.cp-num .sq { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 8px; background: #3a3a3f; color: #cfcfcf; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.cp-num p { color: #fff; margin: 0; font-weight: 600; }

/* danger / warning inline */
.cp-danger { color: #ff3b3b; font-weight: 800; line-height: 1.5; }
.cp-warnbox { background: rgba(120,20,24,.35); border: 1px solid rgba(224,65,79,.3); border-radius: 12px; padding: 20px 22px; }

/* callout split (power of the brake) */
.cp-cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
@media (max-width: 720px){ .cp-cs-grid { grid-template-columns: 1fr; } }
.cp-callout--big { font-size: 34px; line-height: 1.2; padding: 34px 30px; text-align: left; }
.cp-cs-text { display: flex; flex-direction: column; justify-content: center; }

/* hero quote (elite few) */
.cp-heroquote { position: relative; background-size: cover; background-position: center; text-align: center; padding: 70px 40px; overflow: hidden; }
.cp-heroquote::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)); }
.cp-heroquote.is-ph { background: radial-gradient(120% 90% at 60% 30%, rgba(224,65,79,.2), transparent 60%), linear-gradient(160deg,#1a0e10,#0a0506); }
.cp-hq-inner { position: relative; max-width: 900px; margin: 0 auto; }
.cp-hq-title { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 18px; }
.cp-hq-big { font-size: 44px; line-height: 1.15; font-weight: 800; color: #f3ece9; margin: 0 0 18px; }
@media (max-width: 720px){ .cp-hq-big { font-size: 28px; } }
.cp-hq-sub { color: #d7d2d4; font-size: 16px; }

/* chevron titles + sub (why this scars) */
.cp-chev .chev-title { display: block; color: #fff; font-size: 18px; margin: 12px 0 4px; }

/* ---- panel split (daily booster) ---- */
.cp-lead { color: var(--gold-bright); font-weight: 700; font-size: 18px; margin: 0 0 16px; }
.cp-ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
@media (max-width: 820px){ .cp-ps-grid { grid-template-columns: 1fr; } }
.cp-panel { background: #f5d34e; color: #1a1400; border-radius: 16px; padding: 24px 26px; }
.cp-panel b { display: block; color: #1a1400; font-size: 24px; margin-bottom: 12px; }
.cp-panel .cp-bullets li { color: #1a1400; }
.cp-panelsplit .cp-media { min-height: 260px; }

/* ---- rule box (hidden killer) ---- */
.cp-rulebox { border-left: 5px solid var(--gold-bright); background: rgba(255,255,255,.04); border-radius: 10px; padding: 14px 20px; margin: 6px 0 16px; }
.cp-rule-head { color: #fff; font-weight: 700; font-size: 18px; margin: 0 0 6px; }

/* ---- result list (the results you'll feel) ---- */
.cp-result-list { display: flex; flex-direction: column; gap: 18px; margin: 8px 0; }
.cp-result { display: flex; align-items: center; gap: 18px; }
.cp-result .dot { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #3a3a3f; }
.cp-result p { color: #e9e9ea; margin: 0; font-size: 20px; }

/* ---- grid summary (one-screen) ---- */
.cp-gs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; margin: 10px 0 6px; }
@media (max-width: 720px){ .cp-gs-grid { grid-template-columns: 1fr; } }
.cp-gs-item .gs-n { display: block; color: #9a9498; font-size: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--gold-bright); margin-bottom: 12px; }
.cp-gs-item p { color: #fff; font-size: 22px; font-weight: 600; margin: 0; }
.cp-gs-big { font-size: 46px; font-weight: 800; color: var(--gold-bright); margin: 22px 0 0; }

/* ---- callout split flip (why she feels the difference) ---- */
.cp-calloutsplit.flip .cp-callout--big { text-align: center; display: flex; align-items: center; justify-content: center; }

/* ---- crimson red chips (body control) ---- */
.cp-redchips { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 18px; }
.cp-redchips span { background: linear-gradient(180deg,#5a121b,#3f0c12); border: 1px solid rgba(224,65,79,.4); color: #fff; padding: 14px 22px; border-radius: 8px; font-weight: 600; flex: 1 1 42%; }

/* ---- crimson "what changes for her" ---- */
.cp-changes-row { display: flex; flex-wrap: wrap; gap: 28px; margin: 10px 0 18px; }
.cp-change { display: flex; align-items: center; gap: 12px; }
.cp-change b { color: #fff; font-style: italic; }
.cp-sq-red { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 5px; background: linear-gradient(180deg,#7a1620,#4a0d12); border: 1px solid rgba(224,65,79,.5); }
.cp-divider { border: none; border-top: 1px solid rgba(224,65,79,.3); margin: 18px 0; }
.cp-bigline { font-size: 26px; font-weight: 800; color: #fff; }
.cp-bigred { font-size: 28px; font-weight: 800; color: #e0414f; margin: 8px 0; }
.cp-bigwhite { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 8px; }

/* ---- lead paragraph (icon/img cards intro) ---- */
.cp-lead2 { color: #d7d2d4; font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.cp-lead2 .accent { color: var(--ember); font-weight: 700; }

/* ---- panel side (panelSplit with bullets instead of image) ---- */
.cp-panel-side { display: flex; flex-direction: column; justify-content: center; }
.cp-panel-side ul { margin: 0 0 14px; padding-left: 20px; }
.cp-panel-side li { color: #fff; margin-bottom: 10px; font-size: 17px; }
.cp-panel .cp-panel-big { display: block; font-size: 46px; font-weight: 800; line-height: 1.04; }
@media (max-width: 720px){ .cp-panel .cp-panel-big { font-size: 34px; } }
.cp-panel.bronze { background: linear-gradient(180deg,#9a5026,#6e3717); }
.cp-panel.bronze, .cp-panel.bronze b, .cp-panel.bronze .cp-panel-big { color: #fff; }

/* ---- recipe (banner image + numbered cards) ---- */
.cp-recipe { position: relative; background-size: cover; background-position: center; overflow: hidden; }
.cp-recipe::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.82)); }
.cp-recipe.is-ph { background: radial-gradient(120% 90% at 60% 0%, rgba(224,65,79,.16), transparent 60%), linear-gradient(160deg,#161013,#0a0506); }
.cp-recipe > * { position: relative; }
.cp-recipe-head { text-align: center; margin-bottom: 24px; }
.cp-recipe-head h2 { margin-bottom: 6px; }
.cp-recipe-sub { color: #e9d9c9; font-weight: 600; margin: 0; }
.cp-recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px){ .cp-recipe-grid { grid-template-columns: 1fr; } }
.cp-recipe-card { background: rgba(28,28,32,.92); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 22px; }
.cp-recipe-card .rn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f3cfa3; color: #1a1208; font-weight: 800; margin-bottom: 14px; }
.cp-recipe-card b { display: block; color: #fff; font-size: 19px; margin-bottom: 8px; }
.cp-recipe-card p { color: #d7d2d4; font-size: 14px; line-height: 1.7; margin: 0; }
.cp-recipe-card p b { display: inline; font-size: inherit; margin: 0; }

/* ---- image cards (why this formula hits harder) ---- */
.cp-img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; margin: 8px 0; }
.cp-imgcard { text-align: left; }
.cp-img-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; background-size: cover; background-position: center; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.08); }
.cp-img-thumb.is-ph { background: radial-gradient(120% 90% at 60% 30%, rgba(224,65,79,.18), transparent 60%), linear-gradient(160deg,#1a0e10,#0a0506); }
.cp-imgcard b { display: block; color: #fff; font-size: 20px; margin-bottom: 6px; }
.cp-imgcard span { display: block; color: #cfcacb; font-size: 14px; line-height: 1.5; }

/* ---- feature list (anxiety cards / apply today / technique) ---- */
.cp-featurelist .cp-text h2 { margin-bottom: 14px; }
.cp-fl-grid { display: grid; gap: 16px; margin: 8px 0; }
.cp-fl--outline { grid-template-columns: 1fr; }
.cp-fl--filled, .cp-fl--plain, .cp-fl--connect { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cp-fl-card b { display: block; color: #fff; font-size: 19px; margin-bottom: 6px; }
.cp-fl-card p b { display: inline; font-size: inherit; margin: 0; }
.cp-fl-card p { color: #cfcacb; font-size: 14px; line-height: 1.55; margin: 0; }
.cp-fl--outline .cp-fl-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); border-left: 4px solid var(--gold-bright); border-radius: 10px; padding: 18px 20px; }
.cp-fl--filled .cp-fl-card { background: #2a2a2f; border-radius: 10px; padding: 18px 20px; }
.cp-fl--plain .cp-fl-card { border-top: 1px solid rgba(255,255,255,.28); padding: 14px 0 0; }
.cp-fl--plain .cp-fl-ic { display: block; font-size: 22px; margin: 0 0 14px; color: var(--gold-bright); }
.cp-fl-note { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 16px 18px; margin-top: 16px; }
.cp-fl-note b { color: #fff; }

/* ---- arrow shift (the mental control shift) ---- */
.cp-as-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 820px){ .cp-as-grid { grid-template-columns: 1fr; } }
.cp-as-panel { background: #ededeb; color: #1a1a1a; border-radius: 14px; padding: 26px 28px; }
.cp-as-panel b { display: block; color: #111; font-size: 22px; margin-bottom: 12px; }
.cp-as-panel p { color: #2a2a2a; }
.cp-as-panel p b { display: inline; font-size: inherit; margin: 0; }
.cp-as-right h3 { color: #fff; font-size: 22px; margin: 0 0 8px; font-weight: 700; }
.cp-as-arrows { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.cp-as-arrow { color: #fff; font-weight: 700; padding: 16px 26px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
.cp-as-arrow.t0 { background: #5a5a62; }
.cp-as-arrow.t1 { background: #8a8a92; }

/* ---- two-col inside split (confidence: mental loop) ---- */
.cp-twogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 16px; }
@media (max-width: 720px){ .cp-twogrid { grid-template-columns: 1fr; } }
.cp-softbox { background: rgba(255,255,255,.1); border-radius: 12px; padding: 20px 22px; }
.cp-softbox b { display: block; color: #fff; font-size: 19px; margin-bottom: 8px; }
.cp-softbox p b { display: inline; font-size: inherit; margin: 0; }
.cp-softbox p { margin: 0; }
.cp-h3 { display: block; color: #fff; font-size: 19px; margin: 0 0 10px; font-weight: 700; }

/* ---- feature list extras: warn / success boxes ---- */
.cp-fl-warn, .cp-fl-success { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 16px 20px; margin-top: 16px; font-size: 16px; line-height: 1.55; }
.cp-fl-warn { background: linear-gradient(180deg,#4a3c08,#3a2f06); border: 1px solid rgba(245,211,78,.4); color: #f5ecd0; }
.cp-fl-warn .ic { color: #f5d34e; font-size: 18px; flex: 0 0 auto; }
.cp-fl-warn b { color: #fff; }
.cp-fl-success { background: linear-gradient(180deg,#16401f,#0f2c16); border: 1px solid rgba(80,200,120,.35); color: #dff3e4; }
.cp-fl-success .ic { color: #57c97a; font-size: 18px; flex: 0 0 auto; }
.cp-fl-success b { color: #fff; }

/* ---- feature list "connect" variant (how to build the loop) ---- */
.cp-fl--connect .cp-fl-card { overflow: hidden; }
.cp-fl--connect .cp-fl-ic { position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font-size: 22px; margin-bottom: 22px; }
.cp-fl--connect .cp-fl-ic::after { content: ""; position: absolute; left: 100%; top: 50%; width: 240px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); transform: translateY(-50%); }

/* ---- loop diagram (confidence loop infinity) ---- */
.cp-loop-wrap { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: auto auto; gap: 14px 22px; align-items: center; margin-top: 18px; }
@media (max-width: 820px){ .cp-loop-wrap { grid-template-columns: 1fr; grid-template-rows: auto; } }
.cp-loop-svg { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 820px){ .cp-loop-svg { grid-column: 1; order: -1; } }
.cp-loop-svg svg { width: 100%; height: auto; display: block; }
.cp-loop-node { color: #fff; font-weight: 700; font-size: 18px; line-height: 1.3; }
.cp-loop-node.n-tl { grid-column: 1; grid-row: 1; text-align: right; }
.cp-loop-node.n-tr { grid-column: 3; grid-row: 1; text-align: left; }
.cp-loop-node.n-bl { grid-column: 1; grid-row: 2; text-align: right; }
.cp-loop-node.n-br { grid-column: 3; grid-row: 2; text-align: left; }
@media (max-width: 820px){ .cp-loop-node { grid-column: 1 !important; text-align: center !important; } }

/* ---- pre-lead (greeting above heading) + note box ---- */
.cp-prelead { color: #fff; font-weight: 700; font-size: 19px; line-height: 1.5; margin-bottom: 12px; }
.cp-prelead p { margin: 0; color: inherit; font-weight: inherit; }
.cp-notebox { display: flex; gap: 14px; align-items: flex-start; background: rgba(40,70,130,.18); border: 1px solid rgba(90,130,200,.28); border-radius: 12px; padding: 18px 22px; margin-top: 18px; }
.cp-notebox .ic { font-size: 18px; flex: 0 0 auto; }
.cp-notebox p { margin: 0; }

/* ---- video CTA (watch the full video) ---- */
.cp-videocta .cp-quote { margin: 0 0 18px; }
.cp-cta-box { display: flex; align-items: center; gap: 18px; background: linear-gradient(180deg,#16401f,#0f2c16); border: 1px solid rgba(80,200,120,.3); border-radius: 12px; padding: 22px 24px; flex-wrap: wrap; }
.cp-cta-check { color: #57c97a; font-size: 20px; flex: 0 0 auto; }
.cp-cta-btn { display: inline-block; background: #5bd47a; color: #0a2014; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 14px 26px; border-radius: 8px; border: none; cursor: pointer; font-size: 15px; }
.cp-cta-btn:hover { filter: brightness(1.06); }
.cp-cta-btn[disabled] { opacity: .7; cursor: not-allowed; }
.cp-cta-hint { color: #9fd9b0; font-size: 13px; }
.cp-cta-box.tone-blue { background: linear-gradient(180deg,#13294d,#0e1d38); border-color: rgba(90,130,200,.3); }
.cp-cta-box.tone-blue .cp-cta-check { color: #7fa8e0; }
.cp-cta-box.tone-blue .cp-cta-btn { background: #f3d77a; color: #1a1400; }
.cp-cta-box.tone-blue .cp-cta-hint { color: #9fb6e0; }
.cp-cta-player { margin-top: 18px; border-radius: 12px; overflow: hidden; background: #000; }
.cp-cta-player video, .cp-cta-player iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }

/* ---- chips (about rob dial) ---- */
.cp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cp-chips span { background: #fff; color: #15183a; font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; padding: 8px 14px; border-radius: 8px; }

/* ---- step list (how to get the most from this video) ---- */
.cp-steplist { display: flex; flex-direction: column; gap: 22px; }
.cp-step-row .n { display: block; color: #9aa0e6; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid rgba(123,127,208,.4); margin-bottom: 12px; }
.cp-step-row b { display: block; color: #fff; font-size: 20px; margin-bottom: 6px; }
.cp-step-row p { margin: 0; }

/* guideSplit — "Meet Your Guide" mentor list + "What You'll Learn" box */
.cp-guide-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 820px){ .cp-guide-grid { grid-template-columns: 1fr; } }
.cp-guide-main h2 { margin-bottom: 14px; }
.cp-guide-mentors { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.cp-guide-mentor { display: flex; align-items: center; gap: 18px; }
.cp-guide-mentor .av { width: 66px; height: 66px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px; background: radial-gradient(circle at 30% 30%, #3a4a86, #232c52); border: 1px solid rgba(140,160,220,.35); }
.cp-guide-mentor b { color: #fff; font-size: 21px; font-family: Rockwell, "Roboto Slab", Georgia, serif; }
.cp-guide-box { background: #5a62c8; border-radius: 16px; padding: 26px 28px; }
.cp-guide-boxtitle { display: block; color: #fff; font-size: 24px; font-weight: 800; margin-bottom: 14px; font-family: Rockwell, "Roboto Slab", Georgia, serif; }
.cp-guide-box p { color: #11142e; font-size: 16px; margin: 0 0 12px; }
.cp-guide-box p b { color: #11142e; }
.cp-guide-bullets { margin: 0; padding-left: 22px; }
.cp-guide-bullets li { color: #14173a; margin-bottom: 14px; line-height: 1.55; }
.cp-guide-bullets li b { color: #000; }
/* guideSplit — badge + boxed mentor grid + arrow box-items (item 8 variant) */
.cp-guide-badge { display: inline-block; background: rgba(90,130,200,.22); border: 1px solid rgba(140,160,220,.4); color: #c9d2ec; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 7px 14px; border-radius: 8px; margin-bottom: 14px; }
.cp-guide-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(90,130,200,.28); border: 1px solid rgba(90,130,200,.28); border-radius: 10px; overflow: hidden; margin-top: 22px; }
.cp-guide-mcell { background: #16213a; padding: 18px 22px; color: #fff; font-size: 20px; font-family: Rockwell, "Roboto Slab", Georgia, serif; }
.cp-guide-mcell:nth-child(odd):last-child { grid-column: 1 / -1; }
.cp-guide-arrows { display: flex; flex-direction: column; gap: 22px; }
.cp-guide-arrow { display: flex; gap: 16px; align-items: flex-start; }
.cp-guide-arrow .ar { color: #11142e; font-size: 22px; line-height: 1.2; flex: 0 0 auto; }
.cp-guide-arrow b { display: block; color: #11142e; font-size: 20px; font-family: Rockwell, "Roboto Slab", Georgia, serif; margin-bottom: 4px; }
.cp-guide-arrow p { margin: 0; color: #1d2147; font-size: 15px; line-height: 1.5; }

/* statRow — 3 big stats (15+ / #1 / ∞) */
.cp-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
@media (max-width: 720px){ .cp-stat-grid { grid-template-columns: 1fr; gap: 30px; } }
.cp-stat-num { display: block; font-size: 60px; font-weight: 800; line-height: 1; color: #e7ecf7; font-family: "Arial Narrow", "Inter", sans-serif; margin-bottom: 14px; }
.cp-stat b { display: block; color: #fff; font-size: 21px; font-family: Rockwell, "Roboto Slab", Georgia, serif; margin-bottom: 6px; }
.cp-stat p { margin: 0; color: #cdd5e6; font-size: 15px; }

/* videoCta secondary (outline "Explore More Lessons") */
.cp-cta-secondary { display: inline-block; margin-top: 16px; padding: 12px 22px; border: 1px solid rgba(140,160,220,.5); border-radius: 10px; color: #9aa0e6; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.cp-cta-secondary:hover { background: rgba(140,160,220,.12); color: #fff; }

/* ---- videoCta full-card tone (periwinkle "Full Video" card) ---- */
.cp-videocta--peri { background: #4f55c0; border-color: rgba(255,255,255,.18); }
.cp-videocta--peri h2, .cp-videocta--peri p { color: #fff; }
.cp-videocta--peri .cp-quote { color: #f0f0ff; border-left-color: #fff; font-style: italic; margin: 18px 0 0; padding: 18px 0 4px 18px; border-top: 1px solid rgba(255,255,255,.25); }
.cp-videocta--peri .cp-cta-box { background: transparent; border: 0; padding: 0; }
.cp-videocta--peri .cp-cta-check { display: none; }

/* ---- circle steps (watch / choose / apply) ---- */
.cp-circle-row { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin: 10px 0 18px; }
.cp-circle-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 0; min-width: 150px; position: relative; }
.cp-circle { width: 130px; height: 130px; border-radius: 50%; border: 6px solid #5b5fc7; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #cdd1f5; margin-bottom: 16px; }
.cp-circle-step:not(:last-child)::after { content: "\203A"; position: absolute; top: 40px; right: -8px; font-size: 50px; color: #5b5fc7; line-height: 1; }
.cp-circle-step b { color: #fff; font-size: 22px; font-weight: 800; }
.cp-circle-after { text-align: center; color: #d7daf0; margin-top: 8px; }
@media (max-width: 720px){ .cp-circle { width: 96px; height: 96px; font-size: 36px; } .cp-circle-step:not(:last-child)::after { display: none; } }

/* ============================================================
   THEME: SLATE (Card 1 / Item 1 — Hydrogen Peroxide protocol)
   ============================================================ */
.content-page.theme-slate {
  background: linear-gradient(180deg, #0e0e10 0%, #08080a 100%);
}
.theme-slate .cp-block { background: #1b1b1e; border: 1px solid rgba(255,255,255,.06); }
.theme-slate .cp-block h2 { color: #f3f3f3; letter-spacing: 1px; }
.theme-slate .cp-callout { background: linear-gradient(180deg,#c0303d,#8e1c26); }
.theme-slate .cp-quote { border-left-color: var(--gold-bright); color: #fff; }
.theme-slate .cp-quote b { color: var(--gold-bright); }
.theme-slate .cp-hero h2 { color: var(--gold-bright); }
.theme-slate .cp-subtitle { color: var(--gold-bright); }
.theme-slate .cp-ing-label { color: var(--gold-bright); }
.theme-slate .cp-block p.cp-strong { color: #fff; }

/* ============================================================
   THEME: CRIMSON (Card 1 / Item 2 — Two Woman Secret's)
   ============================================================ */
.content-page.theme-crimson {
  --ember: #e0414f;
  background:
    radial-gradient(1100px 700px at 0% 30%, rgba(214,40,40,.45), transparent 55%),
    radial-gradient(1100px 700px at 100% 70%, rgba(214,40,40,.40), transparent 55%),
    linear-gradient(180deg, #1a0608 0%, #0a0203 100%);
}
.theme-crimson .cp-block {
  background: linear-gradient(180deg, rgba(40,10,12,.78), rgba(14,4,5,.82));
  border: 1px solid rgba(224,65,79,.18);
}
.theme-crimson .cp-block h2 {
  font-family: Rockwell, "Roboto Slab", Georgia, serif;
  color: #f4e9e6; letter-spacing: 0; font-weight: 800;
}
.theme-crimson .cp-block p { color: #ece2e1; }
.theme-crimson .cp-callout { background: linear-gradient(180deg,#d62828,#9e1b1b); }
.theme-crimson .cp-callout--big { color: #fff; font-weight: 800; }
.theme-crimson .cp-quote { border-left-color: #ff5a5a; color: #fff; }
.theme-crimson .cp-quote b { color: #fff; }
.theme-crimson .cp-danger { color: #ff5a5a; }
.theme-crimson .cp-warn { background: linear-gradient(180deg,#3a0c10,#280609); }
.theme-crimson .cp-info--filled .cp-info { background: linear-gradient(180deg,#8e1c22,#5e1015); }
.theme-crimson .cp-info--outline .cp-info { border-left-color: #e0414f; }
.theme-crimson .cp-chev .chev-badge { background: linear-gradient(90deg,#9e1b1b,#6e1212); }
.theme-crimson .cp-block p.cp-bigred { color: #e0414f; }
.theme-crimson .cp-block p.cp-bigwhite { color: #fff; }
.theme-crimson .cp-block p.cp-bigline { color: #fff; }
.theme-crimson .cp-block p.cp-strong { color: #fff; }

/* ============================================================
   THEME: NAVY (Card 2 / Item 3 — Confidence Loop System)
   ============================================================ */
.content-page.theme-navy {
  --ember: #7b7fd0;
  background:
    radial-gradient(1000px 600px at 80% 0%, rgba(123,127,208,.16), transparent 60%),
    linear-gradient(180deg, #0c1330 0%, #070b1c 100%);
}
.theme-navy .cp-block { background: linear-gradient(180deg,#0e1638,#0a1029); border: 1px solid rgba(123,127,208,.22); }
.theme-navy .cp-block h2 { font-family: Rockwell, "Roboto Slab", Georgia, serif; color: #f4f3fb; letter-spacing: 0; text-transform: none; }
.theme-navy .cp-block p { color: #d7daf0; }
.theme-navy .cp-block b { color: #fff; }
.theme-navy .cp-hero h2 { color: #fff; }
.theme-navy .cp-subtitle { color: #b9bdf0; }
.theme-navy .cp-lead2, .theme-navy .cp-note { color: #d7daf0; }
.theme-navy .cp-lead2 .accent { color: #b9bdf0; }
.theme-navy .cp-bullets li { color: #e7e9fb; }
.theme-navy .cp-softbox { background: #9aa0e6; }
.theme-navy .cp-softbox b, .theme-navy .cp-softbox p { color: #15183a; }
.theme-navy .cp-h3 { font-family: Rockwell, "Roboto Slab", Georgia, serif; }
.theme-navy .cp-fl--outline .cp-fl-card { background: rgba(123,127,208,.07); border: 1px solid rgba(123,127,208,.3); border-left: 4px solid #7b7fd0; }
.theme-navy .cp-fl--filled .cp-fl-card { background: #1a2350; border: 1px solid rgba(123,127,208,.25); }
.theme-navy .cp-fl-card b { font-family: Rockwell, "Roboto Slab", Georgia, serif; color: #f0f1fb; }
.theme-navy .cp-fl-card p { color: #cfd3ef; }
.theme-navy .cp-fl--connect .cp-fl-ic { background: rgba(123,127,208,.18); border-color: rgba(123,127,208,.4); color: #c7caf2; }
.theme-navy .cp-fl--connect .cp-fl-ic::after { background: rgba(123,127,208,.25); }
.theme-navy .cp-loop-node { font-family: Rockwell, "Roboto Slab", Georgia, serif; }
.theme-navy .cp-quote { border-left-color: #7b7fd0; color: #ecedfb; }
.theme-navy .cp-quote b { color: #fff; }

/* ============================================================
   THEME: ROYAL (Card 2 / Item 4 — Confidence Boost / Rob Dial)
   ============================================================ */
.content-page.theme-royal {
  --ember: #4f7fd0;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(60,110,200,.14), transparent 60%),
    linear-gradient(180deg, #141b29 0%, #0c1019 100%);
}
.theme-royal .cp-block { background: #1a2233; border: 1px solid rgba(90,130,200,.18); }
.theme-royal .cp-block h2 { font-family: Rockwell, "Roboto Slab", Georgia, serif; color: #f3f5fb; letter-spacing: 0; text-transform: none; }
.theme-royal .cp-block p { color: #cdd5e6; }
.theme-royal .cp-block b { color: #fff; }
.theme-royal .cp-prelead, .theme-royal .cp-prelead b { color: #fff; }
.theme-royal .cp-softbox { background: #1d4e8f; }
.theme-royal .cp-softbox p, .theme-royal .cp-softbox b, .theme-royal .cp-softbox li { color: #eaf1ff; }
.theme-royal .cp-h3 { font-family: Rockwell, "Roboto Slab", Georgia, serif; color: #fff; }
.theme-royal .cp-notebox { background: rgba(29,78,143,.22); border-color: rgba(90,130,200,.35); }
.theme-royal .cp-fl--filled .cp-fl-card { background: #222c40; border: 1px solid rgba(90,130,200,.2); }
.theme-royal .cp-fl--outline .cp-fl-card { background: rgba(90,130,200,.06); border: 1px solid rgba(90,130,200,.25); border-left: 4px solid #4f7fd0; }
.theme-royal .cp-fl-card b { font-family: Rockwell, "Roboto Slab", Georgia, serif; color: #eef1fb; }
.theme-royal .cp-fl-card p { color: #cdd5e6; }
.theme-royal .cp-quote { border-left-color: #4f7fd0; color: #e7ecf7; }
.theme-royal .cp-quote b { color: #fff; }

/* ============================================================
   THEME: VITALITY (Card 3 / Item 1 — Men's Vitality Starter Pack / MP5)
   ============================================================ */
.content-page.theme-vitality {
  --ember: #e0414f;
  background:
    radial-gradient(1000px 620px at 0% 6%, rgba(214,40,40,.50), transparent 55%),
    radial-gradient(900px 600px at 100% 55%, rgba(150,22,22,.30), transparent 60%),
    linear-gradient(180deg, #1a0608 0%, #0a0303 100%);
}
.theme-vitality .cp-block {
  background: linear-gradient(180deg, rgba(22,6,8,.92), rgba(8,3,4,.95));
  border: 1px solid rgba(224,65,79,.16);
}
.theme-vitality .cp-block h2 {
  font-family: "Arial Narrow", "Inter", sans-serif;
  color: #e21f1f; letter-spacing: .5px; text-transform: uppercase; font-weight: 800;
}
.theme-vitality .cp-hero h2 { color: #f4e7df; }
.theme-vitality .cp-block p { color: #e7dcdd; }
.theme-vitality .cp-bullets li { color: #f1e7e8; }
.theme-vitality .cp-info--filled .cp-info { background: linear-gradient(180deg,#5e141a,#3c0c11); border: 1px solid rgba(224,65,79,.3); text-align: left; }
.theme-vitality .cp-info--filled .cp-info b { color: #f4e7df; font-size: 20px; }
.theme-vitality .cp-info--filled .cp-info span { color: #e7dcdd; }
.theme-vitality .cp-callout--big { background: linear-gradient(180deg,#d11f1f,#9e1414); color: #fff; }
.theme-vitality .cp-callout-sub { display: block; font-size: 18px; font-weight: 700; margin-top: 12px; }

/* check grid (what changes for you) */
.cp-checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; margin: 8px 0 18px; }
@media (max-width: 720px){ .cp-checkgrid { grid-template-columns: 1fr; } }
.cp-checkitem { display: flex; align-items: flex-start; gap: 14px; }
.cp-checkitem > span:last-child { color: #f1e7e8; line-height: 1.4; }
.cp-checkbox { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px; background: #8e1c22; border: 1px solid rgba(224,65,79,.5); margin-top: 2px; }
.cp-bigcream { font-family: "Arial Narrow", "Inter", sans-serif; font-size: 40px; font-weight: 800; color: #f4e7df; line-height: 1.05; margin: 18px 0 12px; }
@media (max-width: 720px){ .cp-bigcream { font-size: 30px; } }
.cp-firetriple { font-size: 24px; font-weight: 800; color: #e0414f; margin: 0; }
.cp-firetriple b { color: #e0414f; }

/* ============================================================
   THEME: INTIMACY (Card 3 / Item 2 — Intimate Technique Mastery)
   ============================================================ */
.content-page.theme-intimacy {
  --ember: #f49ac1; --ember-soft: #e07ba8;
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(244,154,193,.10), transparent 60%),
    linear-gradient(180deg, #161618 0%, #0e0e10 100%);
}
.theme-intimacy .cp-block { background: #1d1d20; border: 1px solid rgba(255,255,255,.06); }
.theme-intimacy .cp-block h2 { font-family: "Arial Narrow", "Inter", sans-serif; color: #f49ac1; letter-spacing: .5px; text-transform: uppercase; font-weight: 800; }
.theme-intimacy .cp-subtitle { color: #f49ac1; font-weight: 700; }
.theme-intimacy .cp-block p { color: #d7d3d6; }
.theme-intimacy .cp-block b { color: #fff; }
.theme-intimacy .cp-bullets li { color: #efe9ec; }
.theme-intimacy .cp-chev .chev-badge { background: linear-gradient(180deg,#3a3a40,#2a2a30); }
.theme-intimacy .cp-chev p { color: #fff; font-weight: 700; }
.theme-intimacy .cp-quote { border-left-color: #f49ac1; }
.theme-intimacy .cp-quote b { color: #f49ac1; }

/* shared pink helpers (eyebrow / leads / step rows / change bars) */
.cp-eyebrow { display: inline-block; font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--ember); margin: 0 0 10px; }
.cp-pink { color: #f49ac1; }
.cp-pinklead { color: #f49ac1; font-weight: 700; font-size: 18px; margin: 0 0 12px; }
.cp-bigpink { font-family: "Arial Narrow", "Inter", sans-serif; font-size: 50px; font-weight: 800; line-height: 1.05; color: #f49ac1; margin: 18px 0 4px; }
@media (max-width: 720px){ .cp-bigpink { font-size: 32px; } }
.cp-zonebox { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 22px 24px; }
.cp-zonelabel { color: #e9e6e8; font-size: 18px; margin: 0 0 10px; }
.cp-underrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin: 14px 0 18px; }
@media (max-width: 720px){ .cp-underrow { grid-template-columns: 1fr; } }
.cp-underitem { display: flex; flex-direction: column; }
.cp-underitem .ic { font-size: 24px; margin-bottom: 14px; }
.cp-underitem .ln { height: 2px; background: #f49ac1; margin-bottom: 12px; }
.cp-underitem b { color: #fff; font-weight: 700; }
.cp-changebars { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 10px 0 16px; }
@media (max-width: 820px){ .cp-changebars { grid-template-columns: 1fr; } }
.cp-changebar { background: rgba(10,8,10,.55); border-left: 4px solid #f49ac1; border-radius: 6px; padding: 16px 20px; color: #fff; font-weight: 700; }
.cp-pinkpanel { background: linear-gradient(135deg, rgba(120,40,70,.45), rgba(40,20,30,.55)) !important; border: 1px solid rgba(244,154,193,.18) !important; }

/* ============================================================
   THEME: EDGE (Card 3 / Item 3 — Advanced Female Response)
   ============================================================ */
.content-page.theme-edge {
  --ember: #e0414f; --ember-soft: #b5252f;
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(224,65,79,.08), transparent 60%),
    linear-gradient(180deg, #161618 0%, #0e0e10 100%);
}
.theme-edge .cp-block { background: #1d1d20; border: 1px solid rgba(255,255,255,.06); }
.theme-edge .cp-block h2 { font-family: "Arial Narrow", "Inter", sans-serif; color: #fff; letter-spacing: .5px; text-transform: uppercase; font-weight: 800; }
.theme-edge .cp-block p { color: #d7d3d6; }
.theme-edge .cp-block b { color: #fff; }
.theme-edge .cp-underitem .ln { background: #f4736f; }

.cp-subhead { font-family: "Arial Narrow", "Inter", sans-serif; font-size: 30px; font-weight: 800; color: #fff; margin: -6px 0 18px; }
@media (max-width: 720px){ .cp-subhead { font-size: 22px; } }
.cp-coral { color: #f4736f; }
.cp-bigword { font-family: "Arial Narrow", "Inter", sans-serif; font-size: 64px; font-weight: 800; color: #f4736f; line-height: 1; margin: 18px 0 4px; }
@media (max-width: 720px){ .cp-bigword { font-size: 40px; } }

.cp-redboxes { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 8px 0 16px; }
@media (max-width: 720px){ .cp-redboxes { grid-template-columns: 1fr; } }
.cp-redbox { background: linear-gradient(180deg,#7a1414,#5a0e0e); border: 1px solid rgba(224,65,79,.3); border-radius: 8px; padding: 18px 20px; color: #fff; font-weight: 700; font-size: 17px; }
.cp-edgebox { background: rgba(10,8,8,.5); border: 1px solid rgba(224,65,79,.5); border-left: 5px solid #f4736f; border-radius: 8px; padding: 16px 22px; color: #fff; font-weight: 700; }

.cp-underrow.cols2 { grid-template-columns: 1fr 1fr; }

.cp-vchevs { margin: 10px 0 16px; }
.cp-vchev { background: linear-gradient(180deg,#7a1414,#5a0e0e); color: #fff; font-weight: 800; font-size: 22px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); }
.cp-vchev:first-child { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
.cp-vchev-label { color: #fff; font-weight: 700; margin: 0 0 18px; }

.cp-resultcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 10px 0 16px; }
@media (max-width: 820px){ .cp-resultcards { grid-template-columns: 1fr; } }
.cp-resultcard { background: linear-gradient(180deg,#7a1414,#5a0e0e); border: 1px solid rgba(224,65,79,.3); border-radius: 12px; padding: 24px 22px; }
.cp-resultcard .ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f4736f; font-size: 24px; margin-bottom: 18px; }
.cp-resultcard b { display: block; color: #fff; font-size: 18px; }
.cp-redpanel { background: linear-gradient(135deg, rgba(90,20,20,.55), rgba(30,14,14,.6)) !important; border: 1px solid rgba(224,65,79,.18) !important; }

/* ---- Floating support ---- */
.support-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 50;
  width: 60px; height: 60px; border-radius: 14px;
  background: linear-gradient(180deg,#16243c,#0c1626);
  border: 1px solid var(--gold-soft); color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.support-fab:hover { filter: brightness(1.12); }
.support-fab svg { width: 26px; height: 26px; }

/* empty-state */
.empty { color: var(--text-dim); font-size: 14px; padding: 20px 0; }

/* logout link in sidebar bottom */
.side-bottom { margin-top: auto; width: 100%; }

/* card1 item2 — "The Fatal Male Error" (match reference: centered, two clean columns, big sans Title-Case heading, no image) */
.cp-textonly.cp-fatal { text-align: center; }
.cp-textonly.cp-fatal h2 { font-family: "Inter", "Arial Narrow", sans-serif; font-size: 52px; line-height: 1.05; text-transform: none; letter-spacing: -.5px; margin: 0 0 30px; }
.cp-textonly.cp-fatal .cp-twocol { columns: 2; column-gap: 60px; max-width: 760px; margin: 0 auto; }
.cp-textonly.cp-fatal .cp-twocol p { break-inside: avoid; font-family: "Inter", "Arial Narrow", sans-serif; font-size: 19px; line-height: 1.5; }
@media (max-width: 720px){ .cp-textonly.cp-fatal h2 { font-size: 32px; } .cp-textonly.cp-fatal .cp-twocol { columns: 1; } }