/* Ceci Flow v2: same editorial system as style.css, brighter fuchsia and scroll-linked motion.
   flow.js sets --progress on :root and --p (0 to 1, element crossing the viewport) on [data-scroll].
   Everything is readable at rest; motion only exists under .motion-ready and without reduced motion. */
:root{--accent:#d91667;--accent-deep:#b3104f;--blush:#ffd2e6;--paper:#fff8fb;--surface:#ffe9f3;--line:#f2c3d8;--muted:#7a3d5b;--focus:#d91667;--grid:rgba(217,22,103,.09)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--grid:rgba(255,120,180,.08)}}
:root[data-theme="dark"]{--grid:rgba(255,120,180,.08)}

/* Off-screen reveal offsets must never widen the page. */
.flow main{overflow-x:clip}

/* Progress and header */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:left;z-index:30;pointer-events:none}
.flow .header{position:sticky;top:0;z-index:20;background:var(--paper);transition:height .35s ease,box-shadow .35s ease}
.flow.scrolled .header{height:70px;box-shadow:0 1px 0 var(--line)}
.flow .button span,.flow .text-link span{transition:transform .25s ease}
.flow .button:hover span,.flow .text-link:hover span{transform:translate(3px,-3px)}

/* Brighter fuchsia */
.flow .hero{background:var(--accent);overflow:hidden}
.flow .hero .button{color:var(--accent-deep)}
.flow .hero-baseline{border-top-color:rgba(255,248,251,.35)}
.flow .intent-option[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.flow .closing{background:var(--accent-deep)}
.flow .closing .button{color:var(--accent-deep)}

/* Hero: lines rise, photo drifts, a large arrow turns with scroll */
.flow .hero h1>span{color:inherit;-webkit-text-stroke:0}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .line>span{display:inline-block}
.hero-title .last{color:var(--blush)}
.flow .hero-copy::after{content:'↗';position:absolute;right:6%;bottom:9%;font-size:clamp(120px,14vw,230px);line-height:1;opacity:.13;transform:rotate(calc(var(--p,0) * 120deg));pointer-events:none}
.flow .hero-photo img{transform:translateY(calc((var(--p,.45) - .45) * 90px)) scale(1.08)}
@media(prefers-reduced-motion:no-preference){
  .hero-title .line>span{animation:rise .95s cubic-bezier(.2,.7,.2,1) both}
  .hero-title .line:nth-child(2)>span{animation-delay:.1s}
  .hero-title .line:nth-child(3)>span{animation-delay:.2s}
  .flow .hero-photo{animation:photoIn 1.2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{transform:translateY(105%)}to{transform:none}}
  @keyframes photoIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
  [role="tabpanel"]:not([hidden]){animation:panelIn .5s cubic-bezier(.2,.7,.2,1)}
  @keyframes panelIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
}

/* Marquee moves with scroll */
.marquee{overflow:hidden;background:var(--ink);color:var(--paper);padding:16px 0}
.marquee-track{display:flex;gap:56px;width:max-content;white-space:nowrap;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(30px,4.2vw,62px);text-transform:uppercase;letter-spacing:-.01em;transform:translateX(calc(var(--p,0) * -38%))}
.marquee-track span:nth-child(even){color:var(--blush)}

/* Directional, staggered reveals */
.motion-ready .reveal{transition-delay:calc(var(--i,0) * 90ms)}
.motion-ready .reveal[data-reveal="left"]{transform:translateX(-46px)}
.motion-ready .reveal[data-reveal="right"]{transform:translateX(46px)}
.motion-ready .reveal.visible[data-reveal]{transform:none}
.motion-ready .connection-image.reveal{opacity:1;transform:none}
.motion-ready .connection-image.reveal img{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.motion-ready .connection-image.reveal.visible img{clip-path:inset(0)}
.flow .connection-image{overflow:hidden}
.flow .connection-image img{transform:scale(calc(1.14 - var(--p,0) * .14))}

/* Shared editorial grid for the new sections */
.myths,.ceci,.session,.fit,.faq{display:grid;grid-template-columns:1fr 1.12fr;gap:100px;border-top:1px solid var(--line)}
.myths>*,.ceci>*,.session>*,.fit>*,.faq>*{min-width:0}
.myths-heading>p:last-child,.fit-heading>p:last-child{font-size:14px;color:var(--muted);max-width:360px;margin-top:26px}

/* What this is not: each myth gets struck through as it appears */
.myth-list{list-style:none;margin:0;padding:0}
.myth{border-top:1px solid var(--line);padding:20px 0 22px}
.myth:last-child{border-bottom:1px solid var(--line)}
.myth s{position:relative;display:inline-block;text-decoration:none;font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;color:var(--muted)}
.myth s::after{content:'';position:absolute;left:-2px;right:-2px;top:54%;height:2px;background:var(--accent);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1) calc(var(--i,0) * 90ms + .35s)}
.motion-ready .myth:not(.visible) s::after{transform:scaleX(0)}
.myth>span{display:block;margin-top:8px;font-size:15px;line-height:1.5}
.myth>span::before{content:'↗';color:var(--accent);margin-right:10px}

/* Who is Ceci: a blueprint */
.ceci{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px}
.ceci h2 span{display:block;color:var(--accent)}
.cota{position:relative;max-width:240px;height:28px;margin-top:36px;border-inline:2px solid var(--accent);transform-origin:left;transition:transform 1s cubic-bezier(.7,0,.2,1) .3s}
.cota::before{content:'';position:absolute;inset:50% 0 auto;height:1px;background:var(--accent)}
.cota span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);padding:0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--accent)}
.motion-ready .ceci-heading:not(.visible) .cota{transform:scaleX(.15)}
.cota-caption{font-size:12px;color:var(--muted);margin-top:10px}
.ceci-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:560px}
.plans{margin:32px 0}
.plan{border-top:1px solid var(--line)}
.plan:last-child{border-bottom:1px solid var(--line)}
.plan summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;font-size:26px;letter-spacing:-.03em}
.plan summary::-webkit-details-marker{display:none}
.plan summary small{display:block;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:8px}
.plan-toggle,.faq .access-toggle{font-size:28px;transition:transform .25s;color:var(--accent)}
.plan[open] .plan-toggle,.faq details[open] .access-toggle{transform:rotate(45deg)}
.plan p{padding-bottom:24px;font-size:14px;color:var(--muted);max-width:470px}
.ceci-gift{font-size:15px;max-width:520px;padding-left:20px;border-left:2px solid var(--accent)}

/* A session: four steps joined by a line that fills while scrolling */
.session{grid-template-columns:1fr 1.6fr}
.session-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.session-steps::before,.session-steps::after{content:'';position:absolute;left:22px;right:22px;top:21px;height:2px;background:var(--line)}
.session-steps::after{background:var(--accent);transform-origin:left;transform:scaleX(min(1,max(0,calc((var(--p,1) - .25) * 2.6))))}
.session-steps li{position:relative;z-index:1}
.step-arrow{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--accent);border-radius:50%;background:var(--paper);color:var(--accent);font-size:20px;margin-bottom:20px;transition:background-color .4s,color .4s}
.session-steps li.visible .step-arrow,.session-steps li:not(.reveal) .step-arrow{background:var(--accent);color:var(--paper)}
.session-steps h3{font-size:22px;margin-bottom:8px}
.session-steps p{font-size:14px;color:var(--muted)}

/* Who it is for */
.fit-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.fit-col{padding:28px;border:1px solid var(--line)}
.fit-yes{background:var(--surface);border-color:var(--surface)}
.fit-col h3{font-size:20px;margin-bottom:18px;display:flex;gap:12px;align-items:center}
.fit-col h3 span{color:var(--accent);font-size:24px}
.fit-col ul{list-style:none;margin:0;padding:0}
.fit-col li{border-top:1px solid var(--line);padding:12px 0;font-size:14px;line-height:1.5}
.fit-no li{color:var(--muted)}

/* FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;font-size:20px;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq details p{padding-bottom:22px;font-size:14px;color:var(--muted);max-width:520px}

/* Closing: the words make space as you arrive */
.flow .closing h2{letter-spacing:calc(-.06em + min(1, var(--p,0) * 2.6) * .09em)}

@media(max-width:1100px){.myths,.ceci,.session,.fit,.faq{gap:55px}.session-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}.session-steps::before,.session-steps::after{display:none}}
@media(max-width:767px){
  .flow.scrolled .header{height:64px}
  .myths,.ceci,.session,.fit,.faq{grid-template-columns:1fr;gap:34px}
  .myths-heading h2 br,.fit-heading h2 br,.faq-heading h2 br,.session-heading h2 br{display:none}
  .fit-columns{grid-template-columns:1fr}
  .session-steps{grid-template-columns:1fr;row-gap:26px}
  .flow .closing h2{font-size:clamp(66px,18vw,120px)}
  .flow .hero-copy::after{display:none}
  .plan summary{font-size:23px}
  .faq summary{font-size:18px}
}

/* The conversation photo keeps both faces in frame at every crop. */
.flow .connection-image img{object-position:50% 22%}