/* Cocoon V211 — standard-page visual polish
   Scope: all non-homepage / standard pages. Story/homepage intentionally untouched. */

:root{
  --v211-ink:#281532;
  --v211-muted:#64566b;
  --v211-line:rgba(53,25,69,.11);
  --v211-purple:#934cf4;
  --v211-lilac:#d7b9ff;
  --v211-deep:#1b0828;
  --v211-shadow:0 20px 55px rgba(42,19,57,.08);
}

/* --------------------------------------------------------------------------
   1. HERO RHYTHM — standard pages should introduce, not consume a viewport
   -------------------------------------------------------------------------- */
@media (min-width:981px){
  body.standard-page :is(
    .ac-hero,.call-hero,.availability-hero,.ct-hero,.faq-hero,.features-hero,
    .fo-hero,.gc-hero,.handle-hero,.holding-hero,.how-hero,.incoming-hero,
    .learn-hero,.mc208-hero,.par-hero,.permission-hero,.pp-hero,.pricing-hero,
    .relationship-hero,.sc-hero,.usecases-hero,.wir84-hero
  ){
    min-height:0!important;
    padding-top:118px!important;
    padding-bottom:76px!important;
  }

  body.standard-page :is(
    .ac-hero h1,.call-hero h1,.availability-hero h1,.ct-hero h1,.faq-hero h1,
    .features-hero h1,.fo-hero h1,.gc-hero h1,.handle-hero h1,.holding-hero h1,
    .how-hero h1,.incoming-hero h1,.learn-hero h1,.mc208-hero h1,.par-hero h1,
    .permission-hero h1,.pp-hero h1,.pricing-hero h1,.relationship-hero h1,
    .sc-hero h1,.usecases-hero h1,.wir84-hero h1
  ){
    font-size:clamp(48px,4.65vw,76px)!important;
    line-height:.99!important;
    letter-spacing:-.047em!important;
  }

  body.standard-page :is(
    .ac-hero__grid,.call-hero__grid,.availability-hero__grid,.ct-hero__grid,
    .faq-hero__grid,.features-hero-grid,.gc-hero__grid,.handle-hero__grid,
    .how-hero__grid,.incoming-hero-grid,.learn-hero__grid,.mc208-hero-grid,
    .par-hero__grid,.permission-hero-grid,.pricing-hero__grid,
    .relationship-hero-grid,.sc-hero__grid,.usecases-hero__grid,.wir84-hero__grid
  ){
    gap:clamp(38px,4vw,62px)!important;
  }

  body.standard-page :is(
    .permission-visual,.attention-visual,.relationship-visual,.incoming-visual,
    .features-visual,.ac-image--hero,.call-media--hero,.par-image-frame--hero,
    .sc-image--hero,.wir84-photo--hero,.handle-image--hero,.pricing-hero-image
  ){
    align-self:center!important;
  }

  body.standard-page :is(
    .permission-visual img,.attention-visual img,.relationship-visual img,.incoming-visual img,
    .features-hero .features-visual img,.ac-image--hero img,.call-media--hero img,
    .par-image-frame--hero img,.sc-image--hero img,.wir84-photo--hero img,
    .handle-image--hero img,.pricing-hero-image img
  ){
    max-height:500px!important;
    object-fit:cover!important;
  }
}

/* Keep supporting copy comfortably readable, but stop it feeling oversized. */
body.standard-page :is(
  .ac-lead,.call-lead,.availability-lead,.ct-lead,.faq-hero__intro,.features-lead,
  .gc-lead,.handle-lead,.holding-lead,.how-lead,.incoming-lead,.learn-lead,
  .mc208-lead,.par-lead,.permission-lead,.pricing-lead,.relationship-lead,
  .sc-lead,.usecases-lead,.wir84-hero__definition
){
  max-width:680px!important;
  line-height:1.55!important;
}

/* Feature-page image captions should sit inside the image, not hang into the next section. */
body.standard-page :is(.permission-note,.attention-note,.relationship-note,.incoming-note){
  left:20px!important;
  right:20px!important;
  bottom:18px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(22,7,33,.91),rgba(46,16,63,.86))!important;
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:0 14px 34px rgba(15,4,24,.24)!important;
}
body.standard-page :is(.permission-note,.attention-note,.relationship-note,.incoming-note) strong{
  font-size:clamp(23px,2vw,31px)!important;
}
body.standard-page :is(.permission-note,.attention-note,.relationship-note,.incoming-note) span{
  color:rgba(255,255,255,.88)!important;
  font-size:14px!important;
}
body.standard-page .features-hero .features-visual figcaption{
  left:20px!important;right:20px!important;bottom:18px!important;
  padding:16px 18px!important;border-radius:18px!important;
  background:linear-gradient(135deg,rgba(22,7,33,.91),rgba(46,16,63,.86))!important;
}

/* --------------------------------------------------------------------------
   2. READABILITY — never sacrifice contrast for atmosphere
   -------------------------------------------------------------------------- */
body.standard-page :is(
  .permission-section--deep,.attention-section--deep,.relationship-section--deep,
  .incoming-section--deep,.features-section--dark,.handle-section--dark,
  .learn-section--dark,.sc-section--dark,.ct-section--dark,.fo-section--dark,
  .pricing-section--dark,.usecases-section--dark
) :is(p,li,small,span:not([class*="pill"]):not([class*="route"])){
  color:rgba(255,255,255,.84)!important;
}
body.standard-page :is(
  .permission-section--deep,.attention-section--deep,.relationship-section--deep,
  .incoming-section--deep,.features-section--dark,.handle-section--dark,
  .learn-section--dark,.sc-section--dark,.ct-section--dark,.fo-section--dark,
  .pricing-section--dark,.usecases-section--dark
) :is(h2,h3,h4,strong){
  color:#fff!important;
}

/* The dark 'Pause' permission card was specifically failing contrast. */
body.standard-page .permission-card--pause{
  background:radial-gradient(circle at 82% 0,rgba(166,91,247,.20),transparent 44%),linear-gradient(145deg,#2a103a,#351447)!important;
  border-color:rgba(222,193,255,.22)!important;
  box-shadow:0 20px 48px rgba(40,15,56,.16)!important;
}
body.standard-page .permission-card--pause h3{color:#fff!important;}
body.standard-page .permission-card--pause p{color:rgba(255,255,255,.82)!important;}

body.standard-page .availability-card--dark :is(h3,strong){color:#fff!important;}
body.standard-page .availability-card--dark p{color:rgba(255,255,255,.82)!important;}
body.standard-page .usecases-story--featured :is(h3,strong){color:#fff!important;}
body.standard-page .usecases-story--featured :is(p,li){color:rgba(255,255,255,.84)!important;}

/* Light surfaces: secondary copy should remain visibly secondary, never washed out. */
body.standard-page :is(
  .permission-card,.permission-control,.attention-card,.relationship-card,
  .incoming-card,.features-card,.features-mini,.feature-card,.holding-card
) p{
  color:var(--v211-muted)!important;
}

/* --------------------------------------------------------------------------
   3. ELEGANT PILLS / STATUS MARKERS
   -------------------------------------------------------------------------- */
body.standard-page :is(.permission-pill,.attention-pill,.relationship-pill,.permission-route){
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:29px!important;
  margin-bottom:16px!important;
  padding:7px 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(143,73,242,.18)!important;
  background:linear-gradient(180deg,rgba(248,243,255,.96),rgba(237,225,255,.82))!important;
  color:#7d3be0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(107,55,150,.06)!important;
  font-size:10.5px!important;
  line-height:1.12!important;
  font-weight:800!important;
  letter-spacing:.105em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
}
body.standard-page :is(.permission-pill,.attention-pill,.relationship-pill,.permission-route)::before{
  content:"";
  flex:0 0 auto;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,#c797ff,#8d45ef);
  box-shadow:0 0 0 4px rgba(153,80,242,.08),0 0 10px rgba(153,80,242,.25);
}
body.standard-page .permission-card--pause .permission-pill{
  color:#eadbff!important;
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(224,198,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.standard-page .permission-card--pause .permission-pill::before{
  background:#d8b6ff;box-shadow:0 0 0 4px rgba(216,182,255,.08),0 0 10px rgba(216,182,255,.24);
}
body.standard-page .permission-route{
  margin-top:20px!important;
  margin-bottom:0!important;
  color:#7234cc!important;
  background:rgba(241,231,255,.72)!important;
  border-color:rgba(143,73,242,.14)!important;
}

body.standard-page .learn-tag-grid span,
body.standard-page .learn-context-grid span,
body.standard-page .learn-manage-grid span{
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  padding:9px 13px!important;border-radius:999px!important;
  border:1px solid rgba(91,55,112,.11)!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:inset 0 1px 0 #fff,0 5px 16px rgba(42,19,57,.035)!important;
  color:#4d365a!important;
}
body.standard-page .learn-tag-grid span::before,
body.standard-page .learn-context-grid span::before,
body.standard-page .learn-manage-grid span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#a65af5;box-shadow:0 0 8px rgba(166,90,245,.35);
}

/* --------------------------------------------------------------------------
   4. CARD FINISH / SECTION RHYTHM
   -------------------------------------------------------------------------- */
body.standard-page :is(
  .permission-card,.permission-control,.attention-card,.relationship-card,
  .incoming-card,.feature-card,.holding-card
){
  border-color:var(--v211-line)!important;
  box-shadow:var(--v211-shadow)!important;
}
body.standard-page :is(.permission-card,.attention-card,.relationship-card,.incoming-card){
  position:relative!important;
  overflow:hidden!important;
  border-radius:24px!important;
}
body.standard-page :is(.permission-card,.attention-card,.relationship-card,.incoming-card)::after{
  content:"";
  position:absolute;
  left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(157,83,242,.32),transparent);
  pointer-events:none;
}

/* Permission examples read better as a spacious 3 + 2 composition on wide screens. */
@media (min-width:1101px){
  body.standard-page .permission-examples{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:18px!important;
  }
  body.standard-page .permission-examples>.permission-card{grid-column:span 2;min-height:285px!important;}
  body.standard-page .permission-examples>.permission-card:nth-child(4){grid-column:2 / span 2;}
  body.standard-page .permission-examples>.permission-card:nth-child(5){grid-column:4 / span 2;}
}

/* Keep card titles controlled so serif type does not dominate the content. */
body.standard-page .permission-examples .permission-card h3{
  font-size:clamp(25px,1.75vw,31px)!important;
  line-height:1.04!important;
}

/* Holding / coming-soon surfaces get a more intentional status marker. */
body.standard-page .holding-status{
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  border-color:rgba(216,188,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.standard-page .holding-status>span{
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  width:max-content!important;margin:0 0 10px!important;padding:7px 11px!important;
  border:1px solid rgba(216,188,255,.18)!important;border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;color:#dec8ff!important;
  font-size:10.5px!important;letter-spacing:.11em!important;
}
body.standard-page .holding-status>span::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#c797ff;box-shadow:0 0 9px rgba(199,151,255,.45);
}
body.standard-page .holding-status p{color:rgba(255,255,255,.78)!important;}

/* --------------------------------------------------------------------------
   5. MOBILE / TABLET — same polish without enlarging the page again
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  body.standard-page :is(
    .ac-hero,.call-hero,.availability-hero,.ct-hero,.faq-hero,.features-hero,
    .fo-hero,.gc-hero,.handle-hero,.holding-hero,.how-hero,.incoming-hero,
    .learn-hero,.mc208-hero,.par-hero,.permission-hero,.pp-hero,.pricing-hero,
    .relationship-hero,.sc-hero,.usecases-hero,.wir84-hero
  ){
    min-height:0!important;padding-top:104px!important;padding-bottom:62px!important;
  }
  body.standard-page :is(.permission-note,.attention-note,.relationship-note,.incoming-note){
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:12px!important;
  }
  body.standard-page .features-hero .features-visual figcaption{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:12px!important;
  }
}
@media (max-width:640px){
  body.standard-page :is(
    .ac-hero h1,.call-hero h1,.availability-hero h1,.ct-hero h1,.faq-hero h1,
    .features-hero h1,.fo-hero h1,.gc-hero h1,.handle-hero h1,.holding-hero h1,
    .how-hero h1,.incoming-hero h1,.learn-hero h1,.mc208-hero h1,.par-hero h1,
    .permission-hero h1,.pp-hero h1,.pricing-hero h1,.relationship-hero h1,
    .sc-hero h1,.usecases-hero h1,.wir84-hero h1
  ){
    font-size:clamp(42px,11.5vw,50px)!important;
    line-height:.99!important;
  }
  body.standard-page :is(.permission-pill,.attention-pill,.relationship-pill,.permission-route){
    font-size:10px!important;padding:7px 11px!important;
  }
  body.standard-page .permission-examples>.permission-card{min-height:0!important;}
}