/* ======================================================================
   Sex & the Cycle: one continuous flow of sheer red fabric.
   Loaded only on the pages that use it (see "css" in each page's meta).
   Type: Fraunces (soft, organic serif) for display, Figtree for text.
   Artwork: assets/img/veil-*.webp, generated by design/fabric/make_fabric.py
   ====================================================================== */
:root {
  --cy-wine: #2b0406; --cy-ox: #3a0507; --cy-red: #5a0a10; --cy-crimson: #8e0f1a;
  --cy-rose: #e9bba9; --cy-blush: #f3cdbc; --cy-skin: #dba98e;
  --cy-display: "Fraunces", "Playfair Display", Georgia, serif;
  --cy-soft: "SOFT" 100, "opsz" 144;
}

/* ---------- Continuous page canvas ---------- */
.cy { position: relative; z-index: 2; isolation: isolate; overflow: clip; color: #ecdcd5; margin-top: -260px; padding-top: 260px;
  background:
    linear-gradient(180deg, rgba(58,5,7,0) 0, rgba(58,5,7,.5) 110px, rgba(58,5,7,.94) 200px, #3a0507 236px) top / 100% 260px no-repeat,
    linear-gradient(180deg, #3a0507 0%, #43070b 14%, #3a0507 30%, #2b0406 46%, #3d0709 62%, #4a0a0e 78%, #2b0406 100%) 0 260px / 100% calc(100% - 260px) no-repeat; }
/* bottom seam: the flow settles into the footer's own colour instead of being cut off */
.cy::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(220px, 34vh, 380px); z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(39,29,24,0) 0, rgba(39,29,24,.7) 55%, #271d18 100%); }
.cy-sec { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
.cy-sec > .wrap, .cy-sec > .cy-inner { position: relative; z-index: 3; }
.cy-narrow { max-width: 820px; }
.cy-center { text-align: center; margin-left: auto; margin-right: auto; }

/* Fabric layers: feathered at every edge and free to cross the seams between sections */
.cy-veil { position: absolute; left: -6%; right: -6%; top: -16%; bottom: -16%; z-index: 0; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: .78; animation: cyDrift 52s ease-in-out infinite alternate; will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 12%, #000 30%, #000 70%, rgba(0,0,0,.35) 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 12%, #000 30%, #000 70%, rgba(0,0,0,.35) 88%, transparent 100%); }
.cy-veil--red { background-image: url(/assets/img/veil-red.webp); }
.cy-veil--blush { background-image: url(/assets/img/veil-blush.webp); opacity: .62; animation-duration: 64s; }
.cy-veil--skin { background-image: url(/assets/img/veil-skin.webp); opacity: .9; animation-duration: 70s; }
.cy-veil--flip { transform: scaleX(-1); animation-name: cyDriftFlip; }
.cy-veil--soft { opacity: .4; }
@keyframes cyDrift { from { transform: translate3d(-2.4%, -1.4%, 0) scale(1.04); } to { transform: translate3d(2.4%, 1.4%, 0) scale(1.04); } }
@keyframes cyDriftFlip { from { transform: scaleX(-1) translate3d(-2.4%, 1.4%, 0) scale(1.04); } to { transform: scaleX(-1) translate3d(2.4%, -1.4%, 0) scale(1.04); } }

/* A fine thread that draws itself down the page as you scroll */
.cy-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.cy-thread path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.cy-thread .t1 { stroke: url(#cyThreadGrad); stroke-width: 1.3; opacity: .34; }
.cy-thread .t2 { stroke: url(#cyThreadGrad); stroke-width: .8; opacity: .2; }

/* ---------- Type ---------- */
.cy h1, .cy h2, .cy h3, .cy .cy-display, .cy-hero h1 { font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; color: #fff; letter-spacing: -.015em; text-transform: none; }
.cy h2 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); line-height: 1.04; margin: 0 0 .5em; text-wrap: balance; }
.cy h3 { font-weight: 400; font-size: 1.55rem; line-height: 1.15; margin: 0 0 .4em; }
.cy p, .cy-hero p { color: #ecdcd5; font-size: 1.04rem; line-height: 1.72; }
.cy a:not(.cy-btn) { color: var(--cy-blush); text-underline-offset: 3px; }
.cy-eyebrow { display: block; font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--cy-rose); margin: 0 0 1.3rem; line-height: 1.6; }
.cy em, .cy .cy-it, .cy-hero em { font-style: italic; font-weight: 300; font-variation-settings: var(--cy-soft);
  background: linear-gradient(100deg, #f3cdbc 0%, #ffb29a 28%, #f3cdbc 52%, #ffe4d8 74%, #f3cdbc 100%); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: cyShimmer 11s linear infinite; padding-right: .06em; }
@keyframes cyShimmer { from { background-position: 0% 0; } to { background-position: -240% 0; } }

/* Thin flowing rule */
.cy-rule { display: block; width: min(260px, 60%); height: 22px; margin: 0 auto 1.4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23e9bba9' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23f3cdbc'/%3E%3Cstop offset='1' stop-color='%23e9bba9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 12 C40 -2 70 26 110 12 S190 -2 230 12 S280 20 300 12' fill='none' stroke='url(%23g)' stroke-width='1.4'/%3E%3Cpath d='M0 14 C50 28 80 0 120 14 S200 26 240 12 S285 4 300 12' fill='none' stroke='url(%23g)' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cy-rule--dark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%238e0f1a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%238e0f1a'/%3E%3Cstop offset='1' stop-color='%238e0f1a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 12 C40 -2 70 26 110 12 S190 -2 230 12 S280 20 300 12' fill='none' stroke='url(%23g)' stroke-width='1.4'/%3E%3Cpath d='M0 14 C50 28 80 0 120 14 S200 26 240 12 S285 4 300 12' fill='none' stroke='url(%23g)' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E"); }

/* ---------- Buttons ---------- */
.cy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 19px 38px; border-radius: 999px; background: #fff; color: var(--cy-ox) !important; border: 1.5px solid #fff; position: relative;
  box-shadow: 0 0 0 0 rgba(243,205,188,.55); animation: cyPulse 4.2s ease-out infinite; transition: background .25s, color .25s, transform .25s; }
.cy-btn:hover { background: var(--cy-blush); border-color: var(--cy-blush); transform: translateY(-2px); }
@keyframes cyPulse { 0% { box-shadow: 0 0 0 0 rgba(243,205,188,.5); } 70%, 100% { box-shadow: 0 0 0 22px rgba(243,205,188,0); } }
.cy-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(243,205,188,.6); animation: none; }
.cy-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.cy-hero p.cy-price-note, .cy p.cy-price-note { margin: 22px 0 0; font-family: var(--sans); font-weight: 600; font-size: .7rem !important; line-height: 1.6; letter-spacing: .28em; text-transform: uppercase; color: var(--cy-rose) !important; }

/* ---------- Hero ---------- */
.cy-hero { position: relative; min-height: clamp(700px, 96vh, 960px); display: grid; place-items: center; text-align: center; overflow: hidden; background: #2b0406; padding: 150px 0 200px; }
.cy-hero-media { position: absolute; inset: 0; z-index: 0; }
.cy-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 34%; animation: cyBreathe 30s ease-in-out infinite alternate; transform-origin: 70% 40%; will-change: transform; }
@keyframes cyBreathe { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.5%, 1%, 0); } }
.cy-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(43,4,6,.62) 0%, rgba(43,4,6,.35) 55%, rgba(43,4,6,.1) 100%); }
.cy-hero .cy-veil { z-index: 1; mix-blend-mode: screen; opacity: .34; }
.cy-hero-inner { position: relative; z-index: 3; }
.cy-kicker { display: block; font-family: var(--sans); font-weight: 600; font-size: clamp(.68rem, 1.3vw, .82rem); letter-spacing: .38em; text-transform: uppercase; color: #fff; text-wrap: balance; max-width: 34em; margin: 0 auto; line-height: 1.8; }
.cy-title { font-size: clamp(3.7rem, 12.5vw, 10.2rem); line-height: .9; letter-spacing: -.03em !important; margin: .32em 0 .2em; text-shadow: 0 4px 60px rgba(43,4,6,.55); }
.cy-title .cy-w { display: inline-block; }
.cy-title .amp { font-weight: 300; margin: 0 .04em; color: #fff; }
.cy-hero p.cy-by { font-family: var(--sans); font-weight: 500; font-size: clamp(.72rem, 1.4vw, .88rem) !important; line-height: 1.7; letter-spacing: .34em; text-transform: uppercase; color: var(--cy-blush) !important; margin: 0 0 2.4rem; }
.cy-ask { font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; font-size: clamp(1.4rem, 2.8vw, 2.15rem) !important; line-height: 1.2 !important; color: #fff !important; max-width: 23em; margin: 0 auto 2.1rem; text-wrap: balance; }
.cy-hero .cy-btn-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Glass ---------- */
.cy-glass { position: relative; border-radius: 26px; border: 1px solid rgba(243,205,188,.2);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); }
.cy-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,205,185,.20), transparent 60%); }
.cy-glass:hover::before { opacity: 1; }

/* ---------- Intro ---------- */
.cy-intro { display: grid; gap: clamp(36px, 6vw, 90px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .cy-intro { grid-template-columns: 1.15fr 1fr; } }
.cy-intro .cy-prose p { max-width: 36em; }
.cy-pull { margin: 0; padding: clamp(34px, 4.5vw, 62px) clamp(26px, 3.6vw, 54px); text-align: center; }
.cy-pull p { font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; font-style: italic; font-size: clamp(1.8rem, 3.2vw, 2.7rem) !important; line-height: 1.18 !important; color: #fff !important; margin: 0 0 1.2rem; text-wrap: balance; }
.cy-pull cite { font-style: normal; font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--cy-rose); }

/* ---------- The map: dial + phases ---------- */
.cy-dialwrap { display: grid; place-items: center; margin: clamp(30px, 5vw, 60px) auto clamp(20px, 3vw, 40px); }
.cy-dial { position: relative; width: min(440px, 84vw); aspect-ratio: 1; }
.cy-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cy-dial .arc { fill: none; stroke-width: 15; stroke-linecap: round; opacity: .34; transition: opacity .5s, stroke-width .5s; }
.cy-dial .arc.on { opacity: 1; stroke-width: 19; filter: drop-shadow(0 0 14px currentColor); }
.cy-dial .tick { fill: rgba(243,205,188,.35); }
.cy-dial .tick.on { fill: #fff; }
.cy-dial .orbit { fill: none; stroke: rgba(243,205,188,.16); stroke-width: 1; }
.cy-dial .marker { fill: #fff; filter: drop-shadow(0 0 10px rgba(255,205,185,.95)); }
.cy-dial-readout { position: absolute; left: 0; right: 0; top: 47%; text-align: center; pointer-events: none; }
.cy-dial-day { display: block; font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; font-size: clamp(2.2rem, 6.4vw, 3.1rem); line-height: 1; color: #fff; }
.cy-dial-day small { font-family: var(--sans); font-weight: 600; font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--cy-rose); display: block; margin-bottom: 6px; }
.cy-dial-phase { display: block; margin-top: 8px; font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cy-blush); }
.cy-dial-season { display: block; margin-top: 3px; font-family: var(--cy-display); font-style: italic; font-weight: 300; font-size: 1rem; color: var(--cy-rose); }
.cy-dial .moon-base { fill: #1d0306; stroke: rgba(243,205,188,.35); stroke-width: 1; }
.cy-dial .moon-lit { fill: #f7e6da; filter: drop-shadow(0 0 12px rgba(255,214,196,.65)); transition: d .6s; }

.cy-phases { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: clamp(26px, 4vw, 46px); }
@media (min-width: 640px) { .cy-phases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .cy-phases { grid-template-columns: repeat(4, 1fr); } }
.cy-phase { --a: 142,15,26; display: flex; flex-direction: column; gap: 6px; padding: 30px 26px 28px; outline-offset: 4px; cursor: default; transition: transform .5s, border-color .5s, background .5s; background: linear-gradient(165deg, rgba(var(--a), .45), rgba(var(--a), .12)); }
.cy-phase--winter { --a: 120,22,40; } .cy-phase--spring { --a: 178,48,56; } .cy-phase--summer { --a: 224,120,92; } .cy-phase--autumn { --a: 168,92,50; }
.cy-phase.on { transform: translateY(-8px); border-color: rgba(255,225,212,.7); background: linear-gradient(165deg, rgba(var(--a), .75), rgba(var(--a), .22)); }
.cy-phase-no { font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; font-style: italic; font-size: 2.6rem; line-height: 1; color: rgba(255,225,212,.7); margin-bottom: 6px; }
.cy-phase .cy-eyebrow { font-size: .64rem; letter-spacing: .24em; margin: 0 0 .25rem; color: #f6d2c2; min-height: 3.3em; }
.cy-phase h3 { font-size: 1.85rem; margin: 0; }
.cy-phase-days { font-family: var(--sans); font-weight: 600; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: #f6d8c8; margin: 6px 0 2px; }
.cy-phase-verb { font-family: var(--cy-display); font-style: italic; font-weight: 300; font-size: 1.2rem; color: #fff; margin: 0 0 12px; }
.cy-phase p { margin: 0 0 12px; font-size: .96rem; line-height: 1.6; color: #f4e3dc; }
.cy-phase .cy-touch { margin: auto 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); font-size: .92rem; }
.cy-touch b { display: block; font-family: var(--sans); font-weight: 700; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: #f6d2c2; margin-bottom: 4px; }
.cy-phase-note { text-align: center; margin: 34px 0 0; font-family: var(--cy-display); font-style: italic; font-weight: 300; font-size: 1.3rem; color: var(--cy-blush) !important; }

/* ---------- Dawn: skin-tone swell, no hard edges ---------- */
.cy-dawn { position: relative; padding: clamp(150px, 19vw, 260px) 0; background: linear-gradient(180deg, rgba(219,169,142,0) 0%, rgba(219,169,142,.5) 22%, rgba(238,205,186,.94) 50%, rgba(219,169,142,.5) 78%, rgba(219,169,142,0) 100%); }
.cy-dawn .cy-veil { mix-blend-mode: multiply; opacity: .6; }
.cy-dawn-quote { font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; font-style: italic; font-size: clamp(2.2rem, 5.8vw, 4.7rem) !important; line-height: 1.08 !important; color: #3a0507 !important; margin: 0 auto 1.6rem; text-wrap: balance; letter-spacing: -.02em; }
.cy-dawn-quote em { background: linear-gradient(100deg, #8e0f1a, #c4332f 40%, #8e0f1a 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cy-dawn-cite { font-family: var(--sans); font-weight: 700; font-size: .74rem; letter-spacing: .36em; text-transform: uppercase; color: #6e1d14; }

/* ---------- What's inside ---------- */
.cy-two { display: grid; gap: clamp(30px, 5vw, 76px); grid-template-columns: 1fr; margin-top: clamp(30px, 4vw, 52px); }
@media (min-width: 860px) { .cy-two { grid-template-columns: 1fr 1fr; } }
.cy-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.cy-list li { position: relative; padding: 19px 0 19px 34px; border-bottom: 1px solid rgba(243,205,188,.16); font-size: .98rem; line-height: 1.55; color: #e6d3cc; }
.cy-list li:first-child { border-top: 1px solid rgba(243,205,188,.16); }
.cy-list li::before { content: ""; position: absolute; left: 4px; top: 27px; width: 9px; height: 9px; background: var(--cy-rose); border-radius: 0 100% 0 100%; transform: rotate(-12deg); }
.cy-list strong { display: block; font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 400; font-size: 1.28rem; line-height: 1.2; color: #fff; margin-bottom: 3px; }
.cy-workbook { margin: clamp(40px, 6vw, 70px) auto 0; max-width: 780px; text-align: center; padding: clamp(32px, 4.4vw, 52px); }
.cy-workbook h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.cy-workbook p { margin: 0 auto; max-width: 34em; }

/* ---------- For you if ---------- */
.cy-doors { list-style: none; padding: 0; margin: clamp(30px, 4vw, 52px) 0 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cy-doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .cy-doors { grid-template-columns: repeat(3, 1fr); } }
.cy-doors li { padding: 30px 28px 32px; transition: transform .45s, border-color .45s; }
.cy-doors li:hover { transform: translateY(-5px); border-color: rgba(255,225,212,.5); }
.cy-doors p { margin: 0; font-size: .98rem; line-height: 1.62; }

/* ---------- Facilitators ---------- */
.cy-facil { display: grid; gap: clamp(40px, 6vw, 80px); grid-template-columns: 1fr; margin-top: clamp(32px, 4vw, 54px); }
@media (min-width: 800px) { .cy-facil { grid-template-columns: 1fr 1fr; } }
.cy-person { text-align: center; }
.cy-person p { max-width: 30em; margin-left: auto; margin-right: auto; }
.cy-person h3 { font-size: 2rem; margin: .1em 0 .7rem; }
.cy-arch { position: relative; width: min(360px, 84%); aspect-ratio: 10 / 11; margin: 0 auto 30px; border-radius: 999px 999px 26px 26px; overflow: hidden; isolation: isolate; animation: cyFloat 9s ease-in-out infinite alternate;
  background: radial-gradient(120% 90% at 50% 12%, #e8a98c 0%, #b35a45 52%, #6e1d14 100%); box-shadow: 0 50px 80px -44px rgba(0,0,0,.85), 0 0 0 1px rgba(233,187,169,.4); }
.cy-person:nth-child(2) .cy-arch { animation-delay: -4s; }
@keyframes cyFloat { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.cy-arch::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url(/assets/img/veil-blush.webp) center / 220% no-repeat; opacity: .5; }
.cy-arch img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.cy-arch--cutout img { object-position: 50% 4%; }

/* ---------- FAQ: always visible, two quiet columns ---------- */
.cy-faq { display: grid; gap: 0 clamp(40px, 7vw, 110px); grid-template-columns: 1fr; margin-top: clamp(30px, 4vw, 50px); }
@media (min-width: 860px) { .cy-faq { grid-template-columns: 1fr 1fr; } }
.cy-faq-item { padding: 30px 0 32px; border-top: 1px solid rgba(243,205,188,.2); }
h3.cy-q { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .6rem; color: #fff; }
p.cy-a { margin: 0; font-size: .99rem; line-height: 1.68; color: #e6d3cc; }
.cy-softcta { text-align: center; margin-top: clamp(34px, 5vw, 60px); font-size: 1rem; }

/* ---------- Closing ---------- */
.cy-close { text-align: center; padding: clamp(110px, 15vw, 200px) 0; }
.cy-close h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); max-width: 14em; margin-left: auto; margin-right: auto; }
.cy-close p { max-width: 32em; margin-left: auto; margin-right: auto; }
.cy-secure { margin-top: 18px !important; font-size: .78rem !important; letter-spacing: .1em; color: var(--cy-rose) !important; }

/* ---------- Sticky buy bar ---------- */
.cy-sticky { position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translate(-50%, 140%); transition: transform .55s cubic-bezier(.2,.7,.2,1); display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 26px; border-radius: 999px; max-width: calc(100vw - 24px);
  background: rgba(43,4,6,.82); border: 1px solid rgba(243,205,188,.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); }
.cy-sticky.on { transform: translate(-50%, 0); }
.cy-sticky span { font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; font-size: 1.05rem; color: #fff; white-space: nowrap; }
.cy-sticky span b { font-weight: 400; color: var(--cy-blush); }
.cy-sticky .cy-btn { padding: 13px 24px; font-size: .72rem; animation: none; }
@media (max-width: 560px) { .cy-sticky { left: 12px; right: 12px; bottom: 12px; transform: translateY(140%); justify-content: space-between; padding-left: 20px; } .cy-sticky.on { transform: none; } .cy-sticky span { font-size: .95rem; } }

/* ---------- Reveal on scroll ---------- */
.cy-js .cy-r { opacity: 0; transform: translateY(26px); filter: blur(7px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1.1s; transition-delay: calc(var(--i, 0) * 110ms); }
.cy-js .cy-r.in { opacity: 1; transform: none; filter: none; }
.cy-js .cy-w { opacity: 0; animation: cyUnveil 1.5s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.25s + var(--d, 0) * .22s); }
@keyframes cyUnveil { from { opacity: 0; transform: translateY(.35em); filter: blur(18px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .cy-veil, .cy-hero-media img, .cy-btn, .cy-arch, .cy em, .cy .cy-it, .cy-hero em { animation: none !important; }
  .cy-js .cy-r, .cy-js .cy-w { opacity: 1; transform: none; filter: none; animation: none; transition: none; }
}

/* ======================================================================
   Pieces used outside the sales page
   ====================================================================== */
/* Thank-you page */
.cy-hero--compact { min-height: clamp(400px, 54vh, 520px); padding: 120px 0 150px; }
.cy-hero--compact .cy-title { font-size: clamp(3rem, 8.5vw, 6.6rem); }
.cy-paths { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
@media (min-width: 760px) { .cy-paths { grid-template-columns: 1fr 1fr; } }
.cy-paths a { display: flex; flex-direction: column; gap: 8px; padding: 32px 70px 32px 32px; text-decoration: none; color: #fff !important; position: relative; transition: transform .4s, border-color .4s; }
.cy-paths a:hover { transform: translateY(-4px); border-color: rgba(255,225,212,.6); }
.cy-paths strong { font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 400; font-size: 1.7rem; line-height: 1.15; }
.cy-paths .cy-eyebrow { margin: 0; }
.cy-paths .go { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid rgba(243,205,188,.5); border-radius: 50%; display: grid; place-items: center; color: #fff; transition: background .3s, color .3s; }
.cy-paths a:hover .go { background: #fff; color: var(--cy-ox); }
.cy-note { text-align: center; margin: 22px 0 0; font-size: .92rem !important; color: var(--cy-rose) !important; }

/* Card on /workshops/ and band on the home page */
.cy-feature { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: 28px; text-decoration: none; color: #fff !important; isolation: isolate; border: 1px solid rgba(243,205,188,.25);
  background: linear-gradient(135deg, #3a0507, #5a0a10 60%, #7a1a22); box-shadow: 0 40px 90px -50px rgba(58,5,7,.9); transition: transform .5s, box-shadow .5s; }
.cy-feature:hover { transform: translateY(-4px); box-shadow: 0 50px 100px -48px rgba(58,5,7,1); color: #fff !important; }
@media (min-width: 860px) { .cy-feature { grid-template-columns: 1.05fr 1fr; } }
.cy-feature-img { position: relative; min-height: 260px; overflow: hidden; }
.cy-feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transition: transform 9s ease-out; }
.cy-feature:hover .cy-feature-img img { transform: scale(1.07); }
.cy-feature-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58,5,7,0) 55%, rgba(58,5,7,.95) 100%); }
@media (max-width: 859px) { .cy-feature-img::after { background: linear-gradient(180deg, rgba(58,5,7,0) 55%, rgba(58,5,7,.95) 100%); } }
.cy-feature-img .t { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; text-align: center; font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .95; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 30px rgba(43,4,6,.6); }
.cy-feature-img .t i { font-style: italic; color: var(--cy-blush); }
.cy-feature-text { position: relative; z-index: 1; padding: clamp(28px, 4vw, 50px); display: grid; gap: 10px; align-content: center; }
.cy-feature-text .cy-eyebrow { margin: 0; font-size: .66rem; }
.cy-feature-text h3 { font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 300; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.08; color: #fff; margin: 0; letter-spacing: -.015em; }
.cy-feature-text h3 em { font-style: italic; background: linear-gradient(100deg, #f3cdbc, #ffb29a 40%, #f3cdbc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cy-feature-text p { margin: 0; color: #ecdcd5; font-size: 1rem; line-height: 1.62; max-width: 34em; }
.cy-feature-text .go { font-family: var(--sans); font-weight: 700; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-top: 6px; }
.cy-promo-section { padding: clamp(50px, 7vw, 90px) 0; }

/* ---------- Trimmed sales page pieces ---------- */
.cy-outcomes { list-style: none; padding: 0; margin: clamp(30px, 4vw, 52px) 0 0; display: grid; gap: 0 clamp(36px, 6vw, 90px); grid-template-columns: 1fr; }
@media (min-width: 800px) { .cy-outcomes { grid-template-columns: 1fr 1fr; } }
.cy-outcomes li { position: relative; padding: 26px 0 28px 38px; border-top: 1px solid rgba(243,205,188,.2); font-size: 1rem; line-height: 1.6; color: #e6d3cc; }
.cy-outcomes li::before { content: ""; position: absolute; left: 4px; top: 36px; width: 10px; height: 10px; background: var(--cy-rose); border-radius: 0 100% 0 100%; transform: rotate(-12deg); }
.cy-outcomes strong { display: block; font-family: var(--cy-display); font-variation-settings: var(--cy-soft); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: #fff; margin-bottom: 4px; }
@media (min-width: 700px) { .cy-doors--four { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .cy-doors--four { grid-template-columns: 1fr 1fr; max-width: 920px; margin-left: auto; margin-right: auto; } }
.cy-phase { min-height: 0; }
.cy-phase p:last-child { margin-bottom: 0; }

/* ---------- The free guide, in the same world ---------- */
.cy-title--long { font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1.04; letter-spacing: -.025em !important; max-width: 14em; margin-left: auto; margin-right: auto; }
.cy-hero--compact .cy-title--long { font-size: clamp(2.5rem, 6.4vw, 5rem); }
.cy-article { max-width: 46rem; margin: 0 auto; }
.cy-article h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 2.2em 0 .5em; }
.cy-article h2:first-child { margin-top: 0; }
.cy-article h3 { font-size: 1.7rem; margin: 1.9em 0 .35em; }
.cy-article h3 small { display: block; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cy-rose); margin-bottom: .45em; }
.cy-article p { font-size: 1.08rem; line-height: 1.8; margin: 0 0 1.15em; }
.cy-article ul, .cy-article ol { margin: 0 0 1.4em; padding-left: 1.2em; color: #ecdcd5; }
.cy-article li { margin-bottom: .5em; line-height: 1.7; font-size: 1.05rem; }
.cy-article li::marker { color: var(--cy-rose); }
.cy-article strong { color: #fff; font-weight: 600; }
.cy-article .cy-fine { font-size: .9rem; color: var(--cy-rose); }
.cy-article .cy-promo-section { padding: 18px 0 12px; }
.cy-article .cy-promo-section a.cy-feature { color: #fff !important; }
.cy-veil--at { bottom: auto; }

/* Thank-you page: the two buttons live in the hero so they're on the first screen */
.cy-hero--deliver { min-height: 0; padding: 104px 0 170px; }
.cy-hero--deliver .cy-title { font-size: clamp(3rem, 8vw, 6rem); margin-bottom: .1em; }
.cy-hero--deliver .cy-ask { margin-bottom: 2rem; }
.cy-hero--deliver .cy-paths { margin-top: 0; text-align: left; }
.cy-hero--deliver .cy-paths a { padding: 26px 66px 26px 28px; background: linear-gradient(160deg, rgba(58,5,7,.62), rgba(58,5,7,.35)); }

/* ---------- Hero medallion: the title at the centre of a cycle ---------- */
.cy-hero--medal { padding: 52px 0 200px; min-height: 0; }
.cy-medal { position: relative; width: min(88vw, 540px, 58vh); aspect-ratio: 1; margin: 0 auto clamp(14px, 2.4vw, 26px); container-type: inline-size; }
.cy-medal-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cy-medal .cy-title { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; text-align: center; font-size: clamp(2.6rem, 9vw, 5.4rem); font-size: 17cqw; line-height: .93; letter-spacing: -.03em !important; }
.cy-medal .cy-title .cy-w { display: inline-block; }
.cy-medal .cy-title br { display: none; }
.cy-medal .cy-title .cy-w:first-child { display: block; }
.cy-medal .cy-title .cy-w:last-child { display: block; }
.cy-medal-svg .rg { fill: none; stroke: #f3cdbc; }
.cy-medal-svg .r1 { stroke-width: 1.3; opacity: .55; }
.cy-medal-svg .r2 { stroke-width: .6; opacity: .3; }
.cy-medal-svg .r3 { stroke-width: .6; opacity: .22; stroke-dasharray: 2 7; }
.cy-medal-svg .mt { font-family: var(--sans); font-weight: 600; font-size: 19px; fill: #fff; letter-spacing: .26em; }
.cy-medal-svg .dm { fill: #f3cdbc; opacity: .8; }
.cy-medal-svg .tk { stroke: #f3cdbc; stroke-width: 1.2; opacity: .45; }
.cy-medal-svg .tk.tl { stroke-width: 2; opacity: .8; }
.cy-medal-svg .mb { fill: #1d0306; stroke: rgba(243,205,188,.55); stroke-width: 1.2; }
.cy-medal-svg .ml { fill: #f7e6da; filter: drop-shadow(0 0 8px rgba(255,214,196,.7)); }
.cy-medal-svg .mk { fill: #fff; }
.cy-medal-svg .mkg { fill: #ffb9a0; opacity: .95; }
.cy-medal-svg .cy-ticks, .cy-medal-svg .cy-orbit { transform-box: view-box; transform-origin: 50% 50%; }
.cy-medal-svg .cy-ticks { animation: cySpin 180s linear infinite reverse; }
.cy-medal-svg .cy-orbit { animation: cySpin 28s linear infinite; }
@keyframes cySpin { to { transform: rotate(360deg); } }
.cy-js .cy-medal-svg .r1 { stroke-dasharray: 3020; stroke-dashoffset: 3020; animation: cyDraw 2.8s .2s cubic-bezier(.4,0,.2,1) forwards; }
.cy-js .cy-medal-svg .r2, .cy-js .cy-medal-svg .cy-ticks, .cy-js .cy-medal-svg .cy-moons, .cy-js .cy-medal-svg .cy-medal-text { opacity: 0; animation: cyFade 1.8s .9s ease forwards; }
.cy-js .cy-medal-svg .cy-ticks { animation: cyFade 1.8s .9s ease forwards, cySpin 180s linear infinite reverse; }
@keyframes cyDraw { to { stroke-dashoffset: 0; } }
@keyframes cyFade { to { opacity: 1; } }
/* the tagline and names live in the ring on larger screens; on phones they return as plain text */
.cy-alt { position: static; }
@media (min-width: 700px) { .cy-alt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; padding: 0; } }
@media (max-width: 699px) {
  .cy-medal-svg .cy-medal-text { display: none; }
  .cy-hero--medal .cy-kicker { margin-bottom: 18px; }
  .cy-hero--medal .cy-by { margin: 8px 0 26px; }
  .cy-medal { width: min(86vw, 400px); }
  .cy-medal .cy-title { font-size: 17.5cqw; }
}
@media (prefers-reduced-motion: reduce) { .cy-medal-svg .cy-ticks, .cy-medal-svg .cy-orbit { animation: none !important; } .cy-js .cy-medal-svg .r1 { stroke-dashoffset: 0; animation: none; } .cy-js .cy-medal-svg .r2, .cy-js .cy-medal-svg .cy-ticks, .cy-js .cy-medal-svg .cy-moons, .cy-js .cy-medal-svg .cy-medal-text { opacity: 1; animation: none; } }