/* CosmicRx brand layer for course sales pages (matches cosmicrx.com and the Academy).
   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 sales page (sections/crx_sales.liquid) ===================== */
.crxs{color:var(--crx-ink); font-family:var(--crx-disp); font-size:17px; line-height:1.55}
.crxs *, .crxs *::before, .crxs *::after{box-sizing:border-box}
.crxs a{text-decoration:none; color:inherit}
.crxs img{max-width:100%; display:block}
.crxs h1, .crxs h2, .crxs h3, .crxs p, .crxs ul, .crxs figure, .crxs blockquote{margin:0}
.crxs ul{padding:0; list-style:none}
.crxs 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)}
.crxs section{scroll-margin-top:90px}
.crxs-wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(16px,4vw,48px)}
.crxs-tag{font-family:var(--crx-mono) !important; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.crxs-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 17px/1 var(--crx-disp); padding:19px 28px; 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}
.crxs-btn:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--crx-ink)}
.crxs-btn--pink{background:var(--crx-pink)}
.crxs-pill{display:inline-block; justify-self: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}
.crxs-sticker{position:absolute; z-index:2; display:grid; place-items:center; text-align:center; 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){ .crxs-wob{animation:crxs-wob 4s ease-in-out infinite} }
@keyframes crxs-wob{50%{transform:rotate(4deg) scale(1.04)}}

/* top bar + header */
.crxs-top{background:var(--crx-ink); color:var(--crx-white); text-align:center; font:500 12.5px/1.3 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase; padding:11px 12px}
.crxs-top b{color:var(--crx-orchid); font-weight:500}
.crxs-nav{position:sticky; top:0; z-index:30; padding-block:10px; background:var(--crx-ground)}
.crxs-nav-in{display:flex; align-items:center; gap:16px; background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:999px; padding:8px 8px 8px 22px}
.crxs-logo img{height:28px; width:auto}
.crxs-nav-note{margin-left:auto; font:500 12px/1 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase}
.crxs-nav .crxs-btn{padding:12px 20px; font-size:15px; margin-left:auto}
.crxs-nav-note + .crxs-btn{margin-left:0}
@media (max-width:520px){ .crxs-nav-note{display:none} .crxs-logo img{height:22px} }

/* hero */
.crxs-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; padding-block:clamp(32px,5vw,64px) clamp(40px,6vw,72px)}
.crxs-hero .crxs-tag{margin-bottom:14px}
.crxs-h1{font-size:clamp(50px,8vw,108px) !important; line-height:.88 !important}
.crxs-h1 em{display:block; font-size:.62em; line-height:1; margin-top:.12em}
.crxs-lede{font-size:clamp(18px,1.7vw,21px); max-width:44ch; margin-top:22px !important; font-weight:500}
.crxs-offer-line{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:28px}
.crxs-price{font:800 56px/1 var(--crx-disp); font-stretch:75%}
.crxs-price small{display:block; font:500 11.5px/1.3 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin-top:4px}
.crxs-trust{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; font-size:14.5px; font-weight:600}
.crxs-trust span::before{content:"✦ "; color:var(--crx-pink)}
.crxs-cover{position:relative; max-width:460px; width:100%; justify-self:center}
.crxs-cover img{border:2px solid var(--crx-ink); border-radius:28px; box-shadow:12px 12px 0 var(--crx-ink); width:100%}
.crxs-cover .crxs-sticker{width:104px; height:104px; top:-26px; right:-18px; transform:rotate(10deg)}
@media (max-width:880px){ .crxs-hero{grid-template-columns:1fr} .crxs-cover{order:-1; max-width:340px} .crxs-cover .crxs-sticker{right:0} }

/* section heads */
.crxs-sec{padding-block:clamp(64px,8vw,110px) 0}
.crxs-sh{display:grid; gap:14px; margin-bottom:clamp(26px,4vw,40px); max-width:760px}
.crxs-sh h2{font-size:clamp(42px,6.4vw,84px) !important; line-height:.9 !important}
.crxs-sh p{font-size:18px; font-weight:500; max-width:56ch}

/* is this you */
.crxs-pains{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.crxs-pains li{display:flex; gap:14px; align-items:flex-start; background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:22px; padding:18px 20px; font-size:18px; font-weight:600; line-height:1.35}
.crxs-pains li::before{content:"✦"; color:var(--crx-pink); font-size:20px; line-height:1.2}
.crxs-turn{margin-top:22px !important; font:400 clamp(26px,3vw,38px)/1.15 var(--crx-serif) !important; font-style:italic; max-width:32ch}
.crxs-turn b{font-family:var(--crx-disp); font-style:normal; font-weight:800; font-stretch:75%; text-transform:uppercase; color:var(--crx-pink)}
@media (max-width:700px){ .crxs-pains{grid-template-columns:1fr} }

/* outcomes */
.crxs-outs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.crxs-out{border:2px solid var(--crx-ink); border-radius:26px; padding:24px; display:grid; gap:12px; align-content:start; background:var(--crx-white)}
.crxs-out:nth-child(3n+2){background:var(--crx-violet); color:var(--crx-white)}
.crxs-out:nth-child(3n+3){background:var(--crx-pink); color:var(--crx-white)}
.crxs-out h3{font-size:30px !important; line-height:.95 !important; text-transform:uppercase}
.crxs-out:nth-child(3n+2) h3 em{color:#FFB8EF} .crxs-out:nth-child(3n+3) h3 em{color:var(--crx-ink)}
.crxs-out p{font-size:16.5px; font-weight:500}
@media (max-width:860px){ .crxs-outs{grid-template-columns:1fr} }

/* curriculum */
.crxs-curr{display:grid; gap:10px}
.crxs-mod{background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:22px; overflow:hidden}
.crxs-mod summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:16px 20px}
.crxs-mod summary::-webkit-details-marker{display:none}
.crxs-n{font:500 12px/1 var(--crx-mono); letter-spacing:.1em; background:var(--crx-ground); border:2px solid var(--crx-ink); border-radius:999px; padding:8px 11px}
.crxs-mt{font:800 clamp(20px,2vw,26px)/1 var(--crx-disp); font-stretch:75%; text-transform:uppercase}
.crxs-c{font:500 12px/1 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.7; white-space:nowrap}
.crxs-mod[open] .crxs-c::after{content:" −"} .crxs-mod:not([open]) .crxs-c::after{content:" +"}
.crxs-mod ul{padding:0 20px 18px 72px; display:grid; gap:6px; font-weight:500}
.crxs-mod li::before{content:"→ "; color:var(--crx-pink); font-family:var(--crx-mono)}
.crxs-mod li.is-bonus{font-weight:700} .crxs-mod li.is-bonus::before{content:"★ Bonus: "}
@media (max-width:560px){ .crxs-mod summary{grid-template-columns:1fr auto} .crxs-n{display:none} .crxs-mod ul{padding-left:20px} }

/* everything you get + offer box */
.crxs-getgrid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(20px,4vw,48px); align-items:start}
.crxs-getgrid.is-solo{grid-template-columns:minmax(0,560px); justify-content:center}
.crxs-checks{display:grid; gap:10px}
.crxs-checks li{display:flex; gap:12px; align-items:center; background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:999px; padding:12px 18px; font-weight:700; font-size:16.5px}
.crxs-checks li::before{content:"✓"; flex:none; width:28px; height:28px; border-radius:50%; background:var(--crx-pink); color:var(--crx-white); display:grid; place-items:center; font-size:14px}
.crxs-box{position:sticky; top:100px; background:var(--crx-ink); color:var(--crx-white); border:2px solid var(--crx-ink); border-radius:32px; padding:clamp(24px,3vw,34px); box-shadow:10px 10px 0 var(--crx-pink); display:grid; gap:16px}
.crxs-box .crxs-tag{color:#FFB8EF}
.crxs-box h3{font-size:clamp(34px,3.4vw,46px) !important; line-height:.92 !important; text-transform:uppercase; color:var(--crx-white)}
.crxs-box h3 em{color:#FFB8EF}
.crxs-box-p{font:800 76px/.9 var(--crx-disp); font-stretch:75%}
.crxs-box-p small{display:block; font:500 12px/1.4 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin-top:6px}
.crxs-box .crxs-btn{background:var(--crx-pink); border-color:var(--crx-white); width:100%; white-space:normal; text-align:center}
.crxs-box .crxs-btn:hover{box-shadow:4px 4px 0 var(--crx-white)}
.crxs-box ul{display:grid; gap:6px; font-size:15px; font-weight:600}
.crxs-box li::before{content:"✓ "; color:var(--crx-orchid)}
@media (max-width:860px){ .crxs-getgrid{grid-template-columns:1fr} .crxs-box{position:static} }

/* proof */
.crxs-proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px}
.crxs-quote{background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:26px; padding:22px; box-shadow:6px 6px 0 var(--crx-ink); display:grid; gap:14px; align-content:start}
.crxs-quote p{font:400 22px/1.25 var(--crx-serif) !important; font-style:italic}
.crxs-quote figcaption{font:500 11.5px/1.3 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase}

/* madi */
.crxs-madi{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.crxs-madi-ph{border:2px solid var(--crx-ink); border-radius:240px 240px 30px 30px; overflow:hidden; box-shadow:12px 12px 0 var(--crx-violet); max-width:420px; width:100%; justify-self:center; background:#BAA3E9}
.crxs-madi-ph img{width:100%; aspect-ratio:1; object-fit:cover}
.crxs-madi h2{font-size:clamp(42px,5.6vw,76px) !important; margin:12px 0 16px !important}
.crxs-madi p{font-size:18px; font-weight:500; max-width:52ch}
.crxs-creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.crxs-creds span{border:2px solid var(--crx-ink); border-radius:999px; padding:8px 14px; font-weight:700; font-size:14px; background:var(--crx-white)}
.crxs-creds span:nth-child(1){background:var(--crx-orchid)} .crxs-creds span:nth-child(2){background:var(--crx-pink); color:var(--crx-white)}
@media (max-width:820px){ .crxs-madi{grid-template-columns:1fr} }

/* faq */
.crxs-faq{display:grid; gap:10px; max-width:860px}
.crxs-faq details{background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:22px}
.crxs-faq summary{list-style:none; cursor:pointer; padding:18px 22px; display:flex; justify-content:space-between; gap:16px; font:800 clamp(19px,1.9vw,24px)/1.1 var(--crx-disp); font-stretch:75%; text-transform:uppercase}
.crxs-faq summary::-webkit-details-marker{display:none}
.crxs-faq summary::after{content:"+"; font-family:var(--crx-mono); color:var(--crx-pink)}
.crxs-faq details[open] summary::after{content:"−"}
.crxs-faq details p{padding:0 22px 20px; font-size:16.5px; font-weight:500; max-width:70ch}

/* final call */
.crxs-final{position:relative; overflow:hidden; margin-top:clamp(72px,9vw,120px); background:var(--crx-pink); color:var(--crx-white); border-block:2px solid var(--crx-ink); padding-block:clamp(56px,8vw,100px); text-align:center}
.crxs-final h2{font-size:clamp(52px,9vw,130px) !important; line-height:.84 !important; color:var(--crx-white)}
.crxs-final h2 em{display:block; color:var(--crx-ink) !important; font-size:.6em}
.crxs-final p{max-width:46ch; margin:22px auto 30px !important; font-size:19px; font-weight:600}
.crxs-final .crxs-btn{font-size:19px; padding:22px 34px}
.crxs-small{display:block; margin-top:16px; font:500 12px/1.4 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase}
.crxs-final .crxs-sticker{width:118px; height:118px; right:clamp(16px,4vw,48px); top:28px; transform:rotate(10deg)}
@media (max-width:640px){ .crxs-final .crxs-sticker{display:none} }

/* related */
.crxs-rel{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.crxs-rc{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; background:var(--crx-white); border:2px solid var(--crx-ink); border-radius:22px; padding:10px; transition:transform .15s, box-shadow .15s}
.crxs-rc:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--crx-ink)}
.crxs-rc img{border-radius:14px}
.crxs-rc b{display:block; font:800 20px/.95 var(--crx-disp); font-stretch:75%; text-transform:uppercase}
.crxs-rc small{font:500 11px/1.3 var(--crx-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.75}
@media (max-width:860px){ .crxs-rel{grid-template-columns:1fr} }

/* footer + sticky bar */
.crxs-foot{margin-top:clamp(64px,8vw,100px); background:var(--crx-ink); color:var(--crx-white); padding-block:36px 100px}
.crxs-foot .crxs-wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; align-items:center; font:500 12px/1.4 var(--crx-mono)}
.crxs-foot-logo{font:400 34px/1 "Room205", var(--crx-serif); color:var(--crx-white)}
.crxs-foot-logo b{color:var(--crx-pink); font-weight:400}
.crxs-sticky{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--crx-white); border-top:2px solid var(--crx-ink); display:none; align-items:center; justify-content:space-between; gap:12px}
.crxs-sticky b{font:800 26px/1 var(--crx-disp); font-stretch:75%}
.crxs-sticky .crxs-btn{padding:14px 20px; font-size:15px}
@media (max-width:760px){ .crxs-sticky{display:flex} }