/* Zi Vital — Domain landing conversion refinements V2
 * Additive only: preserves Gutenberg structure and existing layout.
 */

.zv-domain-landing-page .zvdl-hero__pain{
  max-width:660px;
  margin:14px 0 0!important;
  padding-left:14px;
  border-left:2px solid rgba(184,141,51,.42);
  color:#625347!important;
  font-size:13px!important;
  line-height:1.72!important;
}

.zv-domain-landing-page .zvdl-faq-extension{
  margin-top:12px;
}

.zv-domain-landing-page .zvdl-faq-extension__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.zv-domain-landing-page .zvdl-faq-extension .zvdl-faq-card{
  height:100%;
}

/* Hero focal points tuned for the current domain photography. */
.zv-domain-facial .zvdl-hero__image img{object-position:50% 42%}
.zv-domain-corporal .zvdl-hero__image img{object-position:61% 46%}
.zv-domain-capilar .zvdl-hero__image img{object-position:53% 43%}

/* Image-first hero flow on tablet/mobile without changing desktop composition. */
@media(max-width:900px){
  .zv-domain-landing-page .zvdl-hero__inner{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:22px!important;
  }
  .zv-domain-landing-page .zvdl-hero__visual{
    order:1!important;
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important;
  }
  .zv-domain-landing-page .zvdl-hero__copy{
    order:2!important;
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important;
    padding-top:4px!important;
  }
  .zv-domain-landing-page .zvdl-hero__image{
    width:100%;
    aspect-ratio:4/5!important;
  }
  .zv-domain-landing-page .zvdl-hero__note{
    max-width:none!important;
  }
}

@media(max-width:700px){
  .zv-domain-landing-page .zvdl-hero__pain{
    margin-top:12px!important;
    font-size:12.5px!important;
    line-height:1.68!important;
  }
  .zv-domain-landing-page .zvdl-faq-extension__grid{
    grid-template-columns:1fr;
    gap:10px;
  }
}

/* Quiet image-first reveal: image, then copy, then actions. */
@media(prefers-reduced-motion:no-preference){
  .zv-domain-landing-page .zvdl-hero.zv-domain-conversion-ready .zvdl-hero__visual{
    animation:zvDomainHeroVisual .68s cubic-bezier(.2,.7,.2,1) both;
  }
  .zv-domain-landing-page .zvdl-hero.zv-domain-conversion-ready .zvdl-hero__copy>.zvdl-kicker{
    animation:zvDomainHeroCopy .52s ease .22s both;
  }
  .zv-domain-landing-page .zvdl-hero.zv-domain-conversion-ready .zvdl-hero__copy>h1{
    animation:zvDomainHeroCopy .58s ease .30s both;
  }
  .zv-domain-landing-page .zvdl-hero.zv-domain-conversion-ready .zvdl-hero__lead{
    animation:zvDomainHeroCopy .52s ease .38s both;
  }
  .zv-domain-landing-page .zvdl-hero.zv-domain-conversion-ready .zvdl-hero__pain{
    animation:zvDomainHeroCopy .52s ease .44s both;
  }
  .zv-domain-landing-page .zvdl-hero.zv-domain-conversion-ready .zvdl-hero__proof{
    animation:zvDomainHeroCopy .5s ease .50s both;
  }
  .zv-domain-landing-page .zvdl-hero.zv-domain-conversion-ready .wp-block-buttons{
    animation:zvDomainHeroCopy .5s ease .56s both;
  }
}

@keyframes zvDomainHeroVisual{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes zvDomainHeroCopy{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* Approach cards: more breathing room and clearer information hierarchy. */
.zv-domain-landing-page .zvdl-approach-grid{
  align-items:stretch!important;
  row-gap:20px!important;
}

.zv-domain-landing-page .zvdl-approach-grid>.wp-block-column{
  display:flex;
}

/* The card owns the horizontal gutter. This is intentionally structural so it
 * works with both Gutenberg variants: cards with a body wrapper and cards whose
 * editorial blocks are rendered directly inside the card. */
.zv-domain-landing-page .zvdl-approach-card{
  width:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box!important;
  padding-left:28px!important;
  padding-right:28px!important;
}

/* Keep photography full-bleed while the copy below is protected by the card gutter. */
.zv-domain-landing-page .zvdl-approach-card__image{
  width:calc(100% + 56px)!important;
  max-width:none!important;
  height:224px!important;
  margin-left:-28px!important;
  margin-right:-28px!important;
}

/* When Gutenberg includes the body wrapper, avoid double horizontal padding. */
.zv-domain-landing-page .zvdl-approach-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  width:100%;
  min-height:282px;
  box-sizing:border-box!important;
  padding:25px 0 27px!important;
}

.zv-domain-landing-page .zvdl-approach-card__number{
  margin:0 0 13px!important;
  font-size:9.5px!important;
  line-height:1.45!important;
}

.zv-domain-landing-page .zvdl-approach-card h3{
  margin:0!important;
  font-size:34px!important;
  line-height:1.03!important;
  letter-spacing:-.025em!important;
}

.zv-domain-landing-page .zvdl-approach-card__tag{
  margin:9px 0 0!important;
  font-size:9.5px!important;
  line-height:1.55!important;
  letter-spacing:.085em!important;
}

.zv-domain-landing-page .zvdl-approach-card__copy{
  margin:16px 0 0!important;
  max-width:100%;
  font-size:12px!important;
  line-height:1.72!important;
  color:#74665a!important;
}

.zv-domain-landing-page .zvdl-approach-card__tools{
  width:100%;
  box-sizing:border-box!important;
  margin:18px 0 0!important;
  padding:13px 15px!important;
  border-radius:13px!important;
  font-size:10.5px!important;
  line-height:1.65!important;
}

.zv-domain-landing-page .zvdl-approach-card .wp-block-buttons{
  margin-top:auto!important;
  padding-top:19px;
  gap:8px!important;
}

.zv-domain-landing-page .zvdl-approach-card .wp-block-button__link{
  min-height:34px;
  padding:10px 13px!important;
  line-height:1.2!important;
}

/* Direct-child Gutenberg variant: card padding already provides the gutter,
 * so child blocks must not add a second horizontal margin. */
.zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__number,
.zv-domain-landing-page .zvdl-approach-card > h3,
.zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__tag,
.zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__copy,
.zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__tools,
.zv-domain-landing-page .zvdl-approach-card > .wp-block-buttons{
  margin-left:0!important;
  margin-right:0!important;
  width:auto!important;
  max-width:none!important;
  box-sizing:border-box;
}

.zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__number{
  margin-top:24px!important;
  margin-bottom:13px!important;
}

.zv-domain-landing-page .zvdl-approach-card > h3{
  margin-top:0!important;
  margin-bottom:0!important;
}

.zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__tag{
  margin-top:10px!important;
}

.zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__copy{
  margin-top:17px!important;
}

.zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__tools{
  margin-top:18px!important;
}

.zv-domain-landing-page .zvdl-approach-card > .wp-block-buttons{
  margin-top:20px!important;
  margin-bottom:27px!important;
  padding-top:0!important;
}

@media(max-width:1000px){
  .zv-domain-landing-page .zvdl-approach-card{
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card__image{
    width:calc(100% + 48px)!important;
    margin-left:-24px!important;
    margin-right:-24px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card__body{
    min-height:265px;
    padding:23px 0 25px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card h3{
    font-size:32px!important;
  }
}

@media(max-width:700px){
  .zv-domain-landing-page .zvdl-approach-card{
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card__image{
    width:calc(100% + 40px)!important;
    height:230px!important;
    margin-left:-20px!important;
    margin-right:-20px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card__body{
    min-height:0;
    padding:22px 0 24px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card h3{
    font-size:31px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card__copy{
    font-size:12px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card .wp-block-buttons{
    margin-top:18px!important;
    padding-top:0;
  }
  .zv-domain-landing-page .zvdl-approach-card > .zvdl-approach-card__number{
    margin-top:20px!important;
  }
  .zv-domain-landing-page .zvdl-approach-card > .wp-block-buttons{
    margin-bottom:24px!important;
  }
}