/* Shared visual rhythm for the single-page story. Load after section styles. */
:root{--pc-paper:#f8f7fb;--pc-ink:#100a21;--pc-deep:#0c071a}

/* Hero -> manifesto: the dark photograph dissolves over the collage edge. */
.manifesto.manifesto-reference{position:relative;background-color:var(--pc-paper)}
.manifesto.manifesto-reference::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 0 auto;
  height:clamp(70px,8vw,130px);
  background:linear-gradient(180deg,var(--pc-deep) 0%,#29113f99 32%,#a45cf638 66%,#a45cf600 100%);
  pointer-events:none;
}
.manifesto.manifesto-reference .manifesto-composition,
.manifesto.manifesto-reference .event-gallery{position:relative}
.manifesto.manifesto-reference .event-gallery{
  border-top:0;
  background:radial-gradient(ellipse 70% 130px at 48% 0%,#d8c8ec45,transparent 75%);
}

/* Gallery -> pains: the white headline begins after the dark field is established. */
.pains.section.dark{
  position:relative;
  padding-top:clamp(170px,14vw,225px);
  background:
    radial-gradient(ellipse 55% 48% at 90% 85%,#3c266a66,transparent 75%),
    linear-gradient(180deg,var(--pc-paper) 0%,#bba9d0 48px,#4c356b 104px,var(--pc-ink) 158px,var(--pc-ink) 100%);
}

/* Pains -> solution -> steps: one paper tone with a gentle dark-to-light entrance. */
.solution-tabs{
  padding-top:180px;
  background:
    radial-gradient(ellipse 55% 55% at 88% 68%,#ded3ff88,transparent 78%),
    linear-gradient(180deg,var(--pc-ink) 0%,#a391bd 54px,#e8dff1 103px,var(--pc-paper) 156px,var(--pc-paper) 100%);
}
.how.section.light{
  background:
    radial-gradient(ellipse 70% 35% at 94% 35%,#ebe2f564,transparent 76%),
    var(--pc-paper);
  padding-top:clamp(75px,7vw,115px);
}

/* Steps -> social proof: fade the new photo-led dark section in at its top edge. */
.social.social-reference{position:relative;background-color:var(--pc-ink)}
.social.social-reference{padding-top:170px}
.social.social-reference::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 0 auto;
  height:clamp(85px,10vw,155px);
  background:linear-gradient(180deg,var(--pc-paper) 0%,#d7bcf5a6 38%,#734ea833 74%,#734ea800 100%);
  pointer-events:none;
}

/* The lower light strip of social proof flows into ecosystem and FAQ. */
.ecosystem.ecosystem-reference{
  background:
    radial-gradient(ellipse 56% 420px at 96% 65%,#ebe5f284,transparent 80%),
    var(--pc-paper);
}
.faq.section.light{
  background:
    radial-gradient(ellipse 60% 300px at 5% 8%,#ede5f456,transparent 78%),
    var(--pc-paper);
}

/* FAQ -> contact: leave the top of the dark section as breathing room. */
.contact.section.dark{
  position:relative;
  padding-top:clamp(180px,15vw,235px);
  background:
    radial-gradient(ellipse 63% 55% at 0% 100%,#36216090,transparent 70%),
    linear-gradient(180deg,var(--pc-paper) 0%,#afa0c4 54px,#4a336b 112px,var(--pc-ink) 170px,var(--pc-ink) 100%);
}

@media(max-width:700px){
  .manifesto.manifesto-reference::before{height:66px}
  .manifesto.manifesto-reference .manifesto-copy{padding-top:max(88px,12vw)}
  .pains.section.dark{padding-top:150px;background:
    radial-gradient(ellipse 100% 30% at 100% 84%,#3c266a5c,transparent 82%),
    linear-gradient(180deg,var(--pc-paper) 0%,#9683af 38px,#34224f 85px,var(--pc-ink) 125px,var(--pc-ink) 100%)}
  .solution-tabs{padding-top:110px;background:
    radial-gradient(ellipse 80% 50% at 90% 75%,#ded3ff75,transparent 80%),
    linear-gradient(180deg,var(--pc-ink) 0%,#a997c1 40px,#e7dff0 76px,var(--pc-paper) 112px,var(--pc-paper) 100%)}
  .how.section.light{padding-top:74px}
  .social.social-reference::before{height:88px}
  .social.social-reference{padding-top:115px}
  .contact.section.dark{padding-top:150px;background:
    radial-gradient(ellipse 95% 40% at 0% 100%,#36216090,transparent 70%),
    linear-gradient(180deg,var(--pc-paper) 0%,#a492bc 35px,#4d366d 78px,var(--pc-ink) 125px,var(--pc-ink) 100%)}
}

@media(prefers-reduced-motion:reduce){
  .manifesto.manifesto-reference::before,
  .social.social-reference::before{animation:none!important;transition:none!important}
}