/* Verbena: mobile composition and progressive motion. */
:root{--vm-ease:cubic-bezier(.22,1,.36,1)}
body[data-motion] .hero-copy{animation:none}
.vm-lined-title .vm-line{display:block;overflow:clip;padding:.06em .08em .15em;margin:-.06em -.08em -.15em}
.vm-line-text{display:block}
body[data-motion=celebraciones] .hero-celebraciones{row-gap:0}
body[data-motion=celebraciones] .hero-celebraciones>.hero-copy{align-self:end}
body[data-motion=celebraciones] .celebration-mosaic{grid-column:2;grid-row:1/span 2}
body[data-motion=celebraciones] .vm-celebration-actions{grid-column:1;grid-row:2;align-self:start}
[data-vm-pending]{opacity:0}
body[data-motion] :is(.btn,.button){transition:background-color .25s,color .25s,border-color .25s,box-shadow .3s,transform .3s var(--vm-ease)}
body[data-motion] :is(.demo-entry-links>a,.home-demo-card,.price-card,.plan){transition:box-shadow .4s var(--vm-ease),border-color .35s}
@media(hover:hover) and (pointer:fine){
  body[data-motion] :is(.demo-entry-links>a,.home-demo-card,.price-card,.plan):hover{box-shadow:0 12px 30px -17px #283b2840}
  body[data-motion] :is(.btn,.button):hover{transform:translateY(-2px)}
}
@media(max-width:600px){
}
@media(max-width:720px){
  /* The pictures join the title before supporting copy; links keep DOM order. */
  body[data-motion=celebraciones] .hero-celebraciones{gap:0;padding-block:27px 35px}
  body[data-motion=celebraciones] .hero-celebraciones>.hero-copy{display:contents}
  body[data-motion=celebraciones] .hero-copy>.eyebrow{order:1;font-size:.75rem;line-height:1.6;max-width:310px;margin:0 0 19px}
  body[data-motion=celebraciones] .hero-copy>h1{order:2;font-size:clamp(3.1rem,14.1vw,4.7rem);line-height:.99;margin:0 0 22px}
  body[data-motion=celebraciones] .celebration-mosaic{order:3;grid-column:auto;grid-row:auto;gap:14px;margin:0 0 22px;scroll-margin-top:88px}
  body[data-motion=celebraciones] .mosaic-column{gap:13px}
  body[data-motion=celebraciones] .mosaic-column:first-child{padding-top:25px}
  body[data-motion=celebraciones] .mosaic-column:last-child{padding-bottom:0}
  body[data-motion=celebraciones] .mosaic-kids img{height:clamp(186px,57vw,245px)}
  body[data-motion=celebraciones] .mosaic-birthday img{height:clamp(132px,38vw,165px)}
  body[data-motion=celebraciones] .mosaic-xv img{height:clamp(165px,49vw,215px)}
  body[data-motion=celebraciones] .mosaic-family img{height:clamp(182px,54vw,235px)}
  body[data-motion=celebraciones] .mosaic-link figcaption{font-size:.875rem;line-height:1.45;gap:4px;align-items:flex-start;padding:10px 0}
  body[data-motion=celebraciones] .mosaic-arrow{padding-top:2px}
  body[data-motion=celebraciones] .hero-copy>p{order:4;font-size:1rem;line-height:1.75;max-width:36ch;margin:0 0 12px}
  body[data-motion=celebraciones] .hero-copy>.hero-promise{order:6;border-top:1px solid var(--line);padding-top:20px;font-size:.875rem;margin:22px 0 0}
  body[data-motion=celebraciones] .vm-celebration-actions{order:5;grid-column:auto;grid-row:auto;display:flex;align-items:flex-start;gap:18px;margin:12px 0 0}
  body[data-motion=celebraciones] .vm-celebration-actions>.button{width:100%;justify-content:space-between;min-height:54px;padding-inline:20px}
  body[data-motion=celebraciones] .home-demo-links{grid-template-columns:minmax(0,1fr);gap:24px}
  body[data-motion=celebraciones] .home-demo-card{grid-template-columns:minmax(0,1fr);min-height:0;border-radius:18px;overflow:hidden}
  body[data-motion=celebraciones] .home-demo-card img{height:240px;width:100%;object-position:50% 38%}
  body[data-motion=celebraciones] .home-demo-card>div{min-width:0;padding:25px}
  body[data-motion=celebraciones] .home-demo-card h3{font-size:clamp(2rem,8.2vw,2.8rem);overflow-wrap:anywhere}
  body[data-motion=celebraciones] .xv-art{padding:0 8px;width:100%}
  body[data-motion=celebraciones] .xv-art>img{height:auto;aspect-ratio:4/5;object-fit:cover}
  body[data-motion=celebraciones] .xv-grid{gap:32px}
  body[data-motion=celebraciones] .xv-copy h2{font-size:clamp(3.1rem,13.5vw,4rem)}
  body[data-motion=celebraciones] .plan{padding:27px 23px;border-radius:14px}
  body[data-motion=celebraciones] .plan.featured{border-top-left-radius:0;border-top-right-radius:0}
  body[data-motion=celebraciones] .recommendation{border-radius:10px 10px 0 0;font-size:.6875rem}
  body[data-motion] :is(.btn,.button,.menu-button){min-height:48px}
  body[data-motion] :is(.btn,.button):active{transform:scale(.985)}
}
@media(max-width:700px){
  body[data-motion=bodas] .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  body[data-motion=bodas] .hero-copy{display:contents}
  body[data-motion=bodas] .hero-copy>.eyebrow{order:1;font-size:.75rem;line-height:1.55;margin-bottom:17px}
  body[data-motion=bodas] .hero-copy>h1{order:2;font-size:clamp(2.65rem,12.2vw,4.4rem);line-height:1.01;margin-bottom:22px}
  body[data-motion=bodas] .hero-copy>h1>em{margin-top:10px}
  body[data-motion=bodas] .studio-preview{order:3;min-width:0;margin:0 0 23px}
  body[data-motion=bodas] .studio-photo{overflow:hidden;border-radius:12px 110px 12px 12px}
  body[data-motion=bodas] .studio-photo img{height:clamp(285px,86vw,390px);object-position:50% 43%}
  body[data-motion=bodas] .studio-photo figcaption{font-size:1.125rem;padding:12px 17px;line-height:1.35}
  body[data-motion=bodas] .hero-description{order:4;font-size:1rem;line-height:1.7;margin:0 0 18px}
  body[data-motion=bodas] .hero-actions{order:5;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;margin:0 0 15px}
  body[data-motion=bodas] .hero-actions .btn{width:100%;min-width:0;padding:13px 10px;font-size:.875rem;min-height:52px;gap:8px}
  body[data-motion=bodas] .hero-small{order:6;margin:0;font-size:.875rem;line-height:1.6}
  body[data-motion=bodas] .demo-entry-links>a{border-radius:12px}
  body[data-motion=bodas] .price-card{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  [data-vm-pending]{opacity:1!important}
  body[data-motion] :is(.btn,.button,.demo-entry-links>a,.home-demo-card,.price-card,.plan){transition:none!important}
  body[data-motion] :is(.btn,.button):is(:hover,:active){transform:none}
}
/* Event landings, wedding guides and interactive demonstrations. */
body[data-motion] main :is(.specialty-hero,.specialty-feature,.specialty-panel-grid,.specialty-registry,.grid,.split)>*{min-width:0}
body[data-motion] :is(.specialty-photo,.specialty-gift-card,.landing-gift-photo){overflow:hidden}
body[data-motion=specialty] .specialty-gift-card{border-radius:18px}
body[data-motion=article] .card{border-radius:14px}
body[data-motion=demo-celebraciones] .table-scroll{position:relative}
body[data-motion] .vm-lined-title{overflow-wrap:normal}

/* Demo controls stay fixed. Only the invitation artwork has an entrance. */
@keyframes verbena-photo-in{from{opacity:.4;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes verbena-name-in{from{opacity:.2;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  body[data-motion^=demo-] :is(.cover-photo img,.vb-invite-photo img){animation:verbena-photo-in 1.1s cubic-bezier(.22,1,.36,1) both}
  body[data-motion^=demo-] :is(.cover-name,.vb-invite-editorial>h3){animation:verbena-name-in .95s .08s cubic-bezier(.22,1,.36,1) both}
}
@media(max-width:720px){
  body[data-motion=specialty] .specialty-hero{gap:0;padding-block:25px 40px}
  body[data-motion=specialty] .specialty-hero>.vm-hero-copy{display:contents}
  body[data-motion=specialty] .vm-hero-copy>.breadcrumb{order:1;font-size:.875rem;margin:0 0 22px}
  body[data-motion=specialty] .vm-hero-copy>.eyebrow{order:2;font-size:.75rem;line-height:1.6;margin:0 0 17px}
  body[data-motion=specialty] .vm-hero-copy>h1{order:3;font-size:clamp(3.05rem,12.5vw,4.6rem);line-height:1.02;margin:0 0 24px;overflow-wrap:break-word}
  body[data-motion=specialty] .specialty-hero>.specialty-photo{order:4;margin:0 0 25px;padding:8px}
  body[data-motion=specialty] .specialty-hero .specialty-photo img{height:clamp(310px,105vw,480px);width:100%;object-fit:cover;object-position:50% 34%}
  body[data-motion=specialty] .landing-hero>.specialty-photo{padding:0}
  body[data-motion=specialty] .vm-hero-copy>p{order:5;margin:0 0 20px;font-size:1rem;line-height:1.75;max-width:38ch}
  body[data-motion=specialty] .vm-hero-copy>.actions{order:6;gap:19px;margin:0 0 18px}
  body[data-motion=specialty] .vm-hero-copy>.actions>.button{width:100%;justify-content:space-between;font-size:.875rem;min-height:54px;padding-inline:19px}
  body[data-motion=specialty] .vm-hero-copy>.specialty-start{order:7;font-size:.875rem;margin:0}
  body[data-motion=specialty] :is(.specialty-copy h2,.specialty-panel-grid h2,.specialty-close h2,.specialty-concierge h2){font-size:clamp(2.5rem,11.5vw,3.5rem)!important;line-height:1.05;overflow-wrap:break-word}
  body[data-motion=specialty] .specialty-intro h2{font-size:clamp(2.35rem,10vw,3rem)}
  body[data-motion=specialty] .plan{padding:27px 23px;border-radius:14px;min-width:0}
  body[data-motion=specialty] .plan.featured{border-top-left-radius:0;border-top-right-radius:0}
  body[data-motion=specialty] .recommendation{border-radius:10px 10px 0 0;font-size:.75rem}
  body[data-motion=specialty] .specialty-dashboard{padding:25px 18px;border-radius:16px}
  body[data-motion=specialty] .dashboard-stats{gap:14px}
  body[data-motion=specialty] .dashboard-stats strong{font-size:clamp(2.1rem,8.7vw,3rem)}
  body[data-motion=specialty] .dashboard-stats span{font-size:.875rem;line-height:1.5}
  body[data-motion=specialty] .sample-row{grid-template-columns:minmax(0,1fr);gap:5px}
  body[data-motion=specialty] .sample-row>small{grid-column:1;grid-row:3;justify-self:start;margin-top:4px}
  body[data-motion=specialty] .sample-row>span{font-size:.875rem}
  body[data-motion=specialty] .specialty-invite{width:100%;max-width:370px}
  body[data-motion=specialty] .specialty-invite .cover-name h3{font-size:clamp(3.1rem,15vw,4.9rem)!important}
  body[data-motion=specialty] .specialty-invite .cover-long-name .cover-name h3{font-size:clamp(2.35rem,11vw,3.1rem)!important}
  body[data-motion=specialty] .specialty-gift-card>div{padding:24px}
  body[data-motion=specialty] .specialty-gift-card h3{font-size:clamp(2rem,9vw,2.8rem)}
  body[data-motion=specialty] .landing-contact-form{border-radius:16px}
  body[data-motion=specialty] .landing-contact-form .form-row{grid-template-columns:minmax(0,1fr);gap:20px}
  body[data-motion=specialty] .landing-contact-grid h2{font-size:clamp(2.7rem,11vw,3.6rem)}
  body[data-motion=specialty] .landing-contact-form input,body[data-motion=specialty] .landing-contact-form select{min-width:0;max-width:100%;min-height:48px;font-size:1rem}
  body[data-motion] :is(.button,.btn){max-width:100%;white-space:normal}
  body[data-motion=article] .hero{padding-block:40px 44px}
  body[data-motion=article] .hero h1{font-size:clamp(2.65rem,11vw,4rem);overflow-wrap:break-word}
  body[data-motion=article] .hero .btn{display:block;text-align:center;margin:12px 0 0}
  body[data-motion=article] .card{padding:25px}
  body[data-motion=article] :is(.hero,.section,.cta) h2{overflow-wrap:break-word}
  body[data-motion=article] .nav-links a{display:inline-flex;align-items:center;min-height:44px!important}
  body[data-motion=demo-celebraciones] .demo-header .text-link{font-size:.875rem}
  body[data-motion=demo-celebraciones] .event-picker select{font-size:1rem;min-height:48px}
  body[data-motion=demo-celebraciones] .demo-tabs button{font-size:.875rem;min-height:52px;padding:10px 8px}
  body[data-motion=demo-celebraciones] :is(.panel-filters input,.panel-filters select,.demo-form input,.demo-form select,.demo-form textarea){font-size:1rem;min-width:0;min-height:48px}
  body[data-motion=demo-celebraciones] :is(.panel-filters,.demo-form) label{min-width:0}
  body[data-motion=demo-celebraciones] .pagination button{min-width:44px;min-height:44px}
  body[data-motion=demo-celebraciones] .fund-total{flex-wrap:wrap;gap:5px 12px}
  body[data-motion=demo-celebraciones] .gift-card-copy h2{font-size:clamp(2rem,9.6vw,2.5rem);overflow-wrap:break-word}
  body[data-motion=demo-celebraciones] .workspace-heading h1{font-size:clamp(2.5rem,10vw,3.3rem);overflow-wrap:break-word}
  body[data-motion=demo-celebraciones] .real-gift-card{border-radius:18px;overflow:hidden}
  body[data-motion=demo-celebraciones] .demo-invite-letter>h2{font-size:clamp(2.1rem,9.5vw,2.85rem);overflow-wrap:break-word}
  body[data-motion=demo-celebraciones] .cover-kids .cover-name h1{font-size:clamp(3.8rem,16vw,5.1rem)}
  body[data-motion=demo-celebraciones] .demo-form .form-row{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  body[data-motion]{scroll-behavior:auto}
  body[data-motion] *,body[data-motion] *::before,body[data-motion] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{body[data-motion] *{animation:none!important}[data-vm-pending]{opacity:1!important}}