/* Momstrologer hub mockup: shared system
   Fonts are Google stand-ins; swap for licensed 1000fonts faces before launch. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,0..100;1,9..144,300..700,0..100&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  /* Brand palette (from the carousel brand, 2026-10-18). Old token names kept so every page picks it up. */
  --navy:#001219; --deep-teal:#005F73; --teal:#0A9396; --seafoam:#94D2BD; --sand:#E9D8A6;
  --amber:#EE9B00; --burnt:#CA6702; --rust-c:#BB3E03; --brick:#AE2012; --oxblood:#9B2226;
  --olive:var(--deep-teal); --charcoal:var(--navy); --cream:#FBF5E6; --oatmeal:var(--sand);
  --tobacco:var(--burnt); --tobacco-ink:var(--deep-teal); --rust:var(--rust-c); --rust-ink:var(--rust-c);
  --brass:var(--amber); --stone:var(--teal); --garnet:var(--oxblood); --ink:var(--navy);
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Alegreya Sans', system-ui, sans-serif;
  --r:2px; --gutter:clamp(16px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 1.125rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* linen tooth */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── type ── */
.display{font-family:var(--font-display);font-weight:500;font-variation-settings:"SOFT" 60,"opsz" 144;letter-spacing:-.02em;line-height:.98}
.display em{font-style:italic;font-weight:300;font-variation-settings:"SOFT" 100,"opsz" 144;color:var(--rust-ink)}
.eyebrow{font:700 .72rem/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--tobacco-ink);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brass)}
.lede{font-family:var(--font-display);font-weight:350;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5;font-variation-settings:"SOFT" 50}

/* ── offer rail (the top buttons) ── */
.rail{position:sticky;top:0;z-index:50;background:rgba(243,235,221,.86);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(138,132,120,.35)}
.rail-inner{display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:10px var(--gutter);max-width:1440px;margin:0 auto}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:1.35rem;text-decoration:none;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:.45em}
.wordmark svg{width:22px;height:22px}
.rail nav{display:flex;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.rail nav::-webkit-scrollbar{display:none}
.tab{position:relative;display:flex;flex-direction:column;gap:2px;padding:9px 16px 9px 14px;border-radius:var(--r);text-decoration:none;white-space:nowrap;
  border:1px solid transparent;transition:background .35s var(--ease),border-color .35s var(--ease)}
.tab small{font:700 .6rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--tobacco-ink)}
.tab span{font:500 .98rem/1.1 var(--font-body)}
.tab:hover,.tab[aria-current]{background:var(--oatmeal);border-color:rgba(138,132,120,.35)}
.tab[aria-current]::after{content:"";position:absolute;left:14px;right:16px;bottom:-11px;height:2px;background:var(--rust)}
.tab .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rust);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 0 rgba(164,90,63,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(164,90,63,0)}100%{box-shadow:0 0 0 0 rgba(164,90,63,0)}}

/* ── buttons (Uiverse-style: sliding fill + traced border) ── */
.btn{--bg:var(--olive);--fg:var(--cream);position:relative;display:inline-flex;align-items:center;gap:.8em;padding:1.05em 1.7em;border-radius:var(--r);
  background:var(--bg);color:var(--fg);font:700 .82rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;
  overflow:hidden;isolation:isolate;transition:transform .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--charcoal);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:translateY(-2px)}
.btn .arrow{transition:transform .5s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}
.btn.ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost::before{background:var(--ink)}
.btn.ghost:hover{color:var(--cream)}
.btn.rust{--bg:var(--rust-ink)}
.btn.light{--bg:var(--cream);--fg:var(--charcoal)}
.btn.light::before{background:var(--brass)}
/* traced border on the hero CTA */
.btn.trace::after{content:"";position:absolute;inset:-1px;border-radius:var(--r);padding:1px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--brass) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}

/* ── shared layout ── */
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
section{position:relative}
.hair{height:1px;background:var(--brass);opacity:.6;border:0}
.card{background:var(--cream);border:1px solid rgba(138,132,120,.45);border-radius:var(--r);box-shadow:0 18px 40px -24px rgba(41,51,41,.35)}

/* arch-masked photo, the recurring signature shape */
.arch{border-radius:999px 999px var(--r) var(--r);overflow:hidden;position:relative}
.arch img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.arch:hover img{transform:scale(1.04)}

/* rotating badge */
.badge{width:120px;height:120px;animation:rot 22s linear infinite}
.badge text{font:700 9.5px var(--font-body);letter-spacing:.32em;text-transform:uppercase;fill:currentColor}
@keyframes rot{to{transform:rotate(360deg)}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid rgba(177,138,74,.55);padding:18px 0;background:var(--charcoal);color:var(--oatmeal)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:mq 38s linear infinite;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.4vw,2rem);font-variation-settings:"SOFT" 100}
.marquee-track span{display:flex;align-items:center;gap:48px;white-space:nowrap}
.marquee-track span::after{content:"✦";font-style:normal;color:var(--brass);font-size:.7em}
@keyframes mq{to{transform:translateX(-50%)}}

/* FAQ */
.faq details{border-top:1px solid rgba(138,132,120,.45);padding:22px 0}
.faq details:last-child{border-bottom:1px solid rgba(138,132,120,.45)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-family:var(--font-display);font-size:1.3rem;font-weight:450}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);font-weight:300;font-size:1.6rem;line-height:1;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-top:12px;max-width:62ch;color:#3d463b}

/* placeholder tag so nothing fake reads as real */
.ph{display:inline-block;font:700 .62rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;background:#f6d9a8;color:#5a3f12;padding:5px 7px;border-radius:2px;vertical-align:middle}

/* footer */
footer{background:var(--charcoal);color:var(--oatmeal);padding:72px 0 40px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer h4{font:700 .7rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
footer a{display:block;text-decoration:none;opacity:.85;margin:6px 0}
footer a:hover{opacity:1;color:var(--cream)}
footer .fine{grid-column:1/-1;border-top:1px solid rgba(229,216,197,.15);padding-top:22px;font-size:.85rem;opacity:.6}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

/* mobile sticky CTA (funnel pattern) */
.sticky-cta{display:none}
@media (max-width:760px){
  footer .wrap{grid-template-columns:1fr}
  .rail-inner{flex-wrap:wrap;gap:4px 10px;padding-top:8px;padding-bottom:6px}
  .rail nav{width:100%;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
  .tab{padding:7px 4px;align-items:center;text-align:center;background:var(--oatmeal)}
  .tab small{font-size:.5rem;letter-spacing:.12em}
  .tab span{font-size:.78rem;white-space:normal;line-height:1.15}
  .tab[aria-current]::after{left:8px;right:8px;bottom:-1px}
  body.dark .tab{background:rgba(229,216,197,.08)}
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;justify-content:center}
  .sticky-cta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* dark pages: no grain, it muddies contrast */
body.dark::before{display:none}

/* No small all-caps letterspaced labels anywhere (Melissa, 2026-10-18: "looks SO AI") */
.btn{text-transform:none;letter-spacing:.01em;font-size:1rem;font-weight:700}
footer h4{text-transform:none;letter-spacing:0;font-size:1rem;font-family:var(--font-display);font-weight:500}
.eyebrow{display:none}

/* Moving rainbow border, sitewide. Adapted from Magic UI "Border Beam" (MIT, see THIRD-PARTY-LICENSES.txt).
   Add class="beam" to a pill or button, class="beam-card" to a card. */
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}
.beam,.beam-card{position:relative;isolation:isolate}
.beam::after,.beam-card::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--beam),transparent 0 50%,#005F73 56%,#0A9396 61%,#94D2BD 66%,#E9D8A6 71%,#EE9B00 76%,#CA6702 81%,#BB3E03 86%,#AE2012 91%,#9B2226 96%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam-spin 4.5s linear infinite}
.beam-card::after{padding:3px;inset:0;animation-duration:7s}
@keyframes beam-spin{to{--beam:360deg}}
.btn.trace::after{background:conic-gradient(from var(--a,0deg),transparent 0 50%,#005F73 56%,#0A9396 61%,#94D2BD 66%,#E9D8A6 71%,#EE9B00 76%,#CA6702 81%,#BB3E03 86%,#AE2012 91%,#9B2226 96%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.beam::after,.beam-card::after{animation:none}}
/* Normal case for small tags too (no all-caps letterspaced labels) */
.onair,.ribbon,.label,.src,.screen .live,label.field,.copy,.cal .dow,.q small,.orbit .lbl,.ph4 small,.chip,.tag{text-transform:none!important;letter-spacing:.01em!important}

/* Orbit bullets: a tiny teal ring with an amber planet circling it (replaces the yellow star bullets).
   The pseudo-element rotates; the centre dot is symmetric, so only the planet appears to move. */
.pkg li::before,.offer ul.ticks li::before,.orbit-list li::before{
  content:""!important;display:inline-block;flex:none;width:16px;height:16px;margin:5px 10px 0 0;border-radius:50%;
  border:1px solid var(--teal);vertical-align:-2px;
  background:radial-gradient(circle at 50% 1px,var(--amber) 0 2.6px,transparent 3.1px),radial-gradient(circle,var(--deep-teal) 0 1.8px,transparent 2.3px);
  animation:li-orbit 5.5s linear infinite}
.pkg li:nth-child(2)::before,.offer ul.ticks li:nth-child(2)::before,.orbit-list li:nth-child(2)::before{animation-delay:-1.4s}
.pkg li:nth-child(3)::before,.offer ul.ticks li:nth-child(3)::before,.orbit-list li:nth-child(3)::before{animation-delay:-2.8s}
.pkg li:nth-child(4)::before,.offer ul.ticks li:nth-child(4)::before,.orbit-list li:nth-child(4)::before{animation-delay:-4.1s}
.pkg.dark li::before{border-color:var(--seafoam);background:radial-gradient(circle at 50% 1px,var(--amber) 0 2.6px,transparent 3.1px),radial-gradient(circle,var(--sand) 0 1.8px,transparent 2.3px)}
@keyframes li-orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pkg li::before,.offer ul.ticks li::before,.orbit-list li::before{animation:none}}
.pkg li::before{margin-right:0!important}

/* =====================================================================
   BOLD LAYER (2026-10-18): "not a lot to read, a LOT to look at".
   Thick navy outlines, hard offset shadows in palette colors, pressable pills,
   heavier type. Loaded last so it wins over page styles.
   ===================================================================== */
:root{--line:3px solid var(--navy);--sh-amber:10px 10px 0 var(--amber);--sh-teal:10px 10px 0 var(--teal);--sh-rust:10px 10px 0 var(--rust-c);--sh-navy:6px 6px 0 var(--navy)}
body{color:var(--navy)}
.display{font-weight:650!important;letter-spacing:-.025em}
.display em{font-weight:400!important}
h1.display{text-shadow:3px 3px 0 rgba(238,155,0,.35)}

/* photos: framed like prints */
.arch,.cover,.offer-photo,.article-figure img,.article-figure video,.mhero .arch,.shop-arch,.phone{
  border:var(--line)!important;box-shadow:var(--sh-amber)!important}
.visual .arch{box-shadow:14px 14px 0 var(--deep-teal)!important}
.cover{box-shadow:8px 8px 0 var(--navy)!important}
.prod:nth-child(3n+2) .cover{box-shadow:8px 8px 0 var(--rust-c)!important}
.prod:nth-child(3n) .cover{box-shadow:8px 8px 0 var(--teal)!important}
.offer-photo{box-shadow:none!important;border-width:0 0 3px!important}

/* cards */
.card,.offer,.pkg,.tipbox,.q,.step,.widget{border:var(--line)!important;box-shadow:var(--sh-teal)!important;border-radius:22px!important}
.pkg.dark,.offer.feature{box-shadow:var(--sh-amber)!important}

/* pills + buttons: chunky, pressable */
.pill,.post,.cta-pill,.home-pill,.btn,.chip,.sub a,.pay a{
  border:var(--line)!important;box-shadow:var(--sh-navy)!important;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .3s,color .3s!important}
.btn{border-radius:999px!important}
.pill:hover,.post:hover,.cta-pill:hover,.home-pill:hover,.btn:hover,.chip:hover,.sub a:hover,.pay a:hover{
  transform:translate(-3px,-3px)!important;box-shadow:9px 9px 0 var(--navy)!important}
.pill:active,.post:active,.cta-pill:active,.home-pill:active,.btn:active,.chip:active,.sub a:active,.pay a:active{
  transform:translate(4px,4px)!important;box-shadow:1px 1px 0 var(--navy)!important}
.pill.live.is-on{box-shadow:6px 6px 0 var(--amber)!important}

/* click reward: pop, color flash, burst particles */
.pop{animation:pop .55s cubic-bezier(.2,1.6,.4,1)!important}
@keyframes pop{0%{filter:none}25%{transform:scale(.94);filter:hue-rotate(90deg) saturate(1.6) brightness(1.15)}55%{transform:scale(1.06);filter:hue-rotate(200deg) saturate(1.4)}100%{transform:none;filter:none}}
.spark{position:fixed;z-index:9999;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--c);pointer-events:none;
  animation:spark .8s cubic-bezier(.15,.7,.3,1) forwards}
.spark.star{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:0;background:var(--c);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes spark{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r));opacity:0}}

/* decoration: twinkling four-point stars in hero sections */
.twinkle{position:absolute;z-index:1;width:var(--s);height:var(--s);background:var(--c);pointer-events:none;opacity:.85;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle 3.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(.55) rotate(0);opacity:.35}50%{transform:scale(1.15) rotate(45deg);opacity:.95}}

/* section punch: thick rules between sections */
section{border-top:0}
.marquee,.arc,.book,.about,.recog{border-top:var(--line);border-bottom:var(--line)}
@media (prefers-reduced-motion:reduce){.pop,.spark,.twinkle{animation:none!important}.twinkle{display:none}}
@media (max-width:600px){:root{--sh-amber:7px 7px 0 var(--amber);--sh-teal:7px 7px 0 var(--teal)}}

/* top tabs: bold like the homepage pills, one palette color each */
.rail nav{gap:10px;padding:4px 10px 12px 4px}
.tab{border:var(--line)!important;box-shadow:4px 4px 0 var(--navy)!important;border-radius:999px!important;padding:9px 18px!important;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)!important}
.tab span{font:800 1rem/1.1 var(--font-body)!important;letter-spacing:.01em}
.tab[href="live.html"]{background:var(--amber)!important;color:var(--navy)!important}
.tab[href="private.html"]{background:var(--deep-teal)!important;color:#fff!important}
.tab[href="shop.html"]{background:var(--rust-c)!important;color:var(--cream)!important}
.tab[href="coaching.html"]{background:var(--navy)!important;color:var(--cream)!important;box-shadow:4px 4px 0 var(--amber)!important}
.tab:hover{transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 var(--navy)!important}
.tab[href="coaching.html"]:hover{box-shadow:6px 6px 0 var(--amber)!important}
.tab[aria-current]{transform:translate(2px,2px)!important;box-shadow:2px 2px 0 var(--navy)!important}
.tab[aria-current]::after{display:none}
.tab[aria-current] span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:760px){.rail nav{gap:7px;padding:4px 6px 10px 2px}.tab{padding:8px 4px!important;border-radius:16px!important}.tab span{font-size:.74rem!important}}