/* CosmicRx brand layer for the Encore theme (matches cosmicrx.com).
   Fonts are loaded in snippets/global_head.liquid. Colors: lavender #EBECFF, plum #433259,
   violet #61538A, hot pink #FD329A, orchid #FD42D2, white. */

:root{
  --crx-ground:#EBECFF; --crx-orchid:#FD42D2; --crx-violet:#61538A; --crx-pink:#FD329A; --crx-ink:#433259; --crx-white:#FFFFFF;
  --crx-disp:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --crx-serif:"Instrument Serif", Georgia, serif;
  --crx-mono:"DM Mono", ui-monospace, Menlo, monospace;
}

body{background-color:var(--crx-ground)}

/* Type: body copy */
body, p, li, input, textarea, select, .link-list__link, .card__text, .feature__text{font-family:var(--crx-disp) !important; font-variation-settings:"opsz" 14}

/* Type: big headlines in condensed caps */
h1, h2, .h1, .h2{font-family:var(--crx-disp) !important; font-weight:800 !important; font-stretch:75%; text-transform:uppercase; letter-spacing:-.01em !important; line-height:.9 !important; text-wrap:balance}
h3, h4, .h3, .h4, .card__title{font-family:var(--crx-disp) !important; font-weight:800 !important; font-stretch:75%; letter-spacing:-.005em !important}

/* Italicize a word in any headline in the Kajabi editor to get the pink serif accent */
h1 em, h2 em, h3 em, h1 i, h2 i, h3 i{font-family:var(--crx-serif) !important; font-style:italic; font-weight:400 !important; text-transform:none; letter-spacing:-.02em; font-stretch:100%; color:var(--crx-pink)}
.background-dark h1 em, .background-dark h2 em, .background-dark h3 em{color:#FFB8EF}

/* Small monospace label, e.g. <p class="crx-tag"> above a headline */
.crx-tag{font-family:var(--crx-mono) !important; font-size:13px !important; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px}

/* White text that was set inline for the old dark look: switch to plum on light sections */
.section.background-light [style*="color: #ffffff"],
.section.background-light [style*="color: #fff;"],
.section.background-light [style*="color: rgb(255, 255, 255)"]{color:var(--crx-ink) !important}

/* Buttons: pill with plum outline and offset shadow */
.btn{font-family:var(--crx-disp) !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; border-radius:999px !important; border:2px solid var(--crx-ink) !important; transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--crx-ink)}
.btn--solid{background-color:var(--crx-ink) !important; color:var(--crx-white) !important}
.btn--outline{background-color:var(--crx-white) !important; color:var(--crx-ink) !important}
.background-dark .btn--solid{background-color:var(--crx-white) !important; color:var(--crx-ink) !important; border-color:var(--crx-white) !important}

/* Header: white pill nav on lavender */
.header .link-list__link{font-weight:600 !important}
.header .link-list__link:hover{color:var(--crx-pink) !important}
@media (min-width:768px){
  .header__content--desktop{background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:999px; margin-top:10px; margin-bottom:10px; padding-left:22px !important; padding-right:8px !important}
}
.logo__image{max-height:34px !important; width:auto !important}

/* Cards, offers and course features: white cards with a plum outline */
.card, .feature{background:var(--crx-white); border:2px solid var(--crx-ink) !important; border-radius:26px !important; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease}
.card:hover, .feature:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--crx-ink)}
.card img, .feature img, .feature__image{border-radius:18px}
.card__title{text-transform:uppercase; color:var(--crx-ink)}
.card__price, .store-card__price{font-family:var(--crx-mono) !important; letter-spacing:.06em}

/* Footer in plum */
.footer{background:var(--crx-ink) !important; color:var(--crx-white) !important}
.footer a, .footer .link-list__link{color:var(--crx-white) !important}
.footer a:hover{color:var(--crx-orchid) !important}

/* Popup */
.modal__content, .modal-content{border:2px solid var(--crx-ink); border-radius:28px; overflow:hidden}

@media (prefers-reduced-motion:reduce){ .btn, .card, .feature{transition:none} .btn:hover, .card:hover, .feature:hover{transform:none} }

/* ===================== CosmicRx homepage sections (crx_home_*) ===================== */
.crxh{color:var(--crx-ink); font-family:var(--crx-disp)}
.crxh *, .crxh *::before, .crxh *::after{box-sizing:border-box}
.crxh a{text-decoration:none; color:inherit}
.crxh img{max-width:100%; display:block}
.crxh-wrap{max-width:1280px; margin:0 auto; padding-inline:clamp(16px,4vw,48px)}
.crxh h1, .crxh h2, .crxh p{margin:0}
.crxh-tag{font-family:var(--crx-mono) !important; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px !important}
.crxh em{font-family:var(--crx-serif) !important; font-style:italic; font-weight:400 !important; text-transform:none; letter-spacing:-.02em; font-stretch:100%; color:var(--crx-pink)}
.crxh-btn{display:inline-flex; align-items:center; gap:10px; font:700 16px/1 var(--crx-disp); padding:17px 26px; border-radius:999px; border:2px solid var(--crx-ink); background:var(--crx-ink); color:var(--crx-white) !important; white-space:nowrap; transition:transform .15s, box-shadow .15s}
.crxh-btn:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--crx-ink)}
.crxh-btn--alt{background:var(--crx-white); color:var(--crx-ink) !important}
.crxh-ctas{display:flex; flex-wrap:wrap; gap:12px}
.crxh-pill{display:inline-block; align-self:flex-start; background:var(--crx-white); color:var(--crx-ink); border:2px solid var(--crx-ink); border-radius:999px; padding:6px 12px; font:500 11px/1 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.crxh-sticker{position:absolute; z-index:2; display:grid; place-items:center; text-align:center; width:96px; height:96px; border-radius:50%; border:2px solid var(--crx-ink); background:var(--crx-orchid); color:var(--crx-ink); font:800 13px/1.05 var(--crx-disp); text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){ .crxh-wob{animation:crxh-wob 4s ease-in-out infinite} .crxh-ticker-track{animation:crxh-tick 40s linear infinite} }
@keyframes crxh-wob{50%{transform:rotate(6deg) scale(1.04)}}
@keyframes crxh-tick{to{transform:translateX(-50%)}}

/* ticker */
.crxh-ticker{background:var(--crx-ink); color:var(--crx-white); overflow:hidden; white-space:nowrap}
.crxh-ticker-track{display:inline-flex; gap:40px; padding:12px 0; font:500 14px/1 var(--crx-mono); text-transform:uppercase; letter-spacing:.06em}
.crxh-ticker-track span::after{content:"✦"; margin-left:40px; color:var(--crx-orchid)}

/* hero */
.crxh-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; padding-block:clamp(40px,6vw,80px) clamp(40px,6vw,72px)}
.crxh-h1{font-size:clamp(56px,9.6vw,140px) !important; line-height:.86 !important}
.crxh-h1 em{display:block; font-size:.82em; line-height:.92; margin-top:.04em}
.crxh-aka{display:block; width:fit-content; margin:14px 0 0 4px; background:var(--crx-pink); color:var(--crx-white); border:2px solid var(--crx-ink); border-radius:999px; padding:.42em .9em .38em; font:700 clamp(15px,1.7vw,22px)/1 var(--crx-disp); text-transform:none; letter-spacing:0; font-stretch:100%; transform:rotate(-4deg); box-shadow:4px 4px 0 var(--crx-ink)}
.crxh-lede{font-size:clamp(18px,1.6vw,21px); max-width:40ch; margin:24px 0 28px !important; font-weight:500}
.crxh-stars{margin-top:26px !important; font-weight:600}
.crxh-stars b{color:var(--crx-pink); letter-spacing:2px; font-size:20px; margin-right:8px}
.crxh-feat{position:relative; display:block; background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:32px; padding:14px; box-shadow:10px 10px 0 var(--crx-ink)}
.crxh-feat img{border-radius:20px; width:100%}
.crxh-feat .crxh-sticker{top:-30px; right:-18px; transform:rotate(10deg)}
.crxh-feat-body{display:grid; gap:10px; padding:18px 8px 6px}
.crxh-feat-title{font:800 clamp(30px,3.2vw,44px)/.9 var(--crx-disp); font-stretch:75%; text-transform:uppercase}
.crxh-feat-text{font-size:16px; font-weight:500}
.crxh-feat .crxh-btn{justify-self:start}
@media (max-width:900px){ .crxh-hero{grid-template-columns:1fr} .crxh-feat .crxh-sticker{right:6px} }

/* course grid */
.crxh-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 40px; padding-top:clamp(64px,8vw,120px); margin-bottom:clamp(28px,4vw,44px)}
.crxh-h2{font-size:clamp(48px,8vw,116px) !important; line-height:.88 !important}
.crxh-head p{max-width:40ch; font-size:18px; font-weight:500}
.crxh-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.crxh-course{display:flex; flex-direction:column; background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:26px; padding:10px; transition:transform .15s, box-shadow .15s}
.crxh-course:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--crx-ink)}
.crxh-course img{border-radius:18px; aspect-ratio:1; object-fit:cover; width:100%}
.crxh-course-b{display:flex; flex-direction:column; gap:10px; padding:14px 8px 8px; flex:1}
.crxh-course .crxh-pill{background:var(--crx-ground)}
.crxh-course.is-hot .crxh-pill{background:var(--crx-orchid)}
.crxh-course-t{font:800 26px/.92 var(--crx-disp); font-stretch:75%; text-transform:uppercase}
.crxh-go{margin-top:auto; font-weight:700; font-size:15px; display:flex; justify-content:space-between; padding-top:4px}
@media (max-width:1000px){ .crxh-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .crxh-grid{grid-template-columns:1fr} }

/* premium band */
.crxh-premium{position:relative; overflow:hidden; margin-top:clamp(72px,9vw,130px); background:var(--crx-pink); color:var(--crx-white); border-block:2px solid var(--crx-ink); padding-block:clamp(56px,8vw,100px)}
.crxh-premium-h{font-size:clamp(60px,11vw,170px) !important; line-height:.8 !important; color:var(--crx-white) !important}
.crxh-premium-h em{display:block; color:var(--crx-ink) !important; font-size:.55em}
.crxh-premium-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:28px}
.crxh-premium p{max-width:44ch; font-size:19px; font-weight:600; color:var(--crx-white)}
.crxh-perks{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.crxh-premium .crxh-sticker{width:124px; height:124px; right:clamp(16px,4vw,48px); top:30px; transform:rotate(10deg); font-size:14px}
@media (max-width:600px){ .crxh-premium .crxh-sticker{width:92px; height:92px; top:14px; font-size:11px} }

/* meet madi */
.crxh-madi{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center; padding-block:clamp(72px,9vw,130px)}
.crxh-madi-ph{border:2px solid var(--crx-ink); border-radius:260px 260px 32px 32px; overflow:hidden; box-shadow:12px 12px 0 var(--crx-violet); max-width:460px; width:100%; justify-self:center; background:#BAA3E9}
.crxh-madi-ph img{width:100%; aspect-ratio:1; object-fit:cover}
.crxh-madi .crxh-h2{margin:12px 0 18px !important; font-size:clamp(44px,6.2vw,90px) !important}
.crxh-madi-bio p{font-size:18px; font-weight:500; max-width:52ch}
.crxh-madi-bio p + p{margin-top:12px}
.crxh-chips{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px}
.crxh-chips span{border:2px solid var(--crx-ink); border-radius:999px; padding:7px 14px; font-weight:700; font-size:14px; background:var(--crx-white)}
.crxh-chips span:nth-child(1){background:var(--crx-orchid)}
.crxh-chips span:nth-child(2){background:var(--crx-pink); color:var(--crx-white)}
@media (max-width:860px){ .crxh-madi{grid-template-columns:1fr} }